Extract styles, add per-scene link tuning, update docs

README.md

@@ -12,7 +12,7 @@ Physilinks is a browser-based physics linking game built with Matter.js. Match a
 
 ## Tech notes
 - **Engine**: Matter.js (via CDN). Canvas rendering with custom overlays for HUD, pause, game over, and score popups.
-- **Scenes**: Defined in `main.js` as an array of presets (config + `createBodies` factory). Applying a scene updates gravity, spawn rate, ball radius, palette, and static bodies, then restarts the game.
+- **Scenes**: Defined in `main.js` as an array of presets (config + `createBodies` factory). Applying a scene updates gravity, spawn rate, ball radius, palette, link constraints (stiffness/stretch/damping/width), and static bodies, then restarts the game.
 - **Physics entities**: Falling balls (`Bodies.circle`) with gentle restitution/friction; static boundaries/obstacles per scene. The top is open; sides and floor are static bodies.
 - **Input**: Pointer/touch events mapped to scene coords; chain state tracks bodies and a dashed preview line to the pointer. Undo by dragging back to the previous node.
 - **Scoring**: `10 × length²` per cleared chain. Score popup rendered as DOM element near release point.
@@ -22,5 +22,5 @@ Physilinks is a browser-based physics linking game built with Matter.js. Match a
 
 ## Development quick start
 - No build step. Open `index.html` directly in the browser.
-- Key files: `index.html` (layout/styles), `main.js` (game logic).
+- Key files: `index.html` (layout), `styles.css` (styling), `main.js` (game logic).
 - Adjust or add scenes in `main.js` by extending the `scenes` array with config and a `createBodies(width, height)` function.

index.html

@@ -10,289 +10,8 @@
             href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap"
             rel="stylesheet"
         />
