fix: update version to 1.3.3 in package.json and package-lock.json; refactor RickGamePanel for improved gameplay mechanics and visual enhancements

source/package-lock.json

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

source/src/index.tsx

@@ -4,32 +4,37 @@ export class RickGamePanel {
   private player = { x: 20, y: 180, vy: 0, width: 10, height: 10, onGround: false }
   private gravity = 0.7
   private jumpPower = -12
+
   private isGameOver = false
+  private isStarted = false
+  private startupAlpha = 0
+  private frameCount = 0
+  private score = 0
 
   private enemies: { x: number, y: number, width: number, height: number, speed: number }[] = []
-  private spawnTimer = 0
+  private spawnCooldown = 0
 
   constructor(private container: HTMLElement) {
     this.createUI()
     this.ctx = this.canvas.getContext('2d')!
     this.attachListeners()
-    this.frame()
+    this.drawStartup()
   }
 
   private createUI() {
     const panel = document.createElement('div')
     panel.style.cssText = `
-      background: #1a1a1a;
+      background: #111;
       color: #eee;
       font-family: monospace;
       padding: 16px;
-      border-radius: 12px;
+      border-radius: 10px;
       width: fit-content;
-      box-shadow: 0 0 20px rgba(255,255,255,0.1);
+      box-shadow: 0 0 10px rgba(255,255,255,0.2);
     `
 
     const title = document.createElement('div')
-    title.innerHTML = `<strong>🌀 Rickjump 2: Invasion</strong>`
+    title.innerHTML = `<strong>🎮 Rickjump Shadered</strong>`
     title.style.marginBottom = '10px'
     panel.appendChild(title)
 
@@ -37,14 +42,15 @@ export class RickGamePanel {
     this.canvas.width = 300
     this.canvas.height = 200
     this.canvas.style.cssText = `
-      border: 2px solid #444;
+      border: 2px solid #333;
       background: #000;
       image-rendering: pixelated;
+      cursor: pointer;
     `
     panel.appendChild(this.canvas)
 
     const footer = document.createElement('div')
-    footer.textContent = '↳ try not to get rick’d'
+    footer.textContent = 'click to begin | dodge to score'
     footer.style.cssText = `
       margin-top: 10px;
       font-size: 0.7em;
@@ -57,7 +63,12 @@ export class RickGamePanel {
 
   private attachListeners() {
     this.canvas.addEventListener('click', () => {
-      if (this.player.onGround) {
+      if (!this.isStarted) {
+        this.isStarted = true
+        this.frame()
+      } else if (this.isGameOver) {
+        this.resetGame()
+      } else if (this.player.onGround) {
         this.player.vy = this.jumpPower
         this.player.onGround = false
       }
@@ -65,83 +76,154 @@ export class RickGamePanel {
   }
 
   private frame = () => {
-    if (this.isGameOver) return
+    if (!this.isStarted) return
+    this.frameCount++
 
-    // physics
+    if (!this.isGameOver) {
-    this.player.vy += this.gravity
+      this.player.vy += this.gravity
-    this.player.y += this.player.vy
+      this.player.y += this.player.vy
 
-    if (this.player.y >= 180) {
+      if (this.player.y >= 180) {
-      this.player.y = 180
+        this.player.y = 180
-      this.player.vy = 0
+        this.player.vy = 0
-      this.player.onGround = true
+        this.player.onGround = true
-    }
-
-    // enemies
-    for (const enemy of this.enemies) {
-      enemy.x -= enemy.speed
-    }
-
-    // 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
+      for (const enemy of this.enemies) {
-    this.spawnTimer--
+        enemy.x -= enemy.speed
-    if (this.spawnTimer <= 0) {
+      }
-      this.spawnEnemy()
+
-      this.spawnTimer = 30 + Math.floor(Math.random() * 60)
+      // Remove passed enemies + add score
+      const remainingEnemies = []
+      for (const enemy of this.enemies) {
+        if (enemy.x + enemy.width > 0) {
+          remainingEnemies.push(enemy)
+        } else {
+          this.score++
+        }
+      }
+      this.enemies = remainingEnemies
+
+      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')
+          }, 300)
+          return
+        }
+      }
+
+      if (this.spawnCooldown-- <= 0) {
+        const last = this.enemies[this.enemies.length - 1]
+        if (!last || last.x < 180) {
+          this.spawnEnemy()
+          this.spawnCooldown = 40 + Math.floor(Math.random() * 50)
+        }
+      }
     }
 
     this.draw()
     requestAnimationFrame(this.frame)
   }
 
-  private spawnEnemy() {
+  private resetGame() {
-    const h = 10 + Math.floor(Math.random() * 20)
+    this.player.y = 180
-    const y = 190 - h
+    this.player.vy = 0
-    const speed = 1.5 + Math.random() * 1.5
+    this.enemies = []
-    this.enemies.push({ x: 300, y, width: 10, height: h, speed })
+    this.spawnCooldown = 0
+    this.isGameOver = false
+    this.score = 0
+    this.frame()
   }
 
-  private draw() {
+  private spawnEnemy() {
+    const height = 10 + Math.floor(Math.random() * 20)
+    const y = 190 - height
+    const speed = 1 + Math.random() * 1.5
+    this.enemies.push({ x: 300, y, width: 10, height, speed })
+  }
+
+  private drawStartup() {
+    const draw = () => {
+      if (this.isStarted) return
+
+      this.startupAlpha += 0.02
+      if (this.startupAlpha > 1) this.startupAlpha = 1
+
+      this.draw(true)
+      requestAnimationFrame(draw)
+    }
+
+    draw()
+  }
+
+  private draw(startup = false) {
     const ctx = this.ctx
     ctx.clearRect(0, 0, 300, 200)
 
-    // background
+    const grad = ctx.createLinearGradient(0, 0, 0, 200)
-    ctx.fillStyle = '#111'
+    grad.addColorStop(0, '#000')
+    grad.addColorStop(1, '#222')
+    ctx.fillStyle = grad
     ctx.fillRect(0, 0, 300, 200)
 
-    // ground
     ctx.fillStyle = '#444'
     ctx.fillRect(0, 190, 300, 10)
 
-    // enemies
+    // Enemies
     for (const e of this.enemies) {
-      ctx.fillStyle = '#f00'
+      ctx.fillStyle = '#f33'
       ctx.fillRect(e.x, e.y, e.width, e.height)
     }
 
-    // player
+    // Player
     ctx.fillStyle = '#0af'
     ctx.fillRect(this.player.x, this.player.y, this.player.width, this.player.height)
+
+    // Shader lines
+    ctx.fillStyle = 'rgba(255,255,255,0.03)'
+    for (let y = 0; y < 200; y += 2) {
+      ctx.fillRect(0, y, 300, 1)
+    }
+
+    // Vignette
+    ctx.fillStyle = 'rgba(0,0,0,0.2)'
+    ctx.beginPath()
+    ctx.ellipse(150, 100, 160, 100, 0, 0, Math.PI * 2)
+    ctx.rect(300, 0, -300, 200)
+    ctx.fill()
+
+    // Score
+    if (this.isStarted) {
+      ctx.fillStyle = '#fff'
+      ctx.font = 'bold 12px monospace'
+      ctx.fillText(`Score: ${this.score}`, 210, 20)
+    }
+
+    // Intro screen
+    if (!this.isStarted) {
+      ctx.fillStyle = `rgba(255,255,255,${this.startupAlpha * 0.9})`
+      ctx.font = 'bold 16px monospace'
+      ctx.fillText('Click to Start', 90, 100)
+    }
+
+    // Game over
+    if (this.isGameOver) {
+      ctx.fillStyle = '#fff'
+      ctx.font = 'bold 16px monospace'
+      ctx.fillText('💀 Rickrolled!', 95, 80)
+      ctx.font = '12px monospace'
+      ctx.fillText(`Final Score: ${this.score}`, 95, 100)
+      ctx.fillText(`Click to Restart`, 95, 120)
+    }
   }
 }