MetzNet
/
vex_svelte
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add background to gifs

nm_live
noah metz 2024-01-27 19:05:35 -07:00
parent 0b92c2e116
commit 99275a2ffa
2 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/routes/+page.svelte
Unescape Escape View File

@ -298,25 +298,35 @@ onMount(() => {
{:else if (display_state == "break")}
<div class="banner"><p>Practice @ 12:45</p></div>
{:else if (display_state == "red-wins")}
<img alt="red-wins" src="/gifs/red_win.gif" width="100%" height="100%">
<img class="gif-background" alt="wavy" src="/gifs/wavy_background.gif">
<img class="gif-foreground" alt="red-wins" src="/gifs/red_win.gif">
{:else if (display_state == "blue-wins")}
<img alt="blue-wins" src="/gifs/blue_win.gif" width="100%" height="100%">
<img class="gif-background" alt="wavy" src="/gifs/wavy_background.gif">
<img class="gif-foreground" alt="blue-wins" src="/gifs/blue_win.gif">
{:else if (display_state == "rockies")}
<img alt="rockies" src="/gifs/rockies.gif" width="100%" height="100%">
<img class="gif-background" alt="wavy" src="/gifs/wavy_background.gif">
<img class="gif-foreground" alt="rockies" src="/gifs/rockies.gif">
{:else if (display_state == "prairies")}
<img alt="prairies" src="/gifs/prairies.gif" width="100%" height="100%">
<img class="gif-background" alt="wavy" src="/gifs/wavy_background.gif">
<img class="gif-foreground" alt="prairies" src="/gifs/prairies.gif">
{:else if (display_state == "ab-education")}
<img alt="ab-education" src="/gifs/ab_education.gif" width="100%" height="100%">
<img class="gif-background" alt="wavy" src="/gifs/wavy_background.gif">
<img class="gif-foreground" alt="ab-education" src="/gifs/ab_education.gif">
{:else if (display_state == "ab-innovate")}
<img alt="ab-innovate" src="/gifs/ab_innovate.gif" width="100%" height="100%">
<img class="gif-background" alt="wavy" src="/gifs/wavy_background.gif">
<img class="gif-foreground" alt="ab-innovate" src="/gifs/ab_innovate.gif">
{:else if (display_state == "tcenergy")}
<img alt="tcenergy" src="/gifs/tcenergy.gif" width="100%" height="100%">
<img class="gif-background" alt="wavy" src="/gifs/wavy_background.gif">
<img class="gif-foreground" alt="tcenergy" src="/gifs/tcenergy.gif">
{:else if (display_state == "tourismcalgary")}
<img alt="tourismcalgary" src="/gifs/tourismcalgary.gif" width="100%" height="100%">
<img class="gif-background" alt="wavy" src="/gifs/wavy_background.gif">
<img class="gif-foreground" alt="tourismcalgary" src="/gifs/tourismcalgary.gif">
{:else if (display_state == "encore")}
<img alt="encore" src="/gifs/encore.gif" width="100%" height="100%">
<img class="gif-background" alt="wavy" src="/gifs/wavy_background.gif">
<img class="gif-foreground" alt="encore" src="/gifs/encore.gif">
{:else if (display_state == "westmech")}
<img alt="westmech" src="/gifs/westmech.gif" width="100%" height="100%">
<img class="gif-background" alt="wavy" src="/gifs/wavy_background.gif">
<img class="gif-foreground" alt="westmech" src="/gifs/westmech.gif">
{:else}
<div class="banner"><p>Invalid State {display_state}</p></div>
{/if}
@ -354,6 +364,19 @@ p {
background-image: url("/gifs/wavy_background.gif");
}
.gif-foreground {
z-index: 1;
position: relative;
top: -103.3%;
width: 100%;
}
.gif-background {
z-index: 0;
height: 100%;
width: 100%;
}
#score-background {
z-index: 0;
position: relative;

4
src/routes/control/+page.svelte
Unescape Escape View File

@ -82,14 +82,14 @@ client.on("message", (topic, message) => {
{#each Object.entries(displays) as [name, info]}
<div>
<p>{name}</p>
<select bind:value={info.class} on:change={() => client.publish(`field/${name}/class`, info.class)}>
<select bind:value={info.class} on:change={() => client.publish(`display/${name}/class`, info.class)}>
{#each classes as c}
<option value={c}>
{c}
</option>
{/each}
</select>
<select bind:value={info.state} on:change={() => client.publish(`field/${name}/state`, info.state)}>
<select bind:value={info.state} on:change={() => client.publish(`display/${name}/state`, info.state)}>
{#each states as s}
<option value={s}>
{s}