+page.svelte

<script lang="ts">
	import { PUBLIC_BACKEND_ENDPOINT, PUBLIC_BACKEND_WS_ENDPOINT } from '$env/static/public';
	import { onMount } from 'svelte';
	import { Confetti } from 'svelte-confetti';
	import { userID } from '../lib/stores';
	import ToggleConfetti from '../lib/ToggleConfetti.svelte';

	const defaultRestrictions = {
		maxCaloriesPerSlice: 1000,
		mustBeVegetarian: false,
		excludedIngredients: [],
		excludedTools: [],
		maxNumberOfToppings: 5,
		minNumberOfToppings: 2
	};

	var user = 0;
	var render = false;
	var quote = '';
	var pizza = '';
	var tools: string[] = [];
	var pizzaCount = 0;
	let restrictions = defaultRestrictions;
	var advanced = false;

	$: if (advanced) {
		pizza = '';
		restrictions = defaultRestrictions;
	} else {
		pizza = '';
		restrictions = defaultRestrictions;
	}

	let socket: WebSocket;
	onMount(async () => {
		userID.subscribe((value) => user = value);
		if (user === 0) {
            userID.set(Math.floor(100000 + Math.random() * 900000));
        }
		const res = await fetch(`${PUBLIC_BACKEND_ENDPOINT}api/quotes`,
			{
				headers: {
					'X-User-ID': user.toString()
				}
			});
		const json = await res.json();
		quote = json.quotes[Math.floor(Math.random() * json.quotes.length)];
		socket = new WebSocket(PUBLIC_BACKEND_WS_ENDPOINT + 'ws');
		socket.addEventListener('message', function (event) {
			const data = JSON.parse(event.data);
			if (data.msg === 'new_pizza') {
				if (data.user !== user) {
					pizzaCount++;
				}
			}
		});
		getTools();
		render = true;
	});

	async function getPizza() {
		const res = await fetch(`${PUBLIC_BACKEND_ENDPOINT}api/pizza`, {
			method: 'POST',
			body: JSON.stringify(restrictions),
			headers: {
					'X-User-ID': user.toString()
			}
		});
		const json = await res.json();
		pizza = json;
		if (socket.readyState <= 1) {
			socket.send(
				JSON.stringify({
					user: user,
					msg: 'new_pizza'
				})
			);
		}
	}

	async function getTools() {
		const res = await fetch(`${PUBLIC_BACKEND_ENDPOINT}api/tools`,
		{
			headers: {
				'X-User-ID': user.toString()
			}
		});
		const json = await res.json();
		tools = json.tools;
	}
</script>

<svelte:head>
	<title>QuickPizza</title>
	<meta name="description" content="QuickPizza" />
