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.

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

Style Action Input Screen and Timeline #9

Merged
merged 44 commits into from
Nov 19, 2024
Merged
Changes from 1 commit
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
8616432
feat: type model for scouting system
azaleacolburn Oct 23, 2024
3a9c864
chore: update svelte
azaleacolburn Oct 24, 2024
fc86844
feat: add none
azaleacolburn Oct 25, 2024
a7fe051
refactor: type state model
azaleacolburn Oct 26, 2024
a0c787e
Merge branch 'azalea/input-grid' of https://github.com/flamingchicken…
azaleacolburn Oct 28, 2024
0b18cca
feat: state transforms
azaleacolburn Oct 30, 2024
0d37bc8
Merge branch 'azalea/input-grid' of https://github.com/flamingchicken…
azaleacolburn Oct 30, 2024
e294d06
add successfail screen
awwpotato Nov 5, 2024
f515290
theme fixes
awwpotato Nov 6, 2024
6ff4f16
Merge branch 'main' into azalea/input-grid
awwpotato Nov 9, 2024
4105ff5
fix: package.json
awwpotato Nov 9, 2024
a9571e0
fix: formating
awwpotato Nov 9, 2024
d80ad01
fix: dependencies
awwpotato Nov 9, 2024
040d95c
format thingy
awwpotato Nov 9, 2024
c9dc82e
refactor: update types to match new schema
azaleacolburn Nov 12, 2024
9d24e18
Merge branch 'azalea/input-grid' of https://github.com/flamingchicken…
azaleacolburn Nov 12, 2024
3457625
fix: id after clarifying with Brandon
azaleacolburn Nov 12, 2024
8601e25
update dep
awwpotato Nov 12, 2024
01b0333
style: format files
awwpotato Nov 12, 2024
4be6e7b
refactor: action input state machine into component
azaleacolburn Nov 14, 2024
1dcc4a5
feat: make cancel buttons go back one level
azaleacolburn Nov 14, 2024
c083a05
fix: actions display on timeline
azaleacolburn Nov 14, 2024
7662583
feat: piece specific error prevention
azaleacolburn Nov 14, 2024
1ba1b6a
feat: ejectables!
azaleacolburn Nov 14, 2024
b91cc3c
fix: name in pkg.json + update dep
awwpotato Nov 14, 2024
b8b501b
Merge branch 'azalea/input-grid' of github.com:flamingchickens1540/in…
awwpotato Nov 14, 2024
1ed41a2
style: format files
awwpotato Nov 14, 2024
8d43bf0
Merge branch 'main' into azalea/input-grid
awwpotato Nov 14, 2024
be983f5
feat: update colorsceme
awwpotato Nov 14, 2024
4bb7455
feat: timeline popup above contents
awwpotato Nov 14, 2024
027576e
feat: better timeline thingy
awwpotato Nov 14, 2024
c691b06
style: format files
awwpotato Nov 14, 2024
8cf10db
feat: timeline reorder + styling
awwpotato Nov 15, 2024
12188ba
format: prettier tailwind reorder thingy
awwpotato Nov 15, 2024
374c44a
style: format files
awwpotato Nov 15, 2024
151ef86
feat: some small styling tweaks
awwpotato Nov 15, 2024
ae4160a
fix: make successfail work on all screen sizes
awwpotato Nov 15, 2024
d9869fd
feat: more updating styling
awwpotato Nov 16, 2024
08ef46e
fix: success vs. failure logic
azaleacolburn Nov 17, 2024
90c83b8
feat: make timeline grow up
azaleacolburn Nov 17, 2024
afc227b
feat: full-size buttons on ActionInput screen
azaleacolburn Nov 19, 2024
1056057
feat: move page title + styling fixes
awwpotato Nov 19, 2024
c2139f2
fix: better pageName handling
awwpotato Nov 19, 2024
37302aa
style: format files
awwpotato Nov 19, 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
Prev Previous commit
Next Next commit
feat: make cancel buttons go back one level
azaleacolburn committed Nov 14, 2024
commit 1dcc4a55bcaf97af06d874a5ecfcd62f59f50ac2
39 changes: 10 additions & 29 deletions src/lib/components/Timeline.svelte
Original file line number Diff line number Diff line change
@@ -1,35 +1,16 @@
<script lang="ts">
import type { ActionData } from '$lib/types';
import type { AutoActionData } from '$lib/types';
import Action from './Action.svelte';

let {
actions = $bindable(),
displaying = $bindable()
}: { actions: ActionData[]; displaying: boolean } = $props();
// let latestActions: ActionData[] = $derived(actions.toReversed().slice(0, 5));
let { actions = $bindable() }: { actions: AutoActionData[] } = $props();
// let latestActions: AutoActionData[] = $derived(actions.toReversed().slice(0, 5));
</script>

