-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
195 lines (195 loc) · 12.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="en">
<head>
<title>Minecraft Wordle</title>
<link rel="icon" type="image/x-icon" href="/media/img/logo.png">
<meta name="description" content="The Wordle, but with Minecraft words!">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="Mules Gaming">
<meta charset="UTF-8">
<!-- OpenGraph -->
<meta property="og:title" content="Minecraft Wordle - A Minecraft word game">
<meta property="og:url" content="https://minecraftwordle.fun">
<meta property="og:image" content="https://minecraftwordle.fun/media/img/logo.png">
<meta property="og:description" content="The Wordle, but with Minecraft words!">
<meta name='og:site_name' content='Minecraft Wordle'>
<!-- Twitter card -->
<meta name="twitter:title" content="Minecraft Wordle - A Minecraft word game">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="minecraftwordle.fun">
<meta property="twitter:url" content="https://minecraftwordle.fun/">
<meta name="twitter:description" content="The Wordle, but with Minecraft words!">
<meta name="twitter:image" content="https:/minecraftwordle.fun/media/img/logo.png">
<meta name="twitter:site" content="@mulesgaming">
<meta name="twitter:creator" content="@mulesgaming">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="/styles/main.css">
<link rel="stylesheet" href="/styles/tiles.css">
<link rel="stylesheet" href="/styles/menu.css">
<!-- No Script CSS -->
<noscript><style>.no-js{background-color: red;
padding: 5px 10px 5px 10px;
border-radius: 5px;
max-width: 100%;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 100;
}</style></noscript>
</head>
<body class="body" id="body">
<!-- Body area -->
<!-- Popup menu (hidden by default) -->
<section class="main-menu" id="mainMenu">
<div class="top">
<h2 class="facts-header">Facts about your word</h2>
<!-- Close -->
<button class="close-menu-button" id="closeMenu" onclick="minimizeMenu()">X</button>
</div>
<div class="menu-body">
<p class="about-word" id="aboutWord"><!-- JS will insert about here. --></p>
<a id="minecraftWikiLink" target="_blank" href="#"><button class="minecraft-wiki-page">Minecraft wiki page about todays word</button></a>
</div>
<div class="github-holder">
<a class="github-link" target="_blank" href="https://github.com/MulesGaming/minecraft-wordle"><button class="github-button">Source code available on GitHub!</button></a>
</div>
<div class="streak-holder">
<span class="current-streak" id="currentStreak">Your current streak is: <span id="currentStreakNumber"></span> words.</span>
</div>
<div class="share-wordle-holder">
<h2 class="share-header">Share</h2>
<ul class="share">
<li><a href="#" class="twt-share-link" id="twitterLink" target="_blank"><button class="twt-share-button"><img alt="Twitter logo" title="Twitter icon" src="/media/img/twitter_logo.png" class="share-image">Share to Twitter</button></a></li>
<li><a href="#" class="email-link" id="emailLink" target="_blank"><button class="email-share-button"><img alt="Email icon" title="Email icon, from Google fonts" src="/media/img/email-icon.svg" class="share-image">Share as email</button></a></li>
<li><button class="link-share-button" onclick="copyLink (currentPageURL)"><img alt="Link icon" title="Link icon, from Google fonts" src="/media/img/link-icon.svg" class="share-image">Copy share link </button></li>
<li><button class="share-popup-button" id="sharePopupButton"><img alt="Share icon" title="Share icon, from Google fonts" src="/media/img/share-icon.svg" class="share-image">Share via popup </button></li>
<li><a href="#" class="bsky-share-link" id="bskyLink" target="_blank"><button class="bsky-share-button"><img alt="Bluesky logo" title="Bluesky icon" src="/media/img/bluesky_logo.svg" class="share-image">Share to Bluesky</button></a></li>
</ul>
</div>
<div class="more" id="menuMore">
<span class="contact" id="menuContact">Found a problem? Typo? Word suggestion? You can make a <a href="https://github.com/MulesGaming/minecraft-wordle/issues" target="_blank" class="link">GitHub issue</a>.</span><br>
<span class="play-again" id="menuPlayAgain"><span onclick="location.reload();" class="link">Play again</span></span>
</div>
</section>
<section class="info-menu" id="infoMenu">
<div>
<h2 class="how-to-play-header">How to Play</h2>
<!-- Close -->
<button class="close-menu-button" id="closeMenu" onclick="minimizeInfoMenu()">X</button>
</div>
<div class="menu-body">
<p class="how-to-play" id="howToPlay">To play the Minecraft Wordle you can use the on screen keyboard or computer keyboard to enter letters. When a letter is in the correct spot, <span class="green-tile-demo">it's this green</span> color. When the letter is in the wrong spot but in the word <span class="yellow-tile-demo">it's this yellow</span> color, and if the letter is not in the word at all, <span class="gray-tile-demo">it's this gray</span> color.</p>
<br>
<div class="info-menu-example"><span>For instance if the word was "sword" and you entered slows the tiles would look like this: </span></div>
<div id="tileDemos">
<div class="tile-demo green-demo-tile"><span class="demo-letter">S</span></div>
<div class="tile-demo gray-demo-tile"><span class="demo-letter">L</span></div>
<div class="tile-demo green-demo-tile"><span class="demo-letter">O</span></div>
<div class="tile-demo yellow-demo-tile"><span class="demo-letter">W</span></div>
<div class="tile-demo gray-demo-tile"><span class="demo-letter">S</span></div>
</div>
<div class="super-secret-grass-mode-active">
<a href="?theme=super-secret-grass-mode"><img src="/media/img/grass_block.png" alt="Grass" title="Super secret grass mode!"></a>
</div>
</div>
</section>
<!-- Menu Icons -->
<section class="menu-icons" id="menuIconContanier">
<div class="theme-switcher" title="Change theme"><a class="theme-switcher-text" id="themeSwitcherText" href="?theme=dark">dark</a></div>
<div class="menu-show" id="showMenu" title="Show Menu"></div>
<div class="info-box" title="How to play"><span class="info-box-text" id="infoBoxText" onclick="openInfoBox()">info</span></div>
</section>
<!-- Warnings-->
<section class="warnings" id="warnings">
<div class="error too-many-letters" id="tooManyLetters">Too many letters!</div>
<div class="error not-enough-letters" id="notEnoughLetters">Not enough letters!</div>
<div class="error not-real-word" id="notRealWord">Word is not in word list!</div>
<div class="error correct-letter" id="correctWordWarning">The correct word was: <!-- JS inserts correct word here--></div>
<!-- Error loading word -->
<div class="error word-load-error" id="errorLoadingWord">There was a problem loading the word! Try <span onclick="location.reload();" class="link">reloading</span> the page</div>
<!-- No JS warning -->
<noscript class="no-js"><div>JAVASCRIPT IS NOT ENABLED!! Javascript is the language that makes this website run. The Minecraft Wordle will NOT work without Javascript. This error might occur because you have javascript disabled in browser settings, or have a extension that disables it.</div></noscript>
</section>
<!-- Main everything -->
<main class="main" id="main">
<!-- Header and description -->
<h1 class="header" id="header">Minecraft Wordle</h1>
<div class="desc" id="descWarnings">
<p class="desc" id="description">Minecraft Wordle is a version of the <a class="link wordle-link" target="_blank" href="https://www.nytimes.com/games/wordle/index.html">Wordle</a> made as a side project by <a class="link mules-link" target="_blank" href="https://www.mulesgaming.com">Mules Gaming</a>.</p>
</div>
<!-- Main game -->
<section id="mainGame" class="main-game">
<!-- Guesses -->
<div class="guesses" id="guesses">
<div class="guess-row guess-row-1" id="guessRow1">
<!-- Tiles -->
<div class="tile tile1" ><span class="tile-letter tile-letter1"></span></div>
<div class="tile tile2" ><span class="tile-letter tile-letter2"></span></div>
<div class="tile tile3" ><span class="tile-letter tile-letter3"></span></div>
<div class="tile tile4" ><span class="tile-letter tile-letter4"></span></div>
<div class="tile tile5" ><span class="tile-letter tile-letter5"></span></div>
</div>
<div class="guess-row guess-row-2" id="guessRow2">
<!-- Tiles -->
<div class="tile tile1"><span class="tile-letter tile-letter1"></span></div>
<div class="tile tile2"><span class="tile-letter tile-letter2"></span></div>
<div class="tile tile3"><span class="tile-letter tile-letter3"></span></div>
<div class="tile tile4"><span class="tile-letter tile-letter4"></span></div>
<div class="tile tile5"><span class="tile-letter tile-letter5"></span></div>
</div>
<div class="guess-row guess-row-3" id="guessRow3">
<!-- Tiles -->
<div class="tile tile1"><span class="tile-letter tile-letter1"></span></div>
<div class="tile tile2"><span class="tile-letter tile-letter2"></span></div>
<div class="tile tile3"><span class="tile-letter tile-letter3"></span></div>
<div class="tile tile4"><span class="tile-letter tile-letter4"></span></div>
<div class="tile tile5"><span class="tile-letter tile-letter5"></span></div>
</div>
<div class="guess-row guess-row-4" id="guessRow4">
<!-- Tiles -->
<div class="tile tile1"><span class="tile-letter tile-letter1"></span></div>
<div class="tile tile2"><span class="tile-letter tile-letter2"></span></div>
<div class="tile tile3"><span class="tile-letter tile-letter3"></span></div>
<div class="tile tile4"><span class="tile-letter tile-letter4"></span></div>
<div class="tile tile5"><span class="tile-letter tile-letter5"></span></div>
</div>
<div class="guess-row guess-row-5" id="guessRow5">
<!-- Tiles -->
<div class="tile tile1"><span class="tile-letter tile-letter1"></span></div>
<div class="tile tile2"><span class="tile-letter tile-letter2"></span></div>
<div class="tile tile3"><span class="tile-letter tile-letter3"></span></div>
<div class="tile tile4"><span class="tile-letter tile-letter4"></span></div>
<div class="tile tile5"><span class="tile-letter tile-letter5"></span></div>
</div>
<div class="guess-row guess-row-6" id="guessRow6">
<!-- Tiles -->
<div class="tile tile1"><span class="tile-letter tile-letter1"></span></div>
<div class="tile tile2"><span class="tile-letter tile-letter2"></span></div>
<div class="tile tile3"><span class="tile-letter tile-letter3"></span></div>
<div class="tile tile4"><span class="tile-letter tile-letter4"></span></div>
<div class="tile tile5"><span class="tile-letter tile-letter5"></span></div>
</div>
</div>
<!-- Keyboard -->
<div class="keyboard-root" id="keyboardRoot">
<div class="keyboard" id="keyboard">
<!-- Keyboard shadow writen by writeKeyboard.js -->
</div>
</div>
</section>
</main>
<!-- Scripts -->
<script src="/scripts/streak.js"></script>
<script src="/scripts/main.js"></script>
<script src="/scripts/menu.js"></script>
<script src="/scripts/themes.js"></script>
<script src="/scripts/write-keyboard.js"></script>
<script src="/scripts/isInWordlist.js"></script>
</body>
</html>