+logo, header mobile, timer
This commit is contained in:
parent
f5d244a9a1
commit
2ebc626af6
8 changed files with 203 additions and 40 deletions
|
@ -7,16 +7,19 @@ type Priority struct {
|
|||
}
|
||||
|
||||
type Surfer struct {
|
||||
Id string `json:"id"`
|
||||
Name string `json:"name"`
|
||||
Color string `json:"color"`
|
||||
Priority string `json:"priority"`
|
||||
Id string `json:"id"`
|
||||
Name string `json:"name"`
|
||||
Color string `json:"color"`
|
||||
Priority string `json:"priority"`
|
||||
Scores []int `json:"scores"`
|
||||
TotalScore int `json:"totalScore"`
|
||||
}
|
||||
|
||||
type Round struct {
|
||||
Name string `json:"name"`
|
||||
Heat int `json:"heat"`
|
||||
Category string `json:"category"`
|
||||
Time int `json:"time"`
|
||||
}
|
||||
|
||||
func initPriority() interface{} {
|
||||
|
|
BIN
frontend.light/src/lib/img/surfclub-buggerru.png
Executable file
BIN
frontend.light/src/lib/img/surfclub-buggerru.png
Executable file
Binary file not shown.
After Width: | Height: | Size: 56 KiB |
|
@ -15,7 +15,8 @@ export function createPriority(count = 4) {
|
|||
round: {
|
||||
name: '',
|
||||
heat: 1,
|
||||
category: ''
|
||||
category: '',
|
||||
time: 0
|
||||
},
|
||||
surfersCount: count
|
||||
};
|
||||
|
|
|
@ -1,12 +1,36 @@
|
|||
import { readable } from "svelte/store"
|
||||
|
||||
export const categories = readable([
|
||||
"Under 12 Women",
|
||||
"Under 12 Men",
|
||||
"Under 14 Women",
|
||||
"Under 14 Men",
|
||||
"Under 16 Women",
|
||||
"Under 16 Men",
|
||||
"Under 18 Women",
|
||||
"Under 18 Men",
|
||||
]);
|
||||
{
|
||||
name: "Under 12 Women",
|
||||
title: "U12W",
|
||||
},
|
||||
{
|
||||
name: "Under 12 Men",
|
||||
title: "U12M",
|
||||
},
|
||||
{
|
||||
name: "Under 14 Women",
|
||||
title: "U14W",
|
||||
},
|
||||
{
|
||||
name: "Under 14 Men",
|
||||
title: "U14M",
|
||||
},
|
||||
{
|
||||
name: "Under 16 Women",
|
||||
title: "U16W",
|
||||
},
|
||||
{
|
||||
name: "Under 16 Men",
|
||||
title: "U16M",
|
||||
},
|
||||
{
|
||||
name: "Under 18 Women",
|
||||
title: "U18W",
|
||||
},
|
||||
{
|
||||
name: "Under 18 Men",
|
||||
title: "U18M",
|
||||
}
|
||||
])
|
|
@ -2,10 +2,8 @@ import { readable } from "svelte/store"
|
|||
|
||||
export const colors = readable([
|
||||
"black",
|
||||
"blue",
|
||||
"red",
|
||||
"green",
|
||||
"yellow",
|
||||
"pink",
|
||||
"white",
|
||||
]);
|
|
@ -1,13 +1,52 @@
|
|||
import {readable} from "svelte/store"
|
||||
import { readable } from "svelte/store"
|
||||
|
||||
export const rounds = readable([
|
||||
"Qualifying",
|
||||
"Opening",
|
||||
"Elimination",
|
||||
"Round of 48",
|
||||
"Round of 32",
|
||||
"Round of 16",
|
||||
"Quarterfinal",
|
||||
"Semifinal",
|
||||
"Final",
|
||||
]);
|
||||
{
|
||||
name: "Qualifying",
|
||||
title: "QR",
|
||||
},
|
||||
{
|
||||
name: "Opening",
|
||||
title: "OR",
|
||||
},
|
||||
{
|
||||
name: "Elimination",
|
||||
title: "ER",
|
||||
},
|
||||
{
|
||||
name: "Round of 48",
|
||||
title: "R48",
|
||||
},
|
||||
{
|
||||
name: "Round of 32",
|
||||
title: "R32",
|
||||
},
|
||||
{
|
||||
name: "Round of 16",
|
||||
title: "R16",
|
||||
},
|
||||
{
|
||||
name: "Quarterfinal",
|
||||
title: "QF",
|
||||
},
|
||||
{
|
||||
name: "Semifinal",
|
||||
title: "SF",
|
||||
},
|
||||
{
|
||||
name: "Final",
|
||||
title: "F",
|
||||
}
|
||||
])
|
||||
|
||||
// export const rounds = readable([
|
||||
// "Qualifying",
|
||||
// "Opening",
|
||||
// "Elimination",
|
||||
// "Round of 48",
|
||||
// "Round of 32",
|
||||
// "Round of 16",
|
||||
// "Quarterfinal",
|
||||
// "Semifinal",
|
||||
// "Final",
|
||||
// ]);
|
|
@ -1,6 +1,7 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { dev } from '$app/environment';
|
||||
import Logo from '$lib/img/surfclub-buggerru.png';
|
||||
import { createPriority } from '$lib/priority.js';
|
||||
|
||||
let base;
|
||||
|
@ -22,7 +23,7 @@
|
|||
|
||||
$: priority;
|
||||
|
||||
let header_height = 8;
|
||||
let header_height = 16;
|
||||
$: setup_height = (100 - header_height) / priority.surfersCount - 12 / priority.surfersCount;
|
||||
|
||||
// $: if ($surfers || $surfersCount || $round) {
|
||||
|
@ -103,9 +104,18 @@
|
|||
<svelte:window bind:innerWidth={width} />
|
||||
|
||||
<div class="header" style="--height:{header_height}vh">
|
||||
<span class="title">{priority.round.name}</span>
|
||||
<span class="title">{priority.round.category}</span>
|
||||
<span class="heat">Heat {priority.round.heat}</span>
|
||||
<div class="logo">
|
||||
<img src={Logo} alt="logo" />
|
||||
</div>
|
||||
{#if priority.round.time != 0}
|
||||
<span class="time">{priority.round.time}:00</span>
|
||||
{/if}
|
||||
<div class="category">{priority.round.category}</div>
|
||||
<div class="round">
|
||||
{priority.round.name}
|
||||
<br />
|
||||
H{priority.round.heat}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
@ -116,11 +126,17 @@
|
|||
style="background-color: {priority.surfers[id].color}; --height:{setup_height}vh"
|
||||
>
|
||||
{#if priority.surfers[id].priority != ''}
|
||||
<span class="priority">{priority.surfers[id].priority}</span>
|
||||
{#if priority.surfers[id].priority == '1'}
|
||||
<span class="priority">P</span>
|
||||
{:else}
|
||||
<span class="priority">{priority.surfers[id].priority}</span>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text">{priority.surfers[id].name}</div>
|
||||
<div class="text">{priority.surfers[id].totalScore}</div>
|
||||
{#if priority.surfers[id].totalScore != '0'}
|
||||
<div class="text">{priority.surfers[id].totalScore}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
@ -142,13 +158,61 @@
|
|||
}
|
||||
|
||||
.header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
background-color: #334;
|
||||
color: white;
|
||||
height: 18vh;
|
||||
width: calc(100% - 0);
|
||||
padding-left: 2vw;
|
||||
padding-right: 2vw;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.header .logo {
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
align-self: center;
|
||||
text-align: left;
|
||||
font-size: 8vmin;
|
||||
padding-left: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header .logo img {
|
||||
height: 17vh;
|
||||
}
|
||||
|
||||
.header .time {
|
||||
grid-area: 1 / 2 / 2 / 3;
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
font-size: 12vmin;
|
||||
padding-left: 12vw;
|
||||
padding-right: 2vw;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header .category {
|
||||
grid-area: 1 / 3 / 2 / 4;
|
||||
align-self: center;
|
||||
font-size: 6vmin;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.header .round {
|
||||
grid-area: 1 / 4 / 2 / 5;
|
||||
align-self: center;
|
||||
font-size: 6vmin;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* .header {
|
||||
height: var(--height);
|
||||
background-color: var(--backColor);
|
||||
padding-left: 2vw;
|
||||
padding-right: 2vw;
|
||||
/* padding-top: 0.5vmin;
|
||||
padding-bottom: 0.5vmin; */
|
||||
/* margin-top: 0.5vmin; */
|
||||
margin-bottom: 2px;
|
||||
width: var(--maxWidth);
|
||||
color: var(--textColor);
|
||||
|
@ -165,6 +229,26 @@
|
|||
align-self: center;
|
||||
}
|
||||
|
||||
.header .time {
|
||||
font-size: 12vmin;
|
||||
padding-left: 12vw;
|
||||
padding-right: 2vw;
|
||||
font-weight: bold;
|
||||
flex: 1 1 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.header .category {
|
||||
font-size: 4vmin;
|
||||
padding-left: 4vw;
|
||||
padding-right: 0;
|
||||
font-weight: bold;
|
||||
flex: 1 1 auto;
|
||||
align-self: center;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.header .heat {
|
||||
font-size: 4vmin;
|
||||
padding-left: 0;
|
||||
|
@ -173,7 +257,8 @@
|
|||
flex: 1 1 auto;
|
||||
align-self: center;
|
||||
text-align: right;
|
||||
}
|
||||
display: inline-block;
|
||||
} */
|
||||
|
||||
.container {
|
||||
background-color: var(--backColor);
|
||||
|
|
|
@ -220,7 +220,7 @@
|
|||
<button class="button" on:click={StopHeat}>STOP</button>
|
||||
</div>
|
||||
</div>
|
||||
Next: {next_priority}
|
||||
<!-- Next: {next_priority} -->
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
|
@ -287,7 +287,7 @@
|
|||
bind:value={priority.round.name}
|
||||
>
|
||||
{#each $rounds as round}
|
||||
<option value={round}>{round}</option>
|
||||
<option value={round.title}>{round.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
@ -302,7 +302,7 @@
|
|||
bind:value={priority.round.category}
|
||||
>
|
||||
{#each $categories as category}
|
||||
<option value={category}>{category}</option>
|
||||
<option value={category.title}>{category.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
@ -320,6 +320,19 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col align-self-center">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-info">Timer</span>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
min="0"
|
||||
max="60"
|
||||
size="3"
|
||||
bind:value={priority.round.time}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col align-self-center">
|
||||
|
|
Loading…
Add table
Reference in a new issue