fix: update version to 1.3.2 in package.json and package-lock.json; refactor RickGamePanel to improve player object structure and enemy spawning

source/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@funky-flask-test/funky-flask-test",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@funky-flask-test/funky-flask-test",
-      "version": "1.3.1",
+      "version": "1.3.2",
       "devDependencies": {
         "@types/node": "^24.0.15",
         "typescript": "^5.8.3",

source/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funky-flask-test/funky-flask-test",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "type": "module",
   "main": "./dist/index.jsx",
   "exports": {

source/src/index.tsx

@@ -1,56 +1,55 @@
 export class RickGamePanel {
   private canvas!: HTMLCanvasElement
   private ctx!: CanvasRenderingContext2D
-  private x = 20
+  private player = { x: 20, y: 180, vy: 0, width: 10, height: 10, onGround: false }
-  private y = 180
-  private vy = 0
-  private vx = 2
-  private onGround = false
   private gravity = 0.7
   private jumpPower = -12
   private isGameOver = false
 
+  private enemies: { x: number, y: number, width: number, height: number, speed: number }[] = []
+  private spawnTimer = 0
+
   constructor(private container: HTMLElement) {
     this.createUI()
-    this.attachListeners()
     this.ctx = this.canvas.getContext('2d')!
+    this.attachListeners()
     this.frame()
   }
 
   private createUI() {
     const panel = document.createElement('div')
     panel.style.cssText = `
-      background: #fefefe;
+      background: #1a1a1a;
-      color: #111;
+      color: #eee;
-      font-family: sans-serif;
+      font-family: monospace;
       padding: 16px;
-      border: 1px solid #ccc;
+      border-radius: 12px;
-      border-radius: 10px;
       width: fit-content;
-      box-shadow: 0 0 10px rgba(0,0,0,0.1);
+      box-shadow: 0 0 20px rgba(255,255,255,0.1);
     `
 
     const title = document.createElement('div')
+    title.innerHTML = `<strong>🌀 Rickjump 2: Invasion</strong>`
     title.style.marginBottom = '10px'
-    title.innerHTML = `<strong>🎮 Rickjump Game</strong>`
     panel.appendChild(title)
 
     this.canvas = document.createElement('canvas')
     this.canvas.width = 300
     this.canvas.height = 200
-    this.canvas.style.cssText = 'border: 1px solid #aaa; background: #fff;'
+    this.canvas.style.cssText = `
+      border: 2px solid #444;
+      background: #000;
+      image-rendering: pixelated;
+    `
     panel.appendChild(this.canvas)
 
     const footer = document.createElement('div')
-    footer.textContent = 'sans.'
+    footer.textContent = '↳ try not to get rick’d'
     footer.style.cssText = `
-      margin-top: 14px;
+      margin-top: 10px;
-      color: #666;
+      font-size: 0.7em;
-      font-size: 0.8em;
+      color: #aaa;
-      cursor: pointer;
-      text-decoration: underline;
     `
-    footer.onclick = () => window.open('https://www.youtube.com/watch?v=ZcoqR9Bwx1Y', '_blank')
     panel.appendChild(footer)
 
     this.container.appendChild(panel)
@@ -58,9 +57,9 @@ export class RickGamePanel {
 
   private attachListeners() {
     this.canvas.addEventListener('click', () => {
-      if (this.onGround) {
+      if (this.player.onGround) {
-        this.vy = this.jumpPower
+        this.player.vy = this.jumpPower
-        this.onGround = false
+        this.player.onGround = false
       }
     })
   }
@@ -68,38 +67,81 @@ export class RickGamePanel {
   private frame = () => {
     if (this.isGameOver) return
 
-    this.vy += this.gravity
+    // physics
-    this.y += this.vy
+    this.player.vy += this.gravity
-    this.x += this.vx  // <--- move right
+    this.player.y += this.player.vy
 
-    if (this.y >= 180) {
+    if (this.player.y >= 180) {
-      this.y = 180
+      this.player.y = 180
-      this.vy = 0
+      this.player.vy = 0
-      this.onGround = true
+      this.player.onGround = true
     }
 
-    if (this.x > 250 && this.y > 160) {
+    // enemies
-      this.isGameOver = true
+    for (const enemy of this.enemies) {
-      window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank')
+      enemy.x -= enemy.speed
-      return
+    }
+
+    // cleanup
+    this.enemies = this.enemies.filter(e => e.x + e.width > 0)
+
+    // collisions
+    for (const enemy of this.enemies) {
+      const p = this.player
+      const collide =
+        p.x < enemy.x + enemy.width &&
+        p.x + p.width > enemy.x &&
+        p.y < enemy.y + enemy.height &&
+        p.y + p.height > enemy.y
+
+      if (collide) {
+        this.isGameOver = true
+        setTimeout(() => {
+          window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank')
+        }, 200)
+        return
+      }
+    }
+
+    // spawn enemy
+    this.spawnTimer--
+    if (this.spawnTimer <= 0) {
+      this.spawnEnemy()
+      this.spawnTimer = 30 + Math.floor(Math.random() * 60)
     }
 
     this.draw()
     requestAnimationFrame(this.frame)
   }
 
+  private spawnEnemy() {
+    const h = 10 + Math.floor(Math.random() * 20)
+    const y = 190 - h
+    const speed = 1.5 + Math.random() * 1.5
+    this.enemies.push({ x: 300, y, width: 10, height: h, speed })
+  }
 
   private draw() {
-    this.ctx.clearRect(0, 0, 300, 200)
+    const ctx = this.ctx
+    ctx.clearRect(0, 0, 300, 200)
 
-    this.ctx.fillStyle = '#ccc'
+    // background
-    this.ctx.fillRect(0, 190, 300, 10)
+    ctx.fillStyle = '#111'
+    ctx.fillRect(0, 0, 300, 200)
 
-    this.ctx.fillStyle = '#f33'
+    // ground
-    this.ctx.fillRect(250, 180, 20, 10)
+    ctx.fillStyle = '#444'
+    ctx.fillRect(0, 190, 300, 10)
 
-    this.ctx.fillStyle = '#007bff'
+    // enemies
-    this.ctx.fillRect(this.x, this.y, 10, 10)
+    for (const e of this.enemies) {
+      ctx.fillStyle = '#f00'
+      ctx.fillRect(e.x, e.y, e.width, e.height)
+    }
+
+    // player
+    ctx.fillStyle = '#0af'
+    ctx.fillRect(this.player.x, this.player.y, this.player.width, this.player.height)
   }
 }