Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Restyle new pages + fix empty match/team key #22

Merged
merged 17 commits into from
Dec 10, 2024
+122 −138
Merged

Restyle new pages + fix empty match/team key #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
953615c
fix: timeline slide out animation (might still be borked)
awwpotato Dec 10, 2024
95c9ed6
restyle: homepage buttons
awwpotato Dec 10, 2024
5d8ad26
fix: check that match/team key aren't empty
awwpotato Dec 10, 2024
355e23b
restyle manual scout + use drop down for color
awwpotato Dec 10, 2024
44660ac
switch auto from tailwind yellow to steel blue
awwpotato Dec 10, 2024
89aaaea
restyle: postmatch page
awwpotato Dec 10, 2024
56fd1b7
swtich tele from tailwind violet to eminence (purple)
awwpotato Dec 10, 2024
bb63470
style: gray out and disable login button when name is empty
awwpotato Dec 10, 2024
05db01e
style: format files
awwpotato Dec 10, 2024
73f2b26
fix: restyle queue button
awwpotato Dec 10, 2024
86e1097
style: format files
awwpotato Dec 10, 2024
fc8b3b3
fix: only allow numeric team keys
awwpotato Dec 10, 2024
ca577a1
Revert "fix: only allow numeric team keys"
awwpotato Dec 10, 2024
4fc41fd
more padding postmatch
awwpotato Dec 10, 2024
cd8e4ca
style: format files
awwpotato Dec 10, 2024
b6e45c2
add back button to manual scout
awwpotato Dec 10, 2024
035601b
style: format files
awwpotato Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/lib/components/Timeline.svelte
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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