Skip to content

Commit

Permalink
Differentiate Auto and Match with Colors (#21)
Browse files Browse the repository at this point in the history 
* hotfix: just something I forgot in the last pr

* style: differentiate auto and tele with button colors
  • Loading branch information
@azaleacolburn
azaleacolburn authored Dec 9, 2024
1 parent fa264ea commit 57c7d3e
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 39 deletions.
48 changes: 25 additions & 23 deletions src/routes/scout/[team_data]/AutoActionInputs.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,34 +94,35 @@
<div
class="grid flex-grow grid-cols-1 grid-rows-3 gap-2 py-2 font-heading text-2xl font-bold"
>
<button class="rounded bg-gunmetal p-2" onclick={intake_piece}>Intake</button>
<button class="rounded bg-yellow-500 p-2" onclick={intake_piece}>Intake</button>
{#if held_scorables > 0}
<button class="rounded bg-gunmetal p-2" onclick={score_piece}>Score</button>
<button class="rounded bg-yellow-500 p-2" onclick={score_piece}>Score</button>
{/if}
{#if held_ejectables > 0}
<button class="rounded bg-gunmetal p-2" onclick={eject_piece}>Eject</button>
<button class="rounded bg-yellow-500 p-2" onclick={eject_piece}>Eject</button>
{/if}
</div>
{:else if is_intake_state}
<div
class="grid w-full flex-grow grid-cols-2 grid-rows-2 gap-2 py-2 font-heading text-xl font-bold"
>
<button class="rounded bg-gunmetal p-2" onclick={() => (actionState = 'IntakeBunny')}
<button class="rounded bg-yellow-500 p-2" onclick={() => (actionState = 'IntakeBunny')}
>Bunny</button
>
<button class="rounded bg-gunmetal p-2" onclick={() => (actionState = 'IntakeTote')}
<button class="rounded bg-yellow-500 p-2" onclick={() => (actionState = 'IntakeTote')}
>Tote</button
>
<button class="rounded bg-gunmetal p-2" onclick={() => (actionState = 'IntakeBalloon')}
>Balloon: Ground</button
<button
class="rounded bg-yellow-500 p-2"
onclick={() => (actionState = 'IntakeBalloon')}>Balloon: Ground</button
>
<button
class="rounded bg-gunmetal p-2"
class="rounded bg-yellow-500 p-2"
onclick={() => (actionState = 'IntakeBalloonCoral')}>Ballon: Coral</button
>
</div>
<button
class="w-full rounded bg-gunmetal p-2 text-xl"
class="w-full rounded bg-yellow-500 p-2 text-xl"
onclick={() => (actionState = 'None')}>Cancel</button
>
{:else if is_score_state}
Expand All @@ -132,23 +133,23 @@
<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')}
<button class="rounded bg-yellow-500 p-2" onclick={() => score_bunny('Low')}
>Low Zone</button
>
<button
class="rounded bg-gunmetal p-2"
class="rounded bg-yellow-500 p-2"
onclick={() => score_bunny('UncontrolledTote')}
>Uncontrolled Tote</button
>
{#if held.totes > 0}
<button
class="rounded bg-gunmetal p-2"
class="rounded bg-yellow-500 p-2"
onclick={() => score_bunny('InternalTote')}
>Internal Held Tote</button
>
{/if}
<button
class="rounded bg-gunmetal p-2 {held.totes <= 0 ? 'col-span-2' : ''}"
class="rounded bg-yellow-500 p-2 {held.totes <= 0 ? 'col-span-2' : ''}"
onclick={() => score_bunny('ExternalTote')}>External Held Tote</button
>
</div>
Expand All @@ -158,55 +159,56 @@
<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-yellow-500 p-2"
onclick={() => score_balloon('Low')}>Low Zone</button
>
<button
class="rounded bg-gunmetal p-2"
class="rounded bg-yellow-500 p-2"
onclick={() => score_balloon('UncontrolledTote')}
>Uncontrolled Tote</button
>
{#if held.totes > 0}
<button
class="rounded bg-gunmetal p-2"
class="rounded bg-yellow-500 p-2"
onclick={() => score_balloon('InternalTote')}
>Internal Held Tote</button
>
{/if}
<button
class="rounded bg-gunmetal p-2 {held.totes <= 0 ? 'col-span-2' : ''}"
class="rounded bg-yellow-500 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')}
<button class="w-full rounded bg-yellow-500 p-2" onclick={() => (actionState = 'None')}
>Cancel</button
>
</div>
{:else if is_eject_state}
<div class="grid w-full flex-grow grid-flow-row gap-2 py-2 font-heading font-bold">
{#if held.bunnies > 0}
<button
class="w-full rounded bg-gunmetal p-2"
class="w-full rounded bg-yellow-500 p-2"
onclick={() => (actionState = 'EjectBunny')}>Bunny</button
>
{/if}
{#if held.balloons > 0}
<button
class="w-full rounded bg-gunmetal p-2"
class="w-full rounded bg-yellow-500 p-2"
onclick={() => (actionState = 'EjectBalloon')}>Ballon</button
>
{/if}
{#if held.totes > 0}
<button
class="w-full rounded bg-gunmetal p-2"
class="w-full rounded bg-yellow-500 p-2"
onclick={() => (actionState = 'EjectTote')}>Tote</button
>
{/if}
</div>
<button class="w-full rounded bg-gunmetal p-2" onclick={() => (actionState = 'None')}
<button class="w-full rounded bg-yellow-500 p-2" onclick={() => (actionState = 'None')}
>Cancel</button
>
{:else}
Expand Down
33 changes: 17 additions & 16 deletions src/routes/scout/[team_data]/TeleActionInputs.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,32 +67,33 @@
<div
class="grid flex-grow grid-cols-1 grid-rows-3 gap-2 py-2 font-heading text-2xl font-bold"
>
<button class="rounded bg-gunmetal p-2" onclick={intake_piece}>Intake</button>
<button class="rounded bg-violet-500 p-2" onclick={intake_piece}>Intake</button>
{#if held.balloons > 0}
<button class="rounded bg-gunmetal p-2" onclick={score_piece}>Score</button>
<button class="rounded bg-violet-500 p-2" onclick={score_piece}>Score</button>
{/if}
{#if held_ejectables > 0}
<button class="rounded bg-gunmetal p-2" onclick={eject_piece}>Eject</button>
<button class="rounded bg-violet-500 p-2" onclick={eject_piece}>Eject</button>
{/if}
</div>
{:else if is_intake_state}
<div
class="grid w-full flex-grow grid-cols-2 grid-rows-2 gap-2 py-2 font-heading text-xl font-bold"
>
<button
class="col-span-2 rounded bg-gunmetal p-2"
class="col-span-2 rounded bg-violet-500 p-2"
onclick={() => (actionState = 'IntakeTote')}>Tote</button
>
<button class="rounded bg-gunmetal p-2" onclick={() => (actionState = 'IntakeBalloon')}
>Balloon: Ground</button
<button
class="rounded bg-violet-500 p-2"
onclick={() => (actionState = 'IntakeBalloon')}>Balloon: Ground</button
>
<button
class="rounded bg-gunmetal p-2"
class="rounded bg-violet-500 p-2"
onclick={() => (actionState = 'IntakeBalloonCoral')}>Ballon: Coral</button
>
</div>
<button
class="w-full rounded bg-gunmetal p-2 text-xl"
class="w-full rounded bg-violet-500 p-2 text-xl"
onclick={() => (actionState = 'None')}>Cancel</button
>
{:else if is_score_state}
Expand All @@ -102,46 +103,46 @@
<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')}
<button class="rounded bg-violet-500 p-2" onclick={() => score_balloon('Low')}
>Low Zone</button
>
<button
class="rounded bg-gunmetal p-2"
class="rounded bg-violet-500 p-2"
onclick={() => score_balloon('UncontrolledTote')}>Uncontrolled Tote</button
>
{#if held.totes > 0}
<button
class="rounded bg-gunmetal p-2"
class="rounded bg-violet-500 p-2"
onclick={() => score_balloon('InternalTote')}>Internal Held Tote</button
>
{/if}
<button
class="rounded bg-gunmetal p-2 {held.totes <= 0 ? 'col-span-2' : ''}"
class="rounded bg-violet-500 p-2 {held.totes <= 0 ? 'col-span-2' : ''}"
onclick={() => score_balloon('ExternalTote')}
>External Held Tote
</button>
</div>
</div>
<button class="w-full rounded bg-gunmetal p-2" onclick={() => (actionState = 'None')}
<button class="w-full rounded bg-violet-500 p-2" onclick={() => (actionState = 'None')}
>Cancel</button
>
</div>
{:else if is_eject_state}
<div class="grid w-full flex-grow grid-flow-row gap-2 py-2 font-heading font-bold">
{#if held.balloons > 0}
<button
class="w-full rounded bg-gunmetal p-2"
class="w-full rounded bg-violet-500 p-2"
onclick={() => (actionState = 'EjectBalloon')}>Ballon</button
>
{/if}
{#if held.totes > 0}
<button
class="w-full rounded bg-gunmetal p-2"
class="w-full rounded bg-violet-500 p-2"
onclick={() => (actionState = 'EjectTote')}>Tote</button
>
{/if}
</div>
<button class="w-full rounded bg-gunmetal p-2" onclick={() => (actionState = 'None')}
<button class="w-full rounded bg-violet-500 p-2" onclick={() => (actionState = 'None')}
>Cancel</button
>
{:else}
Expand Down

0 comments on commit 57c7d3e

Please sign in to comment.