sus

web/src/lib/operators.ts

@@ -25,8 +25,8 @@ enum Gender {
 }
 
 enum Side {
-	attacker = `url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='%2324262a' d='M19.27,9.74l-4.25,2.17L10.73,9.7L8.15,28h13.7L19.27,9.74z M21.23,7.01V2h-2.88v1.73h-1.96V2h-2.78v1.73h-1.96V2H8.77v4.96l6.25,3.51L21.23,7.01z'/></svg>")`,
+	defender = `data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='%2324262a' d='M19.27,9.74l-4.25,2.17L10.73,9.7L8.15,28h13.7L19.27,9.74z M21.23,7.01V2h-2.88v1.73h-1.96V2h-2.78v1.73h-1.96V2H8.77v4.96l6.25,3.51L21.23,7.01z'/></svg>`,
-	defender = `url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='%2324262a' d='M8.32,19.16l-5.54,5.54H2V28h3.31v-0.79l5.54-5.54H8.32V19.16z M25.2,2L10.29,17.18L8.5,15.4l-0.94,0.94l1.87,1.87v2.36h2.36l1.87,1.87l0.94-0.94l-1.78-1.78L28,4.8V2H25.2z M21.68,19.16v2.52h-2.52l5.54,5.54V28H28v-3.31h-0.78L21.68,19.16z M14.6,11.98L4.8,2H2v2.8l9.98,9.8L14.6,11.98z M20.57,18.21l1.87-1.87L21.5,15.4l-1.78,1.78l-1.67-1.71l-2.56,2.56l1.7,1.67L15.4,21.5l0.94,0.94l1.87-1.87h2.36V18.21z'/></svg>")`
+	attacker = `data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='%2324262a' d='M8.32,19.16l-5.54,5.54H2V28h3.31v-0.79l5.54-5.54H8.32V19.16z M25.2,2L10.29,17.18L8.5,15.4l-0.94,0.94l1.87,1.87v2.36h2.36l1.87,1.87l0.94-0.94l-1.78-1.78L28,4.8V2H25.2z M21.68,19.16v2.52h-2.52l5.54,5.54V28H28v-3.31h-0.78L21.68,19.16z M14.6,11.98L4.8,2H2v2.8l9.98,9.8L14.6,11.98z M20.57,18.21l1.87-1.87L21.5,15.4l-1.78,1.78l-1.67-1.71l-2.56,2.56l1.7,1.67L15.4,21.5l0.94,0.94l1.87-1.87h2.36V18.21z'/></svg>`
 }
 
 enum Squad {

web/src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { SvelteUIProvider, Input, NativeSelect, Text, Switch, Button, Center, Title } from '@svelteuidev/core';
+  import { SvelteUIProvider, Container, 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';
@@ -10,15 +10,14 @@
     function toggleTheme() {
         isDark = !isDark;
     }
-  let leftIcon : any = {};
+  let leftIcon : any = '';
   let selectedOp: any = null;
-  let selectedOpIcon: any = null;
+  let selectedOpName: any = null;
-  onMount(() => {
+  let guesses: any = [];
-    leftIcon = new Image();
+  let options = data.operators.map((operator) => ({
-    leftIcon.src = data.operators[0].image;
+            label: operator.name,
-    leftIcon.style.width = '2rem';
+            value: operator.name,
-    leftIcon.style.height = '2rem';
+          }));
-  });
 </script>
 <SvelteUIProvider withGlobalStyles themeObserver={isDark ? 'dark' : 'light'}>
   <div style="display: flex; justify-content: flex-end; width:100%;">
@@ -37,24 +36,62 @@
       <Title>
         Siegedle
       </Title>
+      <div style="display: flex; max-width: 20rem; justify-content: center; width: 100%;">
+        {#if !selectedOp}
+        <img src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%0D%0A%09%3Cpolygon%20fill%3D%22%2324262a%22%20points%3D%2214%2C1%2012%2C4%2012%2C7%2013%2C8%2013%2C9%2011%2C10%205%2C19%205%2C21%2010%2C25%208%2C29%20%0D%0A%0921%2C29%2022%2C24%2025%2C22%2025%2C19%2022%2C11%2019%2C9%2018%2C6.88%2018%2C3%2016%2C1%20%22%2F%3E%0D%0A%3C%2Fsvg%3E" alt="operator_image" style="width: 4rem; height: 4rem;" />
+        {/if}
+        {#if selectedOp}
+        <img src={leftIcon} alt="operator_image" style="width: 4rem; height: 4rem;" />
+        {/if}
         <NativeSelect
-        placeholder='Guess an operator'
+          placeholder='   Guess an operator'
-        data={data.operators.map((operator) => ({
+          data={options}
-          label: operator.name,
+          bind:value={selectedOpName}
-          value: operator.image,        
+          on:change={() => {
-        }))}
+            selectedOp = data.operators.find((operator) => operator.name === selectedOpName);
-        bind:value={selectedOpIcon}
+            leftIcon = selectedOp.image;
-        icon={leftIcon}
+          }}
+          override={{
+            width: '100%',
+            minWidth: '8rem',
+          }}
+          description='Select an operator'
+        />
+      </div>
+      <Button
       override={{
         width: '100%',
         maxWidth: '20rem',
         minWidth: '10rem',
       }}
-        on:change={() => {
+      on:click={() => {
-          leftIcon.src = selectedOpIcon;
+        if(!selectedOp) return;
+        guesses = guesses.concat([selectedOp]);
+        options = options.filter((option) => option.value !== selectedOpName);
+        selectedOp = null;
+        selectedOpName = null;
       }}
-        description='Select an operator'
+      >
-      />
+        Guess
+      </Button>
+      <div>
+        {#each guesses as guess }
+          <div style="display: flex; flex-direction: row;">
+            {#if guess.name === data.selectedOperator.name}
+              <div style="height: full; display: flex; align-items: center;"><Text override={{color: 'red', fontWeight: 'bold'}}>Correct!</Text></div>
+            {:else}
+              <div style="height: full; display: flex; align-items: center;"><Text override={{color: 'red', 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'}}>
+              <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'}}>
+              <img src={guess.side} alt='side' style="width: 2rem; height: 2rem;" />
+            </Center>
+          </div>
+        {/each}
+      </div>
     </div>
   </Center>
 </SvelteUIProvider>

web/src/routes/+page.ts

@@ -2,5 +2,6 @@ import type { PageLoad } from './$types';
 import { operators } from '../lib/operators';
 
 export const load = (async () => {
-	return { operators };
+	const selectedOperator = operators[Math.floor(Math.random() * operators.length)];
+	return { operators, selectedOperator };
 }) satisfies PageLoad;