-        <style>
+        <link rel="stylesheet" href="styles.css" />
-            :root {
+
-                --bg: #0f172a;
-                --panel: #111827;
-                --accent: #22d3ee;
-                --text: #e2e8f0;
-                --muted: #94a3b8;
-            }
-            * {
-                box-sizing: border-box;
-            }
-            body {
-                margin: 0;
-                font-family:
-                    "Manrope",
-                    system-ui,
-                    -apple-system,
-                    sans-serif;
-                background:
-                    radial-gradient(
-                        circle at 25% 20%,
-                        rgba(56, 189, 248, 0.12),
-                        transparent 25%
-                    ),
-                    radial-gradient(
-                        circle at 80% 10%,
-                        rgba(167, 139, 250, 0.16),
-                        transparent 30%
-                    ),
-                    radial-gradient(
-                        circle at 40% 80%,
-                        rgba(52, 211, 153, 0.12),
-                        transparent 25%
-                    ),
-                    var(--bg);
-                color: var(--text);
-                min-height: 100vh;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                padding: 20px;
-            }
-            .shell {
-                width: min(1100px, 100%);
-                background: rgba(17, 24, 39, 0.72);
-                border: 1px solid rgba(148, 163, 184, 0.1);
-                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
-                border-radius: 18px;
-                overflow: hidden;
-                position: relative;
-                backdrop-filter: blur(10px);
-            }
-            header {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                padding: 14px 18px;
-                background: rgba(255, 255, 255, 0.02);
-                border-bottom: 1px solid rgba(148, 163, 184, 0.08);
-            }
-            header h1 {
-                font-size: 20px;
-                margin: 0;
-                letter-spacing: 0.5px;
-            }
-            header .meta {
-                display: flex;
-                gap: 14px;
-                align-items: center;
-                font-size: 13px;
-                color: var(--muted);
-            }
-            .pause-btn {
-                background: rgba(34, 211, 238, 0.14);
-                color: #67e8f9;
-                border: 1px solid rgba(34, 211, 238, 0.4);
-                border-radius: 10px;
-                padding: 8px 12px;
-                font-weight: 700;
-                cursor: pointer;
-                transition:
-                    transform 120ms ease,
-                    filter 120ms ease;
-            }
-            .pause-btn:hover {
-                filter: brightness(1.05);
-                transform: translateY(-1px);
-            }
-            .pause-btn:active {
-                transform: translateY(0);
-            }
-            header .pill {
-                padding: 6px 10px;
-                border-radius: 8px;
-                background: rgba(34, 211, 238, 0.12);
-                color: #67e8f9;
-                border: 1px solid rgba(34, 211, 238, 0.35);
-                font-weight: 700;
-                font-size: 12px;
-                letter-spacing: 0.6px;
-                text-transform: uppercase;
-            }
-            #scene-wrapper {
-                position: relative;
-                width: 100%;
-                height: 680px;
-                background:
-                    radial-gradient(
-                        circle at 30% 30%,
-                        rgba(255, 255, 255, 0.02),
-                        transparent 40%
-                    ),
-                    radial-gradient(
-                        circle at 75% 60%,
-                        rgba(255, 255, 255, 0.02),
-                        transparent 45%
-                    ),
-                    #0b1222;
-            }
-            canvas {
-                display: block;
-                width: 100%;
-                height: 100%;
-            }
-            .hud-bar {
-                display: flex;
-                gap: 10px;
-                flex-wrap: wrap;
-                padding: 12px 16px;
-                background: rgba(255, 255, 255, 0.03);
-                border-top: 1px solid rgba(148, 163, 184, 0.08);
-            }
-            .hud-bar .card {
-                background: rgba(255, 255, 255, 0.04);
-                padding: 10px 12px;
-                border: 1px solid rgba(148, 163, 184, 0.14);
-                border-radius: 10px;
-                font-size: 13px;
-                color: var(--muted);
-                display: flex;
-                align-items: center;
-                gap: 6px;
-            }
-            .hud-bar .card strong {
-                color: var(--text);
-                font-size: 13px;
-            }
-            .selector {
-                background: rgba(0, 0, 0, 0.25);
-                color: var(--text);
-                border: 1px solid rgba(148, 163, 184, 0.3);
-                border-radius: 8px;
-                padding: 6px 8px;
-                font-size: 13px;
-            }
-            .legend {
-                position: absolute;
-                top: 16px;
-                right: 16px;
-                background: rgba(255, 255, 255, 0.04);
-                padding: 10px 12px;
-                border: 1px solid rgba(148, 163, 184, 0.14);
-                border-radius: 10px;
-                display: flex;
-                gap: 8px;
-                flex-wrap: wrap;
-                align-items: center;
-                pointer-events: none;
-            }
-            .legend span {
-                width: 18px;
-                height: 18px;
-                border-radius: 50%;
-                border: 1px solid rgba(255, 255, 255, 0.12);
-                display: inline-block;
-            }
-            .pause-overlay {
-                position: absolute;
-                top: 12px;
-                left: 50%;
-                transform: translateX(-50%);
-                background: rgba(255, 255, 255, 0.08);
-                border: 1px solid rgba(148, 163, 184, 0.3);
-                color: #e2e8f0;
-                padding: 8px 14px;
-                border-radius: 12px;
-                font-weight: 800;
-                letter-spacing: 0.5px;
-                opacity: 0;
-                pointer-events: none;
-                transition: opacity 160ms ease;
-            }
-            .pause-overlay.visible {
-                opacity: 1;
-            }
-            .game-over {
-                position: absolute;
-                inset: 0;
-                background: rgba(10, 13, 25, 0.72);
-                backdrop-filter: blur(8px);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                pointer-events: none;
-                opacity: 0;
-                transition: opacity 200ms ease;
-            }
-            .game-over.visible {
-                pointer-events: auto;
-                opacity: 1;
-            }
-            .game-over__card {
-                background: rgba(255, 255, 255, 0.04);
-                border: 1px solid rgba(148, 163, 184, 0.18);
-                border-radius: 14px;
-                padding: 20px 24px;
-                text-align: center;
-                min-width: 240px;
-                box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
-            }
-            .game-over__card .title {
-                font-size: 22px;
-                font-weight: 700;
-                margin-bottom: 10px;
-            }
-            .game-over__card .score-line {
-                font-size: 14px;
-                color: var(--muted);
-                margin-bottom: 14px;
-            }
-            .game-over__card button {
-                background: linear-gradient(135deg, #22d3ee, #0ea5e9);
-                border: none;
-                color: #0b1222;
-                font-weight: 700;
-                padding: 10px 16px;
-                border-radius: 10px;
-                cursor: pointer;
-                font-size: 14px;
-            }
-            .game-over__card button:hover {
-                filter: brightness(1.08);
-            }
-            .floating-score {
-                position: absolute;
-                color: #e0f2fe;
-                font-weight: 800;
-                font-size: 18px;
-                pointer-events: none;
-                text-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
-                animation: floatUp 900ms ease-out forwards;
-            }
-            @keyframes floatUp {
-                0% {
-                    opacity: 1;
-                    transform: translate(-50%, 0);
-                }
-                60% {
-                    opacity: 0.9;
-                    transform: translate(-50%, -22px);
-                }
-                100% {
-                    opacity: 0;
-                    transform: translate(-50%, -38px);
-                }
-            }
-            .instructions {
-                padding: 14px 18px;
-                font-size: 14px;
-                color: var(--muted);
-                background: rgba(255, 255, 255, 0.03);
-                border-top: 1px solid rgba(148, 163, 184, 0.08);
-                line-height: 1.6;
-            }
-            @media (max-width: 800px) {
-                #scene-wrapper {
-                    height: 520px;
-                }
-                header h1 {
-                    font-size: 18px;
-                }
-            }
-        </style>
     </head>
     <body>
         <div class="shell">

