84 lines
4.5 KiB
HTML
84 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
|
|
<link href="/assets/styles/main.css" rel="stylesheet">
|
|
<title>Wordle Clone</title>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Wordle Clone</h1>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="playfield" data-controller="playfield"
|
|
data-playfield-overlay-outlet=".overlay">
|
|
|
|
<div data-playfield-target="topMessage"> </div>
|
|
<div data-playfield-target="playfield"></div>
|
|
|
|
<button data-playfield-target="nextPuzzleButton" class="hide" data-action="playfield#loadNextPuzzle">Next Puzzle</button>
|
|
</div>
|
|
<div class="keyboard" data-controller="keyboard"
|
|
data-keyboard-playfield-outlet=".playfield"
|
|
data-action="
|
|
keydown@window->keyboard#onKeyPress
|
|
guessResults@window->keyboard#colorizeKeys
|
|
resetKeyColors@window->keyboard#resetKeyColors
|
|
">
|
|
<div>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="q">q</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="w">w</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="e">e</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="r">r</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="t">t</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="y">y</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="u">u</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="i">i</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="o">o</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="p">p</button>
|
|
</div>
|
|
<div>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="a">a</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="s">s</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="d">d</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="f">f</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="g">g</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="h">h</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="j">j</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="k">k</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="l">l</button>
|
|
</div>
|
|
<div>
|
|
<button data-keyboard-target="key" data-action="keyboard#tapBackspace">←</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="z">z</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="x">x</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="c">c</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="v">v</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="b">b</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="n">n</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="m">m</button>
|
|
<button data-keyboard-target="key" data-action="keyboard#tapEnter">↵</button>
|
|
</div>
|
|
</div>
|
|
|
|
<template id="row-template">
|
|
<div class="row" data-playfield-target="row">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</template>
|
|
</main>
|
|
|
|
<div class="overlay" data-controller="overlay">
|
|
<div class="overlay-message" data-overlay-target="message">I am the overlay</div>
|
|
</div>
|
|
|
|
<script src="/assets/scripts/main.js" type="module"></script>
|
|
</body>
|
|
</html> |