index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
		/>
		<title>Jumblie | A word search game</title>

		<meta
			name="description"
			content="A word search game with new words and themes daily"
		/>

		<meta property="og:url" content="https://jumblie.com" />
		<meta property="og:type" content="website" />
		<meta property="og:title" content="Jumblie" />
		<meta
			property="og:description"
			content="A word search game with new words and themes daily"
		/>
		<meta property="og:image" content="https://jumblie.com/assets/og.png" />

		<meta name="twitter:card" content="summary_large_image" />
		<meta property="twitter:domain" content="jumblie.com" />
		<meta property="twitter:url" content="https://jumblie.com" />
		<meta name="twitter:title" content="Jumblie" />
		<meta
			name="twitter:description"
			content="A word search game with new words and themes daily"
		/>
		<meta
			name="twitter:image"
			content="https://jumblie.com/assets/twitterog.png"
		/>

		<link
			rel="apple-touch-icon"
			sizes="180x180"
			href="./assets/apple-touch-icon.png"
		/>
		<link
			rel="icon"
			type="image/png"
			sizes="32x32"
			href="./assets/favicon-32x32.png"
		/>
		<link
			rel="icon"
			type="image/png"
			sizes="16x16"
			href="./assets/favicon-16x16.png"
		/>
		<link rel="manifest" href="./assets/site.webmanifest" />
		<link
			rel="mask-icon"
			href="./assets/safari-pinned-tab.svg"
			color="#02486e"
		/>
		<link rel="shortcut icon" href="./assets/favicon.ico" />
		<meta name="msapplication-TileColor" content="#ffffff" />
		<meta name="msapplication-config" content="./assets/browserconfig.xml" />
		<meta name="theme-color" content="#ffffff" />

		<script
			src="https://cdn.usefathom.com/script.js"
			data-site="KUPXIAYH"
			defer
		></script>

		<link rel="stylesheet" href="./style.css" />
	</head>
	<body>
		<header>
			<div class="header-chunk">
				<h1 class="brand mb2">Jumblie</h1>
				<div class="header-subs">
					<time id="today"></time>
					<button class="header-icon" id="stats">
						<img src="./assets/stats.svg" alt="stats" />
					</button>
				</div>
			</div>
			<div class="today-theme hidden-start">
				<p><strong>Today's Theme</strong></p>
				<p id="theme"></p>
			</div>
			<div class="header-chunk end">
				<div>
					<div class="end">
						<button class="header-icon" id="settings">
							<img src="./assets/gear.svg" alt="settings" />
						</button>
						<button class="black mb2" id="help">Help</button>
					</div>
					<div class="header-subs hidden-start">
						<button class="header-icon" id="pause">
							<img src="./assets/pause.svg" alt="pause" />
						</button>
						<div id="timer">00:00</div>
					</div>
				</div>
			</div>
		</header>

		<dialog id="helpDialog">
			<h2>How to play <span class="brand">Jumblie</span></h2>
			<p>
				There are exactly four words hidden amongst the letters, and all letters
				are used exactly once. The words will always be between 4 and 9 letters
				long.
			</p>
			<p>
				Click on the letters (or type them on your keyboard) to spell a word.
				When you have a word you want to submit, click the "Submit" button. If
				the word is one of the daily words, it will be added to your found list
				of words. Find all four words as fast as you can!
			</p>
			<p>Each successful word is assigned a color:</p>
			<ul>
				<li><span class="emoji">🔴</span> Shortest word</li>
				<li><span class="emoji">🟠</span> <span>↓</span></li>
				<li><span class="emoji">🟢</span></li>
				<li><span class="emoji">🔵</span> Longest</li>
			</ul>
			<p>
				If you're struggling, you can give up after at least 5 incorrect
				guesses.
			</p>
			<form method="dialog">
				<button class="black">Got it!</button>
			</form>
		</dialog>

		<dialog id="settingsDialog">
			<h2>Your <span class="brand">Jumblie</span> settings</h2>

			<!-- TODO: 
			<p>
				<label for="difficultySelect">Difficulty:</label>
				<select id="difficultySelect" name="difficulty">
					<option value="easy">Easy</option>
					<option value="medium">Medium</option>
					<option value="hard">Hard</option>
				</select>
			</p> -->

			<p>
				<label for="themeSelect">Theme:</label>
				<select id="themeSelect" name="theme">
					<option value="light">Light</option>
					<option value="dark">Dark</option>
				</select>
			</p>

			<p>
				<label for="letterSelect">Letters:</label>
				<select id="letterSelect" name="capitalization">
					<option value="lowercase">Lowercase</option>
					<option value="uppercase">Uppercase</option>
				</select>
			</p>

			<p>
				<label for="visibilitySelect">Visibility assist:</label>
				<select id="visibilitySelect" name="visibility">
					<option value="true">On</option>
					<option value="false">Off</option>
				</select>
			</p>

			<form method="dialog">
				<button class="black">Let's play!</button>
			</form>
		</dialog>

		<dialog id="statsDialog">
			<h2>Your <span class="brand">Jumblie</span> stats</h2>
			<p>
				<strong>Total games played:</strong> <span id="totalDaysPlayed"></span>
			</p>
			<p><strong>Current streak:</strong> <span id="currentStreak"></span></p>
			<p><strong>Longest streak:</strong> <span id="longestStreak"></span></p>
			<p><strong>Top times:</strong></p>
			<table border="0">
				<thead>
					<tr>
						<th>Date</th>
						<th>Solve time</th>
					</tr>
				</thead>
				<tbody id="fastestTimes"></tbody>
			</table>
			<form method="dialog">
				<button class="black">Heck yeah</button>
			</form>
		</dialog>

		<div id="splash">
			<h2 id="splashTitle">Today's Theme</h2>
			<small id="splashCredit"></small>
			<h3 id="splashTheme"></h3>
			<button class="black" id="start">Start</button>
		</div>

		<div id="container">
			<div class="mobile-theme">
				<p><strong>Today's Theme:</strong> <span id="mobile"></span></p>
			</div>
			<div class="working-word">
				<span id="initial">Type or click!</span>
				<span id="workingWord"></span>
			</div>
			<div class="grid" id="letterGrid"></div>
			<div class="submission">
				<button class="white" id="shuffle" onClick="shuffleLetters()">
					Shuffle
				</button>
				<button class="white" id="delete" onClick="deselectAll()">
					Deselect all
				</button>
				<button class="black" id="submit">Submit</button>
			</div>
			<div class="message">
				<p id="message"></p>
				<button class="black hidden mb2" id="share" onClick="copyScore()">
					Share my score
				</button>
			</div>
			<ul class="word-result" id="wordsList"></ul>

			<details>
				<summary>
					<strong>Incorrect guesses (<span id="wrong">0</span>)</strong>
				</summary>
				<ul id="guesses"></ul>
				<p>
					<button id="giveUp" class="white hidden" onClick="confirmGiveUp()">
						Would you like to give up?
					</button>
				</p>
			</details>

			<div class="jumb-share">
				<button class="black" id="jshare" onClick="shareLink()">
					Share <span class="brand">Jumblie</span>
				</button>
			</div>
		</div>

		<footer>
			<a href="./archive">View the archive</a> •
			<a href="https://cassidoo.co/post/future-of-jumblie/"
				>The future of Jumblie</a
			>
			<br />
			<span class="brand">Jumblie</span> is brought to you by
			<a href="https://cassidoo.co">@cassidoo</a>!
		</footer>

		<script src="./forCheaters.js"></script>
		<script src="./settings.js"></script>
		<script src="./dailyWords.js"></script>
		<script src="./time.js"></script>
		<script src="./localStorage.js"></script>
		<script src="./game.js"></script>
	</body>
</html>