69 lines
3.7 KiB
HTML
69 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="/assets/styles/main.css" rel="stylesheet">
|
|
<title>Wordle Clone</title>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Wordle Clone</h1>
|
|
</header>
|
|
|
|
<main>
|
|
<div data-controller="playfield" class="playfield">
|
|
|
|
</div>
|
|
|
|
<div data-controller="keyboard"
|
|
data-keyboard-playfield-outlet=".playfield"
|
|
data-action="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#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>
|
|
</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>
|
|
|
|
<script src="/assets/scripts/main.js" type="module"></script>
|
|
</body>
|
|
</html> |