+logo, header mobile, timer

backend.light/priority.go

@@ -7,16 +7,19 @@ type Priority struct {
 }
 
 type Surfer struct {
-	Id       string `json:"id"`
+	Id         string `json:"id"`
-	Name     string `json:"name"`
+	Name       string `json:"name"`
-	Color    string `json:"color"`
+	Color      string `json:"color"`
-	Priority string `json:"priority"`
+	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{} {

frontend.light/src/lib/priority.js

@@ -15,7 +15,8 @@ export function createPriority(count = 4) {
         round: {
             name: '',
             heat: 1,
-            category: ''
+            category: '',
+            time: 0
         },
         surfersCount: count
     };

frontend.light/src/lib/stores/categories.js

@@ -1,12 +1,36 @@
 import { readable } from "svelte/store"
 
 export const categories = readable([
-    "Under 12 Women",
+    {
-    "Under 12 Men",
+        name: "Under 12 Women",
-    "Under 14 Women",
+        title: "U12W",
-    "Under 14 Men",
+    },
-    "Under 16 Women",
+    {
-    "Under 16 Men",
+        name: "Under 12 Men",
-    "Under 18 Women",
+        title: "U12M",
-    "Under 18 Men",
+    },
-]);
+    {
+        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",
+    }
+])

frontend.light/src/lib/stores/colors.js

@@ -2,10 +2,8 @@ import { readable } from "svelte/store"
 
 export const colors = readable([
     "black",
-    "blue",
     "red",
     "green",
     "yellow",
-    "pink",
     "white",
 ]);

frontend.light/src/lib/stores/rounds.js

@@ -1,13 +1,52 @@
-import {readable} from "svelte/store"
+import { readable } from "svelte/store"
 
 export const rounds = readable([
-        "Qualifying",
+        {
-        "Opening",
+                name: "Qualifying",
-        "Elimination",
+                title: "QR",
-        "Round of 48",
+        },
-        "Round of 32",
+        {
-        "Round of 16",
+                name: "Opening",
-        "Quarterfinal",
+                title: "OR",
-        "Semifinal",
+        },
-        "Final",
+        {
-]);
+                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",
+// ]);

frontend.light/src/routes/mobile/+page.svelte

@@ -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>
+	<div class="logo">
-	<span class="title">{priority.round.category}</span>
+		<img src={Logo} alt="logo" />
-	<span class="heat">Heat {priority.round.heat}</span>
+	</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);

frontend.light/src/routes/priority/+page.svelte

@@ -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">