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

This commit is contained in:
Chipperfluff 2025-07-20 19:23:08 +02:00
parent 84a2004593
commit 7ca807f886
3 changed files with 30 additions and 44 deletions

View File

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

View File

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

View File

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