mirror of
https://github.com/SirBlobby/Hoya26.git
synced 2026-02-04 03:34:34 -05:00
Database and Reports Update
This commit is contained in:
@@ -1,176 +1,176 @@
|
||||
import type { DrawContext } from '../types';
|
||||
|
||||
export function drawSmoggyBuildings(dc: DrawContext): void {
|
||||
const { ctx, width, height, state } = dc;
|
||||
const parallax = state.mouseX * 0.35;
|
||||
|
||||
const drawBuilding = (x: number, bWidth: number, bHeight: number) => {
|
||||
const baseY = height * 0.8;
|
||||
|
||||
ctx.fillStyle = '#37474F';
|
||||
ctx.fillRect(x + parallax, baseY - bHeight, bWidth, bHeight);
|
||||
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
|
||||
ctx.fillRect(x + parallax, baseY - bHeight * 0.8, bWidth * 0.5, bHeight * 0.3);
|
||||
ctx.fillRect(x + parallax + bWidth * 0.6, baseY - bHeight * 0.5, bWidth * 0.3, bHeight * 0.2);
|
||||
|
||||
const windowCols = Math.floor(bWidth / 18);
|
||||
const windowRows = Math.floor(bHeight / 25);
|
||||
|
||||
for (let row = 0; row < windowRows; row++) {
|
||||
for (let col = 0; col < windowCols; col++) {
|
||||
const isBroken = Math.random() > 0.85;
|
||||
const isLit = Math.random() > 0.5;
|
||||
|
||||
if (!isBroken) {
|
||||
ctx.fillStyle = isLit ? 'rgba(255, 180, 100, 0.5)' : 'rgba(50, 50, 50, 0.8)';
|
||||
ctx.fillRect(
|
||||
x + parallax + col * 18 + 5,
|
||||
baseY - bHeight + row * 25 + 8,
|
||||
10, 12
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
drawBuilding(width * 0.02, 60, height * 0.35);
|
||||
drawBuilding(width * 0.1, 75, height * 0.48);
|
||||
drawBuilding(width * 0.22, 55, height * 0.38);
|
||||
drawBuilding(width * 0.32, 90, height * 0.55);
|
||||
drawBuilding(width * 0.48, 65, height * 0.42);
|
||||
drawBuilding(width * 0.58, 80, height * 0.52);
|
||||
drawBuilding(width * 0.72, 55, height * 0.36);
|
||||
drawBuilding(width * 0.82, 70, height * 0.45);
|
||||
}
|
||||
|
||||
export function drawSmokestacks(dc: DrawContext): void {
|
||||
const { ctx, width, height, state } = dc;
|
||||
const parallax = state.mouseX * 0.4;
|
||||
const time = Date.now() * 0.001;
|
||||
|
||||
const drawSmokestack = (x: number, stackHeight: number) => {
|
||||
const baseY = height * 0.8;
|
||||
|
||||
ctx.fillStyle = '#263238';
|
||||
ctx.fillRect(x + parallax - 12, baseY - stackHeight, 24, stackHeight);
|
||||
|
||||
ctx.fillStyle = '#B71C1C';
|
||||
ctx.fillRect(x + parallax - 12, baseY - stackHeight, 24, 15);
|
||||
|
||||
for (let i = 0; i < 8; i++) {
|
||||
const smokeY = baseY - stackHeight - i * 20 - Math.sin(time + i * 0.5) * 10;
|
||||
const smokeRadius = 15 + i * 12;
|
||||
const offsetX = Math.sin(time * 0.8 + i * 0.3) * 25 * (i / 4);
|
||||
const alpha = 0.6 - i * 0.06;
|
||||
|
||||
ctx.fillStyle = `rgba(60, 60, 60, ${alpha})`;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x + parallax + offsetX, smokeY, smokeRadius, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
};
|
||||
|
||||
drawSmokestack(width * 0.15, height * 0.3);
|
||||
drawSmokestack(width * 0.55, height * 0.35);
|
||||
drawSmokestack(width * 0.85, height * 0.28);
|
||||
}
|
||||
|
||||
export function drawSmog(dc: DrawContext): void {
|
||||
const { ctx, width, height } = dc;
|
||||
const time = Date.now() * 0.0003;
|
||||
|
||||
for (let layer = 0; layer < 3; layer++) {
|
||||
const gradient = ctx.createLinearGradient(0, height * 0.3, 0, height * 0.7);
|
||||
const alpha = 0.15 + layer * 0.08;
|
||||
gradient.addColorStop(0, `rgba(80, 80, 80, 0)`);
|
||||
gradient.addColorStop(0.5, `rgba(100, 90, 80, ${alpha})`);
|
||||
gradient.addColorStop(1, `rgba(80, 80, 80, 0)`);
|
||||
|
||||
ctx.fillStyle = gradient;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-100, height * 0.6);
|
||||
for (let x = -100; x <= width + 100; x += 50) {
|
||||
const y = height * 0.45 + Math.sin((x + time * 100 + layer * 500) * 0.005) * 40;
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
ctx.lineTo(width + 100, height * 0.7);
|
||||
ctx.lineTo(-100, height * 0.7);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
export function drawTrafficJam(dc: DrawContext): void {
|
||||
const { ctx, width, height } = dc;
|
||||
|
||||
ctx.fillStyle = '#2E2E2E';
|
||||
ctx.fillRect(0, height * 0.82, width, height * 0.08);
|
||||
|
||||
ctx.strokeStyle = 'rgba(200, 180, 100, 0.4)';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.setLineDash([20, 30]);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, height * 0.86);
|
||||
ctx.lineTo(width, height * 0.86);
|
||||
ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
|
||||
const drawCar = (x: number, y: number, color: string) => {
|
||||
ctx.fillStyle = color;
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(x, y, 35, 14, 2);
|
||||
ctx.fill();
|
||||
|
||||
ctx.fillStyle = 'rgba(100, 100, 100, 0.5)';
|
||||
ctx.fillRect(x + 8, y - 7, 19, 8);
|
||||
|
||||
ctx.fillStyle = '#1a1a1a';
|
||||
ctx.beginPath();
|
||||
ctx.arc(x + 8, y + 14, 4, 0, Math.PI * 2);
|
||||
ctx.arc(x + 27, y + 14, 4, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
};
|
||||
|
||||
const carColors = ['#616161', '#424242', '#757575', '#546E7A', '#455A64'];
|
||||
for (let i = 0; i < 15; i++) {
|
||||
const lane = i % 2;
|
||||
const x = i * 55 + 20;
|
||||
const y = height * 0.83 + lane * 35;
|
||||
drawCar(x, y, carColors[i % carColors.length]);
|
||||
}
|
||||
|
||||
ctx.fillStyle = 'rgba(255, 0, 0, 0.4)';
|
||||
for (let i = 0; i < 15; i++) {
|
||||
const x = i * 55 + 48;
|
||||
const y = height * 0.835 + (i % 2) * 35 + 7;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 3, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
export function drawDebris(dc: DrawContext): void {
|
||||
const { ctx, width, height } = dc;
|
||||
|
||||
ctx.fillStyle = '#5D4037';
|
||||
|
||||
for (let i = 0; i < 12; i++) {
|
||||
const x = Math.random() * width;
|
||||
const y = height * 0.81 + Math.random() * 8;
|
||||
const size = 3 + Math.random() * 5;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.rect(x, y, size, size * 0.7);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
export function drawPollutedCityScene(dc: DrawContext): void {
|
||||
drawSmog(dc);
|
||||
drawSmoggyBuildings(dc);
|
||||
drawSmokestacks(dc);
|
||||
drawDebris(dc);
|
||||
drawTrafficJam(dc);
|
||||
}
|
||||
import type { DrawContext } from '../types';
|
||||
|
||||
export function drawSmoggyBuildings(dc: DrawContext): void {
|
||||
const { ctx, width, height, state } = dc;
|
||||
const parallax = state.mouseX * 0.35;
|
||||
|
||||
const drawBuilding = (x: number, bWidth: number, bHeight: number) => {
|
||||
const baseY = height * 0.8;
|
||||
|
||||
ctx.fillStyle = '#37474F';
|
||||
ctx.fillRect(x + parallax, baseY - bHeight, bWidth, bHeight);
|
||||
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
|
||||
ctx.fillRect(x + parallax, baseY - bHeight * 0.8, bWidth * 0.5, bHeight * 0.3);
|
||||
ctx.fillRect(x + parallax + bWidth * 0.6, baseY - bHeight * 0.5, bWidth * 0.3, bHeight * 0.2);
|
||||
|
||||
const windowCols = Math.floor(bWidth / 18);
|
||||
const windowRows = Math.floor(bHeight / 25);
|
||||
|
||||
for (let row = 0; row < windowRows; row++) {
|
||||
for (let col = 0; col < windowCols; col++) {
|
||||
const isBroken = Math.random() > 0.85;
|
||||
const isLit = Math.random() > 0.5;
|
||||
|
||||
if (!isBroken) {
|
||||
ctx.fillStyle = isLit ? 'rgba(255, 180, 100, 0.5)' : 'rgba(50, 50, 50, 0.8)';
|
||||
ctx.fillRect(
|
||||
x + parallax + col * 18 + 5,
|
||||
baseY - bHeight + row * 25 + 8,
|
||||
10, 12
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
drawBuilding(width * 0.02, 60, height * 0.35);
|
||||
drawBuilding(width * 0.1, 75, height * 0.48);
|
||||
drawBuilding(width * 0.22, 55, height * 0.38);
|
||||
drawBuilding(width * 0.32, 90, height * 0.55);
|
||||
drawBuilding(width * 0.48, 65, height * 0.42);
|
||||
drawBuilding(width * 0.58, 80, height * 0.52);
|
||||
drawBuilding(width * 0.72, 55, height * 0.36);
|
||||
drawBuilding(width * 0.82, 70, height * 0.45);
|
||||
}
|
||||
|
||||
export function drawSmokestacks(dc: DrawContext): void {
|
||||
const { ctx, width, height, state } = dc;
|
||||
const parallax = state.mouseX * 0.4;
|
||||
const time = Date.now() * 0.001;
|
||||
|
||||
const drawSmokestack = (x: number, stackHeight: number) => {
|
||||
const baseY = height * 0.8;
|
||||
|
||||
ctx.fillStyle = '#263238';
|
||||
ctx.fillRect(x + parallax - 12, baseY - stackHeight, 24, stackHeight);
|
||||
|
||||
ctx.fillStyle = '#B71C1C';
|
||||
ctx.fillRect(x + parallax - 12, baseY - stackHeight, 24, 15);
|
||||
|
||||
for (let i = 0; i < 8; i++) {
|
||||
const smokeY = baseY - stackHeight - i * 20 - Math.sin(time + i * 0.5) * 10;
|
||||
const smokeRadius = 15 + i * 12;
|
||||
const offsetX = Math.sin(time * 0.8 + i * 0.3) * 25 * (i / 4);
|
||||
const alpha = 0.6 - i * 0.06;
|
||||
|
||||
ctx.fillStyle = `rgba(60, 60, 60, ${alpha})`;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x + parallax + offsetX, smokeY, smokeRadius, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
};
|
||||
|
||||
drawSmokestack(width * 0.15, height * 0.3);
|
||||
drawSmokestack(width * 0.55, height * 0.35);
|
||||
drawSmokestack(width * 0.85, height * 0.28);
|
||||
}
|
||||
|
||||
export function drawSmog(dc: DrawContext): void {
|
||||
const { ctx, width, height } = dc;
|
||||
const time = Date.now() * 0.0003;
|
||||
|
||||
for (let layer = 0; layer < 3; layer++) {
|
||||
const gradient = ctx.createLinearGradient(0, height * 0.3, 0, height * 0.7);
|
||||
const alpha = 0.15 + layer * 0.08;
|
||||
gradient.addColorStop(0, `rgba(80, 80, 80, 0)`);
|
||||
gradient.addColorStop(0.5, `rgba(100, 90, 80, ${alpha})`);
|
||||
gradient.addColorStop(1, `rgba(80, 80, 80, 0)`);
|
||||
|
||||
ctx.fillStyle = gradient;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-100, height * 0.6);
|
||||
for (let x = -100; x <= width + 100; x += 50) {
|
||||
const y = height * 0.45 + Math.sin((x + time * 100 + layer * 500) * 0.005) * 40;
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
ctx.lineTo(width + 100, height * 0.7);
|
||||
ctx.lineTo(-100, height * 0.7);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
export function drawTrafficJam(dc: DrawContext): void {
|
||||
const { ctx, width, height } = dc;
|
||||
|
||||
ctx.fillStyle = '#2E2E2E';
|
||||
ctx.fillRect(0, height * 0.82, width, height * 0.08);
|
||||
|
||||
ctx.strokeStyle = 'rgba(200, 180, 100, 0.4)';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.setLineDash([20, 30]);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, height * 0.86);
|
||||
ctx.lineTo(width, height * 0.86);
|
||||
ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
|
||||
const drawCar = (x: number, y: number, color: string) => {
|
||||
ctx.fillStyle = color;
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(x, y, 35, 14, 2);
|
||||
ctx.fill();
|
||||
|
||||
ctx.fillStyle = 'rgba(100, 100, 100, 0.5)';
|
||||
ctx.fillRect(x + 8, y - 7, 19, 8);
|
||||
|
||||
ctx.fillStyle = '#1a1a1a';
|
||||
ctx.beginPath();
|
||||
ctx.arc(x + 8, y + 14, 4, 0, Math.PI * 2);
|
||||
ctx.arc(x + 27, y + 14, 4, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
};
|
||||
|
||||
const carColors = ['#616161', '#424242', '#757575', '#546E7A', '#455A64'];
|
||||
for (let i = 0; i < 15; i++) {
|
||||
const lane = i % 2;
|
||||
const x = i * 55 + 20;
|
||||
const y = height * 0.83 + lane * 35;
|
||||
drawCar(x, y, carColors[i % carColors.length]);
|
||||
}
|
||||
|
||||
ctx.fillStyle = 'rgba(255, 0, 0, 0.4)';
|
||||
for (let i = 0; i < 15; i++) {
|
||||
const x = i * 55 + 48;
|
||||
const y = height * 0.835 + (i % 2) * 35 + 7;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 3, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
export function drawDebris(dc: DrawContext): void {
|
||||
const { ctx, width, height } = dc;
|
||||
|
||||
ctx.fillStyle = '#5D4037';
|
||||
|
||||
for (let i = 0; i < 12; i++) {
|
||||
const x = Math.random() * width;
|
||||
const y = height * 0.81 + Math.random() * 8;
|
||||
const size = 3 + Math.random() * 5;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.rect(x, y, size, size * 0.7);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
export function drawPollutedCityScene(dc: DrawContext): void {
|
||||
drawSmog(dc);
|
||||
drawSmoggyBuildings(dc);
|
||||
drawSmokestacks(dc);
|
||||
drawDebris(dc);
|
||||
drawTrafficJam(dc);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user