=priority add start

backend/.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+/static
+.env
+.env.*
+go.sum

backend/api.go

@@ -9,6 +9,10 @@ func (w *Webapp) initApi() {
 	http_api := w.Engine.Group("/api")
 	http_api.GET("/priority", w.GetPriority)
 	http_api.POST("/priority", w.SetPriority)
+	http_api.POST("/start", w.StartTimer)
+
+	// SSE
+	http_api.GET("/sse", HeadersMiddleware(), stream.serveHTTP(), stream.retvalSSE())
 
 	// // Surfers
 	// http_api.GET("/surfers", w.GetSurfers)
@@ -19,7 +23,4 @@ func (w *Webapp) initApi() {
 	// http_api.GET("/users", w.GetUsers)
 	// http_api.POST("/updateuser", w.UpdateUser)
 	// http_api.POST("/deleteuser", w.DeleteUser)
-
-	// SSE
-	http_api.GET("/sse", HeadersMiddleware(), stream.serveHTTP(), stream.retvalSSE())
 }

backend/msgmode.go

@@ -4,7 +4,7 @@ type Mode int
 
 const (
 	Priority Mode = iota
-	Users
+	Stop
 	Time
 )
 
@@ -12,8 +12,8 @@ func (t Mode) String() string {
 	switch t {
 	case Priority:
 		return "priority"
-	case Users:
-		return "users"
+	case Stop:
+		return "stop"
 	case Time:
 		return "time"
 	}

backend/sse.go

@@ -175,7 +175,7 @@ func (stream *PriorityStream) timer() {
 				stream.Start = false
 				msg := Message{
 					Msg:  "stop",
-					Mode: Time.String(),
+					Mode: Stop.String(),
 				}
 				stream.Message <- msg
 				return
@@ -184,8 +184,8 @@ func (stream *PriorityStream) timer() {
 					currentTimer := fmt.Sprintf("The Current Time Is %v", formatTime(stream.Duration))
 
 					msg := Message{
-						Msg:  currentTimer,
-						Mode: Time.String(),
+						Duration: currentTimer,
+						Mode:     Time.String(),
 					}
 
 					// Send current time to clients message channel

backend/static/_app/immutable/chunks/scheduler.e108d1fd.js

@@ -1 +0,0 @@
-function k(){}function x(t,n){for(const e in n)t[e]=n[e];return t}function w(t){return t()}function z(){return Object.create(null)}function j(t){t.forEach(w)}function F(t){return typeof t=="function"}function P(t,n){return t!=t?n==n:t!==n||t&&typeof t=="object"||typeof t=="function"}function S(t){return Object.keys(t).length===0}function E(t,...n){if(t==null){for(const o of n)o(void 0);return k}const e=t.subscribe(...n);return e.unsubscribe?()=>e.unsubscribe():e}function U(t,n,e){t.$$.on_destroy.push(E(n,e))}function A(t,n,e,o){if(t){const r=g(t,n,e,o);return t[0](r)}}function g(t,n,e,o){return t[1]&&o?x(e.ctx.slice(),t[1](o(n))):e.ctx}function B(t,n,e,o){if(t[2]&&o){const r=t[2](o(e));if(n.dirty===void 0)return r;if(typeof r=="object"){const a=[],f=Math.max(n.dirty.length,r.length);for(let s=0;s<f;s+=1)a[s]=n.dirty[s]|r[s];return a}return n.dirty|r}return n.dirty}function C(t,n,e,o,r,a){if(r){const f=g(n,e,o,a);t.p(f,r)}}function D(t){if(t.ctx.length>32){const n=[],e=t.ctx.length/32;for(let o=0;o<e;o++)n[o]=-1;return n}return-1}let i;function d(t){i=t}function m(){if(!i)throw new Error("Function called outside component initialization");return i}function G(t){m().$$.on_mount.push(t)}function H(t){m().$$.after_update.push(t)}const l=[],p=[];let u=[];const b=[],y=Promise.resolve();let h=!1;function v(){h||(h=!0,y.then(q))}function I(){return v(),y}function O(t){u.push(t)}const _=new Set;let c=0;function q(){if(c!==0)return;const t=i;do{try{for(;c<l.length;){const n=l[c];c++,d(n),M(n.$$)}}catch(n){throw l.length=0,c=0,n}for(d(null),l.length=0,c=0;p.length;)p.pop()();for(let n=0;n<u.length;n+=1){const e=u[n];_.has(e)||(_.add(e),e())}u.length=0}while(l.length);for(;b.length;)b.pop()();h=!1,_.clear(),d(t)}function M(t){if(t.fragment!==null){t.update(),j(t.before_update);const n=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,n),t.after_update.forEach(O)}}function J(t){const n=[],e=[];u.forEach(o=>t.indexOf(o)===-1?n.push(o):e.push(o)),e.forEach(o=>o()),u=n}export{H as a,p as b,A as c,B as d,U as e,z as f,D as g,q as h,F as i,S as j,O as k,J as l,i as m,k as n,G as o,d as p,w as q,j as r,P as s,I as t,C as u,l as v,v as w};

backend/static/_app/immutable/chunks/scheduler.e108d1fd.js.br

@@ -1,4 +0,0 @@
-o <20>Βqο!6¥mƒ‘ΥL­ZlοΝ―Pκ„V<E2809E>
-#( '<27>EΫΪY6ή]™\η“6w<36>΄ώp4uφΣιΗv 4Ζ eΦε»ΖP<CE96>ύμ'*uΤΕΦ¥Ή-n.ΐΉKA“’(|\ΆUΫΝ?<3F>a<EFBFBD>V<EFBFBD>σ
,§cqΰςδΠJ„+¥³–D<E28093>!#>eb@k<>~c£Zπzϊ<7A>l,<2C>―ΰΡ+>Ι‡ί`οχό<CF87>=―–‘†(ά™\Δύρ<CF8D>Κ6Iiυ<69>µRί—σsj¤<CΘΨ’ϋµFΘ)-
p|<7C>$Ν(Θς}φϋ}΄ϊφ#YΚΊs‹=Η2¦ΪΒΠ’eswZεχ΄!3£Xmπ6Ag·0m<30>hBk<05>ΟάΊοkμ)έ΄75ρcK€Y7¦	’κ	«
-••^`4πVqx…ƒ5zΝ]ί]<5D><>ην/ΐ³ςϋ+‰µ:…4³Υ<C2B3>α£3S"Η<Uδ§υ‘
ΦΒ>AΟίεO’'qγSp)§Β¬q<C2AC>)^1Ρ—@^―ο~1–I<E28093>‡cBφΝκ©8­YΠλ$θNs»‹ϊJT<4A>cνώu5$£vAρpέΣ[]σ:#{CκROτ¨΄›<1F>Hθk²P${υ-m–>΄p„@¦Τ<1E>ΎΆ5κ:K‘®4™[ΰDρ‰Ύ†<CE8E>ΞƒT;ηUνρjΌΫ|³ςzΘ?<0E>~ΎΪx	+4|ή}1‹~©ν“5<E2809C>ΌβrΎµΠβZ©«<C2A9>?u—6†ΈΧm”–ΈinYυ<59>­ς<C2AD>ϋΎ`<60>Ο>¬Βlqς¥<CF82>W?<3F>Μq΄PM™s/x`§Ύφ=r3Ύ~$<24>dύ„·mNFηnίYQ½“Z»¥§wσ„i&- έΫb)­Qεw<CEB5>ήΟΥώϊI{ΒΦΥ‡2πΝΟΘ®λ:r ρτ_ckΟ‰ρΥxmU3²{1l<Ό'λ<10>BΞ3;/ς-Τ‡€%\[$–	j³
:E|)πΩέ`}<7D>Η–£ΗΗΓ΄¬<CE84>ωΫό<CEAB>DU}ιI,Ω}/Η%Ξΰχ\2έ"Ο<>π±8θυ…ν7Q|rHd¤ψΑ<CF88>	“²ΰ½@©Τ`xΠBq2Ώ"CΓωω£	/jp–h4ωG'93[²»®HΫρ*XtiS><3E>ο,™¤Ι|‹iΣ"[Α#SF ‹f<±i•ΪΧW:Y7.:Ί<>β!<21>9Ζp>
ψ†„H)!γ
-rή΅ΰJξ b5K@®<>ΘAΠƒd
<01>Πά‚α,«¦£s?BD®…

