const words = ["apple", "bread", "house", "piano", "party"];
const correctWord = words[Math.floor(Math.random() * words.length)];
const keyboard = `
<div id="keyboard">
<div>
<button onclick="inputKey('q')">Q</button>
<button onclick="inputKey('w')">W</button>
<button onclick="inputKey('e')">E</button>
<button onclick="inputKey('r')">R</button>
<button onclick="inputKey('t')">T</button>
<button onclick="inputKey('y')">Y</button>
<button onclick="inputKey('u')">U</button>
<button onclick="inputKey('i')">I</button>
<button onclick="inputKey('o')">O</button>
<button onclick="inputKey('p')">P</button>
</div>
<div>
<button onclick="inputKey('a')">A</button>
<button onclick="inputKey('s')">S</button>
<button onclick="inputKey('d')">D</button>
<button onclick="inputKey('f')">F</button>
<button onclick="inputKey('g')">G</button>
<button onclick="inputKey('h')">H</button>
<button onclick="inputKey('j')">J</button>
<button onclick="inputKey('k')">K</button>
<button onclick="inputKey('l')">L</button>
</div>
<div>
<button onclick="inputKey('z')">Z</button>
<button onclick="inputKey('x')">X</button>
<button onclick="inputKey('c')">C</button>
<button onclick="inputKey('v')">V</button>
<button onclick="inputKey('b')">B</button>
<button onclick="inputKey('n')">N</button>
<button onclick="inputKey('m')">M</button>
</div>
<div>
<button onclick="deleteKey()">⌫</button>
<button onclick="submitGuess()">Submit</button>
</div>
</div>
`;
const gameBoard = `
<div id="game-board">
${[...Array(6)].map(() => `<div class="row">
${[...Array(5)].map(() => `<div class="tile"></div>`).join("")}
</div>`).join("")}
</div>
`;
export default async function(req: Request): Promise<Response> {
const html = `<html>
<head>
<style>
body {
background: linear-gradient(45deg, #ff6ec4, #7873f5);
color: #fff;
font-family: 'Comic Sans MS', cursive, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
#game-board {
display: grid;
gap: 10px;
}
.row {
display: flex;
}
.tile {
background: linear-gradient(315deg, #ffdd00, #fbb034);
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
margin: 5px;
font-size: 24px;
font-weight: bold;
color: black;
border: 2px solid #333;
}
.tile.correct { background: linear-gradient(315deg, #55efc4, #00b894); }
.tile.present { background: linear-gradient(315deg, #ffeaa7, #fab1a0); }
.tile.absent { background: linear-gradient(315deg, #d63031, #c0392b); }
button {
background: linear-gradient(315deg, #74ebd5, #9face6);
border: none;
padding: 10px 20px;
margin: 5px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;