Rework /play page

front/src/lib/models/game.ts

@@ -0,0 +1,48 @@
+import {scoreStore} from "../stores/scoreStore";
+
+export class Game {
+
+    public name : string;
+    public result : number;
+    public state : GameState;
+    private readonly range : number;
+
+    constructor() {
+        this.name = "";
+        this.result = -1;
+        this.state = GameState.Unplayed;
+        this.range = 100
+    }
+
+    public async play() {
+        this.result = this.getRandomNumber();
+        await scoreStore.add(this.name, this.result)
+    }
+
+    public hasBeenPlayed() : boolean {
+        return this.state == GameState.Played;
+    }
+
+    public isRunning() : boolean {
+        return this.state == GameState.Running;
+    }
+
+    private getRandomNumber() : number{
+        let unit = Math.floor(Math.random() * (this.range + 1));
+
+        if(unit === 100){
+            let modifier = Math.floor(Math.random() * (this.range + 1));
+            return unit*modifier;
+        }
+
+        let dec = Math.floor(Math.random() * (this.range));
+        return unit + (dec/100);
+    }
+
+}
+
+export enum GameState {
+    Unplayed,
+    Running,
+    Played,
+}

front/src/routes/play/+page.svelte

@@ -1,54 +1,46 @@
 <script>
-
-    import {scoreStore} from "$lib/stores/scoreStore.ts";
     import bomb from '$lib/assets/bomb.svg';
+    import {Game, GameState} from "$lib/models/game.ts";
 
     let scores;
+    let game = new Game();
 
-    let playerName = undefined;
-    let range = 100;
-    let result = 0;
+    $: isRunning = game.state === GameState.Running;
+    $: hasBeenPlayed = game.state === GameState.Played;
 
     async function roll(){
-
-        toggleLoading();
-        result = getRandomNumber();
+        game.state = GameState.Running;
+        await game.play()
         await new Promise(r => setTimeout(r, 3000));
-
-        toggleLoading();
-        window.$(".result").text(`Result : ${result}/${range}`)
-
-        await scoreStore.add(playerName, result)
-    }
-
-    function getRandomNumber(){
-        let unit = Math.floor(Math.random() * (range + 1));
-        let dec = Math.floor(Math.random() * (range));
-        return unit + (dec/100);
-    }
-
-    function toggleLoading(){
-        window.$(".loader").toggleClass("disabled");
-        window.$(".player").toggleClass("disabled");
+        game.state = GameState.Played;
     }
 
 </script>
 
 <div class="container">
-    <div class="loader disabled">
-        <svg class="circular-loader" viewBox="0 0 30 30">
-            <circle class="loader-path" cx="15" cy="15" r="5" fill="none" stroke="#f1ecec" stroke-width="0.7" />
-        </svg>
-        <div class="info">Rolling a random numbers within range 0-{range}...</div>
-    </div>
 
+    {#if isRunning}
+        <div class="loader">
+            <svg class="circular-loader" viewBox="0 0 30 30">
+                <circle class="loader-path" cx="15" cy="15" r="5" fill="none" stroke="#4b0611" stroke-width="0.7" />
+            </svg>
+            <div class="info">Massacre en cours...</div>
+        </div>
+    {/if}
+
+    {#if !isRunning && !hasBeenPlayed}
         <div class="player">
-        <input class="name" placeholder="Nom de la victime..." bind:value={playerName}/>
+            <input class="name" placeholder="Nom de la victime..." bind:value={game.name}/>
 
             <img class="roll" src={bomb} on:click={roll} alt="Bomb"/>
 
-        <div class="result"></div>
         </div>
+    {/if}
+
+    {#if hasBeenPlayed}
+        <div class="result">Vous avez {game.result}% de chance de mourir</div>
+    {/if}
+
 </div>
 
 <style>
@@ -62,11 +54,6 @@
         text-align: center;
     }
 
-    .disabled
-    {
-        display: none;
-    }
-
     .player
     {
         gap: 2vh;