fix: update version to 1.2.4 in package.json and package-lock.json; refactor RickGamePanel to use JSX for rendering

source/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@funky-flask-test/funky-flask-test",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@funky-flask-test/funky-flask-test",
-      "version": "1.2.3",
+      "version": "1.2.4",
       "dependencies": {
         "nano-jsx": "^0.1.0"
       },

source/package.json

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

source/src/index.tsx

@@ -1,4 +1,3 @@
-/** @jsx h */
 import { h, render, Component } from 'nano-jsx'
 
 class RickGamePanel extends Component {
@@ -26,7 +25,6 @@ class RickGamePanel extends Component {
     }
 
     if (this.x > 250 && this.y > 160) {
-      // Loss condition (simple hazard)
       this.isGameOver = true
       window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank')
       return
@@ -40,15 +38,12 @@ class RickGamePanel extends Component {
     if (!this.ctx) return
     this.ctx.clearRect(0, 0, 300, 200)
 
-    // Ground
     this.ctx.fillStyle = '#ccc'
     this.ctx.fillRect(0, 190, 300, 10)
 
-    // Hazard block
     this.ctx.fillStyle = '#f33'
     this.ctx.fillRect(250, 180, 20, 10)
 
-    // Player
     this.ctx.fillStyle = '#007bff'
     this.ctx.fillRect(this.x, this.y, 10, 10)
   }
@@ -68,42 +63,33 @@ class RickGamePanel extends Component {
     this.frame()
   }
 
-
   render() {
-    return (
-      <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);
-        "
-      >
-        <div style="margin-bottom: 10px;">
-          <strong>🎮 Rickjump Game</strong>
-        </div>
-
-        <canvas
-          width="300"
-          height="200"
-          ref="game"
-          style="border: 1px solid #aaa; background: #fff;"
-        ></canvas>
-
-        <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.
-        </div>
-      </div>
-    )
+    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.')
+    ])
   }
 }
 
@@ -113,6 +99,6 @@ export function insertRickPanel(target: HTMLElement | string = document.body): v
     : target
 
   if (container instanceof HTMLElement) {
-    render(<RickGamePanel />, container)
+    render(h(RickGamePanel, {}), container)
   }
 }