<h1 class="text-text_red">Timeline</h1>
<div
class="flex flex-col items-center bg-btn_grey text-text_white p-1 rounded-t-lg transition-transform gap-2 fixed h-[50svh] inset-x-0 bottom-0
{displaying ? '' : 'translate-y-full'}"
id="timeline"
>
<button
class="bg-btn_grey w-80 p-1 rounded border-2 border-outline_gray fixed bottom-0"
onclick={() => {
displaying = false;
{#each actions as _, i}
<Action
bind:action={actions[i]}
deleteself={() => {
actions.splice(actions.indexOf(actions[i]), 1);
}}
>
Hide Timeline
</button>

{#each actions as _, i}
<Action
bind:action={actions[i]}
deleteself={() => {
actions.splice(actions.indexOf(actions[i]), 1);
}}
/>
{/each}
</div>
/>
{/each}
21 changes: 15 additions & 6 deletions src/routes/scout/+page.svelte
Original file line number Diff line number Diff line change
@@ -27,15 +27,24 @@
});
</script>

<div class="text-zinc-50 p-2 h-svh">
<h1 class="text-center font-bold pb-2 h-5">Team {team_key}</h1>
<div class="grid grid-row-10 text-zinc-50 p-2 h-svh place-items-center">
<h1 class="row-span-1 text-center font-bold pb-2 h-5">Team {team_key}</h1>
{#if timelineExtended}
<Timeline bind:actions={latestActions} bind:displaying={timelineExtended} />
<div class="row-span-8">
<Timeline bind:actions={latestActions} />
</div>
<button
class="row-span-1 bg-btn_grey h-10 w-80 p-1 rounded border-2 border-outline_gray static"
onclick={() => (timelineExtended = false)}>Hide Timeline</button
>
{:else}
<ActionInputs bind:actions />
<div class="row-span-8">
<ActionInputs bind:actions />
</div>

<button
class="bg-btn_grey h-10 w-80 p-1 rounded border-2 border-outline_gray static"
onclick={() => (timelineExtended = !timelineExtended)}>Show Timeline</button
class="row-span-1 bg-btn_grey h-10 w-80 p-1 rounded border-2 border-outline_gray static"
onclick={() => (timelineExtended = true)}>Show Timeline</button
>
{/if}
</div>
23 changes: 17 additions & 6 deletions src/routes/scout/ActionInputs.svelte
Original file line number Diff line number Diff line change
@@ -32,15 +32,15 @@
const is_score_state = $derived(actionState === 'Score');
</script>

<div class="grid gap-2 grid-cols-1 grid-rows-2 flex-grow">
<p>Number of pieces currently held: {held_pieces}</p>
<h1>Number of pieces currently held: {held_pieces}</h1>
<div class="grid gap-2 grid-cols-1 grid-rows-2 place-items-center">
{#if is_none_state}
<div class="grid gap-2 grid-cols-2 flex-grow">
<div class="grid gap-2 grid-cols-2">
<button class="bg-zinc-500 p-2 rounded" onclick={intake_piece}>Intake</button>
<button class="bg-zinc-500 p-2 rounded" onclick={score_piece}>Score</button>
</div>
{:else if is_intake_state}
<div class="grid gap-2 grid-cols-2 grid-rows-2 flex-grow">
<div class="grid gap-3 grid-cols-2 grid-rows-2 flex-grow">
<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'IntakeBunny')}
>Intake Bunny</button
>
@@ -53,9 +53,13 @@
<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'IntakeCoral')}
>Intake Ballon From Coral</button
>
<button
class="bg-zinc-500 col-span-2 p-2 rounded"
onclick={() => (actionState = 'None')}>Cancel</button
>
</div>
{:else if is_score_state}
<div class="grid gap-2 grid-cols-2 grid-rows-3 flex-grow">
<div class="grid gap-2 grid-cols-2 grid-rows-4">
<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'ScoreBunnyLow')}
>Score Bunny in Low Zone</button
>
@@ -81,8 +85,15 @@
onclick={() => (actionState = 'ScoreOtherHeldTote')}
>Score Bunny in Tote Held by Other Robot</button
>
<button
class="bg-zinc-500 col-span-2 p-2 rounded"
onclick={() => (actionState = 'None')}>Cancel</button
>
</div>
{:else}
<SuccessFail {complete} cancel={() => (actionState = 'None')} />
<SuccessFail
{complete}
cancel={() => (actionState = actionState.substring(0, 1) === 'S' ? 'Score' : 'Intake')}
/>
{/if}
</div>