shawnco/index.html

## index.html
<html>
    <head>
        <title>Canvas Wordle</title>
    </head>
    <body style="background-color: black; color: white;">
        <canvas id="canvas" width="250" height="250" style="border: 1px solid black;"></canvas><br />
        <input type="text" id="guess" name="guess" maxlength="5" />
        <button onClick="guess()">Guess</button><br />
        <div id="message"></div>
        <script type="text/javascript">
            let context;
            let canvas;
            let round = 0;
            let word = '';

            function getRightLetters(guezz) {
                let matches = 0;
                guezz.split('').map((g, i) => {
                    if (g == word[i]) matches++
                });
                return matches;
            }

            function getLetterColor(letter, index) {
                // if the letter is in the right place, return green
                if (letter == word.charAt(index)) return 'green';

                // if it's just in the word, return a certain color
                if (word.indexOf(letter) > -1) return 'yellow';

                // otherwise return the default color
                return 'gray';
            }

            function drawSquare(ctx, x, y, val, index) {
                ctx.fillStyle = getLetterColor(val, index);
                ctx.fillRect(x, y, 35, 35);
                ctx.fillStyle = 'black';
                ctx.fillText(val, x + 10, y + 25);
            }

            // because ow my eyeballs
            function drawBackground(ctx) {
                ctx.fillStyle = 'white';
                ctx.fillRect(0, 0, 250, 250);
            }

            function guess() {
                const guezz = document.getElementById('guess').value;
                if (guezz.length < 5) {
                    return;
                }
                if (round >= 5) {
                    return;
                }
                // for now just draw the row
                const [a,b,c,d,e] = guezz.split('');
                drawSquare(ctx, 10, 10 + (round * 45), a, 0);
                drawSquare(ctx, 55, 10 + (round * 45), b, 1);
                drawSquare(ctx, 100, 10 + (round * 45), c, 2);
                drawSquare(ctx, 145, 10 + (round * 45), d, 3);
                drawSquare(ctx, 190, 10 + (round * 45), e, 4);
                round++;

                // How many letters did they get right?
                const matches = getRightLetters(guezz);
                console.log(matches);
                if (matches == 5) {
                    document.getElementById('message').innerHTML = 'You guess the word!!';
                } else if (round == 5) {
                    document.getElementById('message').innerHTML = `Game's over! The word was ${word}.`;
                }
                document.getElementById('guess').value = '';
            }

            document.addEventListener("DOMContentLoaded", () => {
                // Fetch our random word
                fetch('https://random-word-api.vercel.app/api?words=1&length=5')
                    .then((res) => res.json())
                    .then((res) => {
                        word = res[0];
                        console.log(word);
                    });

                canvas = document.getElementById('canvas');
                ctx = canvas.getContext('2d');
                ctx.font = '24px Arial';
                drawBackground(ctx);
            });
        </script>
    </body>
</html>
	<html>
	<head>
	<title>Canvas Wordle</title>
	</head>
	<body style="background-color: black; color: white;">
	<canvas id="canvas" width="250" height="250" style="border: 1px solid black;"></canvas><br />
	<input type="text" id="guess" name="guess" maxlength="5" />
	<button onClick="guess()">Guess</button><br />
	<div id="message"></div>
	<script type="text/javascript">
	let context;
	let canvas;
	let round = 0;
	let word = '';

	function getRightLetters(guezz) {
	let matches = 0;
	guezz.split('').map((g, i) => {
	if (g == word[i]) matches++
	});
	return matches;
	}

	function getLetterColor(letter, index) {
	// if the letter is in the right place, return green
	if (letter == word.charAt(index)) return 'green';

	// if it's just in the word, return a certain color
	if (word.indexOf(letter) > -1) return 'yellow';

	// otherwise return the default color
	return 'gray';
	}

	function drawSquare(ctx, x, y, val, index) {
	ctx.fillStyle = getLetterColor(val, index);
	ctx.fillRect(x, y, 35, 35);
	ctx.fillStyle = 'black';
	ctx.fillText(val, x + 10, y + 25);
	}

	// because ow my eyeballs
	function drawBackground(ctx) {
	ctx.fillStyle = 'white';
	ctx.fillRect(0, 0, 250, 250);
	}

	function guess() {
	const guezz = document.getElementById('guess').value;
	if (guezz.length < 5) {
	return;
	}
	if (round >= 5) {
	return;
	}
	// for now just draw the row
	const [a,b,c,d,e] = guezz.split('');
	drawSquare(ctx, 10, 10 + (round * 45), a, 0);
	drawSquare(ctx, 55, 10 + (round * 45), b, 1);
	drawSquare(ctx, 100, 10 + (round * 45), c, 2);
	drawSquare(ctx, 145, 10 + (round * 45), d, 3);
	drawSquare(ctx, 190, 10 + (round * 45), e, 4);
	round++;

	// How many letters did they get right?
	const matches = getRightLetters(guezz);
	console.log(matches);
	if (matches == 5) {
	document.getElementById('message').innerHTML = 'You guess the word!!';
	} else if (round == 5) {
	document.getElementById('message').innerHTML = `Game's over! The word was ${word}.`;
	}
	document.getElementById('guess').value = '';
	}

	document.addEventListener("DOMContentLoaded", () => {
	// Fetch our random word
	fetch('https://random-word-api.vercel.app/api?words=1&length=5')
	.then((res) => res.json())
	.then((res) => {
	word = res[0];
	console.log(word);
	});

	canvas = document.getElementById('canvas');
	ctx = canvas.getContext('2d');
	ctx.font = '24px Arial';
	drawBackground(ctx);
	});
	</script>
	</body>
	</html>