index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Minecraft Bingo</title>
		<meta charset="UTF-8">
		<meta name="description" content="A Bingo sheet generator for Minecraft">
		<link rel="stylesheet" href="bingo.css" type="text/css" />

		<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

		<script src="generator_v1.js"></script>
		<script src="generator_v2.js"></script>
		<script src="generator_v3.js"></script>
		<script src="goals_v1.js"></script>
		<script src="goals_v2.js"></script>
		<script src="goals_v3.js"></script>
		<script src="goals_v4.js"></script>
		<script src="goals_v5.js"></script>
		<script src="bingo.js"></script>

		<link rel="icon" type="image/png" href="icon.png" />

		<script>
			  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
			  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
			  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
			  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

			  ga('create', 'UA-102332269-1', 'auto');
			  ga('send', 'pageview');
		</script>
		<meta property="og:title" content="Minecraft Bingo">
		<meta property="og:type" content="website">
		<meta property="og:image" content="https://minecraftbingo.com/og-image.png">
		<meta property="og:url" content="https://minecraftbingo.com">
		<meta property="og:description" content="A Bingo sheet generator for Minecraft">

		<!-- Prefetch some images that might be used, such as colour blind cymbols !-->
		<link rel="prefetch" href="Symbols/apple.png" as="image">
		<link rel="prefetch" href="Symbols/heart.png" as="image">
		<link rel="prefetch" href="Symbols/moon.png" as="image">
		<link rel="prefetch" href="Symbols/ok.png" as="image">
		<link rel="prefetch" href="Symbols/star.png" as="image">
		<link rel="prefetch" href="Symbols/x.png" as="image">
		<link rel="prefetch" href="button-background-blue.png" as="image">
		<link rel="prefetch" href="stone-tile.png" as="image">
	</head>
	<body>
		<section id="nav_section">
			<h1>Minecraft Bingo</h1>
		</section>
		<section id="bingo-section">
			<div id="bingo-box">
				<table id="bingo">
					<tr>
						<td id="slot1" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot2" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot3" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot4" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot5" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
					</tr>
					<tr>
						<td id="slot6" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot7" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot8" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot9" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot10" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
					</tr>
					<tr>
						<td id="slot11" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot12" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot13" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot14" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot15" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
					</tr>
					<tr>
						<td id="slot16" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot17" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot18" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot19" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot20" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
					</tr>
					<tr>
						<td id="slot21" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot22" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot23" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot24" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
						<td id="slot25" data-tooltipimg="" data-tooltiptext=""><img class="tooltipQ" src="question_mark.png"><span class="symbol"></span></td>
					</tr>
				</table>
				<div id="hidden-bingo">
					<div id="hidden-table">
						<div id="hidden-table-seed">
							Bingo Seed:<br>
							<input class="seed-input" id="seed_for_copying_hidden" type="text" value="12345" readonly="readonly"><br>
							<button class="button" title="Copy Seed to Clipboard" onclick='copySeedToClipboard("seed_for_copying_hidden", event);'>Copy Seed</button>
						</div>
						<p>Use this seed to create a new world in Minecraft. Remember to adjust ingame settings such as difficulty if necessary.</p>
						<p>If you've been linked this page for a race, you are not allowed to change the seed/goals. See the full rules below.</p>
						<button class="button show-table-button" onclick='toggleHidden();event.preventDefault();'>Show Table</button>
						<p>The table is currently hidden, you may show it when the Bingo starts (unless otherwise agreed upon by the players).</p>
					</div>
				</div>
				<div id="options-menu" class="pause-menu">
					<button class="button pause-menu-close">x</button>
					<div class="pause-menu-column">
						<div class="pause-menu-group">
							<button class="button options-button" id="ishidden" onclick='toggleHidden();'></button>
							<button class="button options-button" onclick='toggleStreamerMode();'>Streamer Mode</button>
						</div>
						<button class="button options-button dark-mode-button" onclick='toggleDarkMode();'></button>
						<div class="pause-menu-group">
							<div class="slider-holder" title="The number of colours to cycle through when clicking on a square. Can always press (1-6) or (0/q) while hovering over square to select colours.">
								<input type="range" id="colourCountRange" value="1" max="2" min="0" class="slider" oninput="changeColourCount(this.value);"/>
								<p class="slider-text colourCount-text"></p>
							</div>
							<button class="button options-button" id="colourSymbols" onclick='toggleColourSymbols();' title="Toggle the symbols showing on the squares for different colours."></button>
						</div>
					</div>
					<div class="pause-menu-column">
						<div class="dropdown-holder">
							<button class="button options-button dropdown-button" id="versions-toggle-button" title="Change version of Bingo"><!-- text set by updateVersion() --></button>
							<div id="versions-dropdown-main" class="dropdown"><!-- filled in by fillVersionSelection() --></div>
						</div>
					</div>
				</div>
			</div>
			<div id="info_bar">
				Seed: <input class="seed-input" type="text" value="12345" oninput="changeSeed(value)" />&emsp;Difficulty: <span class="difficulty-text"></span>&emsp;Version: <span class="versionText"></span><br>
			</div>
			<div class="buttons-row">
				<button onclick='newSeed(true);event.preventDefault();' class="button new-seed-button">Generate New Seed</button>
				<div class="slider-holder difficulty-slider-holder">
					<input type="range" id="difficultyRange" value="3" max="5" min="1" class="slider" oninput="changeDifficulty(this.value);"/>
					<p class="slider-text difficulty-text"></p>
				</div>
				<button class="button" id="options-toggle-button">Options...</button>
			</div>
		</section>
		<div class="stream-exit-text"><a href="#" onclick='toggleStreamerMode();event.preventDefault();'>Exit Streamer Mode</a></div>
		<div class="stream-exit-text"><a href="#" onclick='popoutBingoCard();event.preventDefault();'>Pop out Bingo Card</a></div>
		<section id="rules-section">
			<h2>Version</h2>
			<p>The various versions of the Bingo are designed for specific versions of Vanilla Minecraft (Java Edition, Bedrock versions have minor differences). Try to match versions whenever possible for the best experience.</p>
			<p>To ensure that each created Bingo sheet always stays the same (even if goals are added or modified in the future) a version identifier is encoded into the URL.</p>
			<p>Selected version: <select id="version_selection"></select></p>

			<p id="version_notice">You are not using the latest stable version. This may be intended, for example if you want to look at a linked sheet or play on an older version of Minecraft. However, if you want to generate a new Bingo sheet, consider changing version.</p>
			<p id="version_notice_unstable">You are using an in-development version which may change at any time causing the same link to produce different goals. This is good if you want to make use of the latest updates to goals and Minecraft and for looking at a sheet someone else just linked to you, otherwise consider changing to a stable version.</p>

			<h2>How to Play</h2>

			<p>The objective is to get a "Bingo" as quickly as possible by completing the goals in five squares in a line horizontally, vertically or diagonally.</p>
			<ul>
				<li><strong>Items:</strong> Goals written as just Item names (such as "Iron Block" or "Milk Bucket") require you to get that item and have it in your Inventory at the end of the game. If you lose the item by completing the Bingo by dying (e.g. "Kill yourself with an Ender Pearl" as the last goal) you do not need to recollect the item.</li>
				<li><strong>Actions:</strong> If the goal describes an action (for example "Tame a Wolf"), the goal is completed once you Tame the Wolf. It doesn't matter what happens to the Wolf after.</li>
				<li><strong>Builds:</strong> For goals which ask you to place something in the Minecraft world (like "Build a 2x2x2 leaf cube"), you must make sure that the build does not get destroyed for the duration of the Bingo. You don't have to show the build at the end, so if you didn't see it get destroyed it counts.</li>
				<li><strong>Stats:</strong> Goals which list stats (such as "Crouch a distance of 50 meters") make use of the Statistics screen in the Minecraft pause menu. You need to ensure that stat shows the given amount (or greater). The Statistics screen often updates slowly, so leave some time between checking it when you're trying to complete a goal.</li>
			</ul>
			<p><em>Tip:</em> You can click on the squares to change their colour which is useful for planning or to mark off completed goals. Use the colour slider in the Options menu to choose how many colours you want to use. You can also hover over the square and press (1-6) to select a colour or (0/q) to remove the colour! Distinct symbols on the squares for each colour can be toggled in the Options menu.</p>
			<p><em>Tip:</em> Hover over a "?" to get more information about that goal.</p>
			<h3>Creating the World</h3>
			<p>Create a new world in Minecraft and use <input class="seed-input" id="seed_for_copying_howto" type="text" value="" size="6" readonly="readonly" /><button class="button small-button" title="Copy Seed to Clipboard" onclick='copySeedToClipboard("seed_for_copying_howto", event);'>Copy</button> as the Seed (this is the same random seed used to generate this sheet). Load the world so that it can generate but don't move until you're ready. Pause the game to make sure time of day doesn't change or you get attacked. When you're ready, reveal the sheet if it's hidden and start playing!</p>

			<p><em>Note:</em> Third-party applications or mods (for example Optifine, MCEdit or online Seed Maps) are not allowed.</p>

			<h3>Playing with Others</h3>
			<p>If you're racing together with other players, generate a Bingo sheet and then link it to them so that everyone has the same goals. You can hide the table in the Options menu before generating the seed so that everyone can reveal the sheet when you start. Make sure everyone uses the same Seed for the world too!</p>

			<h2>Other</h2>

			<p>These rules (and goal descriptions) represent the recommended way to play Minecraft Bingo, however if you play alone or everyone in the race agrees, then use whatever rules you want!</p>
			<p>You can <a href="javascript:createGoalExport()">export the current sheet as JSON</a> for use in other tools such as <a href="https://bingosync.com/">Bingosync.</a></p>
			<a href="https://github.com/Joshimuz/mcbingo"><span class="github-logo"></span></a>
		</section>
		<div id="goalTooltip" class="tooltip">
			<img src="" id="tooltipimg" />
			<span id="tooltiptext" class="tooltiptext"></span>
		</div>
		<div id="copiedTooltip" class="tooltip"><span class="tooltiptext">Copied!</span></div>
		<div id="export">
			<p>The goals of the current sheet as JSON:</p>
			<textarea readonly="readonly"></textarea>
			<a href="javascript:hideGoalExport()">Hide</a>
		</div>
	</body>
</html>