Skip to content

Commit

Permalink
feat: move page title + styling fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@awwpotato
awwpotato committed Nov 19, 2024
1 parent afc227b commit 1056057
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 87 deletions.
8 changes: 6 additions & 2 deletions src/routes/scout/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
let actions: AutoActionData[] = $state([]);
let timelineExtended = $state(false);
let pageName = $state('');
const match: TeamMatch = $state({
id: 0,
Expand All @@ -27,9 +28,12 @@
</script>

<div class="m-auto flex h-dvh max-w-md flex-col items-center gap-2 p-2">
<span class="w-full border-b-2 border-white/10 pb-2 font-semibold">Team {team_key}</span>
<div class="flex w-full justify-between border-b-2 border-white/10 pb-2 font-semibold">
<span class="flex-grow">Team {team_key}</span>
<span class="flex-grow text-right">{pageName}</span>
</div>

<ActionInputs bind:actions />
<ActionInputs bind:actions bind:pageName />

<button
class="w-full border-t-2 border-white/10 pt-2 text-center font-semibold"
Expand Down
184 changes: 99 additions & 85 deletions src/routes/scout/ActionInputs.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
<script lang="ts">
import SuccessFail from '$lib/components/SuccessFail.svelte';
import type { AutoAction, AutoInputState, AutoActionData } from '$lib/types';
import { derived } from 'svelte/store';
const { actions = $bindable() }: { actions: AutoActionData[] } = $props();
let {
actions = $bindable(),
pageName = $bindable()
}: { actions: AutoActionData[]; pageName: string } = $props();
let actionState: AutoInputState = $state('None') as AutoInputState;
Expand Down Expand Up @@ -54,13 +58,23 @@
const is_intake_state: boolean = $derived(actionState === 'Intake');
const is_score_state: boolean = $derived(actionState === 'Score');
const is_eject_state = $derived(actionState === 'Eject');
$effect(() => {
pageName = is_none_state
? 'Home'
: is_intake_state
? 'Intake'
: is_score_state
? 'Score'
: is_eject_state
? 'Eject'
: '';
});
</script>

<div class="align-center flex min-w-[60%] flex-grow flex-col">
<div class="align-center flex w-full max-w-md flex-grow flex-col px-2">
{#if is_none_state}
<div
class="-ml-12 -mr-12 mb-2 mt-2 grid flex-grow grid-cols-1 grid-rows-3 gap-2 text-2xl font-bold"
>
<div class="grid flex-grow grid-cols-1 grid-rows-3 gap-2 py-2 text-2xl font-bold">
<button class="rounded bg-gunmetal p-2" onclick={intake_piece}>Intake</button>
{#if held_scorables > 0}
<button class="rounded bg-gunmetal p-2" onclick={score_piece}>Score</button>
Expand All @@ -70,108 +84,108 @@
{/if}
</div>
{:else if is_intake_state}
<div class="flex flex-grow flex-col items-center gap-4">
<h1 class="text-xl font-bold">Intake</h1>
<div class="-mt-2 grid flex-grow grid-cols-2 grid-rows-2 gap-2 text-xl">
<button
class="rounded bg-gunmetal p-2"
onclick={() => (actionState = 'IntakeBunny')}>Bunny</button
>
<button class="rounded bg-gunmetal p-2" onclick={() => (actionState = 'IntakeTote')}
>Tote</button
>
<button
class="rounded bg-gunmetal p-2"
onclick={() => (actionState = 'IntakeBalloon')}>Balloon: Ground</button
>
<button
class="rounded bg-gunmetal p-2"
onclick={() => (actionState = 'IntakeBalloonCoral')}>Ballon: Coral</button
>
</div>
<div class="grid w-full flex-grow grid-cols-2 grid-rows-2 gap-2 py-2 text-xl font-bold">
<button class="rounded bg-gunmetal p-2" onclick={() => (actionState = 'IntakeBunny')}
>Bunny</button
>
<button class="rounded bg-gunmetal p-2" onclick={() => (actionState = 'IntakeTote')}
>Tote</button
>
<button class="rounded bg-gunmetal p-2" onclick={() => (actionState = 'IntakeBalloon')}
>Balloon: Ground</button
>
<button
class="w-full rounded bg-gunmetal p-2 text-xl"
onclick={() => (actionState = 'None')}>Cancel</button
class="rounded bg-gunmetal p-2"
onclick={() => (actionState = 'IntakeBalloonCoral')}>Ballon: Coral</button
>
</div>
<button
class="w-full rounded bg-gunmetal p-2 text-xl"
onclick={() => (actionState = 'None')}>Cancel</button
>
{:else if is_score_state}
<div class="flex flex-grow flex-col items-center gap-4 text-lg">
<div class="flex w-full flex-grow flex-col items-center gap-2 py-2 text-lg font-bold">
{#if held_bunnies > 0}
<h1 class="font-bold">Score Bunny</h1>
<div class="-mt-2 grid flex-grow grid-cols-2 grid-rows-2 gap-2">
<button class="rounded bg-gunmetal p-2" onclick={() => score_bunny('Low')}
>Low Zone</button
>
<button
class="rounded bg-gunmetal p-2"
onclick={() => score_bunny('UncontrolledTote')}>Uncontrolled Tote</button
>
{#if held_totes > 0}
<div class="flex w-full flex-grow flex-col items-center gap-2 text-lg">
<h1>Bunny</h1>
<div class="grid w-full flex-grow grid-cols-2 grid-rows-2 gap-2">
<button class="rounded bg-gunmetal p-2" onclick={() => score_bunny('Low')}
>Low Zone</button
>
<button
class="rounded bg-gunmetal p-2"
onclick={() => score_bunny('InternalTote')}>Internal Held Tote</button
onclick={() => score_bunny('UncontrolledTote')}
>Uncontrolled Tote</button
>
{#if held_totes > 0}
<button
class="rounded bg-gunmetal p-2"
onclick={() => score_bunny('InternalTote')}
>Internal Held Tote</button
>
{/if}
<button
class="rounded bg-gunmetal p-2 {held_totes <= 0 ? 'col-span-2' : ''}"
onclick={() => score_bunny('ExternalTote')}>External Held Tote</button
>
{/if}
<button
class="rounded bg-gunmetal p-2 {held_totes <= 0 ? 'col-span-2' : ''}"
onclick={() => score_bunny('ExternalTote')}>External Held Tote</button
>
</div>
</div>
{/if}
{#if held_balloons > 0}
<h1 class="font-bold">Score Ballon</h1>
<div class="-mt-2 grid flex-grow grid-cols-2 grid-rows-2 gap-2">
<button class="rounded bg-gunmetal p-2" onclick={() => score_balloon('Low')}
>Low Zone</button
>
<button
class="rounded bg-gunmetal p-2"
onclick={() => score_balloon('UncontrolledTote')}>Uncontrolled Tote</button
>
{#if held_totes > 0}
<div class="flex w-full flex-grow flex-col items-center gap-2 py-2 text-lg">
<h1>Ballon</h1>
<div class="grid w-full flex-grow grid-cols-2 grid-rows-2 gap-2">
<button class="rounded bg-gunmetal p-2" onclick={() => score_balloon('Low')}
>Low Zone</button
>
<button
class="rounded bg-gunmetal p-2"
onclick={() => score_balloon('InternalTote')}>Internal Held Tote</button
onclick={() => score_balloon('UncontrolledTote')}
>Uncontrolled Tote</button
>
{/if}
<button
class="rounded bg-gunmetal p-2 {held_totes <= 0 ? 'col-span-2' : ''}"
onclick={() => score_balloon('ExternalTote')}
>External Held Tote
</button>
{#if held_totes > 0}
<button
class="rounded bg-gunmetal p-2"
onclick={() => score_balloon('InternalTote')}
>Internal Held Tote</button
>
{/if}
<button
class="rounded bg-gunmetal p-2 {held_totes <= 0 ? 'col-span-2' : ''}"
onclick={() => score_balloon('ExternalTote')}
>External Held Tote
</button>
</div>
</div>
{/if}
<button class="w-full rounded bg-gunmetal p-2" onclick={() => (actionState = 'None')}
>Cancel</button
>
</div>
{:else if is_eject_state}
<div class="-ml-12 -mr-12 flex flex-grow flex-col items-center gap-4 text-xl">
<h2 class="font-bold">Eject</h2>
<div class="mb-2 mt-2 grid w-full flex-grow grid-flow-row gap-2">
{#if held_bunnies > 0}
<button
class="w-full rounded bg-gunmetal p-2"
onclick={() => (actionState = 'EjectBunny')}>Bunny</button
>
{/if}
{#if held_balloons > 0}
<button
class="w-full rounded bg-gunmetal p-2"
onclick={() => (actionState = 'EjectBalloon')}>Ballon</button
>
{/if}
{#if held_totes > 0}
<button
class="w-full rounded bg-gunmetal p-2"
onclick={() => (actionState = 'EjectTote')}>Tote</button
>
{/if}
</div>
<button class="w-full rounded bg-gunmetal p-2" onclick={() => (actionState = 'None')}
>Cancel</button
>
<div class="grid w-full flex-grow grid-flow-row gap-2 py-2 font-bold">
{#if held_bunnies > 0}
<button
class="w-full rounded bg-gunmetal p-2"
onclick={() => (actionState = 'EjectBunny')}>Bunny</button
>
{/if}
{#if held_balloons > 0}
<button
class="w-full rounded bg-gunmetal p-2"
onclick={() => (actionState = 'EjectBalloon')}>Ballon</button
>
{/if}
{#if held_totes > 0}
<button
class="w-full rounded bg-gunmetal p-2"
onclick={() => (actionState = 'EjectTote')}>Tote</button
>
{/if}
</div>
<button class="w-full rounded bg-gunmetal p-2" onclick={() => (actionState = 'None')}
>Cancel</button
>
{:else}
<SuccessFail
{complete}
Expand Down

0 comments on commit 1056057

Please sign in to comment.