generated from projects/testosmaximus
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:
parent
84a2004593
commit
7ca807f886
4
source/package-lock.json
generated
4
source/package-lock.json
generated
@ -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"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -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": {
|
||||||
|
|||||||
@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user