|
|
<!doctype html> |
|
|
<html lang="en"> |
|
|
|
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<title>FunctionGemma Physics Playground</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/poly-decomp@0.3.0/build/decomp.min.js"></script> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" /> |
|
|
<link |
|
|
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=Fira+Code:wght@500;700&display=swap" |
|
|
rel="stylesheet" /> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
fontFamily: { |
|
|
sans: ["Space Grotesk", "sans-serif"], |
|
|
mono: ["Fira Code", "monospace"], |
|
|
}, |
|
|
colors: { |
|
|
"neo-bg": "#f0f0f0", |
|
|
"neo-black": "#1a1a1a", |
|
|
"neo-white": "#ffffff", |
|
|
"neo-purple": "#a78bfa", |
|
|
"neo-yellow": "#facc15", |
|
|
"neo-green": "#4ade80", |
|
|
"neo-red": "#f87171", |
|
|
"neo-blue": "#60a5fa", |
|
|
"neo-gray": "#94a3b8", |
|
|
}, |
|
|
boxShadow: { |
|
|
neo: "4px 4px 0px 0px #000000", |
|
|
"neo-sm": "2px 2px 0px 0px #000000", |
|
|
"neo-lg": "8px 8px 0px 0px #000000", |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}; |
|
|
</script> |
|
|
|
|
|
<style> |
|
|
body { |
|
|
overflow: hidden; |
|
|
background-color: #e0e7ff; |
|
|
background-image: radial-gradient(#a5b4fc 1px, transparent 1px); |
|
|
background-size: 20px 20px; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: #fff; |
|
|
border-left: 2px solid black; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #000; |
|
|
border: 2px solid #fff; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #333; |
|
|
} |
|
|
|
|
|
.neo-border { |
|
|
border: 3px solid black; |
|
|
} |
|
|
|
|
|
.neo-btn { |
|
|
transition: all 0.1s ease-in-out; |
|
|
} |
|
|
|
|
|
.neo-btn:active { |
|
|
transform: translate(2px, 2px); |
|
|
box-shadow: 2px 2px 0px 0px #000000; |
|
|
} |
|
|
|
|
|
.level-card { |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.level-card:hover:not(.locked) { |
|
|
transform: translate(-2px, -2px); |
|
|
box-shadow: 6px 6px 0px 0px #000000; |
|
|
} |
|
|
|
|
|
.locked { |
|
|
background-color: #e2e8f0; |
|
|
cursor: not-allowed; |
|
|
opacity: 0.7; |
|
|
background-image: repeating-linear-gradient(45deg, #cbd5e1 0, #cbd5e1 1px, transparent 0, transparent 50%); |
|
|
background-size: 10px 10px; |
|
|
} |
|
|
|
|
|
.code-editor { |
|
|
font-family: "Fira Code", monospace; |
|
|
background-color: #ffffff; |
|
|
color: #000000; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.toggle-checkbox:checked { |
|
|
right: 0; |
|
|
border-color: #4ade80; |
|
|
} |
|
|
|
|
|
.toggle-checkbox:checked+.toggle-label { |
|
|
background-color: #4ade80; |
|
|
} |
|
|
|
|
|
|
|
|
.action-item .btn-delete { |
|
|
opacity: 0; |
|
|
transition: opacity 0.2s; |
|
|
} |
|
|
|
|
|
.action-item:hover .btn-delete { |
|
|
opacity: 1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body class="h-screen w-screen flex flex-col md:flex-row p-4 gap-4"> |
|
|
|
|
|
<div id="loading-overlay" class="fixed inset-0 bg-black/90 z-50 flex flex-col items-center justify-center"> |
|
|
<div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-neo-green mb-4"></div> |
|
|
<div class="text-white font-mono font-bold text-xl">LOADING MODEL...</div> |
|
|
<div class="text-gray-400 font-mono text-sm mt-2">This may take a moment</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full md:w-1/3 lg:w-1/4 flex flex-col neo-border shadow-neo bg-white h-full z-10 relative"> |
|
|
|
|
|
<div class="h-4 w-full bg-neo-black"></div> |
|
|
|
|
|
<div class="p-6 border-b-2 border-black bg-neo-yellow flex justify-between items-center shrink-0"> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold text-black uppercase tracking-tighter">Function <span |
|
|
class="text-white bg-black px-1">Gemma</span></h1> |
|
|
<div class="text-xs font-mono font-bold text-black mt-1">PHYSICS PLAYGROUND</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="view-menu" class="flex-1 overflow-y-auto p-6 bg-white hidden"> |
|
|
<h2 class="font-bold text-xl mb-4 border-b-2 border-black pb-2">SELECT LEVEL</h2> |
|
|
<div id="level-grid" class="grid grid-cols-2 gap-4"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="view-game" class="flex-1 flex flex-col overflow-hidden relative"> |
|
|
<div class="overflow-y-auto flex-1 p-6 flex flex-col gap-6"> |
|
|
|
|
|
<div> |
|
|
<div class="flex items-center gap-2 mb-2"> |
|
|
<button id="btn-back" |
|
|
class="neo-btn p-2 border-2 border-black shadow-neo-sm bg-white hover:bg-gray-100 text-xs font-bold"><i |
|
|
class="fas fa-arrow-left"></i> LEVELS</button> |
|
|
<div class="font-bold text-sm bg-black text-white px-2 py-1 ml-auto" id="level-indicator">LEVEL 1</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="neo-border p-4 bg-neo-blue shadow-neo-sm relative overflow-hidden group"> |
|
|
<div |
|
|
class="absolute -right-4 -top-4 w-16 h-16 bg-white/20 rounded-full group-hover:scale-150 transition-transform"> |
|
|
</div> |
|
|
<div class="flex justify-between items-center mb-3 relative z-10"> |
|
|
<h2 class="font-bold text-black text-lg border-b-2 border-black inline-block bg-white px-2" |
|
|
id="level-title">...</h2> |
|
|
<span id="timer-display" |
|
|
class="font-mono text-xl font-bold bg-black text-neo-green px-2 py-0.5 border-2 border-black shadow-[2px_2px_0px_0px_#fff]">0.00s</span> |
|
|
</div> |
|
|
<p class="text-sm text-black font-medium opacity-90 mb-2" id="level-desc">...</p> |
|
|
|
|
|
|
|
|
<div class="mt-2"> |
|
|
<button id="btn-hint" |
|
|
class="text-xs font-bold border-2 border-black px-2 py-1 bg-white hover:bg-yellow-100 shadow-neo-sm flex items-center gap-2"><i |
|
|
class="fas fa-lightbulb text-yellow-500"></i> SHOW HINT</button> |
|
|
<div id="hint-content" class="mt-2 bg-white/50 p-2 border-2 border-black text-xs font-mono hidden"><i |
|
|
class="fas fa-code mr-1"></i> <span id="level-hint-text">...</span></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col gap-2 shrink-0"> |
|
|
<div class="flex justify-between items-end"> |
|
|
<div class="flex gap-2 items-center"> |
|
|
<label class="text-sm font-bold bg-black text-white px-2 py-0.5 shadow-neo-sm">COMMAND</label> |
|
|
<button id="btn-solution" |
|
|
class="text-xs font-bold border-2 border-black px-2 py-0.5 hover:bg-black hover:text-white transition-colors bg-white shadow-neo-sm" |
|
|
title="Load Example Solution"><i class="fas fa-magic"></i> VIEW SOLUTION</button> |
|
|
</div> |
|
|
<div class="text-xs font-bold text-gray-500" id="star-reqs">3★ < 2 items</div> |
|
|
</div> |
|
|
<div class="relative flex flex-col gap-2"> |
|
|
<textarea id="code-input" |
|
|
class="code-editor w-full h-24 p-4 border-2 border-black focus:outline-none focus:ring-4 focus:ring-neo-purple/50 resize-none text-sm shadow-neo-sm" |
|
|
spellcheck="false" placeholder="e.g., Add a circle in the middle. You can execute multiple commands by separating them with new lines."></textarea> |
|
|
<button id="btn-execute" |
|
|
class="neo-btn bg-neo-purple border-2 border-black shadow-neo-sm text-black font-bold py-2 hover:bg-purple-400 disabled:opacity-50 disabled:cursor-not-allowed"><i |
|
|
class="fas fa-terminal"></i> EXECUTE</button> |
|
|
</div> |
|
|
<div id="error-log" |
|
|
class="text-white bg-neo-red border-2 border-black text-xs font-bold px-2 py-1 shadow-neo-sm hidden"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 min-h-0 flex flex-col"> |
|
|
<label class="text-sm font-bold bg-black text-white px-2 py-0.5 shadow-neo-sm w-max mb-1">SCENE |
|
|
OBJECTS</label> |
|
|
<div id="action-list" |
|
|
class="flex-1 overflow-y-auto border-2 border-black bg-gray-50 p-2 space-y-2 shadow-neo-sm min-h-[100px]"> |
|
|
<div class="text-xs text-gray-400 text-center mt-4 italic">No elements added yet.</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-4 bg-gray-100 border-t-2 border-black flex gap-3 shrink-0"> |
|
|
<button id="btn-play" |
|
|
class="neo-btn flex-1 bg-neo-green border-2 border-black shadow-neo text-black font-bold py-3 px-4 flex items-center justify-center gap-2 hover:bg-green-400"><i |
|
|
class="fas fa-play"></i> RUN</button> |
|
|
<button id="btn-reset" |
|
|
class="neo-btn px-4 py-3 bg-white border-2 border-black shadow-neo text-black font-bold hover:bg-gray-100" |
|
|
title="Reset Simulation"> |
|
|
<i class="fas fa-undo"></i> |
|
|
</button> |
|
|
<button id="btn-clear-all" |
|
|
class="neo-btn px-4 py-3 bg-white border-2 border-black shadow-neo text-black font-bold hover:bg-neo-red hover:text-white transition-colors" |
|
|
title="Clear All Objects"> |
|
|
<i class="fas fa-trash-alt"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 relative flex items-center justify-center p-2"> |
|
|
|
|
|
<div id="canvas-container" |
|
|
class="w-full h-full bg-white neo-border shadow-neo flex justify-center items-center relative overflow-hidden"> |
|
|
|
|
|
<div id="win-message" |
|
|
class="absolute z-50 hidden w-full h-full flex items-center justify-center bg-black/50 backdrop-blur-sm"> |
|
|
<div |
|
|
class="bg-neo-yellow border-4 border-black p-8 shadow-neo-lg text-center transform rotate-2 max-w-md w-full m-4"> |
|
|
<h2 class="text-4xl font-black mb-2 text-black">LEVEL CLEAR!</h2> |
|
|
|
|
|
<div class="flex justify-center gap-2 mb-4 text-4xl text-white drop-shadow-md" id="result-stars"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="text-sm font-bold mb-6 font-mono">ITEMS USED: <span id="result-items">0</span></div> |
|
|
|
|
|
<div class="flex flex-col gap-2"> |
|
|
<button id="btn-next-level" |
|
|
class="bg-black text-white font-bold py-3 px-6 border-2 border-transparent hover:bg-neo-green hover:text-black hover:border-black transition-colors shadow-neo-sm">NEXT |
|
|
LEVEL <i class="fas fa-arrow-right ml-2"></i></button> |
|
|
<button onclick="document.getElementById('btn-reset').click()" |
|
|
class="bg-white text-black font-bold py-2 px-6 border-2 border-black hover:bg-gray-100 transition-colors shadow-neo-sm">REPLAY</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute top-6 right-8 pointer-events-none z-20"> |
|
|
<div id="status-badge" |
|
|
class="bg-white border-2 border-black shadow-neo-sm px-4 py-2 font-black text-sm uppercase tracking-widest flex items-center gap-2"> |
|
|
<div class="w-3 h-3 bg-red-500 rounded-full border border-black animate-pulse"></div> |
|
|
READY |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<script type="module"> |
|
|
import { AutoModelForCausalLM, AutoTokenizer } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1"; |
|
|
|
|
|
|
|
|
const CONFIG = { |
|
|
width: 1000, |
|
|
height: 750, |
|
|
gridWidth: 20, |
|
|
gridHeight: 15, |
|
|
colors: { |
|
|
background: "#ffffff", |
|
|
wall: "#1a1a1a", |
|
|
ball: "#60a5fa", |
|
|
goal: "#4ade80", |
|
|
userShape: "#facc15", |
|
|
}, |
|
|
}; |
|
|
|
|
|
const STORAGE_KEY = "functiongemma_save_v1"; |
|
|
|
|
|
|
|
|
const pX = (units) => (units * CONFIG.width) / CONFIG.gridWidth; |
|
|
const pY = (units) => (units * CONFIG.height) / CONFIG.gridHeight; |
|
|
const strokeStyle = { strokeStyle: "#000000", lineWidth: 3 }; |
|
|
|
|
|
|
|
|
const LEVELS = [ |
|
|
{ |
|
|
id: 0, |
|
|
title: "Tutorial", |
|
|
difficulty: 1, |
|
|
desc: "Welcome! Press RUN to start the simulation. The ball will move on its own.", |
|
|
hint: "Just press the green RUN button!", |
|
|
stars: [0, 1], |
|
|
solution: `// No code needed!`, |
|
|
setup: (World, Bodies, Composite) => { |
|
|
const floor = Bodies.rectangle(CONFIG.width / 2, CONFIG.height + 25, CONFIG.width, 100, { isStatic: true, render: { fillStyle: CONFIG.colors.wall, ...strokeStyle } }); |
|
|
|
|
|
const ball = Bodies.circle(pX(2), CONFIG.height - 50 - 20, 20, { |
|
|
restitution: 0.6, |
|
|
friction: 0, |
|
|
frictionAir: 0, |
|
|
frictionStatic: 0, |
|
|
render: { fillStyle: CONFIG.colors.ball, ...strokeStyle }, |
|
|
}); |
|
|
|
|
|
Matter.Body.setVelocity(ball, { x: 10, y: 0 }); |
|
|
|
|
|
const goal = Bodies.rectangle(pX(18), CONFIG.height - 50 - 60, 100, 120, { |
|
|
isStatic: true, |
|
|
isSensor: true, |
|
|
label: "GoalZone", |
|
|
render: { fillStyle: CONFIG.colors.goal, opacity: 0.3, ...strokeStyle, lineWidth: 2, strokeStyle: "#000" }, |
|
|
}); |
|
|
|
|
|
World.add(Composite, [floor, ball, goal]); |
|
|
return { ball, goal }; |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
id: 1, |
|
|
title: "The Bridge", |
|
|
difficulty: 1, |
|
|
desc: "There is a gap in the path. Build a bridge so the ball can roll across.", |
|
|
hint: "Add a wide line in the center to connect the platforms.", |
|
|
stars: [1, 2], |
|
|
solution: `add a long line in the middle`, |
|
|
setup: (World, Bodies, Composite) => { |
|
|
const p1 = Bodies.rectangle(pX(4), pY(4), pX(6), 20, { isStatic: true, angle: Math.PI / 8, render: { fillStyle: CONFIG.colors.wall, ...strokeStyle } }); |
|
|
const p2 = Bodies.rectangle(pX(16), pY(12), pX(6), 20, { isStatic: true, angle: Math.PI / 8, render: { fillStyle: CONFIG.colors.wall, ...strokeStyle } }); |
|
|
|
|
|
const ball = Bodies.circle(pX(3), pY(2), 20, { |
|
|
restitution: 0.2, |
|
|
friction: 0, |
|
|
frictionAir: 0, |
|
|
render: { fillStyle: CONFIG.colors.ball, ...strokeStyle }, |
|
|
}); |
|
|
|
|
|
const goal = Bodies.rectangle(pX(18), pY(11), 80, 80, { |
|
|
isStatic: true, |
|
|
isSensor: true, |
|
|
label: "GoalZone", |
|
|
render: { fillStyle: CONFIG.colors.goal, opacity: 0.3, ...strokeStyle }, |
|
|
}); |
|
|
|
|
|
World.add(Composite, [p1, p2, ball, goal]); |
|
|
return { ball, goal }; |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
title: "A Little Push", |
|
|
difficulty: 2, |
|
|
desc: "Oh no, we're stuck! Give the ball a nudge to get it moving towards the goal.", |
|
|
hint: "Drop a heavy object in the top left to push it towards the goal.", |
|
|
stars: [1, 3], |
|
|
solution: `Add a circle at 2,2`, |
|
|
setup: (World, Bodies, Composite) => { |
|
|
const floor = Bodies.rectangle(CONFIG.width / 2, CONFIG.height + 25, CONFIG.width, 100, { isStatic: true, render: { fillStyle: CONFIG.colors.wall, ...strokeStyle } }); |
|
|
|
|
|
const ball = Bodies.circle(pX(2.2), CONFIG.height - 50 - 20, 20, { |
|
|
restitution: 0.6, |
|
|
friction: 0, |
|
|
frictionAir: 0, |
|
|
frictionStatic: 0, |
|
|
render: { fillStyle: CONFIG.colors.ball, ...strokeStyle }, |
|
|
}); |
|
|
|
|
|
const goal = Bodies.rectangle(pX(18), CONFIG.height - 50 - 60, 100, 120, { |
|
|
isStatic: true, |
|
|
isSensor: true, |
|
|
label: "GoalZone", |
|
|
render: { fillStyle: CONFIG.colors.goal, opacity: 0.3, ...strokeStyle, lineWidth: 2, strokeStyle: "#000" }, |
|
|
}); |
|
|
|
|
|
World.add(Composite, [floor, ball, goal]); |
|
|
return { ball, goal }; |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
title: "The Bounce", |
|
|
difficulty: 2, |
|
|
desc: "High velocity incoming! How can you redirect the ball into the goal?", |
|
|
hint: "Add a centered platform at the bottom to reflect the ball towards the goal.", |
|
|
stars: [1, 2], |
|
|
solution: `add a wide line at the bottom`, |
|
|
setup: (World, Bodies, Composite) => { |
|
|
|
|
|
const wall = Bodies.rectangle(pX(10), pY(3), 20, pY(6), { isStatic: true, render: { fillStyle: CONFIG.colors.wall, ...strokeStyle } }); |
|
|
|
|
|
const ball = Bodies.circle(pX(2), pY(1.2), 20, { |
|
|
restitution: 1.0, |
|
|
friction: 0, |
|
|
frictionAir: 0.001, |
|
|
render: { fillStyle: CONFIG.colors.ball, ...strokeStyle }, |
|
|
}); |
|
|
|
|
|
|
|
|
Matter.Body.setVelocity(ball, { x: 12, y: 12 }); |
|
|
|
|
|
const goal = Bodies.rectangle(pX(18), pY(2), pX(2), pY(2), { |
|
|
isStatic: true, |
|
|
isSensor: true, |
|
|
label: "GoalZone", |
|
|
render: { fillStyle: CONFIG.colors.goal, opacity: 0.3, ...strokeStyle }, |
|
|
}); |
|
|
|
|
|
World.add(Composite, [wall, ball, goal]); |
|
|
return { ball, goal }; |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
id: 4, |
|
|
title: "Protect", |
|
|
difficulty: 3, |
|
|
desc: "Ambush! Ninja stars are incoming. Protect the ball's path so it can land safely.", |
|
|
hint: "Add a few heavy blocks at certain locations to shield the ball from the stars.", |
|
|
stars: [3, 5], |
|
|
solution: `add a heavy block at 5, 3\nadd a heavy block at 15, 5\nadd a heavy block at 5, 7`, |
|
|
setup: (World, Bodies, Composite, addEvent) => { |
|
|
const ball = Bodies.circle(pX(10), pY(1), 20, { |
|
|
restitution: 0.5, |
|
|
friction: 0.001, |
|
|
frictionAir: 0.001, |
|
|
render: { fillStyle: CONFIG.colors.ball, ...strokeStyle }, |
|
|
}); |
|
|
|
|
|
const goal = Bodies.rectangle(pX(10), pY(14), pX(2), pY(2), { |
|
|
isStatic: true, |
|
|
isSensor: true, |
|
|
label: "GoalZone", |
|
|
render: { fillStyle: CONFIG.colors.goal, opacity: 0.3, ...strokeStyle }, |
|
|
}); |
|
|
|
|
|
const createNinjaStar = (x, y, vx, vy, angVel, delay) => { |
|
|
const starVerts = Matter.Vertices.fromPath('50 0 63 38 100 38 69 59 82 100 50 75 18 100 31 59 0 38 37 38'); |
|
|
const star = Matter.Bodies.fromVertices(x, y, starVerts, { |
|
|
render: { fillStyle: "#ef4444", strokeStyle: "#ef4444", lineWidth: 1 }, |
|
|
restitution: 0.8, |
|
|
isStatic: true |
|
|
}, true); |
|
|
Matter.Body.scale(star, 0.5, 0.5); |
|
|
Matter.Body.setVelocity(star, { x: vx, y: vy }); |
|
|
Matter.Body.setAngularVelocity(star, angVel); |
|
|
|
|
|
World.add(Composite, star); |
|
|
|
|
|
if (addEvent) { |
|
|
addEvent(delay, () => { |
|
|
Matter.Body.setStatic(star, false); |
|
|
}); |
|
|
} |
|
|
return star; |
|
|
}; |
|
|
|
|
|
|
|
|
createNinjaStar(pX(2), pY(5), 15, -5, 0.3, 0.1); |
|
|
createNinjaStar(pX(18), pY(8), -15, -5, -0.3, 0.3); |
|
|
createNinjaStar(pX(2), pY(11), 15, -5, 0.3, 0.50); |
|
|
|
|
|
World.add(Composite, [ball, goal]); |
|
|
return { ball, goal }; |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
id: 5, |
|
|
title: "Timing is Key", |
|
|
difficulty: 3, |
|
|
desc: "The goal is moving! Push the ball off the ledge so it lands in the moving target.", |
|
|
hint: "Add a heavy ball on the top left after a short delay to drop the ball onto the platform.", |
|
|
stars: [1, 2], |
|
|
solution: `add a heavy ball in the top left after 1 second`, |
|
|
setup: (World, Bodies, Composite) => { |
|
|
|
|
|
const cross = Matter.Body.create({ |
|
|
parts: [ |
|
|
Bodies.rectangle(pX(8), pY(4), pX(7), 10, { render: { fillStyle: CONFIG.colors.wall, ...strokeStyle } }), |
|
|
Bodies.rectangle(pX(8), pY(4), 10, pX(7), { render: { fillStyle: CONFIG.colors.wall, ...strokeStyle } }) |
|
|
], |
|
|
isStatic: true, |
|
|
}); |
|
|
|
|
|
Matter.Events.on(STATE.engine, 'beforeUpdate', () => { |
|
|
if (STATE.isPlaying) { |
|
|
Matter.Body.rotate(cross, -0.01); |
|
|
} |
|
|
}); |
|
|
|
|
|
World.add(Composite, cross); |
|
|
|
|
|
|
|
|
const platform = Bodies.rectangle(pX(8), pY(8)-10, pX(14), 20, { |
|
|
isStatic: true, |
|
|
render: { fillStyle: CONFIG.colors.wall, ...strokeStyle } |
|
|
}); |
|
|
|
|
|
|
|
|
const ball = Bodies.circle(pX(2.1), pY(7), 20, { |
|
|
restitution: 0.5, |
|
|
friction: 0.1, |
|
|
render: { fillStyle: CONFIG.colors.ball, ...strokeStyle }, |
|
|
}); |
|
|
|
|
|
|
|
|
const goal = Bodies.rectangle(pX(10), pY(13), 120, 120, { |
|
|
isStatic: true, |
|
|
isSensor: true, |
|
|
label: "GoalZone", |
|
|
render: { fillStyle: CONFIG.colors.goal, opacity: 0.3, ...strokeStyle }, |
|
|
}); |
|
|
|
|
|
|
|
|
const updateGoal = () => { |
|
|
if (!STATE.isPlaying) return; |
|
|
const time = STATE.time; |
|
|
const speed = 0.002; |
|
|
const range = pX(8); |
|
|
const center = pX(10); |
|
|
const x = center + Math.sin(time * speed) * range; |
|
|
Matter.Body.setPosition(goal, { x: x, y: pY(13) }); |
|
|
}; |
|
|
|
|
|
Matter.Events.on(STATE.engine, 'beforeUpdate', updateGoal); |
|
|
|
|
|
World.add(Composite, [platform, ball, goal]); |
|
|
return { ball, goal }; |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
id: 6, |
|
|
title: "Catapult", |
|
|
difficulty: 3, |
|
|
desc: "Launch the ball into the goal! Can you time it right?", |
|
|
hint: "Drop a heavy object in the right place at the right time to send the ball flying.", |
|
|
stars: [1, 2], |
|
|
solution: `add a heavy square at 14, 1, delayed by 2 seconds`, |
|
|
setup: (World, Bodies, Composite) => { |
|
|
const group = Matter.Body.nextGroup(true); |
|
|
|
|
|
|
|
|
const ramp = Bodies.rectangle(pX(2), pY(11.5), pX(4), 5, { |
|
|
isStatic: true, |
|
|
angle: Math.PI / 16, |
|
|
render: { fillStyle: CONFIG.colors.wall, ...strokeStyle } |
|
|
}); |
|
|
|
|
|
|
|
|
const pivotX = pX(10); |
|
|
const pivotY = pY(13); |
|
|
const catapult = Bodies.rectangle(pivotX, pivotY - 10, pX(12), 10, { |
|
|
collisionFilter: { group: group }, |
|
|
density: 0.0001, |
|
|
render: { fillStyle: CONFIG.colors.wall, ...strokeStyle } |
|
|
}); |
|
|
|
|
|
const pivot = Bodies.rectangle(pivotX, pivotY + 20, 20, 60, { |
|
|
isStatic: true, |
|
|
collisionFilter: { group: group }, |
|
|
render: { fillStyle: CONFIG.colors.wall, ...strokeStyle } |
|
|
}); |
|
|
|
|
|
const constraint = Matter.Constraint.create({ |
|
|
bodyA: catapult, |
|
|
pointB: { x: pivotX, y: pivotY - 10 }, |
|
|
stiffness: 1.0, |
|
|
length: 0, |
|
|
render: { visible: true } |
|
|
}); |
|
|
|
|
|
|
|
|
const ball = Bodies.circle(pX(1), pY(8), 20, { |
|
|
restitution: 0.0, |
|
|
friction: 0.0, |
|
|
density: 0.00001, |
|
|
render: { fillStyle: CONFIG.colors.ball, ...strokeStyle }, |
|
|
}); |
|
|
|
|
|
|
|
|
const goal = Bodies.rectangle(pX(18), pY(2), pX(4), pY(4), { |
|
|
isStatic: true, |
|
|
isSensor: true, |
|
|
label: "GoalZone", |
|
|
render: { fillStyle: CONFIG.colors.goal, opacity: 0.3, ...strokeStyle }, |
|
|
}); |
|
|
|
|
|
World.add(Composite, [ramp, catapult, pivot, constraint, ball, goal]); |
|
|
return { ball, goal }; |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
id: 7, |
|
|
title: "Newton's Cradle", |
|
|
difficulty: 4, |
|
|
desc: "A chain reaction! The ball is part of a Newton's cradle. How can we get things moving?", |
|
|
hint: "Add heavy circles on the left and right to start the motion. You may need to time them carefully.", |
|
|
stars: [2, 4], |
|
|
solution: `Add a heavy circle in the top left.\nAdd a heavy circle in the top right, delayed by 10 seconds.`, |
|
|
setup: (World, Bodies, Composite) => { |
|
|
const xx = pX(8), yy = pY(2), number = 5, size = 25, length = pY(4); |
|
|
|
|
|
const separation = 2.1; |
|
|
for (let i = 0; i < number; i++) { |
|
|
const x = xx + i * (size * separation); |
|
|
const circle = Bodies.circle(x, yy + length, size, { |
|
|
inertia: Infinity, restitution: 0.1, friction: 0, frictionAir: 0, slop: size * 0.02, |
|
|
render: { fillStyle: CONFIG.colors.wall, ...strokeStyle } |
|
|
}); |
|
|
const constraint = Matter.Constraint.create({ |
|
|
pointA: { x: x, y: yy }, |
|
|
bodyB: circle, |
|
|
stiffness: 1, |
|
|
length: length, |
|
|
render: { strokeStyle: '#000', lineWidth: 1 } |
|
|
}); |
|
|
World.add(Composite, [circle, constraint]); |
|
|
} |
|
|
|
|
|
const ramp = Bodies.rectangle(pX(4), pY(5.5), pX(7), 10, { |
|
|
friction: 0.01, |
|
|
frictionStatic: 0.01, |
|
|
restitution: 0.1, |
|
|
isStatic: true, angle: Math.PI / 12, render: { fillStyle: CONFIG.colors.wall, ...strokeStyle } |
|
|
}); |
|
|
|
|
|
|
|
|
const p1 = Bodies.rectangle(pX(14.5), yy + length + 30, pX(3), 10, { |
|
|
isStatic: true, render: { fillStyle: CONFIG.colors.wall, ...strokeStyle } |
|
|
}); |
|
|
const p2 = Bodies.rectangle(pX(15.25), yy + length + 30 - pY(1) - 10, pX(4.5), 10, { |
|
|
isStatic: true, render: { fillStyle: CONFIG.colors.wall, ...strokeStyle } |
|
|
}); |
|
|
const p3 = Bodies.rectangle(pX(17.85), pY(8), pX(4), 10, { |
|
|
isStatic: true, render: { fillStyle: CONFIG.colors.wall, ...strokeStyle } |
|
|
}); |
|
|
const p4 = Bodies.rectangle(pX(19.75), pY(6.1), pX(4), 10, { |
|
|
|
|
|
angle: Math.PI / 2, |
|
|
restitution: 0.1, |
|
|
isStatic: true, render: { fillStyle: CONFIG.colors.wall, ...strokeStyle } |
|
|
}); |
|
|
|
|
|
const ball = Bodies.circle(xx + number * (size * separation), yy + length, 20, { |
|
|
restitution: 0.1, friction: 0.0, frictionAir: 0.0, |
|
|
render: { fillStyle: CONFIG.colors.ball, ...strokeStyle }, |
|
|
}); |
|
|
const goal = Bodies.rectangle(pX(6.5), pY(12.5), pX(8), pY(4), { |
|
|
isStatic: true, |
|
|
isSensor: true, |
|
|
label: "GoalZone", |
|
|
render: { fillStyle: CONFIG.colors.goal, opacity: 0.3, ...strokeStyle }, |
|
|
}); |
|
|
|
|
|
World.add(Composite, [ramp, p1, p2, p3, p4, ball, goal]); |
|
|
|
|
|
return { ball, goal }; |
|
|
}, |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
const STATE = { |
|
|
engine: null, |
|
|
render: null, |
|
|
runner: null, |
|
|
time: 0, |
|
|
startTime: 0, |
|
|
isPlaying: false, |
|
|
isFinished: false, |
|
|
eventQueue: [], |
|
|
plannedActions: [], |
|
|
currentLevelIndex: 0, |
|
|
currentBall: null, |
|
|
progress: { unlockedIndex: 0, stars: {} }, |
|
|
winCondition: null, |
|
|
}; |
|
|
|
|
|
function loadProgress() { |
|
|
const saved = localStorage.getItem(STORAGE_KEY); |
|
|
if (saved) { |
|
|
try { |
|
|
STATE.progress = JSON.parse(saved); |
|
|
} catch (e) { |
|
|
console.error("Save Corrupt"); |
|
|
} |
|
|
} |
|
|
} |
|
|
function saveProgress() { |
|
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(STATE.progress)); |
|
|
} |
|
|
|
|
|
|
|
|
function initPhysics() { |
|
|
const container = document.getElementById("canvas-container"); |
|
|
|
|
|
STATE.engine = Matter.Engine.create(); |
|
|
STATE.engine.world.gravity.y = 1; |
|
|
STATE.engine.timing.timeScale = 0.5; |
|
|
|
|
|
STATE.render = Matter.Render.create({ |
|
|
element: container, |
|
|
engine: STATE.engine, |
|
|
options: { |
|
|
width: CONFIG.width, |
|
|
height: CONFIG.height, |
|
|
wireframes: false, |
|
|
background: CONFIG.colors.background, |
|
|
pixelRatio: window.devicePixelRatio, |
|
|
showAngleIndicator: false, |
|
|
}, |
|
|
}); |
|
|
|
|
|
Matter.Events.on(STATE.render, "afterRender", function () { |
|
|
const context = STATE.render.context; |
|
|
const width = STATE.render.options.width; |
|
|
const height = STATE.render.options.height; |
|
|
|
|
|
|
|
|
context.beginPath(); |
|
|
context.strokeStyle = "rgba(0, 0, 0, 0.1)"; |
|
|
context.lineWidth = 1; |
|
|
context.font = "bold 10px 'Fira Code'"; |
|
|
context.fillStyle = "rgba(0, 0, 0, 0.3)"; |
|
|
context.textAlign = "center"; |
|
|
|
|
|
for (let i = 0; i <= CONFIG.gridWidth; i++) { |
|
|
const x = (width * i) / CONFIG.gridWidth; |
|
|
context.moveTo(x, 0); |
|
|
context.lineTo(x, height); |
|
|
if (i > 0 && i < CONFIG.gridWidth) context.fillText(i, x, 15); |
|
|
} |
|
|
for (let i = 0; i <= CONFIG.gridHeight; i++) { |
|
|
const y = (height * i) / CONFIG.gridHeight; |
|
|
context.moveTo(0, y); |
|
|
context.lineTo(width, y); |
|
|
if (i > 0 && i < CONFIG.gridHeight) context.fillText(i, 15, y + 4); |
|
|
} |
|
|
context.stroke(); |
|
|
|
|
|
|
|
|
if (!STATE.isPlaying && !STATE.isFinished) { |
|
|
context.font = "bold 14px 'Fira Code', monospace"; |
|
|
context.textAlign = "center"; |
|
|
context.textBaseline = "middle"; |
|
|
|
|
|
STATE.plannedActions.forEach((action) => { |
|
|
if (action.previewBody) { |
|
|
const body = action.previewBody; |
|
|
const x = body.position.x; |
|
|
const y = body.position.y; |
|
|
|
|
|
if (action.delay > 0) { |
|
|
context.fillStyle = "rgba(0, 0, 0, 0.7)"; |
|
|
context.fillText(`in ${action.delay}s`, x, body.bounds.max.y + 20); |
|
|
} |
|
|
if (action.params.velocity) { |
|
|
const vx = action.params.velocity[0], |
|
|
vy = action.params.velocity[1]; |
|
|
drawVelocityArrow(context, x, y, vx, vy, "#ef4444"); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
Matter.Composite.allBodies(STATE.engine.world).forEach((body) => { |
|
|
|
|
|
if (STATE.plannedActions.some((a) => a.previewBody === body)) return; |
|
|
|
|
|
const vx = body.velocity.x || 0; |
|
|
const vy = body.velocity.y || 0; |
|
|
if (Math.hypot(vx, vy) > 0.1) { |
|
|
let color = body.render.fillStyle; |
|
|
|
|
|
if (color === "#333" || color === CONFIG.colors.wall) color = "#ef4444"; |
|
|
drawVelocityArrow(context, body.position.x, body.position.y, vx, vy, color); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const bodies = Matter.Composite.allBodies(STATE.engine.world); |
|
|
bodies.forEach((body) => { |
|
|
if (body.label === "GoalZone") { |
|
|
const bounds = body.bounds; |
|
|
const w = bounds.max.x - bounds.min.x; |
|
|
const h = bounds.max.y - bounds.min.y; |
|
|
const cx = (bounds.min.x + bounds.max.x) / 2; |
|
|
const cy = (bounds.min.y + bounds.max.y) / 2; |
|
|
|
|
|
context.save(); |
|
|
context.translate(cx, cy); |
|
|
context.beginPath(); |
|
|
context.rect(-w / 2, -h / 2, w, h); |
|
|
context.strokeStyle = "#4ade80"; |
|
|
context.lineWidth = 3; |
|
|
context.setLineDash([15, 10]); |
|
|
context.stroke(); |
|
|
|
|
|
context.fillStyle = "#1a1a1a"; |
|
|
context.fillRect(-2, -20, 4, 40); |
|
|
context.beginPath(); |
|
|
context.moveTo(2, -20); |
|
|
context.lineTo(25, -10); |
|
|
context.lineTo(2, 0); |
|
|
context.fill(); |
|
|
context.font = "bold 14px 'Space Grotesk'"; |
|
|
context.textAlign = "center"; |
|
|
context.fillText("GOAL", 0, 35); |
|
|
context.restore(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
const canvas = STATE.render.canvas; |
|
|
canvas.style.border = "3px solid black"; |
|
|
|
|
|
const resizeCanvas = () => { |
|
|
const cw = container.clientWidth - 40; |
|
|
const ch = container.clientHeight - 40; |
|
|
const tr = CONFIG.width / CONFIG.height; |
|
|
const cr = cw / ch; |
|
|
|
|
|
if (cr > tr) { |
|
|
canvas.style.height = `${ch}px`; |
|
|
canvas.style.width = `${ch * tr}px`; |
|
|
} else { |
|
|
canvas.style.width = `${cw}px`; |
|
|
canvas.style.height = `${cw / tr}px`; |
|
|
} |
|
|
}; |
|
|
|
|
|
const resizeObserver = new ResizeObserver(() => { |
|
|
window.requestAnimationFrame(() => resizeCanvas()); |
|
|
}); |
|
|
resizeObserver.observe(container); |
|
|
window.requestAnimationFrame(() => resizeCanvas()); |
|
|
|
|
|
STATE.runner = Matter.Runner.create({ isFixed: true, delta: 1000 / 60 }); |
|
|
Matter.Events.on(STATE.engine, "beforeUpdate", handleUpdate); |
|
|
Matter.Render.run(STATE.render); |
|
|
} |
|
|
|
|
|
function drawVelocityArrow(context, x, y, vx, vy, color) { |
|
|
if (vx === 0 && vy === 0) return; |
|
|
const speed = Math.hypot(vx, vy); |
|
|
const arrowScale = 20; |
|
|
const maxLength = 150; |
|
|
const rawLen = speed * arrowScale; |
|
|
const scaleFactor = Math.min(rawLen, maxLength) / speed; |
|
|
const endX = x + vx * scaleFactor; |
|
|
const endY = y + vy * scaleFactor; |
|
|
|
|
|
context.beginPath(); |
|
|
context.moveTo(x, y); |
|
|
context.lineTo(endX, endY); |
|
|
context.strokeStyle = color; |
|
|
context.lineWidth = 3; |
|
|
context.stroke(); |
|
|
|
|
|
const angle = Math.atan2(endY - y, endX - x); |
|
|
const headLen = 12; |
|
|
context.beginPath(); |
|
|
context.moveTo(endX, endY); |
|
|
context.lineTo(endX - headLen * Math.cos(angle - Math.PI / 6), endY - headLen * Math.sin(angle - Math.PI / 6)); |
|
|
context.lineTo(endX - headLen * Math.cos(angle + Math.PI / 6), endY - headLen * Math.sin(angle + Math.PI / 6)); |
|
|
context.lineTo(endX, endY); |
|
|
context.fillStyle = color; |
|
|
context.fill(); |
|
|
|
|
|
context.fillStyle = color; |
|
|
context.font = "bold 12px 'Fira Code', monospace"; |
|
|
context.textAlign = "center"; |
|
|
context.fillText(`${speed.toFixed(1)}`, endX + (vx / speed) * 15, endY + (vy / speed) * 15); |
|
|
} |
|
|
|
|
|
function handleUpdate() { |
|
|
if (!STATE.isPlaying || STATE.isFinished) return; |
|
|
STATE.time = performance.now() - STATE.startTime; |
|
|
document.getElementById("timer-display").innerText = (STATE.time / 1000).toFixed(2) + "s"; |
|
|
STATE.eventQueue |
|
|
.filter((e) => e.delay <= STATE.time && !e.executed) |
|
|
.forEach((e) => { |
|
|
e.action(); |
|
|
e.executed = true; |
|
|
}); |
|
|
if (STATE.winCondition && STATE.winCondition()) endGame(true); |
|
|
} |
|
|
|
|
|
function loadLevel(index) { |
|
|
if (STATE.runner) Matter.Runner.stop(STATE.runner); |
|
|
|
|
|
document.getElementById("view-menu").classList.add("hidden"); |
|
|
document.getElementById("view-game").classList.remove("hidden"); |
|
|
document.getElementById("view-game").classList.add("flex"); |
|
|
|
|
|
STATE.currentLevelIndex = index; |
|
|
const level = LEVELS[index]; |
|
|
|
|
|
const diffs = ["", "EASY", "MEDIUM", "HARD", "EXTREME"]; |
|
|
const diffColors = ["", "bg-neo-green", "bg-neo-yellow", "bg-neo-red", "bg-neo-purple"]; |
|
|
const d = level.difficulty || 1; |
|
|
document.getElementById("level-indicator").innerHTML = `LEVEL ${index + 1} <span class="ml-2 px-1 ${diffColors[d]} text-black text-[10px] border border-black">${diffs[d]}</span>`; |
|
|
document.getElementById("level-title").innerText = level.title; |
|
|
document.getElementById("level-desc").innerText = level.desc; |
|
|
document.getElementById("level-hint-text").innerText = level.hint; |
|
|
document.getElementById("star-reqs").innerText = `3★ < ${level.stars[0] + 1} items`; |
|
|
document.getElementById("hint-content").classList.add("hidden"); |
|
|
|
|
|
resetSimulationState(); |
|
|
document.getElementById("code-input").value = ""; |
|
|
|
|
|
const { ball, goal } = level.setup(Matter.World, Matter.Bodies, STATE.engine.world, () => {}); |
|
|
|
|
|
STATE.currentBall = ball; |
|
|
STATE.winCondition = () => Matter.Collision.collides(ball, goal) !== null; |
|
|
Matter.Render.world(STATE.render); |
|
|
} |
|
|
|
|
|
function resetSimulationState() { |
|
|
Matter.Composite.clear(STATE.engine.world); |
|
|
STATE.engine.events = {}; |
|
|
Matter.Events.on(STATE.engine, "beforeUpdate", handleUpdate); |
|
|
|
|
|
STATE.plannedActions = []; |
|
|
STATE.eventQueue = []; |
|
|
STATE.time = 0; |
|
|
STATE.isFinished = false; |
|
|
STATE.isPlaying = false; |
|
|
STATE.currentBall = null; |
|
|
|
|
|
document.getElementById("timer-display").innerText = "0.00s"; |
|
|
document.getElementById("win-message").style.display = "none"; |
|
|
document.getElementById("error-log").classList.add("hidden"); |
|
|
document.getElementById("status-badge").innerHTML = `<div class="w-3 h-3 bg-red-500 rounded-full border border-black animate-pulse"></div> READY`; |
|
|
|
|
|
updateActionList(); |
|
|
} |
|
|
|
|
|
function endGame(success) { |
|
|
STATE.isFinished = true; |
|
|
STATE.isPlaying = false; |
|
|
Matter.Runner.stop(STATE.runner); |
|
|
|
|
|
if (success) { |
|
|
document.getElementById("status-badge").innerHTML = `<div class="w-3 h-3 bg-green-500 rounded-full border border-black"></div> COMPLETE`; |
|
|
const used = STATE.plannedActions.length; |
|
|
const level = LEVELS[STATE.currentLevelIndex]; |
|
|
let stars = 1; |
|
|
if (used <= level.stars[0]) stars = 3; |
|
|
else if (used <= level.stars[1]) stars = 2; |
|
|
|
|
|
if (stars > (STATE.progress.stars[level.id] || 0)) STATE.progress.stars[level.id] = stars; |
|
|
if (STATE.currentLevelIndex >= STATE.progress.unlockedIndex && STATE.currentLevelIndex < LEVELS.length - 1) { |
|
|
STATE.progress.unlockedIndex = STATE.currentLevelIndex + 1; |
|
|
} |
|
|
saveProgress(); |
|
|
|
|
|
const starContainer = document.getElementById("result-stars"); |
|
|
starContainer.innerHTML = ""; |
|
|
for (let i = 0; i < 3; i++) { |
|
|
const filled = i < stars; |
|
|
starContainer.innerHTML += `<i class="fas fa-star ${filled ? "text-yellow-400" : "text-gray-600"}"></i>`; |
|
|
} |
|
|
document.getElementById("result-items").innerText = used; |
|
|
|
|
|
const btnNext = document.getElementById("btn-next-level"); |
|
|
if (STATE.currentLevelIndex >= LEVELS.length - 1) { |
|
|
|
|
|
btnNext.style.display = "none"; |
|
|
} else { |
|
|
btnNext.style.display = "inline-block"; |
|
|
btnNext.onclick = () => loadLevel(STATE.currentLevelIndex + 1); |
|
|
} |
|
|
document.getElementById("win-message").style.display = "flex"; |
|
|
} |
|
|
} |
|
|
|
|
|
function updateActionList() { |
|
|
const list = document.getElementById("action-list"); |
|
|
list.innerHTML = ""; |
|
|
if (STATE.plannedActions.length === 0) { |
|
|
list.innerHTML = `<div class="text-xs text-gray-400 text-center mt-4 italic">No elements added yet.</div>`; |
|
|
return; |
|
|
} |
|
|
STATE.plannedActions.forEach((action, index) => { |
|
|
const div = document.createElement("div"); |
|
|
div.className = "action-item flex justify-between items-center bg-white border border-black p-2 shadow-[2px_2px_0px_0px_rgba(0,0,0,0.1)] hover:shadow-[2px_2px_0px_0px_#000] transition-shadow group"; |
|
|
|
|
|
const p = action.params; |
|
|
const details = []; |
|
|
if (p.size !== 1) details.push(`size:${p.size}`); |
|
|
if (p.weight !== 1) details.push(`mass:${p.weight}`); |
|
|
if (p.restitution !== 0) details.push(`bounce:${p.restitution}`); |
|
|
if (p.angle !== 0) details.push(`angle:${p.angle}°`); |
|
|
if (p.velocity && (p.velocity[0] !== 0 || p.velocity[1] !== 0)) details.push(`v:[${p.velocity}]`); |
|
|
if (p.isStatic !== (p.shape === 'line')) details.push(p.isStatic ? 'static' : 'dynamic'); |
|
|
if (p.delay > 0) details.push(`delay:${p.delay}s`); |
|
|
|
|
|
const typeName = p.shape; |
|
|
const color = p.color || "#000"; |
|
|
div.innerHTML = ` |
|
|
<div class="flex items-center gap-2"> |
|
|
<div class="w-3 h-3 border border-black" style="background-color: ${color}"></div> |
|
|
<div class="flex flex-col"> |
|
|
<div class="flex items-center gap-2"> |
|
|
<span class="text-xs font-bold uppercase">${typeName}</span> |
|
|
<span class="text-[10px] text-gray-500 font-mono">@ [${p.location[0]}, ${p.location[1]}]</span> |
|
|
</div> |
|
|
${details.length > 0 ? `<div class="text-[9px] text-gray-400 font-mono leading-tight uppercase">${details.join(' | ')}</div>` : ''} |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
const btnDelete = document.createElement("button"); |
|
|
btnDelete.className = "btn-delete w-6 h-6 flex items-center justify-center bg-red-100 hover:bg-red-500 hover:text-white text-red-500 border border-black rounded transition-colors"; |
|
|
btnDelete.innerHTML = `<i class="fas fa-times text-xs"></i>`; |
|
|
btnDelete.onclick = () => removeAction(index); |
|
|
div.appendChild(btnDelete); |
|
|
list.appendChild(div); |
|
|
}); |
|
|
} |
|
|
|
|
|
function removeAction(index) { |
|
|
const action = STATE.plannedActions[index]; |
|
|
if (action.previewBody) Matter.World.remove(STATE.engine.world, action.previewBody); |
|
|
STATE.plannedActions.splice(index, 1); |
|
|
updateActionList(); |
|
|
} |
|
|
|
|
|
function createBody(shape, x, y, pixelSize, options) { |
|
|
switch (shape) { |
|
|
case "circle": |
|
|
case "ball": |
|
|
return Matter.Bodies.circle(x, y, pixelSize / 2, options); |
|
|
case "triangle": |
|
|
return Matter.Bodies.polygon(x, y, 3, pixelSize / 1.5, options); |
|
|
case "line": |
|
|
const thickness = 5; |
|
|
return Matter.Bodies.rectangle(x, y, pixelSize, thickness, options); |
|
|
default: |
|
|
return Matter.Bodies.rectangle(x, y, pixelSize, pixelSize, options); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const Tools = { |
|
|
add: (params) => { |
|
|
let { |
|
|
shape = "square", |
|
|
location = [CONFIG.gridWidth / 2, CONFIG.gridHeight / 2], |
|
|
size = 1, |
|
|
color = CONFIG.colors.userShape, |
|
|
mass = 1, |
|
|
weight = params.weight || mass, |
|
|
delay = 0, |
|
|
restitution = 0, |
|
|
friction = 0.1, |
|
|
rotation = 0, |
|
|
angle = params.angle || rotation, |
|
|
velocity = [0, 0], |
|
|
static: isStaticParam, |
|
|
isStatic = params.isStatic !== undefined ? params.isStatic : (isStaticParam !== undefined ? isStaticParam : ["platform", "line"].includes(shape)), |
|
|
} = params; |
|
|
|
|
|
|
|
|
if (typeof location === 'string') { |
|
|
const parts = location.match(/\d+/g); |
|
|
if (parts && parts.length === 2 && !isNaN(parts[0]) && !isNaN(parts[1])) { |
|
|
location = [parseFloat(parts[0]), parseFloat(parts[1])]; |
|
|
} else { |
|
|
const loc = location.toLowerCase(); |
|
|
const midX = CONFIG.gridWidth / 2; |
|
|
const midY = CONFIG.gridHeight / 2; |
|
|
const margin = 2; |
|
|
|
|
|
const locations = { |
|
|
"center": [midX, midY], |
|
|
"top-left": [margin, margin], |
|
|
"top-center": [midX, margin], |
|
|
"top-right": [CONFIG.gridWidth - margin, margin], |
|
|
"center-left": [margin, midY], |
|
|
"center": [midX, midY], |
|
|
"center-right": [CONFIG.gridWidth - margin, midY], |
|
|
"bottom-left": [margin, CONFIG.gridHeight - margin], |
|
|
"bottom-center": [midX, CONFIG.gridHeight - margin], |
|
|
"bottom-right": [CONFIG.gridWidth - margin, CONFIG.gridHeight - margin], |
|
|
}; |
|
|
location = locations[loc] || [midX, midY]; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (!Array.isArray(location) || location.length !== 2) { |
|
|
console.warn("Invalid location format. Defaulting to center."); |
|
|
location = [CONFIG.gridWidth / 2, CONFIG.gridHeight / 2]; |
|
|
} |
|
|
|
|
|
const finalParams = { |
|
|
shape, |
|
|
location, |
|
|
size, |
|
|
color, |
|
|
weight, |
|
|
delay, |
|
|
restitution, |
|
|
friction, |
|
|
angle, |
|
|
velocity, |
|
|
isStatic, |
|
|
}; |
|
|
|
|
|
const x = pX(location[0]); |
|
|
const y = pY(location[1]); |
|
|
const pixelSize = pX(size); |
|
|
|
|
|
const commonProps = { |
|
|
angle: (angle * Math.PI) / 180, |
|
|
restitution: restitution, |
|
|
friction: friction, |
|
|
render: { fillStyle: color, ...strokeStyle }, |
|
|
density: weight * 0.005, |
|
|
}; |
|
|
|
|
|
|
|
|
const previewProps = { |
|
|
...commonProps, |
|
|
isStatic: true, |
|
|
isSensor: true, |
|
|
render: { |
|
|
fillStyle: color, |
|
|
opacity: 0.4, |
|
|
strokeStyle: "#000000", |
|
|
lineWidth: 2, |
|
|
}, |
|
|
}; |
|
|
|
|
|
const body = createBody(shape, x, y, pixelSize, previewProps); |
|
|
|
|
|
Matter.World.add(STATE.engine.world, body); |
|
|
|
|
|
STATE.plannedActions.push({ |
|
|
type: "add", |
|
|
params: finalParams, |
|
|
delay: delay || 0, |
|
|
previewBody: body, |
|
|
}); |
|
|
}, |
|
|
}; |
|
|
|
|
|
|
|
|
const MODEL_ID = "Xenova/functiongemma-270m-game"; |
|
|
let tokenizer, model; |
|
|
|
|
|
const TOOL_SCHEMA = [{"type": "function", "function": {"name": "add", "description": "Add a shape into the game scene.", "parameters": {"type": "object", "properties": {"shape": {"type": "string", "enum": ["circle", "square", "triangle", "star", "rectangle", "line", "ellipse"], "description": "The kind shape to add. Required."}, "location": {"type": "string", "description": "The [x, y] coordinates where the shape will be placed or a descriptive string. Required."}, "size": {"type": "number", "description": "The size of the object (between 0.1 and 10.0). Default is 1.0."}, "rotation": {"type": "integer", "description": "The initial clockwise rotation of the object in degrees (0-360). Default is 0."}, "friction": {"type": "number", "description": "The friction of the object (between 0.0 and 1.0). Default is 0.0."}, "restitution": {"type": "number", "description": "The bounciness of the object (between 0.0 and 1.0). Default is 0.0."}, "mass": {"type": "number", "description": "The mass of the object (between 1.0 and 10.0). Default is 1.0."}, "delay": {"type": "number", "description": "The time in seconds to wait before the object appears in the scene. Default is 0.0."}, "static": {"type": "boolean", "description": "Whether the object is static (immovable) or dynamic. Default is False."}, "velocity": {"type": "array", "items": {"type": "number"}, "description": "The initial [vx, vy] velocity vector of the object (values between -10.0 and 10.0). Default is [0.0, 0.0]."}, "color": {"type": "string", "description": "The color of the object as a string or hex code (e.g., \"red\", \"blue\", \"#FF00FF\"). Default is \"red\"."}}, "required": ["shape", "location"]}, "return": {"type": "string", "description": "A unique identifier for the added shape."}}}]; |
|
|
|
|
|
async function initModel() { |
|
|
try { |
|
|
tokenizer = await AutoTokenizer.from_pretrained(MODEL_ID); |
|
|
model = await AutoModelForCausalLM.from_pretrained(MODEL_ID, { |
|
|
device: "webgpu", |
|
|
dtype: "q4", |
|
|
}); |
|
|
document.getElementById("loading-overlay").classList.add("hidden"); |
|
|
} catch (e) { |
|
|
console.error(e); |
|
|
document.getElementById("loading-overlay").innerHTML = `<div class="text-red-500 font-bold p-4 bg-white border-2 border-black">Error: ${e.message}</div>`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function executeCommand() { |
|
|
const input = document.getElementById("code-input").value.trim(); |
|
|
if (!input) return; |
|
|
|
|
|
const btn = document.getElementById("btn-execute"); |
|
|
const errorLog = document.getElementById("error-log"); |
|
|
|
|
|
|
|
|
btn.disabled = true; |
|
|
btn.innerHTML = `<i class="fas fa-spinner fa-spin"></i> THINKING...`; |
|
|
errorLog.classList.add("hidden"); |
|
|
|
|
|
const systemPrompt = `You are a model that can do function calling with the following functions`; |
|
|
|
|
|
try { |
|
|
const lines = input.split('\n').map(l => l.trim()).filter(l => l.length > 0 && !l.startsWith("//")); |
|
|
|
|
|
for (const line of lines) { |
|
|
|
|
|
const messages = [ |
|
|
{ role: "developer", content: systemPrompt }, |
|
|
{ role: "user", content: line }, |
|
|
]; |
|
|
|
|
|
|
|
|
const inputs = tokenizer.apply_chat_template(messages, { |
|
|
tools: TOOL_SCHEMA, |
|
|
tokenize: true, |
|
|
add_generation_prompt: true, |
|
|
return_dict: true, |
|
|
}); |
|
|
|
|
|
|
|
|
const output = await model.generate({ ...inputs, max_new_tokens: 128, do_sample: false }); |
|
|
const decoded = tokenizer.decode(output.slice(0, [inputs.input_ids.dims[1], null]), { skip_special_tokens: false }); |
|
|
|
|
|
|
|
|
|
|
|
const startTag = "<start_function_call>"; |
|
|
const endTag = "<end_function_call>"; |
|
|
const startIndex = decoded.indexOf(startTag); |
|
|
const endIndex = decoded.indexOf(endTag); |
|
|
|
|
|
if (startIndex !== -1 && endIndex !== -1) { |
|
|
let callStr = decoded.substring(startIndex + startTag.length, endIndex); |
|
|
if (callStr.startsWith("call:add")) { |
|
|
|
|
|
let argsStr = callStr.substring(callStr.indexOf("{")); |
|
|
|
|
|
|
|
|
argsStr = argsStr |
|
|
.replace(/<escape>(.*?)<escape>/g, '"$1"') |
|
|
.replace(/(\w+):/g, '"$1":'); |
|
|
|
|
|
const args = JSON.parse(argsStr); |
|
|
Tools.add(args); |
|
|
} else { |
|
|
throw new Error("Model did not generate a valid add command."); |
|
|
} |
|
|
} else { |
|
|
throw new Error(`Could not understand command: "${line}"`); |
|
|
} |
|
|
} |
|
|
document.getElementById("code-input").value = ""; |
|
|
} catch (err) { |
|
|
errorLog.innerText = err.message; |
|
|
errorLog.classList.remove("hidden"); |
|
|
console.error(err); |
|
|
} finally { |
|
|
btn.disabled = false; |
|
|
btn.innerHTML = `<i class="fas fa-terminal"></i> EXECUTE`; |
|
|
updateActionList(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function runSimulation() { |
|
|
if (STATE.runner) Matter.Runner.stop(STATE.runner); |
|
|
|
|
|
const storedActions = [...STATE.plannedActions]; |
|
|
const level = LEVELS[STATE.currentLevelIndex]; |
|
|
|
|
|
Matter.Composite.clear(STATE.engine.world); |
|
|
STATE.engine.events = {}; |
|
|
Matter.Events.on(STATE.engine, "beforeUpdate", handleUpdate); |
|
|
STATE.eventQueue = []; |
|
|
STATE.isFinished = false; |
|
|
|
|
|
const addEvent = (delay, action) => { |
|
|
STATE.eventQueue.push({ |
|
|
delay: delay * 1000, |
|
|
action: action, |
|
|
executed: false, |
|
|
}); |
|
|
}; |
|
|
|
|
|
const { ball, goal } = level.setup(Matter.World, Matter.Bodies, STATE.engine.world, addEvent); |
|
|
|
|
|
STATE.currentBall = ball; |
|
|
STATE.winCondition = () => Matter.Collision.collides(ball, goal) !== null; |
|
|
|
|
|
|
|
|
const executeReal = (params) => { |
|
|
const { shape, location, size, weight, restitution, friction, angle, velocity, isStatic } = params; |
|
|
const x = pX(location[0]), |
|
|
y = pY(location[1]); |
|
|
const pixelSize = pX(size); |
|
|
|
|
|
const props = { |
|
|
angle: (angle * Math.PI) / 180, |
|
|
restitution, |
|
|
friction, |
|
|
isStatic, |
|
|
render: strokeStyle, |
|
|
density: weight * 0.005, |
|
|
}; |
|
|
|
|
|
const body = createBody(shape, x, y, pixelSize, props); |
|
|
|
|
|
if (!isStatic && (velocity[0] !== 0 || velocity[1] !== 0)) { |
|
|
Matter.Body.setVelocity(body, { x: velocity[0], y: velocity[1] }); |
|
|
} |
|
|
|
|
|
Matter.World.add(STATE.engine.world, body); |
|
|
}; |
|
|
|
|
|
storedActions.forEach((action) => { |
|
|
STATE.eventQueue.push({ |
|
|
delay: action.delay * 1000, |
|
|
action: () => executeReal(action.params), |
|
|
executed: false, |
|
|
}); |
|
|
}); |
|
|
|
|
|
STATE.plannedActions = storedActions; |
|
|
|
|
|
STATE.isPlaying = true; |
|
|
STATE.startTime = performance.now(); |
|
|
document.getElementById("status-badge").innerHTML = `<div class="w-3 h-3 bg-green-500 rounded-full border border-black animate-ping"></div> RUNNING`; |
|
|
Matter.Runner.run(STATE.runner, STATE.engine); |
|
|
} |
|
|
|
|
|
function renderMenu() { |
|
|
if (STATE.runner) Matter.Runner.stop(STATE.runner); |
|
|
|
|
|
document.getElementById("view-game").classList.add("hidden"); |
|
|
document.getElementById("view-game").classList.remove("flex"); |
|
|
document.getElementById("view-menu").classList.remove("hidden"); |
|
|
|
|
|
const grid = document.getElementById("level-grid"); |
|
|
grid.innerHTML = ""; |
|
|
|
|
|
LEVELS.forEach((level, index) => { |
|
|
const unlocked = index <= STATE.progress.unlockedIndex; |
|
|
const stars = STATE.progress.stars[index] || 0; |
|
|
|
|
|
const card = document.createElement("div"); |
|
|
card.className = `level-card neo-border p-4 flex flex-col items-center justify-center gap-2 aspect-square ${unlocked ? "bg-white cursor-pointer" : "locked"}`; |
|
|
|
|
|
if (unlocked) { |
|
|
card.onclick = () => loadLevel(index); |
|
|
card.innerHTML = ` |
|
|
<div class="text-3xl font-black">${index + 1}</div> |
|
|
<div class="flex gap-1 text-xs"> |
|
|
${Array(3) |
|
|
.fill(0) |
|
|
.map((_, i) => `<i class="fas fa-star ${i < stars ? "text-neo-yellow" : "text-gray-300"}"></i>`) |
|
|
.join("")} |
|
|
</div> |
|
|
`; |
|
|
} else { |
|
|
card.innerHTML = `<i class="fas fa-lock text-gray-400 text-2xl"></i>`; |
|
|
} |
|
|
grid.appendChild(card); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById("btn-execute").onclick = executeCommand; |
|
|
document.getElementById("btn-play").onclick = runSimulation; |
|
|
|
|
|
document.getElementById("btn-reset").onclick = () => { |
|
|
Matter.Runner.stop(STATE.runner); |
|
|
const level = LEVELS[STATE.currentLevelIndex]; |
|
|
Matter.Composite.clear(STATE.engine.world); |
|
|
const { ball, goal } = level.setup(Matter.World, Matter.Bodies, STATE.engine.world, () => {}); |
|
|
|
|
|
STATE.currentBall = ball; |
|
|
|
|
|
STATE.plannedActions.forEach((action) => { |
|
|
Matter.World.add(STATE.engine.world, action.previewBody); |
|
|
}); |
|
|
|
|
|
STATE.isPlaying = false; |
|
|
document.getElementById("status-badge").innerHTML = `<div class="w-3 h-3 bg-red-500 rounded-full border border-black animate-pulse"></div> READY`; |
|
|
document.getElementById("timer-display").innerText = "0.00s"; |
|
|
document.getElementById("win-message").style.display = "none"; |
|
|
}; |
|
|
|
|
|
document.getElementById("btn-clear-all").onclick = () => { |
|
|
document.getElementById("code-input").value = ""; |
|
|
STATE.plannedActions.forEach((action) => { |
|
|
if (action.previewBody) Matter.World.remove(STATE.engine.world, action.previewBody); |
|
|
}); |
|
|
STATE.plannedActions = []; |
|
|
updateActionList(); |
|
|
document.getElementById("btn-reset").click(); |
|
|
}; |
|
|
|
|
|
document.getElementById("btn-back").onclick = renderMenu; |
|
|
document.getElementById("btn-hint").onclick = () => { |
|
|
const content = document.getElementById("hint-content"); |
|
|
content.classList.toggle("hidden"); |
|
|
}; |
|
|
|
|
|
document.getElementById("btn-solution").addEventListener("click", () => { |
|
|
const level = LEVELS[STATE.currentLevelIndex]; |
|
|
if (level.solution) { |
|
|
document.getElementById("code-input").value = level.solution; |
|
|
} |
|
|
}); |
|
|
|
|
|
window.onload = () => { |
|
|
loadProgress(); |
|
|
initPhysics(); |
|
|
renderMenu(); |
|
|
initModel(); |
|
|
}; |
|
|
</script> |
|
|
</body> |
|
|
|
|
|
</html> |
