fix: update version to 1.3.12 in package.json and package-lock.json; enhance responsive design in RickGamePanel with dynamic canvas sizing

source/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@funky-flask-test/funky-flask-test",
-  "version": "1.3.11",
+  "version": "1.3.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@funky-flask-test/funky-flask-test",
-      "version": "1.3.11",
+      "version": "1.3.12",
       "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.11",
+  "version": "1.3.12",
   "type": "module",
   "main": "./dist/index.jsx",
   "exports": {

source/src/index.tsx

@@ -9,6 +9,12 @@ export class RickGamePanel {
   private spawnTimer = 0
   private frameTick = 0
 
+  // render sizing
+  private dpr = Math.max(1, window.devicePixelRatio || 1)
+  private viewW = 300 // CSS px
+  private viewH = 200 // CSS px
+  private resizeObs?: ResizeObserver
+
   private player = {
     x: 20,
     y: 180,
@@ -26,20 +32,75 @@ export class RickGamePanel {
     this.drawStartup()
   }
 
+  private get groundTop(): number {
+    return this.viewH - 20
+  }
+
   private createUI() {
     const panel = document.createElement('div')
+    panel.style.cssText = `
+      width: 100%;
+      height: 100%;
+      display: block;
+      position: relative;
+    `
     this.canvas = document.createElement('canvas')
-    this.canvas.style.cssText = `border: 2px solid #333; background: #000; cursor: pointer;`
+    this.canvas.style.cssText = `border: 2px solid #333; background: #000; cursor: pointer; width: 100%; height: 100%; display: block;`
     panel.appendChild(this.canvas)
 
-    // Wait for panel to be in DOM to get computed size
+    // 1) Append first so CSS can apply
-    requestAnimationFrame(() => {
-      const rect = panel.getBoundingClientRect()
-      this.canvas.width = rect.width
-      this.canvas.height = rect.height
-    })
-    
     this.container.appendChild(panel)
+
+    // 2) Observe size changes and (re)fit the canvas
+    const doResize = () => {
+      const rect = panel.getBoundingClientRect()
+      const cssW = Math.max(1, Math.floor(rect.width))
+      const cssH = Math.max(1, Math.floor(rect.height))
+
+      // keep CSS size for game logic coords
+      this.viewW = cssW
+      this.viewH = cssH
+
+      // update DPR in case it changed (e.g., window moved between screens)
+      this.dpr = Math.max(1, window.devicePixelRatio || 1)
+
+      // set backing store for crisp rendering
+      const bw = Math.max(1, Math.floor(cssW * this.dpr))
+      const bh = Math.max(1, Math.floor(cssH * this.dpr))
+      if (this.canvas.width !== bw || this.canvas.height !== bh) {
+        this.canvas.width = bw
+        this.canvas.height = bh
+      }
+
+      // ensure CSS size matches container (helps some layouts)
+      this.canvas.style.width = `${cssW}px`
+      this.canvas.style.height = `${cssH}px`
+
+      // map 1 unit in code to 1 CSS pixel
+      this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0)
+
+      // clamp player to ground after resize
+      if (this.player.y > this.groundTop) {
+        this.player.y = this.groundTop
+        this.player.vy = 0
+        this.player.onGround = true
+      }
+
+      // re-render a frame when not actively animating
+      if (!this.isStarted || this.isGameOver) {
+        this.isStarted ? this.draw() : this.drawStartup()
+      }
+    }
+
+    // Initial fit on next frame
+    requestAnimationFrame(doResize)
+
+    // Keep it live with ResizeObserver
+    this.resizeObs = new ResizeObserver(doResize)
+    this.resizeObs.observe(panel)
+
+    // Also react to DPR changes (some browsers fire resize; this is extra safe)
+    window.addEventListener('resize', doResize)
   }
 
   private attachListeners() {
@@ -49,6 +110,7 @@ export class RickGamePanel {
         this.player.onGround = false
       }
     })
+
     this.canvas.addEventListener('click', () => {
       if (!this.isStarted) {
         this.isStarted = true
@@ -70,11 +132,11 @@ export class RickGamePanel {
       return
     }
 
-    // Update player
+    // Update player (gravity)
     this.player.vy += 0.7
     this.player.y += this.player.vy
-    if (this.player.y >= 180) {
+    if (this.player.y >= this.groundTop) {
-      this.player.y = 180
+      this.player.y = this.groundTop
       this.player.vy = 0
       this.player.onGround = true
     }
@@ -107,10 +169,12 @@ export class RickGamePanel {
       if (this.collide(this.player, e)) {
         this.isGameOver = true
         window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank')
+        this.draw()
         return
       }
     }
-    for (const [i, p] of this.powerups.entries()) {
+    for (let i = this.powerups.length - 1; i >= 0; i--) {
+      const p = this.powerups[i]
       if (this.collide(this.player, p)) {
         this.score += 5
         this.powerups.splice(i, 1)
@@ -139,9 +203,9 @@ export class RickGamePanel {
   private spawnEnemy() {
     const type = Math.random() < 0.3 ? 'fly' : 'walk'
     const size = 10
-    const y = type === 'fly' ? 120 + Math.random() * 20 : 180 - size
+    const y = type === 'fly' ? (this.viewH * 0.6) + Math.random() * 20 : this.groundTop - size + (this.player.height - 10) // keep similar feel
     this.enemies.push({
-      x: 300,
+      x: this.viewW,
       y,
       size,
       type,
@@ -154,7 +218,7 @@ export class RickGamePanel {
   }
 
   private spawnPowerup() {
-    this.powerups.push({ x: 300, y: 150 + Math.random() * 20, size: 8 })
+    this.powerups.push({ x: this.viewW, y: (this.viewH * 0.5) + Math.random() * 20, size: 8 })
   }
 
   private collide(a: any, b: any) {
@@ -170,7 +234,7 @@ export class RickGamePanel {
     this.score = 0
     this.spawnTimer = 0
     this.isGameOver = false
-    this.player.y = 180
+    this.player.y = this.groundTop
     this.player.vy = 0
     this.player.onGround = true
     this.player.frame = 0
@@ -180,49 +244,62 @@ export class RickGamePanel {
 
   private drawStartup() {
     const ctx = this.ctx
+    ctx.clearRect(0, 0, this.viewW, this.viewH)
     ctx.fillStyle = '#000'
-    ctx.fillRect(0, 0, 300, 200)
+    ctx.fillRect(0, 0, this.viewW, this.viewH)
     ctx.fillStyle = '#fff'
     ctx.font = 'bold 16px monospace'
-    ctx.fillText('Click to Start', 90, 100)
+    const text = 'Click to Start'
+    const tm = ctx.measureText(text)
+    const tx = (this.viewW - tm.width) / 2
+    const ty = this.viewH / 2
+    ctx.fillText(text, tx, ty)
   }
 
   private draw() {
     const ctx = this.ctx
-    ctx.clearRect(0, 0, 300, 200)
+    ctx.clearRect(0, 0, this.viewW, this.viewH)
-    ctx.fillStyle = '#222'
-    ctx.fillRect(0, 0, 300, 200)
-    ctx.fillStyle = '#444'
-    ctx.fillRect(0, 190, 300, 10)
 
-    // Draw enemies
+    // background
+    ctx.fillStyle = '#222'
+    ctx.fillRect(0, 0, this.viewW, this.viewH)
+
+    // ground
+    ctx.fillStyle = '#444'
+    ctx.fillRect(0, this.viewH - 10, this.viewW, 10)
+
+    // enemies
     this.enemies.forEach(e => {
       if (e.type === 'walk') this.drawDogWalk(e.x, e.y, e.frame)
       else this.drawDogFly(e.x, e.y, e.frame)
     })
 
-    // Powerups
+    // powerups
     this.powerups.forEach(p => this.drawNut(p.x, p.y))
 
-    // Player
+    // player
     this.drawSquirrel(this.player.x, this.player.y, this.player.frame)
 
-    // Score
+    // score
     ctx.fillStyle = '#fff'
     ctx.font = '12px monospace'
-    ctx.fillText(`Score: ${this.score}`, 200, 20)
+    const s = `Score: ${this.score}`
+    const sw = ctx.measureText(s).width
+    ctx.fillText(s, this.viewW - sw - 10, 20)
 
-    // Game over
+    // game over
     if (this.isGameOver) {
       ctx.font = 'bold 16px monospace'
-      ctx.fillText('Game Over! Click to restart', 50, 100)
+      const msg = 'Game Over! Click to restart'
+      const m = ctx.measureText(msg)
+      ctx.fillText(msg, (this.viewW - m.width) / 2, this.viewH / 2)
     }
   }
 
   private drawSquirrel(x: number, y: number, frame: number) {
     const ctx = this.ctx
     ctx.fillStyle = frame % 2 === 0 ? '#3cf' : '#6df'
-    ctx.fillRect(x, y, 10, 10) // body
+    ctx.fillRect(x, y, this.player.width, this.player.height) // body
     ctx.fillStyle = '#9cf'
     ctx.fillRect(x - 4, y + 2, 5, 6) // tail
   }