+number

frontend/src/lib/button.svelte

@@ -1,9 +1,9 @@
 <script>
 	export let handleClick;
-	export let title;
+	export let label;
 </script>
 
-<button class="button" on:click={handleClick}>{title}</button>
+<button class="button" on:click={handleClick}>{label}</button>
 
 <style>
 	.button {

frontend/src/lib/number.svelte

@@ -0,0 +1,29 @@
+<script>
+    export let label
+    export let id
+    export let value
+    export let min = 1;
+    export let max
+	export let step = 1;
+</script>
+
+<label class="label" for={id}>{label}</label>
+<input bind:value={value} id={id} type="number" min={min} max={max} step={step}/>
+
+<style>
+	.label {
+		border: 2px solid #555;
+		background-color: gray;
+		border-radius: 8px;
+		padding: 2px;
+	}
+
+	input {
+		font-size: 1.2rem;
+		border-radius: 6px;
+		margin-left: 0.1rem;
+		margin-right: 0.1rem;
+		padding-top: 2px;
+		padding-bottom: 2px;
+	}
+</style>

frontend/src/lib/select.svelte

@@ -1,14 +1,16 @@
 <script>
 	export let label;
 	export let id;
-	export let options;
+	export let options = [];
 	export let value;
+	export let optionStyle = "";
+	export let selectStyle
 </script>
 
 <label class="label" for={id}>{label}</label>
-<select name={id} {id} bind:value>
+<select name={id} {id} bind:value style={selectStyle}>
 	{#each options as option}
-		<option value={option}>{option}</option>
+		<option value={option} style={optionStyle}>{option}</option>
 	{/each}
 </select>
 

frontend/src/routes/setup/+page.svelte

@@ -4,6 +4,10 @@
 	import { categories } from '$lib/stores/categories.js';
 	import { rounds } from '$lib/stores/rounds.js';
 	import { colors } from '$lib/stores/colors.js';
+	import Number from '$lib/number.svelte'
+	import Input from '$lib/input.svelte'
+	import  Select  from '$lib/select.svelte'
+	import Button from '../../lib/button.svelte';
 
 	$: surfers = 2;
 
@@ -87,8 +91,11 @@
 
 	function removeSurfers() {
 		surfers--;
-		if (surfers < 2) surfers = 2;
+		if (surfers < 2) {
-		surfer_list.pop();
+			surfers = 2; 
+		} else {
+			surfer_list.pop();
+		}
 	}
 
 	async function save() {
@@ -174,52 +181,60 @@
 
 <div class="container">
 	<div class="heat">
-		<label class="label" for="round">Round</label>
+		<Select label="Round" id="round" bind:value={heat.round} options={$rounds}/>
+		<!-- <label class="label" for="round">Round</label>
 		<select name="round" id="round" bind:value={heat.round}>
 			{#each $rounds as round}
 				<option value={round}>{round}</option>
 			{/each}
-		</select>
+		</select> -->
-		<label class="label" for="number">Number</label>
+		<Number label="Number" min="1" max="20" id="number" bind:value={heat.number} />
-		<input bind:value={heat.number} id="number" type="number" min="1" max="20" />
+		<!-- <label class="label" for="number">Number</label>
-		<label class="label" for="category">Category</label>
+		<input bind:value={heat.number} id="number" type="number" min="1" max="20" /> -->
+		<Select label="Category" id="category" options={$categories} bind:value={heat.category} />
+		<!-- <label class="label" for="category">Category</label>
 		<select name="category" id="category" bind:value={heat.category}>
 			{#each $categories as category}
 				<option value={category}>{category}</option>
 			{/each}
-		</select>
+		</select> -->
-		<label class="label" for="timer">Duration</label>
+		<Number label="Duration" id="duration" min="5" max="60" step="5" bind:value={heat.timer} />
-		<input bind:value={heat.timer} id="timer" type="number" min="5" max="60" step="5" />
+		<!-- <label class="label" for="timer">Duration</label>
+		<input bind:value={heat.timer} id="timer" type="number" min="5" max="60" step="5" /> -->
 		<!-- on:keydown={(event) => {event.preventDefault()}} -->
 	</div>
 
 	<hr />
 	<div class="controller">
-		<button
+		<Button handleClick={addSurfers} label="+" />
+		<!-- <button
 			class="plus"
 			on:click={() => {
 				addSurfers();
 			}}>+</button
-		>
+		> -->
 		<span class="surfers">{surfers}</span>
-		<button
+		<Button handleClick={removeSurfers} label="-" />
+		<!-- <button
 			class="plus"
 			on:click={() => {
 				removeSurfers();
 			}}>-</button
-		>
+		> -->
 	</div>
 
 	{#each Array(surfers) as _, surfer}
 		<div class="surfer">
-			<label class="label" for="name{surfer}">Name</label>
+			<Input label="Name" id="name{surfer}" bind:value={surfer_list[surfer].name} />
+			<!-- <label class="label" for="name{surfer}">Name</label>
 			<input
 				bind:value={surfer_list[surfer].name}
 				on:change={capitalize(surfer_list[surfer], 'name')}
 				id="name{surfer}"
 				type="text"
-			/>
+			/> -->
-			<label class="label" for="color{surfer}">Color</label>
+			<Select id="color{surfer}" label="Color" options={$colors} bind:value={surfer_list[surfer].color} selectStyle="background-color: {surfer_list[surfer].color};"/>
+			<!-- <label class="label" for="color{surfer}">Color</label>
 			<select
 				name="color"
 				id="color{surfer}"
@@ -229,14 +244,7 @@
 				{#each $colors as color}
 					<option value={color} style="background-color: {color};">{color}</option>
 				{/each}
-				<!-- <option value="red" style="background-color: red;">Select color</option> -->
+			</select> -->
-				<!-- <option value="red" style="background-color: red;">Red</option>
-                <option value="blue" style="background-color: blue;">Blue</option>
-                <option value="green" style="background-color: green;">Green</option>
-                <option value="yellow" style="background-color: yellow;">Yellow</option>
-                <option value="orange" style="background-color: orange;">Orange</option>
-                <option value="violet" style="background-color: violet;">Violet</option>                 -->
-			</select>
 			<!-- <input bind:value={surfer_list[surfer].color} type="color" id="color{surfer}"> -->
 		</div>
 	{/each}

frontend/src/routes/surfers/+page.svelte

@@ -3,12 +3,14 @@
 	import Button from '$lib/button.svelte';
 	import Select from '$lib/select.svelte';
 	import Input from '$lib/input.svelte';
+	import Number from "$lib/number.svelte"
 	import { categories } from '$lib/stores/categories.js';
 
 	let surfer = {
 		firstname: '',
 		lastname: '',
-		category: ''
+		category: '',
+		num: '1'
 	};
 
 	$: value = '';
@@ -24,6 +26,7 @@
 	<Input label="Firstame" id="firstname" bind:value={surfer.firstname} />
 	<Input label="Lastname" id="lastname" bind:value={surfer.lastname} />
 	<Select label="category" id="category" options={$categories} bind:value={surfer.category} />
+	<Number label="Heat" id="heat" min="1" max="20" bind:value={surfer.num} />
 </div>
 
 <Button handleClick={onclick} title="SAVE"></Button>