backend/static/_app/immutable/chunks/singletons.5178810a.js

@@ -1 +0,0 @@
-import{n as d,s as m}from"./scheduler.e108d1fd.js";const u=[];function p(e,t=d){let n;const o=new Set;function r(s){if(m(e,s)&&(e=s,n)){const c=!u.length;for(const l of o)l[1](),u.push(l,e);if(c){for(let l=0;l<u.length;l+=2)u[l][0](u[l+1]);u.length=0}}}function i(s){r(s(e))}function a(s,c=d){const l=[s,c];return o.add(l),o.size===1&&(n=t(r,i)||d),s(e),()=>{o.delete(l),o.size===0&&n&&(n(),n=null)}}return{set:r,update:i,subscribe:a}}var g;const E=((g=globalThis.__sveltekit_10p5els)==null?void 0:g.base)??"";var k;const w=((k=globalThis.__sveltekit_10p5els)==null?void 0:k.assets)??E,A="1701780449523",y="sveltekit:snapshot",I="sveltekit:scroll",x="sveltekit:index",_={tap:1,hover:2,viewport:3,eager:4,off:-1};function O(e){let t=e.baseURI;if(!t){const n=e.getElementsByTagName("base");t=n.length?n[0].href:e.URL}return t}function U(){return{x:pageXOffset,y:pageYOffset}}function f(e,t){return e.getAttribute(`data-sveltekit-${t}`)}const b={..._,"":_.hover};function v(e){let t=e.assignedSlot??e.parentNode;return(t==null?void 0:t.nodeType)===11&&(t=t.host),t}function L(e,t){for(;e&&e!==t;){if(e.nodeName.toUpperCase()==="A"&&e.hasAttribute("href"))return e;e=v(e)}}function N(e,t){let n;try{n=new URL(e instanceof SVGAElement?e.href.baseVal:e.href,document.baseURI)}catch{}const o=e instanceof SVGAElement?e.target.baseVal:e.target,r=!n||!!o||S(n,t)||(e.getAttribute("rel")||"").split(/\s+/).includes("external"),i=(n==null?void 0:n.origin)===location.origin&&e.hasAttribute("download");return{url:n,external:r,target:o,download:i}}function P(e){let t=null,n=null,o=null,r=null,i=null,a=null,s=e;for(;s&&s!==document.documentElement;)o===null&&(o=f(s,"preload-code")),r===null&&(r=f(s,"preload-data")),t===null&&(t=f(s,"keepfocus")),n===null&&(n=f(s,"noscroll")),i===null&&(i=f(s,"reload")),a===null&&(a=f(s,"replacestate")),s=v(s);function c(l){switch(l){case"":case"true":return!0;case"off":case"false":return!1;default:return null}}return{preload_code:b[o??"off"],preload_data:b[r??"off"],keep_focus:c(t),noscroll:c(n),reload:c(i),replace_state:c(a)}}function h(e){const t=p(e);let n=!0;function o(){n=!0,t.update(a=>a)}function r(a){n=!1,t.set(a)}function i(a){let s;return t.subscribe(c=>{(s===void 0||n&&c!==s)&&a(s=c)})}return{notify:o,set:r,subscribe:i}}function R(){const{set:e,subscribe:t}=p(!1);let n;async function o(){clearTimeout(n);try{const r=await fetch(`${w}/_app/version.json`,{headers:{pragma:"no-cache","cache-control":"no-cache"}});if(!r.ok)return!1;const a=(await r.json()).version!==A;return a&&(e(!0),clearTimeout(n)),a}catch{return!1}}return{subscribe:t,check:o}}function S(e,t){return e.origin!==location.origin||!e.pathname.startsWith(t)}function V(e){e.client}const Y={url:h({}),page:h({}),navigating:p(null),updated:R()};export{x as I,_ as P,I as S,y as a,N as b,P as c,Y as d,E as e,L as f,O as g,V as h,S as i,U as s};

