fix: update version to 1.2.0 in package.json and package-lock.json; refactor RickPanel to RickGamePanel with enhanced game mechanics

This commit is contained in:
Chipperfluff 2025-07-20 15:15:42 +02:00
parent ea6619d7fa
commit a897853426
3 changed files with 69 additions and 38 deletions

View File

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

View File

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

View File

@ -1,28 +1,69 @@
import { h, render, Component } from 'nano-jsx'
class RickPanel extends Component {
count = 0
stayFocused = true
class RickGamePanel extends Component {
canvas?: HTMLCanvasElement
ctx?: CanvasRenderingContext2D
x = 20
y = 180
vy = 0
onGround = false
gravity = 0.7
jumpPower = -12
isGameOver = false
handleClick = () => {
this.count++
frame() {
if (!this.ctx || this.isGameOver) return
const win = window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank')
this.vy += this.gravity
this.y += this.vy
if (!this.stayFocused && win) {
win.focus()
if (this.y >= 180) {
this.y = 180
this.vy = 0
this.onGround = true
}
this.update?.()
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
}
this.draw()
requestAnimationFrame(() => this.frame())
}
handleCheckbox = (e: Event) => {
const input = e.target as HTMLInputElement
this.stayFocused = input.checked
draw() {
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)
}
handleSansClick = () => {
window.open('https://www.youtube.com/watch?v=ZcoqR9Bwx1Y', '_blank') // Megalovania 🎶
handleJump = () => {
if (this.onGround) {
this.vy = this.jumpPower
this.onGround = false
}
}
mounted() {
this.canvas = this.ref('game') as HTMLCanvasElement
this.ctx = this.canvas?.getContext('2d') || undefined
this.canvas?.addEventListener('click', this.handleJump)
this.frame()
}
render() {
@ -40,30 +81,20 @@ class RickPanel extends Component {
"
>
<div style="margin-bottom: 10px;">
<strong>🔥 Rickroll Panel</strong>
<strong>🎮 Rickjump Game</strong>
</div>
<button
onclick={this.handleClick}
style="padding: 6px 12px; border: none; background: #007bff; color: white; border-radius: 5px; cursor: pointer;"
>
Rickroll Me ({this.count})
</button>
<div style="margin-top: 10px; font-size: 0.9em;">
<label>
<input
type="checkbox"
onchange={this.handleCheckbox}
checked={this.stayFocused}
style="margin-right: 6px;"
/>
Stay in new tab
</label>
</div>
<canvas
width="300"
height="200"
ref="game"
style="border: 1px solid #aaa; background: #fff;"
></canvas>
<div
onclick={this.handleSansClick}
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.
@ -79,6 +110,6 @@ export function insertRickPanel(target: HTMLElement | string = document.body): v
: target
if (container instanceof HTMLElement) {
render(<RickPanel />, container)
render(<RickGamePanel />, container)
}
}