From acead592b72be57cff093f3bb1c8e86576a09946 Mon Sep 17 00:00:00 2001
From: Tomas Horsky <tomashorsky@kaist.ac.kr>
Date: Tue, 28 Apr 2026 23:54:52 +0900
Subject: [PATCH] Add gameover and overall layout

Co-authored-by: Copilot <copilot@github.com>
---
 src/App.svelte        | 83 ++++++++++++++++++++++++++++++++++++++++---
 src/game/constants.js |  5 ++-
 src/game/game.js      | 57 ++++++++++++++---------------
 src/game/gameUtils.js | 19 ++++++++++
 4 files changed, 126 insertions(+), 38 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 3a6335e..b157f8b 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,19 +1,44 @@
 <script>
-  import { initializeGame, updateGame, getScore } from './game/game.js';
+  import {
+    initializeGame,
+    updateGame,
+    getScore,
+    isGameOver,
+    resetGame
+  } from './game/game.js';
 
   let game;
   let score = $state(0);
+  let highScore = $state(0);
+  let state = $state('start'); // start | playing | gameover
+
 
   window.setup = () => {
     createCanvas(400, 800).parent(game);
     initializeGame();
+    noLoop();
   };
 
   window.draw = () => {
     updateGame();
-    score = getScore();
+    score = Math.floor(getScore());
+
+    if (isGameOver()) {
+      state = 'gameover';
+      if (score > highScore) {
+        highScore = score;
+      }
+      noLoop();
+    }
   };
 
+  function playGame() {
+    resetGame();
+    score = 0;
+    state = 'playing';
+    loop();
+  }
+
   $effect(() => {
     new p5();
   });
@@ -24,11 +49,23 @@
 
   <div class="layout">
     <aside class="scoreboard">
-      <h2>Score</h2>
-      <p>{score}</p>
+      <h2>High Score</h2>
+      <p>{highScore}</p>
     </aside>
 
-    <div class="game-wrapper" bind:this={game}></div>
+    <div class="game-wrapper">
+      <div bind:this={game}></div>
+
+      {#if state !== 'playing'}
+        <div class="overlay">
+          <div class="overlay-card">
+            <h2>{state === 'gameover' ? 'Game over!' : 'Start new game'}</h2>
+            {#if state !== "start"} <p>Score: {score}</p> {/if }
+            <button onclick={playGame}>Play</button>
+          </div>
+        </div>
+      {/if}
+    </div>
 
     <aside class="right-panel"></aside>
   </div>
@@ -74,11 +111,47 @@
   }
 
   .game-wrapper {
+    position: relative;
+    width: 400px;
+    height: 800px;
     border-radius: 18px;
     overflow: hidden;
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
   }
 
+  .overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+  }
+
+  .overlay-card {
+    background: rgba(255, 255, 255, 0.94);
+    color: #111;
+    padding: 28px;
+    border-radius: 18px;
+    min-width: 220px;
+  }
+
+  .overlay-card h2 {
+    margin-top: 0;
+  }
+
+  .overlay-card button {
+    font-size: 18px;
+    font-weight: bold;
+    padding: 10px 28px;
+    border: none;
+    border-radius: 999px;
+    cursor: pointer;
+    background: #2b2d42;
+    color: white;
+  }
+
   .right-panel {
     width: 220px;
   }
diff --git a/src/game/constants.js b/src/game/constants.js
index 600c5b0..2077eb0 100644
--- a/src/game/constants.js
+++ b/src/game/constants.js
@@ -5,7 +5,8 @@ export const GAME_COLORS = {
     movingPlat: '#4cc9f0',
     springPlat: '#80ed99',
     oneTimePlat: '#e76f51',
-    startingPlat: '#f4a261' };
+    startingPlat: '#f4a261' 
+};
 
 export const PLATFORMS_GAP = 80;
 export const PLATFORM_WIDHT = 70;
@@ -17,5 +18,3 @@ export const PLAT_TYPE = {
     SPRING: 'spring',
     ONE_TIME: 'one-time'
 };
-
-
diff --git a/src/game/game.js b/src/game/game.js
index 27f4a70..103191c 100644
--- a/src/game/game.js
+++ b/src/game/game.js
@@ -1,51 +1,46 @@
-import { updatePlayerPosition } from './gameUtils.js';
-import { initPlatforms, moveWorld} from './platforms.js';
+import { updatePlayerPosition, createPlayer } from './gameUtils.js';
+import { initPlatforms, moveWorld } from './platforms.js';
 import { GAME_COLORS, PLATFORMS_GAP } from './constants.js';
 
 // Game state
 let player;
 let platforms;
 let pendingWorldMove = 0;
+let gameOver = false;
 
 export function getScore() {
-  return (player?.elevation ?? 0);
+  return (player?.elevation ?? 0) / PLATFORMS_GAP * 10;
 }
 
-function createPlayer() {
-  player = new Sprite();
-  player.x = width / 2;
-  player.y = 700;
-
-  player.scale = 0.20;
-  player.img = "assets/nubzuki.png";
-  
-  player.rotationLock = true;
-
-  player.w = 20;
-  player.h = 20;
-  player.offset.y = 25;
-
-  player.bounciness = 0;
-  player.elevation = 0;
-  return player;
+export function isGameOver() {
+  return gameOver;
 }
 
+export function resetGame() {
+  allSprites.remove();
+
+  pendingWorldMove = 0;
+  gameOver = false;
 
-export function initializeGame() {
-  //world.debug = true; //TODO remove
-  //allSprites.debug = true; //TODO remove
-  world.gravity.y = 10;
   platforms = initPlatforms();
   player = createPlayer();
 }
 
+export function initializeGame() {
+  world.gravity.y = 10;
+  resetGame();
+}
+
 export function updateGame() {
   clear();
   background(GAME_COLORS.background);
 
-  
+  if (gameOver) {
+    return;
+  }
+
   pendingWorldMove += updatePlayerPosition(player, platforms);
-  
+
   if (pendingWorldMove > PLATFORMS_GAP) {
     const move = Math.min(pendingWorldMove, 5);
     pendingWorldMove -= move;
@@ -53,13 +48,15 @@ export function updateGame() {
     player.y += move;
     player.bounciness = 0;
   }
+
   player.rotation = player.vel.x * 1.5;
 
+  if (player.y > height) {
+    gameOver = true;
+  }
 
-  // UI
   fill(0);
-  textSize(24);
+  textSize(40);
   textAlign(RIGHT);
-  text(`${Math.floor(player.elevation)}`, width - 20, 30);
+  text(getScore(), width - 20, 50);
 }
-
diff --git a/src/game/gameUtils.js b/src/game/gameUtils.js
index 72bc336..eb6715d 100644
--- a/src/game/gameUtils.js
+++ b/src/game/gameUtils.js
@@ -1,5 +1,24 @@
 import { PLAT_TYPE } from './constants.js';
 
+export function createPlayer() {
+  const player = new Sprite();
+  player.x = width / 2;
+  player.y = 700;
+
+  player.scale = 0.20;
+  player.img = "assets/nubzuki.png";
+  
+  player.rotationLock = true;
+
+  player.w = 20;
+  player.h = 20;
+  player.offset.y = 25;
+
+  player.bounciness = 0;
+  player.elevation = 0;
+  return player;
+}
+
 
 function handleJump(player, platform) {