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,189 +1,189 @@
|
||||
import type { DrawContext } from '../types';
|
||||
|
||||
export function drawCityBuildings(dc: DrawContext): void {
|
||||
const { ctx, width, height, state } = dc;
|
||||
const parallax = state.mouseX * 0.35;
|
||||
|
||||
const drawBuilding = (x: number, bWidth: number, bHeight: number, color: string, hasSpire: boolean = false) => {
|
||||
const baseY = height * 0.8;
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(x + parallax, baseY - bHeight, bWidth, bHeight);
|
||||
|
||||
const gradient = ctx.createLinearGradient(x + parallax, 0, x + parallax + bWidth, 0);
|
||||
gradient.addColorStop(0, 'rgba(255, 255, 255, 0.1)');
|
||||
gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.2)');
|
||||
gradient.addColorStop(1, 'rgba(255, 255, 255, 0.05)');
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fillRect(x + parallax, baseY - bHeight, bWidth, bHeight);
|
||||
|
||||
ctx.fillStyle = 'rgba(255, 255, 200, 0.8)';
|
||||
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++) {
|
||||
if (Math.random() > 0.15) {
|
||||
ctx.fillStyle = Math.random() > 0.7 ? 'rgba(255, 255, 200, 0.9)' : 'rgba(200, 220, 255, 0.6)';
|
||||
ctx.fillRect(
|
||||
x + parallax + col * 18 + 5,
|
||||
baseY - bHeight + row * 25 + 8,
|
||||
10, 12
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (hasSpire) {
|
||||
ctx.fillStyle = '#90A4AE';
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + parallax + bWidth / 2, baseY - bHeight - 40);
|
||||
ctx.lineTo(x + parallax + bWidth / 2 - 8, baseY - bHeight);
|
||||
ctx.lineTo(x + parallax + bWidth / 2 + 8, baseY - bHeight);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
};
|
||||
|
||||
drawBuilding(width * 0.02, 55, height * 0.28, '#607D8B');
|
||||
drawBuilding(width * 0.08, 70, height * 0.42, '#78909C', true);
|
||||
drawBuilding(width * 0.18, 50, height * 0.32, '#546E7A');
|
||||
drawBuilding(width * 0.25, 85, height * 0.55, '#455A64', true);
|
||||
drawBuilding(width * 0.38, 60, height * 0.38, '#607D8B');
|
||||
drawBuilding(width * 0.48, 75, height * 0.48, '#78909C', true);
|
||||
drawBuilding(width * 0.58, 55, height * 0.35, '#546E7A');
|
||||
drawBuilding(width * 0.68, 90, height * 0.52, '#455A64', true);
|
||||
drawBuilding(width * 0.8, 65, height * 0.4, '#607D8B');
|
||||
drawBuilding(width * 0.9, 50, height * 0.3, '#78909C');
|
||||
}
|
||||
|
||||
export function drawStreet(dc: DrawContext): void {
|
||||
const { ctx, width, height } = dc;
|
||||
const time = Date.now() * 0.001;
|
||||
|
||||
ctx.fillStyle = '#424242';
|
||||
ctx.fillRect(0, height * 0.82, width, height * 0.08);
|
||||
|
||||
ctx.strokeStyle = '#FFEB3B';
|
||||
ctx.lineWidth = 3;
|
||||
ctx.setLineDash([30, 20]);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, height * 0.86);
|
||||
ctx.lineTo(width, height * 0.86);
|
||||
ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
|
||||
const drawCar = (baseX: number, y: number, color: string, direction: number) => {
|
||||
const x = ((baseX + time * 50 * direction) % (width + 100)) - 50;
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(x, y, 40, 15, 3);
|
||||
ctx.fill();
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(x + 8, y - 10, 24, 12, 3);
|
||||
ctx.fill();
|
||||
|
||||
ctx.fillStyle = '#81D4FA';
|
||||
ctx.fillRect(x + 10, y - 8, 9, 8);
|
||||
ctx.fillRect(x + 21, y - 8, 9, 8);
|
||||
|
||||
ctx.fillStyle = '#212121';
|
||||
ctx.beginPath();
|
||||
ctx.arc(x + 10, y + 15, 5, 0, Math.PI * 2);
|
||||
ctx.arc(x + 30, y + 15, 5, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
};
|
||||
|
||||
drawCar(width * 0.1, height * 0.83, '#E53935', 1);
|
||||
drawCar(width * 0.5, height * 0.83, '#1E88E5', 1);
|
||||
drawCar(width * 0.3, height * 0.87, '#43A047', -1);
|
||||
drawCar(width * 0.8, height * 0.87, '#FDD835', -1);
|
||||
}
|
||||
|
||||
export function drawAirplane(dc: DrawContext): void {
|
||||
const { ctx, width, height, state } = dc;
|
||||
const time = Date.now() * 0.0003;
|
||||
const parallax = state.mouseX * 0.1;
|
||||
|
||||
const x = (time * width) % (width + 200) - 100;
|
||||
const y = height * 0.15 + Math.sin(time * 5) * 10;
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(x + parallax, y);
|
||||
|
||||
ctx.fillStyle = '#ECEFF1';
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(0, 0, 40, 8, 0, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(45, 0, 12, 6, 0, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
ctx.fillStyle = '#B0BEC5';
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-10, 0);
|
||||
ctx.lineTo(-30, -35);
|
||||
ctx.lineTo(10, -35);
|
||||
ctx.lineTo(15, 0);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-10, 0);
|
||||
ctx.lineTo(-30, 35);
|
||||
ctx.lineTo(10, 35);
|
||||
ctx.lineTo(15, 0);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
ctx.fillStyle = '#E53935';
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-35, 0);
|
||||
ctx.lineTo(-50, -20);
|
||||
ctx.lineTo(-30, 0);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
|
||||
ctx.lineWidth = 3;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-50, 0);
|
||||
ctx.lineTo(-150, 3);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
export function drawParks(dc: DrawContext): void {
|
||||
const { ctx, width, height } = dc;
|
||||
|
||||
ctx.fillStyle = '#81C784';
|
||||
|
||||
const parks = [
|
||||
{ x: width * 0.05, y: height * 0.81, rx: 25, ry: 8 },
|
||||
{ x: width * 0.35, y: height * 0.81, rx: 30, ry: 10 },
|
||||
{ x: width * 0.75, y: height * 0.81, rx: 35, ry: 9 },
|
||||
];
|
||||
|
||||
parks.forEach(p => {
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(p.x, p.y, p.rx, p.ry, 0, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
ctx.fillStyle = '#4CAF50';
|
||||
ctx.beginPath();
|
||||
ctx.arc(p.x - 10, p.y - 5, 8, 0, Math.PI * 2);
|
||||
ctx.arc(p.x + 10, p.y - 3, 6, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
});
|
||||
}
|
||||
|
||||
export function drawCityScene(dc: DrawContext): void {
|
||||
drawAirplane(dc);
|
||||
drawCityBuildings(dc);
|
||||
drawParks(dc);
|
||||
drawStreet(dc);
|
||||
}
|
||||
import type { DrawContext } from '../types';
|
||||
|
||||
export function drawCityBuildings(dc: DrawContext): void {
|
||||
const { ctx, width, height, state } = dc;
|
||||
const parallax = state.mouseX * 0.35;
|
||||
|
||||
const drawBuilding = (x: number, bWidth: number, bHeight: number, color: string, hasSpire: boolean = false) => {
|
||||
const baseY = height * 0.8;
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(x + parallax, baseY - bHeight, bWidth, bHeight);
|
||||
|
||||
const gradient = ctx.createLinearGradient(x + parallax, 0, x + parallax + bWidth, 0);
|
||||
gradient.addColorStop(0, 'rgba(255, 255, 255, 0.1)');
|
||||
gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.2)');
|
||||
gradient.addColorStop(1, 'rgba(255, 255, 255, 0.05)');
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fillRect(x + parallax, baseY - bHeight, bWidth, bHeight);
|
||||
|
||||
ctx.fillStyle = 'rgba(255, 255, 200, 0.8)';
|
||||
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++) {
|
||||
if (Math.random() > 0.15) {
|
||||
ctx.fillStyle = Math.random() > 0.7 ? 'rgba(255, 255, 200, 0.9)' : 'rgba(200, 220, 255, 0.6)';
|
||||
ctx.fillRect(
|
||||
x + parallax + col * 18 + 5,
|
||||
baseY - bHeight + row * 25 + 8,
|
||||
10, 12
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (hasSpire) {
|
||||
ctx.fillStyle = '#90A4AE';
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + parallax + bWidth / 2, baseY - bHeight - 40);
|
||||
ctx.lineTo(x + parallax + bWidth / 2 - 8, baseY - bHeight);
|
||||
ctx.lineTo(x + parallax + bWidth / 2 + 8, baseY - bHeight);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
};
|
||||
|
||||
drawBuilding(width * 0.02, 55, height * 0.28, '#607D8B');
|
||||
drawBuilding(width * 0.08, 70, height * 0.42, '#78909C', true);
|
||||
drawBuilding(width * 0.18, 50, height * 0.32, '#546E7A');
|
||||
drawBuilding(width * 0.25, 85, height * 0.55, '#455A64', true);
|
||||
drawBuilding(width * 0.38, 60, height * 0.38, '#607D8B');
|
||||
drawBuilding(width * 0.48, 75, height * 0.48, '#78909C', true);
|
||||
drawBuilding(width * 0.58, 55, height * 0.35, '#546E7A');
|
||||
drawBuilding(width * 0.68, 90, height * 0.52, '#455A64', true);
|
||||
drawBuilding(width * 0.8, 65, height * 0.4, '#607D8B');
|
||||
drawBuilding(width * 0.9, 50, height * 0.3, '#78909C');
|
||||
}
|
||||
|
||||
export function drawStreet(dc: DrawContext): void {
|
||||
const { ctx, width, height } = dc;
|
||||
const time = Date.now() * 0.001;
|
||||
|
||||
ctx.fillStyle = '#424242';
|
||||
ctx.fillRect(0, height * 0.82, width, height * 0.08);
|
||||
|
||||
ctx.strokeStyle = '#FFEB3B';
|
||||
ctx.lineWidth = 3;
|
||||
ctx.setLineDash([30, 20]);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, height * 0.86);
|
||||
ctx.lineTo(width, height * 0.86);
|
||||
ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
|
||||
const drawCar = (baseX: number, y: number, color: string, direction: number) => {
|
||||
const x = ((baseX + time * 50 * direction) % (width + 100)) - 50;
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(x, y, 40, 15, 3);
|
||||
ctx.fill();
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(x + 8, y - 10, 24, 12, 3);
|
||||
ctx.fill();
|
||||
|
||||
ctx.fillStyle = '#81D4FA';
|
||||
ctx.fillRect(x + 10, y - 8, 9, 8);
|
||||
ctx.fillRect(x + 21, y - 8, 9, 8);
|
||||
|
||||
ctx.fillStyle = '#212121';
|
||||
ctx.beginPath();
|
||||
ctx.arc(x + 10, y + 15, 5, 0, Math.PI * 2);
|
||||
ctx.arc(x + 30, y + 15, 5, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
};
|
||||
|
||||
drawCar(width * 0.1, height * 0.83, '#E53935', 1);
|
||||
drawCar(width * 0.5, height * 0.83, '#1E88E5', 1);
|
||||
drawCar(width * 0.3, height * 0.87, '#43A047', -1);
|
||||
drawCar(width * 0.8, height * 0.87, '#FDD835', -1);
|
||||
}
|
||||
|
||||
export function drawAirplane(dc: DrawContext): void {
|
||||
const { ctx, width, height, state } = dc;
|
||||
const time = Date.now() * 0.0003;
|
||||
const parallax = state.mouseX * 0.1;
|
||||
|
||||
const x = (time * width) % (width + 200) - 100;
|
||||
const y = height * 0.15 + Math.sin(time * 5) * 10;
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(x + parallax, y);
|
||||
|
||||
ctx.fillStyle = '#ECEFF1';
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(0, 0, 40, 8, 0, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(45, 0, 12, 6, 0, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
ctx.fillStyle = '#B0BEC5';
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-10, 0);
|
||||
ctx.lineTo(-30, -35);
|
||||
ctx.lineTo(10, -35);
|
||||
ctx.lineTo(15, 0);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-10, 0);
|
||||
ctx.lineTo(-30, 35);
|
||||
ctx.lineTo(10, 35);
|
||||
ctx.lineTo(15, 0);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
ctx.fillStyle = '#E53935';
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-35, 0);
|
||||
ctx.lineTo(-50, -20);
|
||||
ctx.lineTo(-30, 0);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
|
||||
ctx.lineWidth = 3;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-50, 0);
|
||||
ctx.lineTo(-150, 3);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
export function drawParks(dc: DrawContext): void {
|
||||
const { ctx, width, height } = dc;
|
||||
|
||||
ctx.fillStyle = '#81C784';
|
||||
|
||||
const parks = [
|
||||
{ x: width * 0.05, y: height * 0.81, rx: 25, ry: 8 },
|
||||
{ x: width * 0.35, y: height * 0.81, rx: 30, ry: 10 },
|
||||
{ x: width * 0.75, y: height * 0.81, rx: 35, ry: 9 },
|
||||
];
|
||||
|
||||
parks.forEach(p => {
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(p.x, p.y, p.rx, p.ry, 0, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
ctx.fillStyle = '#4CAF50';
|
||||
ctx.beginPath();
|
||||
ctx.arc(p.x - 10, p.y - 5, 8, 0, Math.PI * 2);
|
||||
ctx.arc(p.x + 10, p.y - 3, 6, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
});
|
||||
}
|
||||
|
||||
export function drawCityScene(dc: DrawContext): void {
|
||||
drawAirplane(dc);
|
||||
drawCityBuildings(dc);
|
||||
drawParks(dc);
|
||||
drawStreet(dc);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user