projects/funkyFlaskTest
1
0
Fork 0
generated from projects/testosmaximus
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update version to 1.3.12 in package.json and package-lock.json; enhance responsive design in RickGamePanel with dynamic canvas sizing

Browse Source
This commit is contained in:
Chipperfluff 2025-08-24 10:16:22 +02:00
parent 9a6b264b3e
commit 051e0526b6
3 changed files with 111 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
source/package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "@funky-flask-test/funky-flask-test",
"version": "1.3.11",
"version": "1.3.12",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@funky-flask-test/funky-flask-test",
"version": "1.3.11",
"version": "1.3.12",
"devDependencies": {
"@types/node": "^24.0.15",
"typescript": "^5.8.3",

2
source/package.json
View File

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

139
source/src/index.tsx
View File

@ -9,6 +9,12 @@ export class RickGamePanel {
private spawnTimer = 0
private frameTick = 0
// render sizing
private dpr = Math.max(1, window.devicePixelRatio || 1)
private viewW = 300 // CSS px
private viewH = 200 // CSS px
private resizeObs?: ResizeObserver
private player = {
x: 20,
y: 180,
@ -26,20 +32,75 @@ export class RickGamePanel {
this.drawStartup()
}
private get groundTop(): number {
return this.viewH - 20
}
private createUI() {
const panel = document.createElement('div')
panel.style.cssText = `
width: 100%;
height: 100%;
display: block;
position: relative;
`
this.canvas = document.createElement('canvas')
this.canvas.style.cssText = `border: 2px solid #333; background: #000; cursor: pointer;`
this.canvas.style.cssText = `border: 2px solid #333; background: #000; cursor: pointer; width: 100%; height: 100%; display: block;`
panel.appendChild(this.canvas)
// Wait for panel to be in DOM to get computed size
requestAnimationFrame(() => {
const rect = panel.getBoundingClientRect()
this.canvas.width = rect.width
this.canvas.height = rect.height
})
// 1) Append first so CSS can apply
this.container.appendChild(panel)
// 2) Observe size changes and (re)fit the canvas
const doResize = () => {
const rect = panel.getBoundingClientRect()
const cssW = Math.max(1, Math.floor(rect.width))
const cssH = Math.max(1, Math.floor(rect.height))
// keep CSS size for game logic coords
this.viewW = cssW
this.viewH = cssH
// update DPR in case it changed (e.g., window moved between screens)
this.dpr = Math.max(1, window.devicePixelRatio || 1)
// set backing store for crisp rendering
const bw = Math.max(1, Math.floor(cssW * this.dpr))
const bh = Math.max(1, Math.floor(cssH * this.dpr))
if (this.canvas.width !== bw || this.canvas.height !== bh) {
this.canvas.width = bw
this.canvas.height = bh
}
// ensure CSS size matches container (helps some layouts)
this.canvas.style.width = `${cssW}px`
this.canvas.style.height = `${cssH}px`
// map 1 unit in code to 1 CSS pixel
this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0)
// clamp player to ground after resize
if (this.player.y > this.groundTop) {
this.player.y = this.groundTop
this.player.vy = 0
this.player.onGround = true
}
// re-render a frame when not actively animating
if (!this.isStarted || this.isGameOver) {
this.isStarted ? this.draw() : this.drawStartup()
}
}
// Initial fit on next frame
requestAnimationFrame(doResize)
// Keep it live with ResizeObserver
this.resizeObs = new ResizeObserver(doResize)
this.resizeObs.observe(panel)
// Also react to DPR changes (some browsers fire resize; this is extra safe)
window.addEventListener('resize', doResize)
}
private attachListeners() {
@ -49,6 +110,7 @@ export class RickGamePanel {
this.player.onGround = false
}
})
this.canvas.addEventListener('click', () => {
if (!this.isStarted) {
this.isStarted = true
@ -70,11 +132,11 @@ export class RickGamePanel {
return
}
// Update player
// Update player (gravity)
this.player.vy += 0.7
this.player.y += this.player.vy
if (this.player.y >= 180) {
this.player.y = 180
if (this.player.y >= this.groundTop) {
this.player.y = this.groundTop
this.player.vy = 0
this.player.onGround = true
}
@ -107,10 +169,12 @@ export class RickGamePanel {
if (this.collide(this.player, e)) {
this.isGameOver = true
window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank')
this.draw()
return
}
}
for (const [i, p] of this.powerups.entries()) {
for (let i = this.powerups.length - 1; i >= 0; i--) {
const p = this.powerups[i]
if (this.collide(this.player, p)) {
this.score += 5
this.powerups.splice(i, 1)
@ -139,9 +203,9 @@ export class RickGamePanel {
private spawnEnemy() {
const type = Math.random() < 0.3 ? 'fly' : 'walk'
const size = 10
const y = type === 'fly' ? 120 + Math.random() * 20 : 180 - size
const y = type === 'fly' ? (this.viewH * 0.6) + Math.random() * 20 : this.groundTop - size + (this.player.height - 10) // keep similar feel
this.enemies.push({
x: 300,
x: this.viewW,
y,
size,
type,
@ -154,7 +218,7 @@ export class RickGamePanel {
}
private spawnPowerup() {
this.powerups.push({ x: 300, y: 150 + Math.random() * 20, size: 8 })
this.powerups.push({ x: this.viewW, y: (this.viewH * 0.5) + Math.random() * 20, size: 8 })
}
private collide(a: any, b: any) {
@ -170,7 +234,7 @@ export class RickGamePanel {
this.score = 0
this.spawnTimer = 0
this.isGameOver = false
this.player.y = 180
this.player.y = this.groundTop
this.player.vy = 0
this.player.onGround = true
this.player.frame = 0
@ -180,49 +244,62 @@ export class RickGamePanel {
private drawStartup() {
const ctx = this.ctx
ctx.clearRect(0, 0, this.viewW, this.viewH)
ctx.fillStyle = '#000'
ctx.fillRect(0, 0, 300, 200)
ctx.fillRect(0, 0, this.viewW, this.viewH)
ctx.fillStyle = '#fff'
ctx.font = 'bold 16px monospace'
ctx.fillText('Click to Start', 90, 100)
const text = 'Click to Start'
const tm = ctx.measureText(text)
const tx = (this.viewW - tm.width) / 2
const ty = this.viewH / 2
ctx.fillText(text, tx, ty)
}
private draw() {
const ctx = this.ctx
ctx.clearRect(0, 0, 300, 200)
ctx.fillStyle = '#222'
ctx.fillRect(0, 0, 300, 200)
ctx.fillStyle = '#444'
ctx.fillRect(0, 190, 300, 10)
ctx.clearRect(0, 0, this.viewW, this.viewH)
// Draw enemies
// background
ctx.fillStyle = '#222'
ctx.fillRect(0, 0, this.viewW, this.viewH)
// ground
ctx.fillStyle = '#444'
ctx.fillRect(0, this.viewH - 10, this.viewW, 10)
// enemies
this.enemies.forEach(e => {
if (e.type === 'walk') this.drawDogWalk(e.x, e.y, e.frame)
else this.drawDogFly(e.x, e.y, e.frame)
})
// Powerups
// powerups
this.powerups.forEach(p => this.drawNut(p.x, p.y))
// Player
// player
this.drawSquirrel(this.player.x, this.player.y, this.player.frame)
// Score
// score
ctx.fillStyle = '#fff'
ctx.font = '12px monospace'
ctx.fillText(`Score: ${this.score}`, 200, 20)
const s = `Score: ${this.score}`
const sw = ctx.measureText(s).width
ctx.fillText(s, this.viewW - sw - 10, 20)
// Game over
// game over
if (this.isGameOver) {
ctx.font = 'bold 16px monospace'
ctx.fillText('Game Over! Click to restart', 50, 100)
const msg = 'Game Over! Click to restart'
const m = ctx.measureText(msg)
ctx.fillText(msg, (this.viewW - m.width) / 2, this.viewH / 2)
}
}
private drawSquirrel(x: number, y: number, frame: number) {
const ctx = this.ctx
ctx.fillStyle = frame % 2 === 0 ? '#3cf' : '#6df'
ctx.fillRect(x, y, 10, 10) // body
ctx.fillRect(x, y, this.player.width, this.player.height) // body
ctx.fillStyle = '#9cf'
ctx.fillRect(x - 4, y + 2, 5, 6) // tail
}