main.js

@@ -17,6 +17,7 @@
     minChain: 3,
     palette: ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"],
     ballRadius: 18,
+    link: { stiffness: 0.9, lengthScale: 1, damping: 0.05, lineWidth: 3 },
   };
 
   const scenes = [
@@ -24,11 +25,12 @@
       id: "scene1",
       name: "Balanced (default)",
       config: {
-        gravity: 0.88,
+        gravity: 1,
-        spawnIntervalMs: 720,
+        spawnIntervalMs: 520,
         minChain: 3,
         palette: ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"],
-        ballRadius: 38,
+        ballRadius: 18,
+        link: { stiffness: 0.9, lengthScale: 1, damping: 0.05, lineWidth: 3 },
       },
       createBodies: (w, h) => [
         Bodies.rectangle(w / 2, h + 40, w, 80, {
@@ -56,6 +58,7 @@
         minChain: 3,
         palette: ["#fb7185", "#fbbf24", "#34d399", "#38bdf8"],
         ballRadius: 22,
+        link: { stiffness: 0.6, lengthScale: 1.2, damping: 0.01, lineWidth: 4 },
       },
       createBodies: (w, h) => [
         Bodies.rectangle(w / 2, h + 50, w, 100, {
@@ -87,6 +90,7 @@
         minChain: 3,
         palette: ["#e879f9", "#38bdf8", "#f97316", "#22c55e"],
         ballRadius: 16,
+        link: { stiffness: 1, lengthScale: 0.85, damping: 0.15, lineWidth: 3 },
       },
       createBodies: (w, h) => {
         const bodies = [
@@ -211,6 +215,7 @@
     currentScene = next;
     if (sceneSelectEl) sceneSelectEl.value = next.id;
     Object.assign(config, next.config);
+    config.link = { ...next.config.link };
     engine.gravity.y = config.gravity;
     highScore = loadHighScore(next.id);
     rebuildSceneBodies();
@@ -353,14 +358,16 @@
   const addToChain = (body) => {
     const last = chain.bodies[chain.bodies.length - 1];
     const dist = Vector.magnitude(Vector.sub(last.position, body.position));
+    const linkCfg = config.link || {};
     const constraint = Constraint.create({
       bodyA: last,
       bodyB: body,
-      length: dist,
+      length: dist * (linkCfg.lengthScale ?? 1),
-      stiffness: 0.9,
+      stiffness: linkCfg.stiffness ?? 0.9,
+      damping: linkCfg.damping ?? 0,
       render: {
         strokeStyle: chain.color,
-        lineWidth: 3,
+        lineWidth: linkCfg.lineWidth ?? 3,
       },
     });
     chain.constraints.push(constraint);

styles.css

@@ -0,0 +1,238 @@
+:root {
+  --bg: #0f172a;
+  --panel: #111827;
+  --accent: #22d3ee;
+  --text: #e2e8f0;
+  --muted: #94a3b8;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
+  background: radial-gradient(circle at 25% 20%, rgba(56,189,248,0.12), transparent 25%),
+              radial-gradient(circle at 80% 10%, rgba(167,139,250,0.16), transparent 30%),
+              radial-gradient(circle at 40% 80%, rgba(52,211,153,0.12), transparent 25%),
+              var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+.shell {
+  width: min(1100px, 100%);
+  background: rgba(17, 24, 39, 0.72);
+  border: 1px solid rgba(148, 163, 184, 0.1);
+  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
+  border-radius: 18px;
+  overflow: hidden;
+  position: relative;
+  backdrop-filter: blur(10px);
+}
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  background: rgba(255, 255, 255, 0.02);
+  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
+}
+header h1 {
+  font-size: 20px;
+  margin: 0;
+  letter-spacing: 0.5px;
+}
+header .meta {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  font-size: 13px;
+  color: var(--muted);
+}
+header .pill {
+  padding: 6px 10px;
+  border-radius: 8px;
+  background: rgba(34, 211, 238, 0.12);
+  color: #67e8f9;
+  border: 1px solid rgba(34, 211, 238, 0.35);
+  font-weight: 700;
+  font-size: 12px;
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+}
+.pause-btn {
+  background: rgba(34, 211, 238, 0.14);
+  color: #67e8f9;
+  border: 1px solid rgba(34, 211, 238, 0.4);
+  border-radius: 10px;
+  padding: 8px 12px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: transform 120ms ease, filter 120ms ease;
+}
+.pause-btn:hover {
+  filter: brightness(1.05);
+  transform: translateY(-1px);
+}
+.pause-btn:active {
+  transform: translateY(0);
+}
+#scene-wrapper {
+  position: relative;
+  width: 100%;
+  height: 680px;
+  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.02), transparent 40%),
+              radial-gradient(circle at 75% 60%, rgba(255,255,255,0.02), transparent 45%),
+              #0b1222;
+}
+canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.hud-bar {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding: 12px 16px;
+  background: rgba(255, 255, 255, 0.03);
+  border-top: 1px solid rgba(148, 163, 184, 0.08);
+}
+.hud-bar .card {
+  background: rgba(255, 255, 255, 0.04);
+  padding: 10px 12px;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  border-radius: 10px;
+  font-size: 13px;
+  color: var(--muted);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.hud-bar .card strong {
+  color: var(--text);
+  font-size: 13px;
+}
+.selector {
+  background: rgba(0, 0, 0, 0.25);
+  color: var(--text);
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  border-radius: 8px;
+  padding: 6px 8px;
+  font-size: 13px;
+}
+.legend {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: rgba(255, 255, 255, 0.04);
+  padding: 10px 12px;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  border-radius: 10px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+  pointer-events: none;
+}
+.legend span {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  display: inline-block;
+}
+.pause-overlay {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  color: #e2e8f0;
+  padding: 8px 14px;
+  border-radius: 12px;
+  font-weight: 800;
+  letter-spacing: 0.5px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 160ms ease;
+}
+.pause-overlay.visible {
+  opacity: 1;
+}
+.game-over {
+  position: absolute;
+  inset: 0;
+  background: rgba(10, 13, 25, 0.72);
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 200ms ease;
+}
+.game-over.visible {
+  pointer-events: auto;
+  opacity: 1;
+}
+.game-over__card {
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 14px;
+  padding: 20px 24px;
+  text-align: center;
+  min-width: 240px;
+  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
+}
+.game-over__card .title {
+  font-size: 22px;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+.game-over__card .score-line {
+  font-size: 14px;
+  color: var(--muted);
+  margin-bottom: 14px;
+}
+.game-over__card button {
+  background: linear-gradient(135deg, #22d3ee, #0ea5e9);
+  border: none;
+  color: #0b1222;
+  font-weight: 700;
+  padding: 10px 16px;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 14px;
+}
+.game-over__card button:hover {
+  filter: brightness(1.08);
+}
+.floating-score {
+  position: absolute;
+  color: #e0f2fe;
+  font-weight: 800;
+  font-size: 18px;
+  pointer-events: none;
+  text-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
+  animation: floatUp 900ms ease-out forwards;
+}
+@keyframes floatUp {
+  0% { opacity: 1; transform: translate(-50%, 0); }
+  60% { opacity: 0.9; transform: translate(-50%, -22px); }
+  100% { opacity: 0; transform: translate(-50%, -38px); }
+}
+.instructions {
+  padding: 14px 18px;
+  font-size: 14px;
+  color: var(--muted);
+  background: rgba(255, 255, 255, 0.03);
+  border-top: 1px solid rgba(148, 163, 184, 0.08);
+  line-height: 1.6;
+}
+@media (max-width: 800px) {
+  #scene-wrapper { height: 520px; }
+  header h1 { font-size: 18px; }
+}