ruben
/
siegedle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sus

Browse Source
master
ruben 3 years ago
parent b874b2dbea
commit a62dca55e8
3 changed files with 68 additions and 30 deletions
Show Stats Download Patch File Download Diff File

4
web/src/lib/operators.ts
Unescape View File

@ -25,8 +25,8 @@ enum Gender {
} }
enum Side { 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 { enum Squad {

91
web/src/routes/+page.svelte
Unescape View File

@ -1,5 +1,5 @@
<script lang="ts"> <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 FaMoon from 'svelte-icons/fa/FaMoon.svelte'
import FaSun from 'svelte-icons/fa/FaSun.svelte' import FaSun from 'svelte-icons/fa/FaSun.svelte'
import { page } from '$app/stores'; import { page } from '$app/stores';
@ -10,15 +10,14 @@
function toggleTheme() { function toggleTheme() {
isDark = !isDark; isDark = !isDark;
} }
let leftIcon : any = {}; let leftIcon : any = '';
let selectedOp: any = null; 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> </script>
<SvelteUIProvider withGlobalStyles themeObserver={isDark ? 'dark' : 'light'}> <SvelteUIProvider withGlobalStyles themeObserver={isDark ? 'dark' : 'light'}>
<div style="display: flex; justify-content: flex-end; width:100%;"> <div style="display: flex; justify-content: flex-end; width:100%;">
@ -37,24 +36,62 @@
<Title> <Title>
Siegedle Siegedle
</Title> </Title>
<NativeSelect <div style="display: flex; max-width: 20rem; justify-content: center; width: 100%;">
placeholder='Guess an operator' {#if !selectedOp}
data={data.operators.map((operator) => ({ <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;" />
label: operator.name, {/if}
value: operator.image, {#if selectedOp}
}))} <img src={leftIcon} alt="operator_image" style="width: 4rem; height: 4rem;" />
bind:value={selectedOpIcon} {/if}
icon={leftIcon} <NativeSelect
override={{ placeholder=' Guess an operator'
width: '100%', data={options}
maxWidth: '20rem', bind:value={selectedOpName}
minWidth: '10rem', on:change={() => {
}} selectedOp = data.operators.find((operator) => operator.name === selectedOpName);
on:change={() => { leftIcon = selectedOp.image;
leftIcon.src = selectedOpIcon; }}
}} override={{
description='Select an operator' width: '100%',
/> minWidth: '8rem',
}}
description='Select an operator'
/>
</div>
<Button
override={{
width: '100%',
maxWidth: '20rem',
minWidth: '10rem',
}}
on:click={() => {
if(!selectedOp) return;
guesses = guesses.concat([selectedOp]);
options = options.filter((option) => option.value !== selectedOpName);
selectedOp = null;
selectedOpName = null;
}}
>
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> </div>
</Center> </Center>
</SvelteUIProvider> </SvelteUIProvider>

3
web/src/routes/+page.ts
Unescape View File

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

Write Preview
Loading…
Cancel
Save