Skip to content

Commit

Permalink
Restyle new pages + fix empty match/team key (#22)
Browse files Browse the repository at this point in the history 
* fix: timeline slide out animation (might still be borked)

* restyle: homepage buttons

* fix: check that match/team key aren't empty

* restyle manual scout + use drop down for color

* switch auto from tailwind yellow to steel blue

* restyle: postmatch page

* swtich tele from tailwind violet to eminence (purple)

* style: gray out and disable login button when name is empty

* style: format files

* fix: restyle queue button

* style: format files

* fix: only allow numeric team keys

* Revert "fix: only allow numeric team keys"

This reverts commit fc8b3b3.

* more padding postmatch

* style: format files

* add back button to manual scout

* style: format files

---------

Co-authored-by: awwpotato <[email protected]>
  • Loading branch information
@awwpotato
awwpotato and awwpotato authored Dec 10, 2024
1 parent f104ed2 commit 1ee1ac7
Show file tree
Hide file tree
Showing 8 changed files with 122 additions and 138 deletions.
4 changes: 3 additions & 1 deletion src/lib/components/Timeline.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,9 @@
</script>

<button
class="fixed inset-0 transition-all {displaying ? 'backdrop-blur' : 'translate-y-full'}"
class="fixed inset-0 transition-all will-change-transform {displaying
? 'backdrop-blur'
: 'translate-y-full'}"
onclick={(e: Event) => {
if (e.target === e.currentTarget && is_valid_timeline) {
displaying = false;
Expand Down
15 changes: 7 additions & 8 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,12 @@
placeholder="Please enter your name here"
bind:value={inputname}
/>
{#if inputname != ''}
<button
class="text-l bg-grey rounded border-2 border-solid px-4 py-2 text-center text-white"
on:click={login}
>
Login
</button>
{/if}
<button
class="text-l rounded bg-gunmetal px-4 py-2 text-center
{inputname === '' ? 'pointer-events-none text-white/50' : ''}"
on:click={login}
>
Login
</button>
</div>
</div>
18 changes: 6 additions & 12 deletions src/routes/homepage/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,10 @@
<h1 class="text-center text-5xl font-bold">
Welcome, <br /><span class="text-yellow-400">{username}</span>
</h1>
<a
class="w-9/12 rounded-full border-4 border-solid p-4 pb-16 pt-16 text-center text-2xl"
href="/queue"
>
Scout
</a>
<a
class="w-9/12 rounded-full border-4 border-solid p-4 pb-16 pt-16 text-center text-2xl"
href="/manual_scout"
>
Manual Scout
</a>
<div class="flex flex-col gap-4">
<a class="w-full rounded bg-gunmetal p-4 text-center text-2xl" href="/queue"> Scout </a>
<a class="w-full rounded bg-gunmetal p-4 text-center text-2xl" href="/manual_scout">
Manual Scout
</a>
</div>
</div>
60 changes: 31 additions & 29 deletions src/routes/manual_scout/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script lang="ts">
import { ArrowLeft } from 'lucide-svelte';
import { goto } from '$app/navigation';
let match_key: string = '';
Expand All @@ -11,39 +12,40 @@
alert('Invalid color, please select red or blue');
return;
}
if (match_key === '' || team_key === '') {
alert('Please input a match and team key');
return;
}
goto(`/scout/${match_key}-${team_key}-${color}`);
}
</script>

<div class="grid grid-cols-1 grid-rows-4 gap-4 pr-4 pt-4 text-center text-xl">
<div class="grid grid-cols-3">
<span class="col-span-1 flex items-center justify-center">Match Key</span>
<input
class="col-span-2 rounded p-4 text-black"
bind:value={match_key}
type="text"
placeholder="2024orbb_qm1"
/>
</div>
<div class="flex min-h-dvh flex-col gap-2 p-4 text-xl">
<a href="/homepage" class="flex w-fit items-center text-lg"><ArrowLeft size={24} />Homepage</a>
<span class="flex items-center">Match Key</span>
<input
class="col-span-2 rounded bg-gunmetal p-4"
bind:value={match_key}
type="text"
placeholder="2024orbb_qm1"
/>

<span class="flex items-center">Team Key</span>
<input
class="col-span-2 rounded bg-gunmetal p-4"
bind:value={team_key}
type="text"
placeholder="1540"
/>

<span class="flex items-center">Color</span>
<select name="color" bind:value={color} class="col-span-2 block rounded bg-gunmetal p-4">
<option selected value="">Select a color</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
</select>

<div class="grid grid-cols-3">
<span class="col-span-1 flex items-center justify-center">Team Key</span>
<input
class="col-span-2 rounded p-4 text-black"
bind:value={team_key}
type="text"
placeholder="1540"
/>
</div>
<div class="grid grid-cols-3">
<span class="col-span-1 flex items-center justify-center">Color</span>
<input
class="col-span-2 rounded p-4 text-black"
bind:value={color}
type="text"
placeholder="Red"
/>
</div>
<div class="flex-grow"></div>

<button class="ml-4 rounded border p-4" onclick={scout}>Scout</button>
<button class="rounded bg-gunmetal px-4 py-2" onclick={scout}>Scout</button>
</div>
5 changes: 2 additions & 3 deletions src/routes/queue/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,9 @@
};
</script>

<div class="grid h-full w-full grid-cols-1 grid-rows-2 place-items-center gap-4 align-middle">
<div class="grid min-h-dvh grid-cols-1 grid-rows-2 place-items-center gap-4 align-middle">
<h1 class="p-2 font-heading text-5xl font-bold text-yellow-400">In Queue</h1>

<button class="w-9/12 rounded-full border-4 p-8 pb-16 pt-16 text-2xl text-white" onclick={leave}
>Leave Queue</button
<button class="rounded bg-gunmetal p-4 text-center text-2xl" onclick={leave}>Leave Queue</button
>
</div>
42 changes: 21 additions & 21 deletions src/routes/scout/[team_data]/AutoActionInputs.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,35 +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-yellow-500 p-2" onclick={intake_piece}>Intake</button>
<button class="rounded bg-steel_blue p-2" onclick={intake_piece}>Intake</button>
{#if held_scorables > 0}
<button class="rounded bg-yellow-500 p-2" onclick={score_piece}>Score</button>
<button class="rounded bg-steel_blue p-2" onclick={score_piece}>Score</button>
{/if}
{#if held_ejectables > 0}
<button class="rounded bg-yellow-500 p-2" onclick={eject_piece}>Eject</button>
<button class="rounded bg-steel_blue 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-yellow-500 p-2" onclick={() => (actionState = 'IntakeBunny')}
<button class="rounded bg-steel_blue p-2" onclick={() => (actionState = 'IntakeBunny')}
>Bunny</button
>
<button class="rounded bg-yellow-500 p-2" onclick={() => (actionState = 'IntakeTote')}
<button class="rounded bg-steel_blue p-2" onclick={() => (actionState = 'IntakeTote')}
>Tote</button
>
<button
class="rounded bg-yellow-500 p-2"
class="rounded bg-steel_blue p-2"
onclick={() => (actionState = 'IntakeBalloon')}>Balloon: Ground</button
>
<button
class="rounded bg-yellow-500 p-2"
class="rounded bg-steel_blue p-2"
onclick={() => (actionState = 'IntakeBalloonCoral')}>Ballon: Coral</button
>
</div>
<button
class="w-full rounded bg-yellow-500 p-2 text-xl"
class="w-full rounded bg-steel_blue p-2 text-xl"
onclick={() => (actionState = 'None')}>Cancel</button
>
{:else if is_score_state}
Expand All @@ -133,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-yellow-500 p-2" onclick={() => score_bunny('Low')}
<button class="rounded bg-steel_blue p-2" onclick={() => score_bunny('Low')}
>Low Zone</button
>
<button
class="rounded bg-yellow-500 p-2"
class="rounded bg-steel_blue p-2"
onclick={() => score_bunny('UncontrolledTote')}
>Uncontrolled Tote</button
>
{#if held.totes > 0}
<button
class="rounded bg-yellow-500 p-2"
class="rounded bg-steel_blue p-2"
onclick={() => score_bunny('InternalTote')}
>Internal Held Tote</button
>
{/if}
<button
class="rounded bg-yellow-500 p-2 {held.totes <= 0 ? 'col-span-2' : ''}"
class="rounded bg-steel_blue p-2 {held.totes <= 0 ? 'col-span-2' : ''}"
onclick={() => score_bunny('ExternalTote')}>External Held Tote</button
>
</div>
Expand All @@ -160,55 +160,55 @@
<h1>Ballon</h1>
<div class="grid w-full flex-grow grid-cols-2 grid-rows-2 gap-2">
<button
class="rounded bg-yellow-500 p-2"
class="rounded bg-steel_blue p-2"
onclick={() => score_balloon('Low')}>Low Zone</button
>
<button
class="rounded bg-yellow-500 p-2"
class="rounded bg-steel_blue p-2"
onclick={() => score_balloon('UncontrolledTote')}
>Uncontrolled Tote</button
>
{#if held.totes > 0}
<button
class="rounded bg-yellow-500 p-2"
class="rounded bg-steel_blue p-2"
onclick={() => score_balloon('InternalTote')}
>Internal Held Tote</button
>
{/if}
<button
class="rounded bg-yellow-500 p-2 {held.totes <= 0 ? 'col-span-2' : ''}"
class="rounded bg-steel_blue 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-yellow-500 p-2" onclick={() => (actionState = 'None')}
<button class="w-full rounded bg-steel_blue 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-yellow-500 p-2"
class="w-full rounded bg-steel_blue p-2"
onclick={() => (actionState = 'EjectBunny')}>Bunny</button
>
{/if}
{#if held.balloons > 0}
<button
class="w-full rounded bg-yellow-500 p-2"
class="w-full rounded bg-steel_blue p-2"
onclick={() => (actionState = 'EjectBalloon')}>Ballon</button
>
{/if}
{#if held.totes > 0}
<button
class="w-full rounded bg-yellow-500 p-2"
class="w-full rounded bg-steel_blue p-2"
onclick={() => (actionState = 'EjectTote')}>Tote</button
>
{/if}
</div>
<button class="w-full rounded bg-yellow-500 p-2" onclick={() => (actionState = 'None')}
<button class="w-full rounded bg-steel_blue p-2" onclick={() => (actionState = 'None')}
>Cancel</button
>
{:else}
Expand Down
83 changes: 36 additions & 47 deletions src/routes/scout/[team_data]/Postmatch.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,55 +14,44 @@
} = $props();
</script>

<div class="flex h-dvh flex-col p-3 align-top">
<div class="mb-3 flex w-full rounded border-2 border-solid p-4">
<h1 class="text-3xl">Post Match</h1>
</div>
<div class="mb-3 flex w-full content-start rounded border-2 border-solid p-4">
<label class="w-full text-3xl"
>Driver Skill
<div class="flex w-full justify-items-stretch text-base">
<div class="w-1/2 p-2 text-center">
Quickness: {speed}
<input type="range" min="0" max="5" step="1" bind:value={speed} />
</div>
<div class="w-1/2 p-2 text-center">
Field awareness: {awareness}
<input type="range" min="0" max="5" step="1" bind:value={awareness} />
</div>
</div>
</label>
</div>
<div class="mb-3 flex w-full content-start rounded border-2 border-solid p-4">
<label class="w-full text-3xl"
>Robot
<div
class="mb-2 mt-2 flex w-full justify-items-stretch rounded border-2 border-solid text-base"
>
<label class="w-1/2 p-2 text-left"
><input
type="checkbox"
name="robotbroke"
class="mr-2"
bind:checked={broke}
/>Broken?</label
>
<div class="flex w-full flex-col gap-2 accent-yolk_yellow">
<h1 class="text-center font-heading text-2xl">Post Match</h1>
<div class="rounded-lg bg-gunmetal p-1">
<h2 class="mb-1 font-heading text-2xl">Driver Skill</h2>
<div
class="flex w-full flex-wrap items-center justify-center rounded-lg bg-eerie_black text-lg"
>
<div class="flex flex-col p-1 text-center">
Quickness: {speed}
<input class="w-36" type="range" min="0" max="5" step="1" bind:value={speed} />
</div>
<div class="flex w-full justify-items-stretch rounded border-2 border-solid text-base">
<label class="w-1/2 p-2 text-left"
><input type="checkbox" name="robotdied" class="mr-2" bind:checked={died} />Died
on Field?</label
>
<div class="flex flex-col p-1 text-center">
Field awareness: {awareness}
<input class="w-36" type="range" min="0" max="5" step="1" bind:value={awareness} />
</div>
</label>
</div>
</div>
<div class="mb-3 flex w-full content-start rounded border-2 border-solid p-4">
<label class="w-full text-3xl"
>Notes
<textarea
class="mt-2 w-full rounded border-2 border-solid p-4 text-base text-black"
bind:value={notes}
></textarea>
</label>
<div class="rounded-lg bg-gunmetal p-1">
<h2 class="mb-1 font-heading text-2xl">Robot</h2>
<div class="flex flex-col gap-2 rounded bg-eerie_black p-2">
<label
><input type="checkbox" name="robotbroke" bind:checked={broke} /><span class="px-1"
>Broken?</span
></label
>
<label
><input type="checkbox" name="robotdied" bind:checked={died} /><span class="px-1"
>Died on Field?</span
></label
>
</div>
</div>
<label class="w-full rounded-lg bg-gunmetal p-1"
><h3 class="mb-1 font-heading text-2xl">Notes</h3>
<textarea
class="min-h-36 w-full rounded bg-eerie_black p-1"
bind:value={notes}
placeholder="Please add notes"
></textarea>
</label>
</div>
Loading

0 comments on commit 1ee1ac7

Please sign in to comment.