const GAME_W = 1000; const GAME_H = 300; const BELT_Y = 20; const BELT_H = 20; const CHUTE_Y = 90; const CHUTE_H = 180; const CHUTE_W = GAME_W / 3; const CHUTES = [ { label: 'Left', x: 0, color: 0x4a90d9, colorHex: '#4a90d9' }, { label: 'Center', x: CHUTE_W, color: 0x7b68ee, colorHex: '#7b68ee' }, { label: 'Right', x: CHUTE_W * 2, color: 0xe8a838, colorHex: '#e8a838' }, ]; const LANE_KEYS = ['left', 'center', 'right']; const BOX_SIZE = 36; const BOX_START_X = -BOX_SIZE; const BOX_BELT_Y = BELT_Y + (BELT_H - BOX_SIZE) / 2; const EXP_X = GAME_W - 44; const EXP_Y = BELT_Y + BELT_H / 2; const PACKAGES = [ { fragile: true, weight: 3, destination: 'warehouse', correct: 'left', value: 4800 }, { fragile: false, weight: 15, destination: 'store', correct: 'right', value: 12500 }, { fragile: false, weight: 7, destination: 'warehouse', correct: 'center', value: 340 }, { fragile: true, weight: 20, destination: 'store', correct: 'left', value: 24000 }, { fragile: false, weight: 5, destination: 'store', correct: 'center', value: 280 }, ]; let sceneRef = null; function makeSorterScene(api) { return { key: 'Sorter', create() { sceneRef = this; this.totalDamage = 0; this.attemptCount = 0; this.pkgIndex = 0; this.phase = 'idle'; this.boxX = BOX_START_X; this.boxY = BOX_BELT_Y; this.boxVX = 3; this.boxVY = 0; this.chosenLane = null; this.flashTimer = 0; this.flashOk = false; this.results = []; this.combined = null; this.winFired = false; this.pyodide = null; this.errorMsg = null; this.particles = []; this.damagePopups = []; this.counterShake = 0; this.g = this.add.graphics(); this.overlay = this.add.rectangle(0, 0, GAME_W, GAME_H, 0x000000, 0) .setOrigin(0, 0) .setDepth(50) .setVisible(false); this.centerMessage = this.add.text(GAME_W / 2, CHUTE_Y - 8, '', { fontFamily: 'system-ui, sans-serif', fontSize: '16px', fontStyle: 'bold', color: '#ffffff', }).setOrigin(0.5).setDepth(55).setVisible(false); this.errorText = this.add.text(12, 22, '', { fontFamily: 'monospace', fontSize: '11px', color: '#ff6b6b', lineSpacing: 6, }).setOrigin(0, 0).setDepth(60).setVisible(false); this.doneLayer = this.add.container(0, 0).setDepth(70).setVisible(false); this.doneBg = this.add.rectangle(0, 0, GAME_W, GAME_H, 0x000000, 0.92) .setOrigin(0, 0); this.doneTitle = this.add.text(GAME_W / 2, GAME_H / 2 - 40, '', { fontFamily: 'system-ui, sans-serif', fontSize: '24px', fontStyle: 'bold', color: '#4ade80', align: 'center', }).setOrigin(0.5); this.doneLine1 = this.add.text(GAME_W / 2, GAME_H / 2 - 12, '', { fontFamily: 'system-ui, sans-serif', fontSize: '13px', color: '#94a3b8', align: 'center', }).setOrigin(0.5); this.doneLine2 = this.add.text(GAME_W / 2, GAME_H / 2 + 10, '', { fontFamily: 'system-ui, sans-serif', fontSize: '13px', color: '#94a3b8', align: 'center', }).setOrigin(0.5); this.doneLine3 = this.add.text(GAME_W / 2, GAME_H / 2 + 28, '', { fontFamily: 'system-ui, sans-serif', fontSize: '13px', color: '#94a3b8', align: 'center', }).setOrigin(0.5); this.doneLine4 = this.add.text(GAME_W / 2, GAME_H / 2 + 52, '', { fontFamily: 'system-ui, sans-serif', fontSize: '13px', fontStyle: 'bold', color: '#4ade80', align: 'center', }).setOrigin(0.5); this.doneLayer.add([ this.doneBg, this.doneTitle, this.doneLine1, this.doneLine2, this.doneLine3, this.doneLine4, ]); this.cameras.main.setBackgroundColor('#1e1e2e'); }, update() { this.stepGame(); this.renderGame(); }, extend: { async runSession(combined) { this.combined = combined; this.pyodide = await api.getPyodide(); this.errorMsg = null; this.pkgIndex = 0; this.results = []; this.winFired = false; this.chosenLane = null; this.boxX = BOX_START_X; this.boxY = BOX_BELT_Y; this.phase = 'idle'; this.particles = []; this.damagePopups = []; this.boxVX = 3; this.boxVY = 0; this.flashTimer = 0; this.flashOk = false; this.attemptCount++; this.hideError(); this.hideDone(); await this.runPackage(0); }, async runPackage(idx) { if (idx >= PACKAGES.length) { this.phase = 'done'; return; } const pkg = PACKAGES[idx]; try { await this.pyodide.runPythonAsync( `fragile = ${pkg.fragile ? 'True' : 'False'}\n` + `weight = ${pkg.weight}\n` + `destination = "${pkg.destination}"\n` ); } catch (e) {} const result = await api.runPythonCombined(this.combined); if (!result.ok) { this.errorMsg = result.error ?? result.stderr ?? 'Unknown error'; this.showError(this.errorMsg); return; } let raw = null; try { const v = this.pyodide.globals.get('lane'); raw = v ? v.toString().toLowerCase().trim() : null; } catch (e) {} if (!LANE_KEYS.includes(raw)) { this.chosenLane = 'center'; this.flashOk = false; } else { this.chosenLane = raw; this.flashOk = (raw === pkg.correct); } this.results.push(this.flashOk); this.boxX = BOX_START_X; this.boxY = BOX_BELT_Y; this.boxVX = 3; this.boxVY = 0; this.phase = 'sliding'; }, stepGame() { if (this.errorMsg || this.phase === 'done') { if (this.phase === 'done') this.updateDoneScreen(); return; } this.particles = this.particles.filter((p) => p.life > 0); this.particles.forEach((p) => { p.x += p.vx; p.y += p.vy; p.vy += 0.3; p.life--; }); this.damagePopups = this.damagePopups.filter((p) => p.life > 0); this.damagePopups.forEach((p) => { p.y += p.vy; p.life--; }); if (this.counterShake > 0) this.counterShake--; const pkg = PACKAGES[this.pkgIndex]; if (!pkg) return; if (this.phase === 'sliding') { const targetX = this.chuteCenter(this.chosenLane); if (this.flashOk) { if (this.boxX + BOX_SIZE / 2 >= targetX - 4) { this.boxVY += 0.6; } this.boxX += this.boxVX; this.boxY += this.boxVY; if (this.boxY > GAME_H - 10) { this.spawnSuccessParticles(this.boxX + BOX_SIZE / 2, CHUTE_Y); this.phase = 'flash'; this.flashTimer = 40; } } else { this.boxX += this.boxVX; if (this.boxX + BOX_SIZE >= EXP_X - 40) { this.phase = 'exploding'; } } } else if (this.phase === 'exploding') { this.boxX += (EXP_X - BOX_SIZE / 2 - this.boxX) * 0.2; this.boxY += (BELT_Y + BELT_H / 2 - BOX_SIZE / 2 - this.boxY) * 0.2; const tx = EXP_X - BOX_SIZE / 2; const ty = BELT_Y + BELT_H / 2 - BOX_SIZE / 2; if (Math.abs(tx - this.boxX) < 3 && Math.abs(ty - this.boxY) < 3) { this.spawnExplosionParticles(EXP_X, EXP_Y); this.totalDamage += pkg.value; this.counterShake = 18; this.damagePopups.push({ x: EXP_X - 30, y: EXP_Y - 20, vy: -1.2, life: 60, maxLife: 60, amount: pkg.value, }); this.phase = 'flash'; this.flashTimer = 50; } } else if (this.phase === 'flash') { this.flashTimer--; if (this.flashTimer <= 0) { this.pkgIndex++; this.chosenLane = null; this.boxX = BOX_START_X; this.boxY = BOX_BELT_Y; this.boxVX = 3; this.boxVY = 0; if (this.pkgIndex < PACKAGES.length) { this.phase = 'idle'; this.runPackage(this.pkgIndex); } else { this.phase = 'done'; this.updateDoneScreen(); } } } }, renderGame() { this.g.clear(); this.drawBackground(); this.drawChutes(); this.drawBelt(); this.drawExploder(); this.drawDamageCounter(); this.drawScoreboard(); this.drawParticles(); this.drawDamagePopups(); if (this.phase !== 'idle' && this.phase !== 'done' && !this.errorMsg) { this.drawBox(this.boxX, this.boxY, PACKAGES[this.pkgIndex]); } if (this.phase === 'flash' && !this.errorMsg) { this.drawFlashOverlay(); } else { this.overlay.setVisible(false); this.centerMessage.setVisible(false); } if (this.errorMsg) { this.showError(this.errorMsg); } if (this.phase === 'done') { this.doneLayer.setVisible(true); } }, drawBackground() { this.g.fillStyle(0x1e1e2e, 1); this.g.fillRect(0, 0, GAME_W, GAME_H); }, drawBelt() { this.g.fillStyle(0x444444, 1); this.g.fillRect(0, BELT_Y, GAME_W, BELT_H); this.g.fillStyle(0x555555, 1); for (let x = -20; x < GAME_W + 20; x += 30) { this.g.fillRect(x, BELT_Y, 15, BELT_H); } this.g.fillStyle(0x666666, 1); this.g.fillRect(0, BELT_Y, GAME_W, 4); this.g.fillRect(0, BELT_Y + BELT_H - 4, GAME_W, 4); this.addOrUpdateText('_beltLabel', 8, BELT_Y - 4, 'CONVEYOR BELT', { fontFamily: 'monospace', fontSize: '9px', color: '#aaaaaa', }, 0, 0); }, drawChutes() { CHUTES.forEach((c, i) => { this.g.fillStyle(c.color, 0.15); this.g.fillRect(c.x + 2, CHUTE_Y, CHUTE_W - 4, CHUTE_H); this.g.lineStyle(2, c.color, 1); this.g.strokeRect(c.x + 2, CHUTE_Y, CHUTE_W - 4, CHUTE_H); this.addOrUpdateText(`_chuteLabel_${i}`, c.x + CHUTE_W / 2, CHUTE_Y + 18, c.label, { fontFamily: 'system-ui, sans-serif', fontSize: '12px', fontStyle: 'bold', color: c.colorHex, }, 0.5, 0.5); this.addOrUpdateText(`_chuteKey_${i}`, c.x + CHUTE_W / 2, CHUTE_Y + 32, `"${LANE_KEYS[i]}"`, { fontFamily: 'monospace', fontSize: '10px', color: this.hexToRgbaText(c.colorHex, 0.7), }, 0.5, 0.5); }); }, drawExploder() { const x = EXP_X - 40; const y = BELT_Y - 14; const w = 84; const h = BELT_H + 28; this.g.fillStyle(0x3a1a1a, 1); this.g.lineStyle(2, 0xff4400, 1); this.g.fillRoundedRect(x, y, w, h, 6); this.g.strokeRoundedRect(x, y, w, h, 6); this.addOrUpdateText('_expLabel1', EXP_X, BELT_Y + 4, '💥 DESTRUCTOR', { fontFamily: 'monospace', fontSize: '10px', fontStyle: 'bold', color: '#ff4400', }, 0.5, 0); this.addOrUpdateText('_expLabel2', EXP_X, BELT_Y + 14, 'per company policy', { fontFamily: 'monospace', fontSize: '7px', color: '#884422', }, 0.5, 0); }, drawDamageCounter() { const sx = this.counterShake > 0 ? (Math.random() - 0.5) * 3 : 0; const sy = this.counterShake > 0 ? (Math.random() - 0.5) * 3 : 0; const x = EXP_X + sx; const y = BELT_Y + BELT_H + 18 + sy; this.addOrUpdateText('_faultLabel', x, y, 'YOUR FAULT:', { fontFamily: 'monospace', fontSize: '9px', color: '#666666', }, 0.5, 0.5); this.addOrUpdateText('_faultValue', x, y + 14, '$' + this.totalDamage.toLocaleString(), { fontFamily: 'monospace', fontSize: this.totalDamage > 99999 ? '11px' : '13px', fontStyle: 'bold', color: this.totalDamage > 0 ? '#ff4444' : '#444444', }, 0.5, 0.5); if (this.attemptCount > 1) { this.addOrUpdateText('_attemptLabel', x, y + 26, `attempt #${this.attemptCount}`, { fontFamily: 'monospace', fontSize: '8px', color: '#555555', }, 0.5, 0.5).setVisible(true); } else if (this._attemptLabel) { this._attemptLabel.setVisible(false); } }, drawParticles() { this.particles.forEach((p) => { const alpha = Math.min(1, p.life / 40); this.g.fillStyle(p.color, alpha); this.g.fillCircle(p.x, p.y, 3); }); }, drawDamagePopups() { for (let i = 0; i < 12; i++) { const key = `_popup_${i}`; if (!this[key]) { this[key] = this.add.text(0, 0, '', { fontFamily: 'monospace', fontSize: '13px', fontStyle: 'bold', color: '#ff4444', }).setOrigin(0.5).setDepth(20).setVisible(false); } this[key].setVisible(false); } this.damagePopups.forEach((p, i) => { const key = `_popup_${i}`; if (!this[key]) return; const alpha = p.life / p.maxLife; this[key] .setText('-$' + p.amount.toLocaleString()) .setPosition(p.x, p.y) .setAlpha(alpha) .setVisible(true); }); }, drawBox(bx, by, pkg) { this.g.fillStyle(0x000000, 0.3); this.g.fillRect(bx + 3, by + 3, BOX_SIZE, BOX_SIZE); this.g.fillStyle(pkg.fragile ? 0xf0c040 : 0xc07840, 1); this.g.fillRect(bx, by, BOX_SIZE, BOX_SIZE); this.g.lineStyle(2, pkg.fragile ? 0xc8a000 : 0x8a5020, 1); this.g.strokeRect(bx, by, BOX_SIZE, BOX_SIZE); if (pkg.fragile) { this.addOrUpdateText('_boxMain', bx + BOX_SIZE / 2, by + 16, '🥚', { fontFamily: 'system-ui, sans-serif', fontSize: '13px', color: '#000000', }, 0.5, 0.5); } else { this.addOrUpdateText('_boxMain', bx + BOX_SIZE / 2, by + 16, pkg.weight + 'kg', { fontFamily: 'monospace', fontSize: '9px', fontStyle: 'bold', color: '#ffffff', }, 0.5, 0.5); } this.addOrUpdateText('_boxValue', bx + BOX_SIZE / 2, by + BOX_SIZE - 5, '$' + pkg.value.toLocaleString(), { fontFamily: 'monospace', fontSize: '8px', fontStyle: 'bold', color: '#ffffff', }, 0.5, 0.5); this._boxMain.setVisible(true); this._boxValue.setVisible(true); }, drawFlashOverlay() { const alpha = (this.flashTimer / 50) * 0.35; this.overlay .setFillStyle(this.flashOk ? 0x32dc64 : 0xdc3232, alpha) .setVisible(true); this.centerMessage .setText(this.flashOk ? '✓ Nice!' : '💥 Destroyed!') .setColor(this.flashOk ? '#4ade80' : '#f87171') .setVisible(true); }, drawScoreboard() { this.addOrUpdateText('_pkgLabel', 60, BELT_Y + BELT_H + 12, 'PACKAGES', { fontFamily: 'monospace', fontSize: '9px', color: '#666666', }, 0.5, 0.5); for (let i = 0; i < PACKAGES.length; i++) { const x = 60 - ((PACKAGES.length - 1) * 24) / 2 + i * 24; const y = BELT_Y + BELT_H + 24; let text = '○'; let color = '#444444'; if (i < this.results.length) { text = this.results[i] ? '✓' : '✗'; color = this.results[i] ? '#4ade80' : '#f87171'; } else if (i === this.pkgIndex && this.phase !== 'done') { text = '→'; color = '#ffffff'; } this.addOrUpdateText(`_score_${i}`, x, y, text, { fontFamily: 'monospace', fontSize: '9px', color, }, 0.5, 0.5); } }, updateDoneScreen() { const allCorrect = this.results.every((r) => r); const wrong = this.results.filter((r) => !r).length; this.doneLayer.setVisible(true); this.doneBg.setFillStyle(allCorrect ? 0x001400 : 0x140000, 0.92); if (allCorrect) { this.doneTitle.setText('✓ All Sorted!').setColor('#4ade80').setFontSize(24); const years = Math.round(this.totalDamage / 52000); if (this.totalDamage > 0) { this.doneLine1.setText(`$${this.totalDamage.toLocaleString()} in damages across ${this.attemptCount} attempt${this.attemptCount > 1 ? 's' : ''}.`).setColor('#94a3b8'); this.doneLine2.setText(`That's coming straight out of your paycheck.`).setColor('#94a3b8'); this.doneLine3.setText(`Estimated repayment time: ${years.toLocaleString()} years.`).setColor('#94a3b8'); this.doneLine4.setText(`But you passed. So... good job.`).setColor('#4ade80'); } else { this.doneLine1.setText(`$0 in damages. First try. Insufferably perfect.`).setColor('#94a3b8'); this.doneLine2.setText(`Good job. We hate you.`).setColor('#4ade80'); this.doneLine3.setText('').setColor('#94a3b8'); this.doneLine4.setText('').setColor('#4ade80'); } if (!this.winFired) { this.winFired = true; this.time.delayedCall(800, () => api.notifyWin()); } } else { this.doneTitle .setText(`💥 ${wrong} package${wrong > 1 ? 's' : ''} destroyed.`) .setColor('#f87171') .setFontSize(22); this.doneLine1 .setText(`Running total: $${this.totalDamage.toLocaleString()} in damages.`) .setColor('#94a3b8'); this.doneLine2 .setText('Fix your conditions and try again.') .setColor('#f87171'); this.doneLine3.setText(''); this.doneLine4.setText(''); } }, hideDone() { this.doneLayer.setVisible(false); }, showError(msg) { this.errorMsg = msg; this.doneLayer.setVisible(false); this.overlay.setVisible(false); this.centerMessage.setVisible(false); const lines = msg.split('\n').slice(0, 6).join('\n'); this.errorText.setText(lines).setVisible(true); }, hideError() { this.errorMsg = null; this.errorText.setVisible(false); }, spawnExplosionParticles(x, y) { const colors = [0xff4444, 0xff8800, 0xffcc00, 0xff2222, 0xffffff]; for (let i = 0; i < 28; i++) { const angle = (Math.PI * 2 * i) / 28 + Math.random() * 0.4; const speed = 2 + Math.random() * 4; this.particles.push({ x, y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed - 2, life: 30 + Math.random() * 20, color: colors[Math.floor(Math.random() * colors.length)], }); } }, spawnSuccessParticles(x, y) { const colors = [0x4ade80, 0xfacc15, 0x38bdf8, 0xa78bfa, 0xffffff]; for (let i = 0; i < 20; i++) { const angle = -Math.PI / 2 + (Math.random() - 0.5) * Math.PI; const speed = 1.5 + Math.random() * 3; this.particles.push({ x, y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, life: 25 + Math.random() * 15, color: colors[Math.floor(Math.random() * colors.length)], }); } }, chuteCenter(lane) { return CHUTES[LANE_KEYS.indexOf(lane)].x + CHUTE_W / 2; }, hexToRgbaText(hex, alpha) { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return `rgba(${r},${g},${b},${alpha})`; }, addOrUpdateText(key, x, y, text, style, ox = 0, oy = 0) { if (!this[key]) { this[key] = this.add.text(x, y, text, style).setDepth(10); this[key].setOrigin(ox, oy); } else { this[key].setPosition(x, y).setText(text).setStyle(style).setOrigin(ox, oy).setVisible(true).setAlpha(1); } return this[key]; }, }, }; } new api.Phaser.Game({ type: api.Phaser.AUTO, parent: api.parent, width: GAME_W, height: GAME_H, backgroundColor: '#1e1e2e', scale: { mode: api.Phaser.Scale.FIT, autoCenter: api.Phaser.Scale.CENTER_BOTH, }, scene: [makeSorterScene(api)], }); api.setRunHandler(async (combined) => { while (!sceneRef) { await new Promise((r) => setTimeout(r, 16)); } await sceneRef.runSession(combined); });