Pick a game

PickGame.svelte

<script>
	import { onMount } from 'svelte';
	
	const games = [
		// Streamed via Discord
		// Jackbox 4
		"Fibbage 3 (2-8) - Jackbox 4 - (later)",
		"Fibbage Enough about You (2-8) - Jackbox 4 - (later)",
		"Survive the Internet (3-8) - Jackbox 4 - (earlier)",
		"Monster Seeking Monster (3-7) - Jackbox 4 - (earlier)",
		"Bracketeering (3-16) - Jackbox 4 - (no idea)",
		"Civic Doodle (3-8) - Jackbox 4 - (no idea)",
		// Jackbox 5
		"You don’t know jack (1-8) - Jackbox 5 - (no idea)",
		"Split the room (3-8) - Jackbox 5 - (later)",
		"Mad verse city (3-8) - Jackbox 5 - (no idea)",
		"Patently stupid (3-8) - Jackbox 5 - (no idea)",
		"Zeeple dome (1-6) - Jackbox 5 - (no idea)",
		// Jackbox 6
		"Trivia murder party 2 (1-8) - Jackbox 6 - (earlier sounds like)",
		"Role models (3-6) - Jackbox 6 - (no idea)",
		"Joke boat (3-8) - Jackbox 6 - (earlier sounds like)",
		"Dictionarium (3-8) - Jackbox 6 - (no idea)",
		"Push the button (4-10) - Jackbox 6",
		// Steam
		"Drawful - Jackbox# - (earlier)",
		
		// Thick client
		// Steam (Win, Mac, Lin)
		"Clue (3-6) - Tabletop Simulator - (earlier)",
		"Deceit (3-10?) - Steam",
		// Steam (Win), Mobile (Android, iOS)
		"Among Us (4-10) - Steam - (earlier)"
		
		// Web client
		// Netgames
		"One night werewolf (3-8) - Netgames - (earlier)",
		"Codewords (4-∞) - Netgames"
		// Self-hosted
		"Secret Hitler (5-10) - web - (earlier)",
		
	]
	
	let game = "...";
	let chosenGame = false;
	
	const shuffleGame = () => {
		game = "[...]"
		setTimeout(() => {
			game = "[shuffling dices...]";
			setTimeout(() => {
				game = "[rolling cards...]";
				setTimeout(() => {
					chosenGame = true;
					game = games[Math.floor(Math.random() * games.length)]
				}, 1500)
			}, 1500)
		}, 1500)
	}
	
	onMount(() => {
		shuffleGame()
	});
</script>

<h2>We are playing <i>{game}</i></h2>

{#if chosenGame}
<button on:click={() => shuffleGame()}>
	BUT IT SUCKS!!!
</button>
{/if}