</svelte:head>
{#if render}
	<section class="mt-4 flow-root">
		<div class="flex float-left">
			<img class="w-7 h-7 mr-2" src="/images/pizza.png" alt="logo" />
			<p class="text-xl font-bold text-red-600">QuickPizza</p>
		</div>
		<div class="flex float-right">
			<label class="relative inline-flex items-center mb-5 cursor-pointer mt-1">
				<input type="checkbox" bind:checked={advanced} class="sr-only peer" />
				<div
					class="w-9 h-5 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-red-600"
				/>
				<span class="ml-3 text-xs">Advanced</span>
			</label>
		</div>
	</section>
	<section class="mt-8 flex flex-row justify-center items-center">
		{#if quote}
			<br />
			<div class="bg-gray-50 border border-gray-200 rounded-lg p-2 text-sm">
				<q>{quote}</q>
			</div>
			<br />
		{/if}
	</section>
	<section class="mt-4 flex flex-column justify-center items-center">
		<div class="text-center">
			<h1 class="text-2xl md:text-4xl mt-14 font-semibold">
				Looking to break out of your pizza routine?
			</h1>
			<h2 class="text-xl md:text-2xl mt-2 font-semibold">
				<span class="text-red-600">QuickPizza</span> has your back!
			</h2>
			<p class="m-2 text-gray-700">
				With just one click, you'll discover new and exciting pizza combinations that you never knew
				existed.
			</p>
			{#if advanced}
				<div class="mt-6 mb-2 bg-gray-50 border border-gray-200 rounded-lg p-4">
					<div class="flex flex-row">
						<div class="relative">
							<input
								bind:value={restrictions.maxCaloriesPerSlice}
								type="number"
								id="floating_filled"
								class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-red-600 peer"
								placeholder=" "
							/>
							<label
								for="floating_filled"
								class="absolute text-sm text-gray-900 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-red-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
								>Max Calories per Slice</label
							>
						</div>
						<div class="relative ml-2">
							<input
								bind:value={restrictions.minNumberOfToppings}
								type="number"
								id="floating_filled"
								class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-red-600 peer"
								placeholder=" "
							/>
							<label
								for="floating_filled"
								class="absolute text-sm text-gray-900 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-red-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
								>Min Number of Toppings</label
							>
						</div>
						<div class="relative ml-2">
							<input
								bind:value={restrictions.maxNumberOfToppings}
								type="number"
								id="floating_filled"
								class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-red-600 peer"
								placeholder=" "
							/>
							<label
								for="floating_filled"
								class="absolute text-sm text-gray-900 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-red-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
								>Max Number of Toppings</label
							>
						</div>
					</div>
					<div class="flex mt-8 justify-center items-center">
						<div>
							<label for="countries_multiple" class="block text-sm text-gray-900"
								>Excluded tools</label
							>
							<select
								multiple
								bind:value={restrictions.excludedTools}
								class="bg-gray-50 ml-4 border border-gray-300 text-gray-900 text-sm rounded-lg block p-2.5"
							>
								{#each tools as t}
									<option value={t}>
										{t}
									</option>
								{/each}
							</select>
						</div>
						<div class="flex items-center ml-16">
							<input
								id="default-checkbox"
								bind:checked={restrictions.mustBeVegetarian}
								type="checkbox"
								value=""
								class="w-4 h-4 text-red-600 bg-gray-100 border-gray-300 rounded accent-red-600"
							/>
							<label for="default-checkbox" class="ml-2 text-sm  text-gray-900"
								>Must be vegetarian</label
							>
						</div>
					</div>
				</div>
			{/if}
			<ToggleConfetti>
				<button
					slot="label"
					type="button"
					on:click={getPizza}
					class="mt-6 text-white bg-gradient-to-br from-red-500 to-orange-400 hover:bg-gradient-to-bl font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
				>
					Pizza, Please!</button
				>
				<Confetti
					y={[-0.5, 0.5]}
					x={[-0.5, 0.5]}
					size="30"
					amount="10"
					colorArray={['url(/images/pizza.png)']}
				/>
			</ToggleConfetti>
			<p />
			{#if pizzaCount > 0 && !pizza['pizza']}
				<div class="mt-4">
					<span
						class="bg-purple-100 text-purple-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded"
						>What are you waiting for? We have already given {pizzaCount} recommendations since you opened
						the site!</span
					>
				</div>
			{/if}
			<p>
				{#if pizza['pizza']}
					<div class="flex justify-center" id="recommendations">
						<div class="w-[300px] sm:w-[500px] mt-6 bg-gray-50 border border-gray-200 rounded-lg">
							<div class="text-left p-4">
								<h2 class="font-medium">Our recommendation:</h2>
								<div class="ml-2">
									<p>Name: {pizza['pizza']['name']}</p>
									<p>Dough: {pizza['pizza']['dough']['name']}</p>
									<p>Ingredients:</p>
									<ul class="list-disc list-inside">
										{#each pizza['pizza']['ingredients'] as ingredient}
											<li class="pl-5 list-inside">{ingredient['name']}</li>
										{/each}
									</ul>
									<p>Tool: {pizza['pizza']['tool']}</p>
									<p>Calories per slice: {pizza['calories']}</p>
								</div>
							</div>
						</div>
					</div>
				{/if}
			</p>
		</div>
	</section>
	<footer>
		<div class="flex justify-center mt-8 m-1">
			<p class="text-sm">Made with ❤️ by QuickPizza Labs.</p>
		</div>
		<div class="flex justify-center">
			<p class="text-xs">Your user ID is: {user}</p>
		</div>
		<div class="flex justify-center mt-1 mb-8">
			<p class="text-xs">
				Looking for the admin page? <a class="text-blue-500" href="/admin">Click here</a>
			</p>
		</div>
	</footer>
{/if}