10 | This is a SvelteKit app. You can make your 11 | own by typing the following into your command line and following the prompts: 12 |
13 | 14 |npm create svelte@latest15 | 16 |
17 | The page you're looking at is purely static HTML, with no client-side 18 | interactivity needed. Because of that, we don't need to load any JavaScript. 19 | Try viewing the page's source, or opening the devtools network panel and 20 | reloading. 21 |
22 | 23 |24 | The Sverdle page illustrates SvelteKit's data loading 25 | and form handling. Try using it with JavaScript disabled! 26 |
27 |
35 |
36 |
--------------------------------------------------------------------------------
/src/lib/images/github.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/lib/images/svelte-logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/routes/sverdle/+page.server.js:
--------------------------------------------------------------------------------
1 | import { fail } from "@sveltejs/kit";
2 | import { Game } from "./game";
3 |
4 | /** @satisfies {import('./$types').PageServerLoad} */
5 | export const load = ({ cookies }) => {
6 | const game = new Game(cookies.get("sverdle"));
7 |
8 | return {
9 | /**
10 | * The player's guessed words so far
11 | */
12 | guesses: game.guesses,
13 |
14 | /**
15 | * An array of strings like '__x_c' corresponding to the guesses, where 'x' means
16 | * an exact match, and 'c' means a close match (right letter, wrong place)
17 | */
18 | answers: game.answers,
19 |
20 | /**
21 | * The correct answer, revealed if the game is over
22 | */
23 | answer: game.answers.length >= 6 ? game.answer : null,
24 | };
25 | };
26 |
27 | /** @satisfies {import('./$types').Actions} */
28 | export const actions = {
29 | /**
30 | * Modify game state in reaction to a keypress. If client-side JavaScript
31 | * is available, this will happen in the browser instead of here
32 | */
33 | update: async ({ request, cookies }) => {
34 | const game = new Game(cookies.get("sverdle"));
35 |
36 | const data = await request.formData();
37 | const key = data.get("key");
38 |
39 | const i = game.answers.length;
40 |
41 | if (key === "backspace") {
42 | game.guesses[i] = game.guesses[i].slice(0, -1);
43 | } else {
44 | game.guesses[i] += key;
45 | }
46 |
47 | cookies.set("sverdle", game.toString(), { path: "/" });
48 | },
49 |
50 | /**
51 | * Modify game state in reaction to a guessed word. This logic always runs on
52 | * the server, so that people can't cheat by peeking at the JavaScript
53 | */
54 | enter: async ({ request, cookies }) => {
55 | const game = new Game(cookies.get("sverdle"));
56 |
57 | const data = await request.formData();
58 | const guess = /** @type {string[]} */ (data.getAll("guess"));
59 |
60 | if (!game.enter(guess)) {
61 | return fail(400, { badGuess: true });
62 | }
63 |
64 | cookies.set("sverdle", game.toString(), { path: "/" });
65 | },
66 |
67 | restart: async ({ cookies }) => {
68 | cookies.delete("sverdle", { path: "/" });
69 | },
70 | };
71 |
--------------------------------------------------------------------------------
/src/routes/sverdle/game.js:
--------------------------------------------------------------------------------
1 | import { words, allowed } from "./words.server";
2 |
3 | export class Game {
4 | /**
5 | * Create a game object from the player's cookie, or initialise a new game
6 | * @param {string | undefined} serialized
7 | */
8 | constructor(serialized = undefined) {
9 | if (serialized) {
10 | const [index, guesses, answers] = serialized.split("-");
11 |
12 | this.index = +index;
13 | this.guesses = guesses ? guesses.split(" ") : [];
14 | this.answers = answers ? answers.split(" ") : [];
15 | } else {
16 | this.index = Math.floor(Math.random() * words.length);
17 | this.guesses = ["", "", "", "", "", ""];
18 | this.answers = /** @type {string[]} */ ([]);
19 | }
20 |
21 | this.answer = words[this.index];
22 | }
23 |
24 | /**
25 | * Update game state based on a guess of a five-letter word. Returns
26 | * true if the guess was valid, false otherwise
27 | * @param {string[]} letters
28 | */
29 | enter(letters) {
30 | const word = letters.join("");
31 | const valid = allowed.has(word);
32 |
33 | if (!valid) return false;
34 |
35 | this.guesses[this.answers.length] = word;
36 |
37 | const available = Array.from(this.answer);
38 | const answer = Array(5).fill("_");
39 |
40 | // first, find exact matches
41 | for (let i = 0; i < 5; i += 1) {
42 | if (letters[i] === available[i]) {
43 | answer[i] = "x";
44 | available[i] = " ";
45 | }
46 | }
47 |
48 | // then find close matches (this has to happen
49 | // in a second step, otherwise an early close
50 | // match can prevent a later exact match)
51 | for (let i = 0; i < 5; i += 1) {
52 | if (answer[i] === "_") {
53 | const index = available.indexOf(letters[i]);
54 | if (index !== -1) {
55 | answer[i] = "c";
56 | available[index] = " ";
57 | }
58 | }
59 | }
60 |
61 | this.answers.push(answer.join(""));
62 |
63 | return true;
64 | }
65 |
66 | /**
67 | * Serialize game state so it can be set as a cookie
68 | */
69 | toString() {
70 | return `${this.index}-${this.guesses.join(" ")}-${this.answers.join(" ")}`;
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/routes/styles.css:
--------------------------------------------------------------------------------
1 | @import "@fontsource/fira-mono";
2 |
3 | :root {
4 | --font-body: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
5 | Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
6 | --font-mono: "Fira Mono", monospace;
7 | --color-bg-0: rgb(202, 216, 228);
8 | --color-bg-1: hsl(209, 36%, 86%);
9 | --color-bg-2: hsl(224, 44%, 95%);
10 | --color-theme-1: #ff3e00;
11 | --color-theme-2: #4075a6;
12 | --color-text: rgba(0, 0, 0, 0.7);
13 | --column-width: 42rem;
14 | --column-margin-top: 4rem;
15 | font-family: var(--font-body);
16 | color: var(--color-text);
17 | }
18 |
19 | body {
20 | min-height: 100vh;
21 | margin: 0;
22 | background-attachment: fixed;
23 | background-color: var(--color-bg-1);
24 | background-size: 100vw 100vh;
25 | background-image: radial-gradient(
26 | 50% 50% at 50% 50%,
27 | rgba(255, 255, 255, 0.75) 0%,
28 | rgba(255, 255, 255, 0) 100%
29 | ),
30 | linear-gradient(
31 | 180deg,
32 | var(--color-bg-0) 0%,
33 | var(--color-bg-1) 15%,
34 | var(--color-bg-2) 50%
35 | );
36 | }
37 |
38 | h1,
39 | h2,
40 | p {
41 | font-weight: 400;
42 | }
43 |
44 | p {
45 | line-height: 1.5;
46 | }
47 |
48 | a {
49 | color: var(--color-theme-1);
50 | text-decoration: none;
51 | }
52 |
53 | a:hover {
54 | text-decoration: underline;
55 | }
56 |
57 | h1 {
58 | font-size: 2rem;
59 | text-align: center;
60 | }
61 |
62 | h2 {
63 | font-size: 1rem;
64 | }
65 |
66 | pre {
67 | font-size: 16px;
68 | font-family: var(--font-mono);
69 | background-color: rgba(255, 255, 255, 0.45);
70 | border-radius: 3px;
71 | box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
72 | padding: 0.5em;
73 | overflow-x: auto;
74 | color: var(--color-text);
75 | }
76 |
77 | .text-column {
78 | display: flex;
79 | max-width: 48rem;
80 | flex: 0.6;
81 | flex-direction: column;
82 | justify-content: center;
83 | margin: 0 auto;
84 | }
85 |
86 | input,
87 | button {
88 | font-size: inherit;
89 | font-family: inherit;
90 | }
91 |
92 | button:focus:not(:focus-visible) {
93 | outline: none;
94 | }
95 |
96 | @media (min-width: 720px) {
97 | h1 {
98 | font-size: 2.4rem;
99 | }
100 | }
101 |
102 | .visually-hidden {
103 | border: 0;
104 | clip: rect(0 0 0 0);
105 | height: auto;
106 | margin: 0;
107 | overflow: hidden;
108 | padding: 0;
109 | position: absolute;
110 | width: 1px;
111 | white-space: nowrap;
112 | }
113 |
--------------------------------------------------------------------------------
/src/routes/sverdle/how-to-play/+page.svelte:
--------------------------------------------------------------------------------
1 | 10 | Sverdle is a clone of Wordle, the word guessing game. To play, enter a five-letter English word. For 13 | example: 14 |
15 | 16 |25 | The y is in the right place. 26 | r 27 | and 28 | t 29 | are the right letters, but in the wrong place. The other letters are wrong, and 30 | can be discarded. Let's make another guess: 31 |
32 | 33 |42 | This time we guessed right! You have six guesses to get the 43 | word. 44 |
45 | 46 |
47 | Unlike the original Wordle, Sverdle runs on the server instead of in the
48 | browser, making it impossible to cheat. It uses <form> and
49 | cookies to submit data, meaning you can even play with JavaScript disabled!
50 |