forked from DmitrySharabin/mavo-wordle
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (92 loc) · 4.91 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="author" content="Dmitry Sharabin" />
<meta name="keywords" content="HTML,CSS,Mavo" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Mavo -->
<link rel="stylesheet prefetch" href="https://get.mavo.io/mavo.min.css" />
<script src="https://get.mavo.io/mavo.es5.min.js"></script>
<link rel="stylesheet prefetch" href="style.css" />
<link rel="icon" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🔮</text></svg>' />
<title>Wordle Game</title>
</head>
<body>
<header>
<h1 aria-label="Wordle game"><span>Wordle</span><span>·</span><span>game</span></h1>
</header>
<main>
<section mv-app="game" mv-bar="none">
<meta property="hiddenWord" content="[wordleList.randomWord]" mv-if="false" />
<meta property="isOver" content="[false]" />
<meta property="result" />
<meta property="attempt" content="[count(attempts) + 1]" />
<meta property="wordToCheck" content="[join(wordLetters)]" />
<meta property="wordLength" content="[len(wordToCheck)]" />
<meta property="wordValid" content="[wordToCheck in wordleList.words]" />
<button id="give-up" class="[if(attempt > 1, visible)]"
mv-action="if(!popup.isShowing, set(isOver, true) & set(result, 'lost') & set(popup.message, hiddenWord) & set(popup.cta, 'Play again') & set(popup.isShowing, true))"
>💔 Give up</button>
<div mv-list="usedLetters" mv-initial-items="0">
<span mv-list-item style="--row: [floor($index / 5) + 1]"
class="[if(attempt > floor($index / 5) + 1, if(get(hiddenWord, $index mod 5) = $item, correct, if(contains(hiddenWord, $item), elsewhere, absent)))]"></span>
</div>
<div id="keyboard">
<div mv-list="keys" mv-value="keyboardLayout.keys">
<button mv-list-item mv-group
mv-action="if(!popup.isShowing and wordLength < 5, add(key, usedLetters) & add(key, wordLetters))"
mv-attribute="data-key"
class="[if(attempt > 1, if(contains(join(attempts), key), if(key in correctLetters, correct, if(contains(hiddenWord, key), elsewhere, absent))))]"
style="--row: [row]">[key]</button>
<button
mv-action="deleteif(!popup.isShowing and wordLength > 0, last(game.usedLetters)) deleteif(!popup.isShowing, last(game.wordLetters))"
style="--row: 3; --column: 1">⌫</button>
<button mv-action="
if(0 < wordLength < 5, set(popup.message, 'Too short') & set(popup.cta, 'Continue') & set(popup.isShowing, true))
if(wordLength = 5 and attempt <= 6 and !wordValid, set(popup.message, 'Not a valid word') & set(popup.cta, 'Try again') & set(popup.isShowing, true))
if(wordLength = 5 and attempt = 6 and wordValid and wordToCheck != hiddenWord, set(isOver, true) & set(result, 'lost') & set(popup.message, hiddenWord) & set(popup.cta, 'Play again') & set(popup.isShowing, true))
if(wordLength = 5 and wordToCheck = hiddenWord, set(isOver, true) & set(result, 'won') & set(popup.message, 'You won! 🎉') & set(popup.cta, 'Play again') & set(popup.isShowing, true))
if(wordLength = 5 and attempt <= 6 and wordValid, add(wordToCheck, attempts) & add(condense(filter(wordLetters, split(hiddenWord, '') = wordLetters)), correctLetters) & clear(wordLetters))
" style="--row: 3; --column: 9">⏎</button>
</div>
</div>
<div mv-list="wordLetters" mv-initial-items="0" mv-if="false">
<span mv-list-item></span>
</div>
<div mv-list="correctLetters" mv-initial-items="0" mv-if="false">
<span></span>
</div>
<div mv-list="attempts" mv-initial-items="0" mv-if="false">
<span mv-list-item></span>
</div>
</section>
<section mv-app="popup" mv-bar="none" class="[if(isShowing, visible)] [if(game.isOver, 'game-over ' & game.result)]">
<meta property="isShowing" content="[false]" />
<p property="message"></p>
<button property="cta" mv-attribute="none" mv-action="
if(game.isOver, set(wordleList.randomWord, first(shuffle(wordleList.words))) & clear(game.usedLetters, game.correctLetters, game.wordLetters, game.attempts) & set(game.isOver, false))
set(isShowing, false)
"></button>
</section>
<section mv-app="keyboardLayout" mv-source="keyboard.json" mv-bar="none">
<meta property="keys" mv-if="false" />
</section>
<!-- Credit: https://github.com/tabatkins/wordle-list -->
<section mv-app="wordleList" mv-source="wordleList.json" mv-bar="none">
<meta property="randomWord" content="[first(shuffle(words))]" mv-if="false" />
</section>
</main>
<footer>
<section id="ribbon">
Made with <a href="https://mavo.io"><img src="https://mavo.io/logo.svg" alt="Mavo logo" /></a>
</section>
<section id="attribution">
<p>
Built with ❤️ by <a href="https://twitter.com/DmitrySharabin">Dmitry Sharabin</a>. <br />
Source code is on <a href="https://github.com/DmitrySharabin/mavo-wordle">GitHub</a>.
</p>
</section>
</footer>
</body>
</html>