sus

web/src/routes/+page.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { SvelteUIProvider, Container, NativeSelect, Text, Switch, Button, Center, Title } from '@svelteuidev/core';
+  import { SvelteUIProvider, Modal, NativeSelect, Text, Switch, Button, Center, Title } from '@svelteuidev/core';
   import FaMoon from 'svelte-icons/fa/FaMoon.svelte'
   import FaSun from 'svelte-icons/fa/FaSun.svelte'
 	import { page } from '$app/stores';
   import type {PageData } from './$types';
   import { onMount } from 'svelte';
   export let data: PageData;
-  let isDark = false;
+  let isDark = true;
     function toggleTheme() {
         isDark = !isDark;
     }
@@ -15,20 +15,21 @@
   let selectedOpName: any = null;
   let guesses: any = [];
   let options = data.operators.map((operator) => ({
-            label: operator.name,
+    label: operator.name,
-            value: operator.name,
+    value: operator.name,
-          }));
+  }));
+  let finished = false;
 </script>
 <SvelteUIProvider withGlobalStyles themeObserver={isDark ? 'dark' : 'light'}>
   <div style="display: flex; justify-content: flex-end; width:100%;">
     <div style="width: 1.5rem; height: 1.5rem;">
-      <FaSun/>
+      <FaMoon/>
     </div>
     <div style="margin-right: 0.5rem; margin-left: 0.5rem;">
       <Switch on:change={toggleTheme}/>
     </div>
     <div style="width: 1.5rem; height: 1.5rem;">
-      <FaMoon/>
+      <FaSun/>
     </div>
   </div>
   <Center override={{margin: '5rem'}}>
@@ -56,6 +57,7 @@
             minWidth: '8rem',
           }}
           description='Select an operator'
+          disabled={finished}
         />
       </div>
       <Button
@@ -64,34 +66,48 @@
         maxWidth: '20rem',
         minWidth: '10rem',
       }}
+      disabled={finished}
       on:click={() => {
         if(!selectedOp) return;
         guesses = guesses.concat([selectedOp]);
         options = options.filter((option) => option.value !== selectedOpName);
+        if (selectedOp.name === data.selectedOperator.name) {
+          finished = true;
+        }
         selectedOp = null;
         selectedOpName = null;
       }}
       >
         Guess
       </Button>
-      <div>
+      <div style="display: flex; flex-direction: column; gap: 0.5rem;" >
         {#each guesses as guess }
-          <div style="display: flex; flex-direction: row;">
+          <div style="display: flex; flex-direction: row; gap: 0.5rem;">
             {#if guess.name === data.selectedOperator.name}
-              <div style="height: full; display: flex; align-items: center;"><Text override={{color: 'red', fontWeight: 'bold'}}>Correct!</Text></div>
+              <div style="height: full; display: flex; align-items: center; min-width: 4rem;"><Text override={{ fontWeight: 'bold'}}>Correct!</Text></div>
             {:else}
-              <div style="height: full; display: flex; align-items: center;"><Text override={{color: 'red', fontWeight: 'bold'}}>Wrong!</Text></div>
+              <div style="height: full; display: flex; align-items: center; min-width: 4rem;"><Text override={{ fontWeight: 'bold'}}>Wrong!</Text></div>
             {/if}
             <img src={guess.image} alt="operator_image" style="width: 4rem; height: 4rem;" />
-            <Center override={{bc: guess.gender == data.selectedOperator.gender ? 'green' : 'red', padding: '1rem', minW: '4rem'}}>
+            <Center override={{bc: guess.gender == data.selectedOperator.gender ? 'green' : 'red', padding: '1rem', minW: '3.5rem', borderRadius: '1rem'}}>
               <Text override={{fontWeight: 'bold'}}>{['male', 'female', 'divers'][guess.gender]}</Text>
             </Center>
-            <Center override={{bc: guess.gender == data.selectedOperator.gender ? 'green' : 'red', padding: '1rem', minW: '4rem'}}>
+            <Center override={{bc: guess.gender == data.selectedOperator.gender ? 'green' : 'red', padding: '1rem', minW: '2rem', borderRadius: '1rem'}}>
               <img src={guess.side} alt='side' style="width: 2rem; height: 2rem;" />
             </Center>
+            <Center override={{bc: guess.speed == data.selectedOperator.speed ? 'green' : 'red', padding: '1rem', minW: '4rem', borderRadius: '1rem'}}>
+              <Text>{guess.speed} Speed</Text>
+            </Center>
+            <Center override={{bc: guess.squad == data.selectedOperator.squad ? 'green' : 'red', padding: '1rem', minW: '5rem', borderRadius: '1rem'}}>
+              <Text>{['Rainbow','Nighthaven','Wolfguard','Ghosteyes'][guess.squad]}</Text>
+            </Center>
           </div>
         {/each}
       </div>
     </div>
   </Center>
+  <Modal centered opened={finished} withCloseButton={false} >
+    <img src={data.selectedOperator.image} alt="operator_image" style="width: 4rem; height: 4rem;" />
+    <Text>{data.selectedOperator.name} is Correct!</Text><Text>It took you {guesses.length} {guesses.length == 1 ? 'guess' : 'guesses'} to find the correct operator.</Text>
+  </Modal>
 </SvelteUIProvider>