backend/static/_app/immutable/nodes/0.e3dbbdbf.js

@@ -1 +0,0 @@
-import{s as l,c as r,u as i,g as u,d as f}from"../chunks/scheduler.e108d1fd.js";import{S as _,i as c,d as p,t as d}from"../chunks/index.a21d6cee.js";const m=!0,g=!1,$="always",v=Object.freeze(Object.defineProperty({__proto__:null,prerender:m,ssr:g,trailingSlash:$},Symbol.toStringTag,{value:"Module"}));function y(n){let s;const a=n[1].default,e=r(a,n,n[0],null);return{c(){e&&e.c()},l(t){e&&e.l(t)},m(t,o){e&&e.m(t,o),s=!0},p(t,[o]){e&&e.p&&(!s||o&1)&&i(e,a,t,t[0],s?f(a,t[0],o,null):u(t[0]),null)},i(t){s||(p(e,t),s=!0)},o(t){d(e,t),s=!1},d(t){e&&e.d(t)}}}function S(n,s,a){let{$$slots:e={},$$scope:t}=s;return n.$$set=o=>{"$$scope"in o&&a(0,t=o.$$scope)},[t,e]}class j extends _{constructor(s){super(),c(this,s,S,y,l,{})}}export{j as component,v as universal};

backend/static/_app/immutable/nodes/1.83202d09.js

@@ -1 +0,0 @@
-import{s as x,n as _,e as S}from"../chunks/scheduler.e108d1fd.js";import{S as j,i as q,g as f,m as d,s as y,h as g,j as h,n as v,f as u,c as C,a as m,x as $,o as E}from"../chunks/index.a21d6cee.js";import{d as H}from"../chunks/singletons.5178810a.js";const P=()=>{const s=H;return{page:{subscribe:s.page.subscribe},navigating:{subscribe:s.navigating.subscribe},updated:s.updated}},k={subscribe(s){return P().page.subscribe(s)}};function w(s){var b;let t,r=s[0].status+"",o,n,i,c=((b=s[0].error)==null?void 0:b.message)+"",l;return{c(){t=f("h1"),o=d(r),n=y(),i=f("p"),l=d(c)},l(e){t=g(e,"H1",{});var a=h(t);o=v(a,r),a.forEach(u),n=C(e),i=g(e,"P",{});var p=h(i);l=v(p,c),p.forEach(u)},m(e,a){m(e,t,a),$(t,o),m(e,n,a),m(e,i,a),$(i,l)},p(e,[a]){var p;a&1&&r!==(r=e[0].status+"")&&E(o,r),a&1&&c!==(c=((p=e[0].error)==null?void 0:p.message)+"")&&E(l,c)},i:_,o:_,d(e){e&&(u(t),u(n),u(i))}}}function z(s,t,r){let o;return S(s,k,n=>r(0,o=n)),[o]}let F=class extends j{constructor(t){super(),q(this,t,z,w,x,{})}};export{F as component};

backend/static/_app/immutable/nodes/2.01200e4b.js

@@ -1 +0,0 @@
-import{s as o,n as t}from"../chunks/scheduler.e108d1fd.js";import{S as s,i as x,g as i,h as M,y as E,l as c,a as J,f as W}from"../chunks/index.a21d6cee.js";const f="data:image/png;base64,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";function h(A){let e,r=`<img src="${f}" alt="TopScorer"/>`;return{c(){e=i("div"),e.innerHTML=r,this.h()},l(a){e=M(a,"DIV",{style:!0,"data-svelte-h":!0}),E(e)!=="svelte-b4qvfi"&&(e.innerHTML=r),this.h()},h(){c(e,"background-color","black")},m(a,n){J(a,e,n)},p:t,i:t,o:t,d(a){a&&W(e)}}}class d extends s{constructor(e){super(),x(this,e,null,h,o,{})}}export{d as component};

backend/static/_app/version.json

@@ -1 +1 @@
-{"version":"1701780449523"}
+{"version":"1701787521369"}

backend/static/index.html

@@ -5,17 +5,17 @@
 		<link rel="icon" href="/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		
