fix: update version to 1.3.0 in package.json and package-lock.json; refactor RickGamePanel to improve structure and rendering

source/package-lock.json

@@ -1,15 +1,12 @@
 {
   "name": "@funky-flask-test/funky-flask-test",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@funky-flask-test/funky-flask-test",
-      "version": "1.2.4",
-      "dependencies": {
-        "nano-jsx": "^0.1.0"
-      },
+      "version": "1.3.0",
       "devDependencies": {
         "@types/node": "^24.0.15",
         "typescript": "^5.8.3",
@@ -758,18 +755,6 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "node_modules/nano-jsx": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/nano-jsx/-/nano-jsx-0.1.0.tgz",
-      "integrity": "sha512-S4qJM9ayruMdDnn3hiHNK6kq0ZvCaNrDL3RD5jc4AVhmsW1Ufk3xE64Q6xrjAzq1Gff+6VZ5+Au8For4FT/6LA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/yandeu"
-      }
-    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",

source/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funky-flask-test/funky-flask-test",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "type": "module",
   "main": "./dist/index.jsx",
   "exports": {
@@ -22,8 +22,5 @@
     "@types/node": "^24.0.15",
     "typescript": "^5.8.3",
     "vite": "^5.0.0"
-  },
-  "dependencies": {
-    "nano-jsx": "^0.1.0"
   }
 }

source/src/index.tsx

@@ -1,19 +1,71 @@
-import { h, render, Component } from 'nano-jsx'
+export class RickGamePanel {
+  private canvas!: HTMLCanvasElement
+  private ctx!: CanvasRenderingContext2D
+  private x = 20
+  private y = 180
+  private vy = 0
+  private onGround = false
+  private gravity = 0.7
+  private jumpPower = -12
+  private isGameOver = false
 
-class RickGamePanel extends Component {
-  refs: { [key: string]: any } = {}
-  canvas?: HTMLCanvasElement
-  ctx?: CanvasRenderingContext2D
-  x = 20
-  y = 180
-  vy = 0
-  onGround = false
-  gravity = 0.7
-  jumpPower = -12
-  isGameOver = false
+  constructor(private container: HTMLElement) {
+    this.createUI()
+    this.attachListeners()
+    this.ctx = this.canvas.getContext('2d')!
+    this.frame()
+  }
 
-  frame() {
-    if (!this.ctx || this.isGameOver) return
+  private createUI() {
+    const panel = document.createElement('div')
+    panel.style.cssText = `
+      background: #fefefe;
+      color: #111;
+      font-family: sans-serif;
+      padding: 16px;
+      border: 1px solid #ccc;
+      border-radius: 10px;
+      width: fit-content;
+      box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    `
+
+    const title = document.createElement('div')
+    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;'
+    panel.appendChild(this.canvas)
+
+    const footer = document.createElement('div')
+    footer.textContent = 'sans.'
+    footer.style.cssText = `
+      margin-top: 14px;
+      color: #666;
+      font-size: 0.8em;
+      cursor: pointer;
+      text-decoration: underline;
+    `
+    footer.onclick = () => window.open('https://www.youtube.com/watch?v=ZcoqR9Bwx1Y', '_blank')
+    panel.appendChild(footer)
+
+    this.container.appendChild(panel)
+  }
+
+  private attachListeners() {
+    this.canvas.addEventListener('click', () => {
+      if (this.onGround) {
+        this.vy = this.jumpPower
+        this.onGround = false
+      }
+    })
+  }
+
+  private frame = () => {
+    if (this.isGameOver) return
 
     this.vy += this.gravity
     this.y += this.vy
@@ -31,11 +83,10 @@ class RickGamePanel extends Component {
     }
 
     this.draw()
-    requestAnimationFrame(() => this.frame())
+    requestAnimationFrame(this.frame)
   }
 
-  draw() {
-    if (!this.ctx) return
+  private draw() {
     this.ctx.clearRect(0, 0, 300, 200)
 
     this.ctx.fillStyle = '#ccc'
@@ -47,50 +98,6 @@ class RickGamePanel extends Component {
     this.ctx.fillStyle = '#007bff'
     this.ctx.fillRect(this.x, this.y, 10, 10)
   }
-
-  handleJump = () => {
-    if (this.onGround) {
-      this.vy = this.jumpPower
-      this.onGround = false
-    }
-  }
-
-  mounted() {
-    this.canvas = this.refs['game'] as HTMLCanvasElement
-    this.ctx = this.canvas?.getContext('2d') || undefined
-
-    this.canvas?.addEventListener('click', this.handleJump)
-    this.frame()
-  }
-
-  render() {
-    return h('div', {
-      style: `
-        background: #fefefe;
-        color: #111;
-        font-family: sans-serif;
-        padding: 16px;
-        border: 1px solid #ccc;
-        border-radius: 10px;
-        width: fit-content;
-        box-shadow: 0 0 10px rgba(0,0,0,0.1);
-      `
-    }, [
-      h('div', { style: 'margin-bottom: 10px;' }, [
-        h('strong', null, '🎮 Rickjump Game')
-      ]),
-      h('canvas', {
-        width: 300,
-        height: 200,
-        ref: 'game',
-        style: 'border: 1px solid #aaa; background: #fff;'
-      }),
-      h('div', {
-        onclick: () => window.open('https://www.youtube.com/watch?v=ZcoqR9Bwx1Y', '_blank'),
-        style: 'margin-top: 14px; color: #666; font-size: 0.8em; cursor: pointer; text-decoration: underline;'
-      }, 'sans.')
-    ])
-  }
 }
 
 export function insertRickPanel(target: HTMLElement | string = document.body): void {
@@ -99,6 +106,6 @@ export function insertRickPanel(target: HTMLElement | string = document.body): v
     : target
 
   if (container instanceof HTMLElement) {
-    render(h(RickGamePanel, {}), container)
+    new RickGamePanel(container)
   }
 }