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

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