diff --git a/source/package-lock.json b/source/package-lock.json index 021952d..ee55089 100644 --- a/source/package-lock.json +++ b/source/package-lock.json @@ -1,12 +1,12 @@ { "name": "@funky-flask-test/funky-flask-test", - "version": "1.3.6", + "version": "1.3.7", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@funky-flask-test/funky-flask-test", - "version": "1.3.6", + "version": "1.3.7", "devDependencies": { "@types/node": "^24.0.15", "typescript": "^5.8.3", diff --git a/source/package.json b/source/package.json index 0bc4dea..1545edf 100644 --- a/source/package.json +++ b/source/package.json @@ -1,6 +1,6 @@ { "name": "@funky-flask-test/funky-flask-test", - "version": "1.3.6", + "version": "1.3.7", "type": "module", "main": "./dist/index.jsx", "exports": { diff --git a/source/src/index.tsx b/source/src/index.tsx index ae61ba8..e0ab2b6 100644 --- a/source/src/index.tsx +++ b/source/src/index.tsx @@ -146,26 +146,85 @@ export class RickGamePanel { private draw() { const ctx = this.ctx; ctx.clearRect(0, 0, 300, 200); - ctx.fillStyle = '#222'; ctx.fillRect(0, 0, 300, 200); - ctx.fillStyle = '#444'; ctx.fillRect(0, 190, 300, 10); + ctx.fillStyle = '#222'; + ctx.fillRect(0, 0, 300, 200); // background + ctx.fillStyle = '#444'; + ctx.fillRect(0, 190, 300, 10); // ground + + // draw enemies this.enemies.forEach(e => { - const img = this.assetImgs.dogWalk; - ctx.drawImage(img, e.x, e.y, e.size, e.size); + if (e.variant === 'fly') { + this.drawDogFly(e.x, e.y); + } else { + this.drawDogWalk(e.x, e.y); + } }); - this.powerups.forEach(p => { - const img = this.assetImgs.nut; - ctx.drawImage(img, p.x, p.y, p.size, p.size); - }); - const pl = this.assetImgs.squirrel; - ctx.drawImage(pl, this.player.x, this.player.y, this.player.width, this.player.height); - ctx.fillStyle = '#fff'; ctx.font = '12px monospace'; + + // draw powerups + this.powerups.forEach(p => this.drawNut(p.x, p.y)); + + // draw player + this.drawSquirrel(this.player.x, this.player.y); + + // score + ctx.fillStyle = '#fff'; + ctx.font = '12px monospace'; ctx.fillText(`Score: ${this.score}`, 200, 20); + // game over if (this.isGameOver) { ctx.font = 'bold 16px monospace'; ctx.fillText('Game Over! Click to restart', 50, 100); } } + + + private drawSquirrel(x: number, y: number) { + const ctx = this.ctx; + ctx.fillStyle = '#33f'; + ctx.fillRect(x, y, 10, 10); // body + ctx.fillStyle = '#66f'; + ctx.fillRect(x - 4, y + 2, 6, 6); // tail + } + + private drawDogWalk(x: number, y: number) { + const ctx = this.ctx; + ctx.fillStyle = '#f33'; + ctx.fillRect(x, y, 10, 10); // body + ctx.fillStyle = '#000'; + ctx.fillRect(x + 2, y - 2, 2, 2); // ear left + ctx.fillRect(x + 6, y - 2, 2, 2); // ear right + } + + private drawDogFly(x: number, y: number) { + const ctx = this.ctx; + ctx.fillStyle = '#ff3'; + ctx.fillRect(x, y, 10, 10); // body + + ctx.fillStyle = '#ccc'; + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineTo(x - 5, y + 5); + ctx.lineTo(x, y + 10); + ctx.fill(); // wing left + + ctx.beginPath(); + ctx.moveTo(x + 10, y); + ctx.lineTo(x + 15, y + 5); + ctx.lineTo(x + 10, y + 10); + ctx.fill(); // wing right + } + + private drawNut(x: number, y: number) { + const ctx = this.ctx; + ctx.fillStyle = '#a52a2a'; + ctx.beginPath(); + ctx.arc(x + 5, y + 5, 5, 0, Math.PI * 2); + ctx.fill(); + + ctx.fillStyle = '#228B22'; + ctx.fillRect(x + 3, y - 2, 4, 2); // little leaf on top + } } export function insertRickPanel(target: HTMLElement | string = document.body): void {