code/index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<title>Alphabet Game</title>
        <link href="/css/roonr.css" rel="stylesheet">
		<link href="/css/comic.css" rel="stylesheet">
	    <link href="/style.css" rel="stylesheet">
		<link href="static/style.css" rel="stylesheet">
	</head>
	<body class="noselect" style="padding:7px;">
        <div class="comic-container blogs" style="margin-top:10px;margin-bottom:10px;">
	        <div class="comic" text="Alphabet Game">
				Alphabet Game
			</div>
		</div>

		<div id="app" class="center" style="visibility:hidden;">
			<div id="intro">
				<p style="margin-top:7px;">
					<b>Goal of the game:</b> Unscramble the letters to make the desired word.
				</p>

				<p style="font-size:12px;margin-top:7px;margin-bottom:14px;">
					<b>Hint:</b>This game was inspired by Emma. 
				</p>
			</div>

			<div id="snackbar" class="snackbar">Not the word.</div>

			<div id="guess_board" class="guess_board">
			</div>

			<div id="choice_board" class="choice_board">
			</div>
 
			<div id="winnings" style="visibility:hidden;margin-top:40px;">
				<div class="comic-container blogs" style="margin-top:10px;margin-bottom:10px;">
					<div class="comic" text="Smarty Pants!">
						Smarty Pants!
					</div>
				</div>

				<p style="margin-top:10px;">
					Look at the brains on you! Here is a picture of my dog, Patrick, as a reward. 
				</p>
				<img style="margin-top:10px;width:100%" src="static/images/patrick_alphabet.jpg" alt="Patrick the doggo" />
			</div>
		</div>

		<script type="module">
			import init from './pkg/alphabet-game.js';

			async function run () {
			    await init();
			}

			run();

		</script>
	</body>
</html>