-		<link rel="modulepreload" href="/_app/immutable/entry/start.92e5ab9c.js">
-		<link rel="modulepreload" href="/_app/immutable/chunks/scheduler.e108d1fd.js">
-		<link rel="modulepreload" href="/_app/immutable/chunks/singletons.5178810a.js">
-		<link rel="modulepreload" href="/_app/immutable/entry/app.72ed0e5f.js">
-		<link rel="modulepreload" href="/_app/immutable/chunks/index.a21d6cee.js">
+		<link rel="modulepreload" href="/_app/immutable/entry/start.f942bb89.js">
+		<link rel="modulepreload" href="/_app/immutable/chunks/scheduler.9172086d.js">
+		<link rel="modulepreload" href="/_app/immutable/chunks/singletons.020ac99d.js">
+		<link rel="modulepreload" href="/_app/immutable/entry/app.af53e384.js">
+		<link rel="modulepreload" href="/_app/immutable/chunks/index.c679962e.js">
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">
 			<script>
 				{
-					__sveltekit_10p5els = {
+					__sveltekit_1s7z6vk = {
 						base: "",
 						env: {}
 					};
@@ -23,8 +23,8 @@
 					const element = document.currentScript.parentElement;
 
 					Promise.all([
-						import("/_app/immutable/entry/start.92e5ab9c.js"),
-						import("/_app/immutable/entry/app.72ed0e5f.js")
+						import("/_app/immutable/entry/start.f942bb89.js"),
+						import("/_app/immutable/entry/app.af53e384.js")
 					]).then(([kit, app]) => {
 						kit.start(app, element);
 					});

backend/webapp.go

@@ -29,15 +29,18 @@ func InitHttp(d *scribble.Driver) *Webapp {
 	wapp.initApi()
 	// wapp.initAuth()
 
-	display := router.Group("/display")
-	display.Static("/", "./static/display")
+	displayH := router.Group("/display_h")
+	displayH.Static("/", "./static/display_h")
 
-	video := router.Group("/videowall")
-	video.Static("/", "./static/videowall")
+	displayV := router.Group("/display_v")
+	displayV.Static("/", "./static/display_v")
 
 	priority := router.Group("/priority")
 	priority.Static("/", "./static/priority")
 
+	mobile := router.Group("/mobile")
+	mobile.Static("/", "./static/mobile")
+
 	sapp := router.Group("/_app")
 	sapp.Static("/", "./static/_app")
 

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

@@ -0,0 +1,240 @@
+<script>
+	// import { page } from '$app/stores';
+	import { onDestroy, onMount } from 'svelte';
+	import { dev } from '$app/environment';
+
+	if (dev) {
+		console.log('Dev mode');
+	} else {
+		console.log('Not dev mode');
+	}
+
+	let surfers = [
+		{ name: 'Kanoa Igarashi', color: 'red', score: '4.50', priority: '3' },
+		{ name: 'Griffin Colapinto', color: 'white', score: '5.60', priority: 'P' },
+		{ name: 'Jack Robinson', color: 'blue', score: '6.10', priority: '5' },
+		{ name: 'Gabriel Medina', color: 'green', score: '4.30', priority: '2' },
+		{ name: 'Italo Ferreira', color: 'black', score: '6.50', priority: '4' }
+	];
+
+	let width;
+	// $: activeUrl = $page.url.pathname;
+
+	let event = 'Semifinal';
+	let category = 'U16 man';
+	let heat = 'Heat 1';
+
+	const pad2 = (number) => `00${number}`.slice(-2);
+
+	$: min = 10;
+	$: sec = 25;
+	
+	let end = false;
+
+	function updateRemainingTime() {
+		if ((min === 0) & (sec === 0)) {
+			clearInterval(timer);
+			end = true;
+		} else if (sec === 0) {
+			min -= 1;
+			sec = 59;
+		} else {
+			sec -= 1;
+		}
+	}
+
+	updateRemainingTime();
+
+	const timer = setInterval(updateRemainingTime, 1000);
+
+	function Subscribe() {
+		const sse = new EventSource(`/api/sse`);
+		console.log('subscribe');
+		sse.onmessage = (e) => {
+			let Msg = JSON.parse(e.data);
+			console.log(`received: ${JSON.stringify(Msg)}`);
+			if (Msg.mode === 'priority') {
+				console.log(`priority: ${Msg.priority}`);
+				for (let i in surfers) {
+					surfers[i].priority = Msg.priority[i];
+				}
+			}
+		};
+		return () => {
+			sse.close();
+			console.log(`sse closing ${Date.now()}`);
+		};
+	}
+
+	onMount(() => {
+		const unsub = Subscribe();
+		return unsub;
+	});
+
+	onDestroy(() => {
+		clearInterval(timer); // Pulisci il timer quando il componente viene distrutto
+	});
+</script>
+
+<svelte:window bind:innerWidth={width} />
+
+<div class="header">
+	{#if !end}
+		<div class="timer">{pad2(min)}:{pad2(sec)}</div>
+	{:else}
+		<div class="timer" style="color: red">{pad2(min)}:{pad2(sec)}</div>
+	{/if}
+</div>
+
+<div class="container">
+	{#each surfers as surfer, id}
+		<div class="box">
+			<div class="square" style="background-color: {surfer.color};">
+				{#if surfer.priority != ''}
+					{#if surfer.priority === 'P'}
+						{#if surfer.color === 'white'}
+							<span class="priority_white">{surfer.priority}</span>
+						{:else}
+							<span class="priority">{surfer.priority}</span>
+						{/if}
+					{:else}
+						<span class="priority_small">{surfer.priority}</span>
+					{/if}
+				{/if}
+			</div>
+			<div class="score">{surfer.score}</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	:root {
+		--backColor: #334;
+		--textColor: white;
+		--maxWidth: (100% - 15px);
+	}
+
+	.header {
+		/* padding: 15px; */
+		height: 10vh;
+		background-color: var(--backColor);
+		padding-left: 10px;
+		padding-right: 10px;
+		padding-top: 6px;
+		padding-bottom: 6px;
+		margin-top: 2px;
+		margin-bottom: 2px;
+		width: calc(var(--maxWidth));
+		color: var(--textColor);
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.header .timer {
+		font-size: 13vh;
+		padding-left: 10px;
+		padding-right: 20px;
+		font-weight: bold;
+		flex: 2 2 auto;
+		align-self: center;
+		text-align: center;
+	}
+
+	.container {
+		height: 85vh;
+		background-color: var(--backColor);
+		padding-left: 10px;
+		padding-right: 10px;
+		padding-top: 4px;
+		width: calc(var(--maxWidth));
+		color: var(--textColor);
+	}
+
+	.box {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		padding: 1px;
+		margin-bottom: 1px;
+	}
+
+	.priority {
+		width: 15%;
+		height: 100%;
+		border-radius: 20%;
+		font-size: 8vh;
+		animation: blink 2s 3;
+		margin-right: auto;
+		background-color: white;
+		color: black;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: bold;
+	}
+
+	.priority_white {
+		width: 15%;
+		height: 100%;
+		border-radius: 20%;
+		font-size: 8vh;
+		animation: blink_white 2s 3;
+		margin-right: auto;
+		background-color: black;
+		color: white;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: bold;
+		padding-bottom: 4px;
+	}
+	
+	.priority_small {
+		width: 10%;
+		height: 80%;
+		border-radius: 20%;
+		font-size: 8vh;
+		/* animation: blink 2s infinite; */
+		margin-right: auto;
+		margin-left: 30px;
+		background-color: #bbb;
+		color: black;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: bold;
+	}	
+
+	.square {
+		width: 100%;
+		height: 16vh;
+		border-radius: 5px;
+		margin-right: 15px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding-bottom: 2px;
+		margin-bottom: 2px;
+	}
+
+	.score {
+		padding-right: 20px;
+		width: 20%;
+		font-size: 12vh;
+		float: right;
+		text-align: center;
+		font-weight: bold;
+	}
+
+	@keyframes blink {
+		0% {
+			background-color: white;
+		}
+		50% {
+			background-color: rgba(255, 255, 255, 0.6);
+		}
+		100% {
+			background-color: white;
+		}
+	}
+</style>

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

@@ -0,0 +1,227 @@
+<script>
+	// import { page } from '$app/stores';
+	import { onDestroy, onMount } from 'svelte';
+	import { dev } from '$app/environment';
+
+	if (dev) {
+		console.log('Dev mode');
+	} else {
+		console.log('Not dev mode');
+	}
+
+	let surfers = [
+		{ name: 'Kanoa Igarashi', color: 'red', score: '4.50', priority: '3' },
+		{ name: 'Griffin Colapinto', color: 'white', score: '5.60', priority: 'P' },
+		{ name: 'Jack Robinson', color: 'blue', score: '6.10', priority: '5' },
+		{ name: 'Gabriel Medina', color: 'green', score: '4.30', priority: '2' },
+		{ name: 'Italo Ferreira', color: 'black', score: '6.50', priority: '4' }
+	];
+
+	let width;
+	// $: activeUrl = $page.url.pathname;
+
+	let event = 'Semifinal';
+	let category = 'U16 man';
+	let heat = 'Heat 1';
+
+	const pad2 = (number) => `00${number}`.slice(-2);
+
+	$: min = 10;
+	$: sec = 25;
+	
+	let end = false;
+
+	function updateRemainingTime() {
+		if ((min === 0) & (sec === 0)) {
+			clearInterval(timer);
+			end = true;
+		} else if (sec === 0) {
+			min -= 1;
+			sec = 59;
+		} else {
+			sec -= 1;
+		}
+	}
+
+	updateRemainingTime();
+
+	const timer = setInterval(updateRemainingTime, 1000);
+
+	function Subscribe() {
+		const sse = new EventSource(`/api/sse`);
+		console.log('subscribe');
+		sse.onmessage = (e) => {
+			let Msg = JSON.parse(e.data);
+			console.log(`received: ${JSON.stringify(Msg)}`);
+			if (Msg.mode === 'priority') {
+				console.log(`priority: ${Msg.priority}`);
+				for (let i in surfers) {
+					surfers[i].priority = Msg.priority[i];
+				}
+			}
+		};
+		return () => {
+			sse.close();
+			console.log(`sse closing ${Date.now()}`);
+		};
+	}
+
+	onMount(() => {
+        if (!dev) {
+            const unsub = Subscribe();
+	    	return unsub;	    
+        }
+    });
+
+	onDestroy(() => {
+		clearInterval(timer); // Pulisci il timer quando il componente viene distrutto
+	});
+</script>
+
+<svelte:window bind:innerWidth={width} />
+
+<div class="header">
+	{#if !end}
+		<div class="timer">{pad2(min)}:{pad2(sec)}</div>
+	{:else}
+		<div class="timer" style="color: red">{pad2(min)}:{pad2(sec)}</div>
+	{/if}
+</div>
+
+<div class="container">
+	{#each surfers as surfer, id}
+		<div class="box">
+			<div class="square" style="background-color: {surfer.color};">
+				{#if surfer.priority != ''}
+					{#if surfer.priority === 'P'}
+						{#if surfer.color === 'white'}
+							<span class="priority_white">{surfer.priority}</span>
+						{:else}
+							<span class="priority">{surfer.priority}</span>
+						{/if}
+					{:else}
+						<span class="priority_small">{surfer.priority}</span>
+					{/if}
+				{/if}
+			</div>
+			<div class="score">{surfer.score}</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	:root {
+		--backColor: #334;
+		--textColor: white;
+		--maxWidth: (100% - 15px);
+	}
+
+	.header {
+		/* padding: 15px; */
+		height: 10vh;
+		background-color: var(--backColor);
+		padding-left: 10px;
+		padding-right: 10px;
+		padding-top: 6px;
+		padding-bottom: 6px;
+		margin-top: 2px;
+		margin-bottom: 2px;
+		width: calc(var(--maxWidth));
+		color: var(--textColor);
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.header .timer {
+		font-size: 13vh;
+		padding-left: 10px;
+		padding-right: 20px;
+		font-weight: bold;
+		flex: 2 2 auto;
+		align-self: center;
+		text-align: center;
+	}
+
+	.container {
+		height: 85vh;
+		background-color: var(--backColor);
+		padding-left: 10px;
+		padding-right: 10px;
+		padding-top: 4px;
+		width: calc(var(--maxWidth));
+		color: var(--textColor);
+	}
+
+	.priority {
+		width: 90%;
+		height: 20%;
+		border-radius: 20%;
+		font-size: 8vh;
+		animation: blink 2s 3;
+		margin-top: 50%;
+		background-color: white;
+		color: black;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: bold;
+	}
+
+	.priority_white {
+		width: 90%;
+		height: 20%;
+		border-radius: 20%;
+		font-size: 8vh;
+		animation: blink_white 2s 3;
+		margin-top: 50%;
+		background-color: black;
+		color: white;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+        text-align: center;
+		font-weight: bold;
+		padding-bottom: 4px;
+	}
+	
+	.priority_small {
+		width: 80%;
+		height: 15%;
+		border-radius: 20%;
+		font-size: 8vh;
+		/* animation: blink 2s infinite; */
+		margin-top: 60%;
+		margin-left: 20px;
+		background-color: #bbb;
+		color: black;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: bold;
+	}	
+
+    .score {
+		padding-right: 20px;
+		width: 20%;
+		font-size: 12vh;
+		float: right;
+		text-align: center;
+		font-weight: bold;
+	}
+	.box {
+		height: 100%;
+        width: 19%;
+        float: left;
+		margin-left: 1px;
+        margin-right: 1px;
+	}
+
+    .square {
+        height: 100%;
+        width: 100%;
+        float: left;
+        align-items: center;
+		justify-content: center;
+        text-align: center;
+    }
+</style>

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

@@ -0,0 +1,353 @@
+<script>
+	// import { page } from '$app/stores';
+	import { onDestroy, onMount } from 'svelte';
+	import { dev } from '$app/environment';
+
+	if (dev) {
+		console.log('Dev mode');
+	} else {
+		console.log('Not dev mode');
+	}
+
+	let surfers = [
+		{ name: 'Kanoa Igarashi', color: 'red', score: '4.50', priority: '3' },
+		{ name: 'Griffin Colapinto', color: 'white', score: '5.60', priority: 'P' },
+		{ name: 'Jack Robinson', color: 'blue', score: '6.10', priority: '5' },
+		{ name: 'Gabriel Medina', color: 'green', score: '4.30', priority: '2' },
+		{ name: 'Italo Ferreira', color: 'black', score: '6.50', priority: '4' }
+	];
+
+	let width;
+	// $: activeUrl = $page.url.pathname;
+
+	let event = 'Semifinal';
+	let category = 'U16 man';
+	let heat = 'Heat 1';
+
+	const pad2 = (number) => `00${number}`.slice(-2);
+
+	$: min = 10;
+	$: sec = 25;
+
+	let end = false;
+
+	function updateRemainingTime() {
+		if ((min === 0) & (sec === 0)) {
+			clearInterval(timer);
+			end = true;
+		} else if (sec === 0) {
+			min -= 1;
+			sec = 59;
+		} else {
+			sec -= 1;
+		}
+	}
+
+	updateRemainingTime();
+
+	const timer = setInterval(updateRemainingTime, 1000);
+
+	function Subscribe() {
+		const sse = new EventSource(`/api/sse`);
+		console.log('subscribe');
+		sse.onmessage = (e) => {
+			let Msg = JSON.parse(e.data);
+			console.log(`received: ${JSON.stringify(Msg)}`);
+			if (Msg.mode === 'priority') {
+				console.log(`priority: ${Msg.priority}`);
+				for (let i in surfers) {
+					surfers[i].priority = Msg.priority[i];
+				}
+			}
+		};
+		return () => {
+			sse.close();
+			console.log(`sse closing ${Date.now()}`);
+		};
+	}
+
+	onMount(() => {
+		const unsub = Subscribe();
+		return unsub;
+	});
+
+	onDestroy(() => {
+		clearInterval(timer); // Pulisci il timer quando il componente viene distrutto
+	});
+</script>
+
+<svelte:window bind:innerWidth={width} />
+
+<div class="header">
+	<span class="title">{event}</span>
+	<span class="title">{category}</span>
+	{#if !end}
+		<span class="timer">{pad2(min)}:{pad2(sec)}</span>
+	{:else}
+		<span class="timer" style="color: red">{pad2(min)}:{pad2(sec)}</span>
+	{/if}
+	<span class="heat">{heat}</span>
+</div>
+
+<div class="container">
+	{#each surfers as surfer, id}
+		<div class="box">
+			<div class="square" style="background-color: {surfer.color};">
+				{#if surfer.priority != ''}
+					<span class="priority">{surfer.priority}</span>
+				{/if}
+			</div>
+			<div class="text">{surfer.name}</div>
+			<div class="score">{surfer.score}</div>
+		</div>
+	{/each}
+</div>
+
+{#if width < 768}
+	<div class="footer">
+		<div>waiting for scores</div>
+		<!-- <div class="score">6.00</div>
+		<div class="score">6.00</div>
+		<div class="score">6.00</div>
+		<div class="score">6.00</div>
+		<div class="score">6.00</div> -->
+	</div>
+{/if}
+
+<style>
+	:root {
+		--backColor: #334;
+		--textColor: white;
+		--maxWidth: (100% - 15px);
+	}
+
+	.header {
+		background-color: var(--backColor);
+		padding-left: 10px;
+		padding-right: 10px;
+		padding-top: 6px;
+		padding-bottom: 6px;
+		margin-top: 2px;
+		margin-bottom: 2px;
+		width: calc(var(--maxWidth));
+		color: var(--textColor);
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.header .title {
+		font-size: 2vh;
+		padding-left: 10px;
+		padding-right: 10px;
+		font-weight: bold;
+		flex: 1 1 0;
+		align-self: center;
+	}
+
+	.header .heat {
+		font-size: 2vh;
+		padding-left: 0px;
+		padding-right: 10px;
+		font-weight: bold;
+		flex: 1 1 auto;
+		align-self: center;
+		text-align: right;
+	}
+
+	.header .timer {
+		font-size: 5vh;
+		padding-left: 10px;
+		padding-right: 10px;
+		font-weight: bold;
+		flex: 2 2 auto;
+		align-self: center;
+		text-align: center;
+	}
+
+	.container {
+		background-color: var(--backColor);
+		padding: 10px;
+		width: calc(var(--maxWidth));
+		color: var(--textColor);
+	}
+
+	.box {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		padding: 4px;
+		margin-bottom: 2px;
+	}
+
+	.priority {
+		width: 60%;
+		height: 60%;
+		background-color: white;
+		color: black;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 1.8rem;
+		font-weight: bold;
+	}
+
+	.square {
+		width: 60px;
+		height: 60px;
+		border-radius: 5px;
+		margin-right: 20px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative; /* Per il posizionamento del testo */
+	}
+
+	.text {
+		flex: 1;
+		font-size: 1.5rem;
+		font-weight: lighter;
+	}
+
+	.score {
+		float: right;
+		padding-right: 10px;
+		text-align: center;
+		width: 20%;
+		font-size: 2.5rem;
+		font-weight: bold;
+	}
+
+	.footer {
+		background-color: var(--backColor);
+		padding: 10px;
+		width: calc(var(--maxWidth));
+		color: var(--textColor);
+		display: flex;
+		font-size: larger;
+		font-weight: bold;
+		align-items: center;
+		justify-content: space-around;
+		align-content: center;
+		margin-top: 2px;
+	}
+
+	/* .footer .score {
+		float: right;
+		padding-right: 10px;
+		text-align: center;
+		width: 20%;
+		font-size: 1.5rem;
+		font-weight: lighter;
+	} */
+
+	/* @media screen and (min-width: 768px) {
+		.container {
+			height: 85vh;
+		}
+
+		.priority {
+			width: 15%;
+			height: 100%;
+			border-radius: 20%;
+			font-size: 8vh;
+			animation: blink 2s infinite;
+			margin-right: auto;
+		}
+
+		@keyframes blink {
+			0% {
+				background-color: white;
+			}
+			50% {
+				background-color: rgba(255, 255, 255, 0.6);
+			}
+			100% {
+				background-color: white;
+			}
+		}
+
+		.square {
+			width: 100%;
+			height: 15vh;
+			margin-right: 20px;
+		}
+
+		.score {
+			padding-right: 40px;
+			width: 20%;
+			font-size: 14vh;
+		}
+
+		.text {
+			flex: 0;
+			font-size: 0;
+		}
+
+		.header {
+			padding: 15px;
+			margin-bottom: 2px;
+			height: 10vh;
+			width: calc(100% - 15px);
+		}
+
+		.header .timer {
+			font-size: 6rem;
+			padding-left: 10px;
+			padding-right: 20px;
+		}
+	} */
+
+	/* @media screen and (min-width: 1280px) {
+		.priority {
+			width: 120px;
+			height: 90%;
+			font-size: 6rem;
+		}
+
+		.square {
+			width: 100%;
+			height: 125px;
+			margin-right: 20px;
+		}
+
+		.score {
+			float: right;
+			padding-right: 40px;
+			width: 20%;
+			font-size: 6rem;
+		}
+
+		.header .timer {
+			font-size: 6rem;
+			padding-left: 10px;
+			padding-right: 20px;
+		}
+	}
+
+	@media screen and (min-width: 1920px) {
+		.priority {
+			width: 200px;
+			font-size: 10rem;
+		}
+
+		.square {
+			width: 100%;
+			height: 205px;
+			border-radius: 5px;
+			margin-right: 20px;
+		}
+
+		.score {
+			padding-right: 40px;
+			width: 20%;
+			font-size: 11rem;
+		}
+
+		.header .timer {
+			font-size: 8rem;
+			padding-left: 10px;
+			padding-right: 20px;
+		}
+	} */
+</style>

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

@@ -0,0 +1,371 @@
+<script>
+	// import { page } from '$app/stores';
+	import { onDestroy, onMount } from 'svelte';
+	import { dev } from '$app/environment';
+
+	if (dev) {
+		console.log('Dev mode');
+	} else {
+		console.log('Not dev mode');
+	}
+
+	let surfers = [
+		{ name: 'Kanoa Igarashi', color: 'red', score: '4.50', priority: '3' },
+		{ name: 'Griffin Colapinto', color: 'white', score: '5.60', priority: 'P' },
+		{ name: 'Jack Robinson', color: 'blue', score: '6.10', priority: '5' },
+		{ name: 'Gabriel Medina', color: 'green', score: '4.30', priority: '2' },
+		{ name: 'Italo Ferreira', color: 'black', score: '6.50', priority: '4' }
+	];
+
+	let width;
+	// $: activeUrl = $page.url.pathname;
+
+	const pad2 = (number) => `00${number}`.slice(-2);
+
+	$: min = 0;
+	$: sec = 0;
+
+	let end = false;
+    let start = false;
+
+	// function updateRemainingTime() {
+	// 	if ((min === 0) & (sec === 0)) {
+	// 		clearInterval(timer);
+	// 		end = true;
+	// 	} else if (sec === 0) {
+	// 		min -= 1;
+	// 		sec = 59;
+	// 	} else {
+	// 		sec -= 1;
+	// 	}
+	// }
+
+	// updateRemainingTime();
+
+	// const timer = setInterval(updateRemainingTime, 1000);
+
+	function Subscribe() {
+		const sse = new EventSource(`/api/sse`);
+		console.log('subscribe');
+		sse.onmessage = (e) => {
+			let Msg = JSON.parse(e.data);
+			console.log(`received: ${JSON.stringify(Msg)}`);
+			if (Msg.mode === 'priority') {
+				console.log(`priority: ${Msg.priority}`);
+				for (let i in surfers) {
+					surfers[i].priority = Msg.priority[i];
+				}
+			} else if (Msg.mode === 'time') {
+                console.log(`duration: ${Msg.duration}`);
+			} else if (Msg.mode === 'stop') {
+                console.log(`stop duration: ${Msg.duration}`);
+                end = true;
+                start = false;
+            }
+		};
+		return () => {
+			sse.close();
+			console.log(`sse closing ${Date.now()}`);
+		};
+	}
+
+    async function dblclick(id) {
+        console.log(`dblclick = ${surfers[id]}`);
+        if (surfers[id] === 'P') {
+            console.log('pressed P');
+        } else {
+            console.log(`pressed: [${id}] ${surfers[id].priority}`);
+            // let oldps = parseInt(surfers[id].priority);
+            // for (let i in surfers) {
+            //     if (i != id) {
+            //         console.log(`pos: [${i}] ${surfers[i].priority} ${surfers[i].priority < oldpos}`);
+            //         if (surfers[i].priority != 'P' && surfers[i].priority < oldpos) {
+            //             let pos = parseInt(surfers[i].priority);
+            //             if ()
+            //         }
+            //     } else {
+            //         surfers[i] = 'P';
+            //         console.log(`first: [${i}] ${surfers[i].priority}`);
+            //     }
+            // }
+        }
+    }
+
+    async function startCounter() {
+		const res = await fetch(`/api/start`, {
+			method: 'POST',
+			body: JSON.stringify({
+				duration: "10m0s",
+				mode: 'time'
+			}),
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});
+		console.log(
+			JSON.stringify({
+				duration: "10m0s",
+				mode: 'time'
+			})
+		);
+		console.log(`retval: ${JSON.stringify(res)}`);
+        start = true;
+    }
+
+	async function click(id) {
+		console.log(surfers[id]);
+		if (surfers[id].priority === 'P') {
+			for (let i in surfers) {
+				if (i != id) {
+					let pos = parseInt(surfers[i].priority) - 1;
+					if (pos === 1) {
+						surfers[i].priority = 'P';
+					} else {
+						surfers[i].priority = pos.toString();
+					}
+				}
+			}
+			surfers[id].priority = '5';
+		} else {
+			console.log(`pressed: [${id}] ${surfers[id].priority}`);
+			let oldpos = parseInt(surfers[id].priority);
+			for (let i in surfers) {
+				if (i != id) {
+					console.log(`pos: [${i}] ${surfers[i].priority} ${surfers[i].priority > oldpos}`);
+					if (surfers[i].priority != 'P' && surfers[i].priority > oldpos) {
+						let pos = parseInt(surfers[i].priority);
+						if (pos > oldpos) {
+							surfers[i].priority = (pos - 1).toString();
+							console.log(`newpos: ${surfers[i].priority}`);
+						}
+					}
+				} else {
+					surfers[i].priority = '5';
+					console.log(`last: [${i}] ${surfers[i].priority}`);
+				}
+			}
+		}
+		const res = await fetch(`/api/priority`, {
+			method: 'POST',
+			body: JSON.stringify({
+				priority: surfers.map((obj) => obj.priority),
+				mode: 'priority'
+			}),
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});
+		console.log(
+			JSON.stringify({
+				priority: surfers.map((obj) => obj.priority),
+				mode: 'priority'
+			})
+		);
+		console.log(`retval: ${JSON.stringify(res)}`);
+	}
+
+	onMount(() => {
+		const unsub = Subscribe();
+		return unsub;
+	});
+
+	// onDestroy(() => {
+	// 	clearInterval(timer); // Pulisci il timer quando il componente viene distrutto
+	// });
+</script>
+
+<svelte:window bind:innerWidth={width} />
+
+<div class="header">
+	{#if !end}
+		<div class="timer">{pad2(min)}:{pad2(sec)}</div>
+	{:else}
+		<div class="timer" style="color: red">{pad2(min)}:{pad2(sec)}</div>
+	{/if}
+    <button class="button" on:click={() => startCounter()} disabled={start}>Start</button>
+</div>
+
+<div class="container">
+	{#each surfers as surfer, id}
+		<div class="box">
+			<div
+				class="square"
+				{id}
+				style="background-color: {surfer.color};"
+				on:click={() => click(id)}
+                on:contextmenu={(e) => {
+                    e.preventDefault();
+                    dblclick(id);
+                    }}
+				on:keypress={console.log('keypress')}
+				role="button"
+				tabindex={id}
+			>
+				{#if surfer.priority != ''}
+					{#if surfer.priority === 'P'}
+						{#if surfer.color === 'white'}
+							<span class="priority_white">{surfer.priority}</span>
+						{:else}
+							<span class="priority">{surfer.priority}</span>
+						{/if}
+					{:else}
+						<span class="priority_small">{surfer.priority}</span>
+					{/if}
+				{/if}
+			</div>
+			<div class="score">{surfer.score}</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	:root {
+		--backColor: #334;
+		--textColor: white;
+		--maxWidth: (100% - 15px);
+	}
+
+	.header {
+		/* padding: 15px; */
+		height: 10vh;
+		background-color: var(--backColor);
+		padding-left: 10px;
+		padding-right: 10px;
+		padding-top: 6px;
+		padding-bottom: 6px;
+		margin-top: 2px;
+		margin-bottom: 2px;
+		width: calc(var(--maxWidth));
+		color: var(--textColor);
+		display: flex;
+		justify-content: space-between;
+        align-items: center;
+	}
+
+	.header .timer {
+		font-size: 13vh;
+		padding-left: 10px;
+		padding-right: 20px;
+		font-weight: bold;
+		flex: 2 2 auto;
+		align-self: center;
+		text-align: center;
+	}
+
+    .header .button {
+        height: 60%;
+        align-items: center;
+        background-color: yellow;
+        border-radius: 10%;
+    }
+
+	.container {
+		height: 85vh;
+		background-color: var(--backColor);
+		padding-left: 10px;
+		padding-right: 10px;
+		padding-top: 4px;
+		width: calc(var(--maxWidth));
+		color: var(--textColor);
+	}
+
+	.box {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		padding: 1px;
+		margin-bottom: 1px;
+	}
+
+	.priority {
+		width: 15%;
+		height: 100%;
+		border-radius: 20%;
+		font-size: 8vh;
+		animation: blink 2s 2;
+		margin-right: auto;
+		background-color: white;
+		color: black;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: bold;
+	}
+
+	.priority_white {
+		width: 15%;
+		height: 100%;
+		border-radius: 20%;
+		font-size: 8vh;
+		animation: blink_white 2s 3;
+		margin-right: auto;
+		background-color: black;
+		color: white;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: bold;
+		padding-bottom: 4px;
+	}
+
+	.priority_small {
+		width: 13%;
+		height: 85%;
+		border-radius: 20%;
+		font-size: 8vh;
+		animation: blink 2s 3;
+		margin-right: auto;
+		margin-left: 30px;
+		background-color: #ccc;
+		color: black;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: bold;
+	}
+
+	.square {
+		width: 100%;
+		height: 16vh;
+		border-radius: 5px;
+		margin-right: 15px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding-bottom: 2px;
+		margin-bottom: 2px;
+	}
+
+	.score {
+		padding-right: 20px;
+		width: 20%;
+		font-size: 12vh;
+		float: right;
+		text-align: center;
+		font-weight: bold;
+	}
+
+	@keyframes blink {
+		0% {
+			background-color: white;
+		}
+		50% {
+			background-color: rgba(255, 255, 255, 0.6);
+		}
+		100% {
+			background-color: white;
+		}
+	}
+
+	@keyframes blink_white {
+		0% {
+			background-color: black;
+		}
+		50% {
+			background-color: rgba(0, 0, 0, 0.6);
+		}
+		100% {
+			background-color: black;
+		}
+	}
+</style>