web/wordle-clone
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit

Browse source 
Have got guesses and colourisation working
This commit is contained in:
Leon Mika 2025-01-21 22:13:56 +11:00
commit 974bd3c39f
3 changed files with 293 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

69
src/index.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/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">
<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="/scripts/main.js" type="module"></script>
</body>
</html>