impr: Add lose state to suika game and do a small refactor (#2350)

Author: reczkok

apps/typegpu-docs/src/examples/rendering/suika-sdf/constants.ts

@@ -9,6 +9,11 @@ export const WALL_DEFS = [
   { cx: 0.5, cy: 0, hw: 0.05, hh: 0.55 },
   { cx: -0.5, cy: 0, hw: 0.05, hh: 0.55 },
 ];
+export const PHYSICS_WALL_DEFS = [
+  { cx: 0, cy: -0.5, hw: 0.5, hh: 0.05 },
+  { cx: 0.5, cy: 1.75, hw: 0.05, hh: 2.8 },
+  { cx: -0.5, cy: 1.75, hw: 0.05, hh: 2.8 },
+];
 
 export const SCENE_SCALE = 0.75;
 export const WALL_COLOR = d.vec3f(0.55, 0.5, 0.45);
@@ -18,6 +23,14 @@ export const GHOST_ALPHA = 0.45;
 export const SMOOTH_MIN_K = 16.0;
 export const SHARP_FACTOR = 2.4;
 export const SPEED_BLEND_MAX = 0.5;
+export const PULL_ACTIVATION_FACTOR = 2.2;
+export const PULL_FORCE = 0.0015;
+export const LOSE_LINE_Y = 0.452;
+export const LOSE_TIMEOUT_MS = 8_000;
+export const WARNING_FLASH_SPEED = 0.01;
+export const ESCAPE_X = 0.72;
+export const ESCAPE_BOTTOM_Y = -0.85;
+export const LOSE_LINE_HALF_THICKNESS = 0.005;
 
 export const MERGE_SCORES = Array.from({ length: LEVEL_COUNT }, (_, n) => ((n + 1) * (n + 2)) / 2);
 

apps/typegpu-docs/src/examples/rendering/suika-sdf/index.html

@@ -44,10 +44,76 @@
   #attribution a:hover {
     text-decoration: underline;
   }
+
+  #lose-screen {
+    position: absolute;
+    inset: 0;
+    z-index: 4;
+    display: grid;
+    place-items: center;
+    background: rgba(38, 14, 14, 0.55);
+    backdrop-filter: blur(6px);
+  }
+
+  #lose-screen[hidden] {
+    display: none;
+  }
+
+  #lose-card {
+    min-width: 15rem;
+    padding: 1.25rem 1.5rem;
+    border-radius: 1rem;
+    background: rgba(255, 247, 240, 0.94);
+    box-shadow:
+      0 1rem 2.5rem rgba(0, 0, 0, 0.3),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.65);
+    text-align: center;
+    color: #4d2216;
+    font-family: 'Fredoka One', cursive;
+  }
+
+  #lose-card h2 {
+    margin: 0 0 0.625rem;
+    font-size: 2rem;
+    color: #c63d2f;
+  }
+
+  #lose-score {
+    margin-bottom: 1rem;
+    font-size: 1.1rem;
+  }
+
+  #reset-button {
+    border: 0;
+    border-radius: 999px;
+    padding: 0.65rem 1.2rem;
+    background: linear-gradient(180deg, #ffb45b, #ef7d32);
+    color: white;
+    font: inherit;
+    cursor: pointer;
+    box-shadow: 0 0.35rem 0 rgba(168, 78, 26, 0.9);
+  }
+
+  #reset-button:hover {
+    filter: brightness(1.05);
+  }
+
+  #reset-button:active {
+    transform: translateY(0.15rem);
+    box-shadow: 0 0.2rem 0 rgba(168, 78, 26, 0.9);
+  }
 </style>
 
 <div id="score">0</div>
 
+<div id="lose-screen" hidden>
+  <div id="lose-card">
+    <h2>Game Over</h2>
+    <div id="lose-score">Score: <span id="final-score">0</span></div>
+    <button id="reset-button" type="button">Reset</button>
+  </div>
+</div>
+
 <div id="attribution">
   Assets by
   <a href="https://apps2amigos.itch.io/fruit-game-free-asset-pack" target="_blank">Apps2Amigos</a