feat: Initial commit

2022-08-13 16:08:44 +01:00 · 2022-08-13 16:08:44 +01:00 · bf11761bc8
commit bf11761bc8
37 changed files with 6853 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# lockfile
+pnpm-lock.yaml
+
+# CI
+.pnpm-store
+.drone.yml
+
+node_modules
+dist
+dist-ssr
+*.local
+.next/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,8 @@
+{
+    "jsxSingleQuote": true,
+    "semi": true,
+    "tabWidth": 4,
+    "useTabs": false,
+    "trailingComma": "es5",
+    "singleQuote": true
+}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,3 @@
+# Doodly
+
+A skribbl.io clone that doesn't include builtin drawing.
--- a/index.html
+++ b/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Draw with friends">
+    <title>Doodly</title>
+    <link rel="icon" href="/favicon.png">
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
+    <meta name="theme-color" content="#ffffff">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,34 @@
+{
+  "name": "doodly",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "dev:server": "node --loader ts-node/esm src/server/main.ts",
+    "format:check": "prettier --check .",
+    "format": "prettier --write ."
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^1.0.1",
+    "@tsconfig/svelte": "^3.0.0",
+    "prettier": "^2.7.1",
+    "svelte": "^3.49.0",
+    "svelte-check": "^2.8.0",
+    "svelte-preprocess": "^4.10.7",
+    "ts-node": "^10.9.1",
+    "tslib": "^2.4.0",
+    "typescript": "^4.6.4",
+    "vite": "^3.0.6",
+    "vite-plugin-pwa": "^0.12.3"
+  },
+  "dependencies": {
+    "@fontsource/noto-sans": "^4.5.11",
+    "bulma": "^0.9.4",
+    "socket.io": "^4.5.1",
+    "socket.io-client": "^4.5.1"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/favicon-192.png
+++ b/public/favicon-192.png
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/robots.txt
+++ b/public/robots.txt
@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
--- a/squircle.svg
+++ b/squircle.svg
@ -0,0 +1,14 @@
+<svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path d="
+                M 0, 75
+                C 0, 18.75 18.75, 0 75, 0
+                S 150, 18.75 150, 75
+                    131.25, 150 75, 150
+                    0, 131.25 0, 75
+            " fill="#FADB5F" transform="rotate(
+                0,
+                100,
+                100
+            ) translate(
+                25
+                25
+            )"></path></svg>
--- a/src/App.svelte
+++ b/src/App.svelte
@ -0,0 +1,171 @@
+<script lang="ts">
+  import { io, type Socket } from "socket.io-client";
+  import { onDestroy } from "svelte";
+
+  import WaitingLobby from "./client/WaitingLobby.svelte";
+  import JoinPage from "./client/JoinPage.svelte";
+  import type { ChatMessage, ClientToServerEvents, GameState, Player, ServerToClientEvents, GameOver as GameOverData } from "./lib/socket";
+  import SelectWord from "./client/SelectWord.svelte";
+  import Card from "./components/Card.svelte";
+  import ChatWindow from "./client/ChatWindow.svelte";
+  import GuessPage from "./client/GuessPage.svelte";
+  import GameOver from "./client/GameOver.svelte";
+
+  let socket: Socket<ServerToClientEvents, ClientToServerEvents> | null = null;
+  let connected = false;
+
+  let username = '';
+  let gameId = '';
+
+  let error = '';
+
+  let host = false;
+
+  let players: Player[] = [];
+
+  let gameState: GameState = 'waiting';
+  let wordOptions: string[] = null;
+
+  let chat: ChatMessage[] = [];
+  let gameOver: GameOverData = null;
+
+  function joinGame(uname: string, gameId: string) {
+    players = [];
+    socket = io(`http://${window.location.hostname}:3000/`);
+    socket.on('connect', () => {
+        socket.emit('joinGame', gameId, uname, (result) => {
+            if (result.error === false) {
+                const { id, isHost, players: p } = result.data;
+                players = p;
+                host = isHost;
+                connected = true;
+                username = uname;
+                gameState = 'waiting';
+                chat = [];
+                gameOver = null;
+            } else {
+                console.log('failed to join', result.message);
+                socket.disconnect();
+                socket = null;
+                connected = false;
+                error = result.message;
+            }
+        });
+    });
+
+    socket.on('disconnect', (reason) => {
+      connected = false;
+      error = 'lost connection: ' + reason;
+      socket.disconnect();
+      socket = null;
+    });
+
+    socket.on('playerJoined', (username) => {
+      players.push({
+        username,
+        isHost: false,
+      });
+      players = players;
+    });
+
+    socket.on('playerLeft', (username) => {
+      players = players.filter(p => p.username !== username);
+    });
+
+    socket.on('becameHost', (newHost) => {
+      if (newHost === username) {
+        host = true;
+      }
+      players = players.map(player => {
+        return {
+          ...player,
+          isHost: player.username === newHost,
+        }
+      });
+    });
+
+    socket.on('waitForWordPick', () => {
+      gameState = 'waitingForWord';
+    });
+
+    socket.on('pickWord', (words) => {
+      console.log('pickWord', gameState, words);
+      gameState = 'selectingWord';
+      wordOptions = words;
+    });
+
+    socket.on('startDrawing', () => {
+      gameState = 'drawing';
+    });
+
+    socket.on('startGuessing', () => {
+      gameState = 'guessing';
+    });
+
+    socket.on('chatMessage', (author, message) => {
+      chat.reverse();
+      chat.push({ author, message });
+      chat.reverse();
+      chat = chat;
+    });
+
+    socket.on('gameOver', (result) => {
+      gameState = 'gameOver';
+      gameOver = result;
+    });
+  }
+
+  onDestroy(() => {
+    if (socket) {
+      socket.disconnect();
+    }
+  });
+
+  function startGame() {
+    socket.emit('startGame');
+    chat = [];
+  }
+</script>
+
+<main>
+  {#if !connected}
+    <JoinPage joinGame={joinGame} error={error} loading={socket !== null} on:dismiss-error={() => error = ''}></JoinPage>
+  {:else}
+    {#if gameState === 'waiting'}
+      <WaitingLobby username={username} gameId={gameId} host={host} socket={socket} players={players}></WaitingLobby>
+    {:else if gameState === 'waitingForWord'}
+      <Card>
+        <p>
+          Waiting for a word to be picked...
+        </p>
+      </Card>
+    {:else if gameState === 'selectingWord'}
+      <SelectWord words={wordOptions} on:pick-word={(event) => socket.emit('pickWord', event.detail)} />
+    {:else if gameState === 'guessing'}
+        <GuessPage on:guess={(e) => socket.emit('guessWord', e.detail, (correct) => {
+          if (correct) {
+            gameState = 'guessedCorrectly';
+          }
+        })} />
+        <ChatWindow messages={chat} />
+    {:else if gameState === 'guessedCorrectly'}
+        <Card>
+          <h1>Correct!</h1>
+          <p>
+            Waiting for the other players to finish...
+          </p>
+        </Card>
+        <ChatWindow messages={chat} />
+    {:else if gameState === 'drawing'}
+      <Card>
+        <h1>
+          Start drawing!
+        </h1>
+      </Card>
+
+      <ChatWindow messages={chat} />
+    {:else if gameState === 'gameOver'}
+      <GameOver gameOver={gameOver} isHost={host} {username} on:play-again={startGame} />
+    {/if}
+  {/if}
+</main>
--- a/src/app.css
+++ b/src/app.css
@ -0,0 +1,15 @@
+body {
+  font-family: 'Noto Sans', sans-serif;
+  /* background-color: #212;
+  color: #ded;
+
+  box-sizing: border-box; */
+}
+
+* {
+  box-sizing: inherit;
+}
+
+/* input, button {
+  font-family: inherit;
+} */
--- a/src/assets/wordlist.json
+++ b/src/assets/wordlist.json
--- a/src/client/ChatWindow.svelte
+++ b/src/client/ChatWindow.svelte
@ -0,0 +1,18 @@
+<script lang="ts">
+    import Card from "../components/Card.svelte";
+import type { ChatMessage } from "../lib/socket";
+
+    export let messages: ChatMessage[];
+</script>
+
+<Card>
+    <h2>Chat</h2>
+    <div aria-live="polite">
+        {#each messages as message}
+            <p>
+                <span class="has-text-info">{message.author}</span>:
+                {message.message}
+            </p>
+        {/each}
+    </div>
+</Card>
--- a/src/client/GameOver.svelte
+++ b/src/client/GameOver.svelte
@ -0,0 +1,80 @@
+<script lang="ts">
+    import Button from "../components/Button.svelte";
+    import Card from "../components/Card.svelte";
+    import { createEventDispatcher } from "svelte";
+    import type { GameOver } from "../lib/socket";
+
+    const dispatch = createEventDispatcher();
+
+    export let gameOver: GameOver;
+    export let username: string;
+    export let isHost: boolean;
+</script>
+
+<Card>
+    <h1>Game over</h1>
+
+    <section>
+        <h2>Details</h2>
+
+        <ul>
+            <li>Drawing: <code>{gameOver.drawer}</code></li>
+            <li>Word: <code>{gameOver.word}</code></li>
+        </ul>
+    </section>
+
+    <section class="rankings">
+        <h2>Rankings</h2>
+
+        <table class="table">
+            <thead>
+                <tr class="is-flex is-flex-direction-row">
+                    <th><abbr title="Position">Pos</abbr></th>
+                    <th class="is-flex-grow-1">Player</th>
+                    <th>Time</th>
+                </tr>
+            </thead>
+
+            <tbody>
+                {#each gameOver.leaderboard as entry, i}
+                    <tr class="is-flex is-flex-direction-row">
+                        <th>{i + 1}</th>
+                        <td class="is-flex-grow-1">
+                            <span class:has-text-primary={entry.username === username}>
+                                {entry.username}
+                            </span>
+                            {#if entry.username === username}
+                            <span class="tag is-primary">
+                                You
+                            </span>
+                            {/if}
+                        </td>
+                        <td>
+                            {(entry.time / 1000).toFixed(1)}
+                        </td>
+                    </tr>
+                {/each}
+            </tbody>
+        </table>
+    </section>
+
+    {#if isHost}
+        <section>
+            <h1>
+                Host options
+            </h1>
+
+            <div class="buttons">
+                <Button title="Play again" on:click={() => dispatch('play-again')} colour="primary">
+                    Play again
+                </Button>
+            </div>
+        </section>
+    {/if}
+</Card>
+
+<style>
+    .rankings {
+        max-width: fit-content;
+    }
+</style>
--- a/src/client/GuessPage.svelte
+++ b/src/client/GuessPage.svelte
@ -0,0 +1,26 @@
+<script lang="ts">
+    import Card from "../components/Card.svelte";
+import { createEventDispatcher } from "svelte";
+import TextInput from "../components/TextInput.svelte";
+import Button from "../components/Button.svelte";
+import ChatWindow from "./ChatWindow.svelte";
+
+    const dispatch = createEventDispatcher<{ guess: string }>();
+
+    let composeMessage = '';
+
+    function submit(m?: string) {
+        const guess = m ?? composeMessage;
+        if (guess !== '') {
+            dispatch('guess', guess);
+        }
+        composeMessage = '';
+    }
+</script>
+
+<Card>
+    <h1>Guess!</h1>
+
+    <TextInput placeholder="Guess a word!" autofocus bind:value={composeMessage} on:submit={(e) => submit(e.detail)} />
+    <Button title="Guess" colour="primary" on:click={() => submit()}>Guess</Button>
+</Card>
--- a/src/client/JoinPage.svelte
+++ b/src/client/JoinPage.svelte
@ -0,0 +1,31 @@
+<script lang="ts">
+    import Card from "../components/Card.svelte";
+
+    import Button from "../components/Button.svelte";
+    import TextInput from "../components/TextInput.svelte";
+    import { createEventDispatcher } from "svelte";
+
+    export let joinGame: (username: string, gameId: string) => void;
+    export let error: string;
+    export let loading = false;
+    let username = '';
+    let gameId = '';
+
+    const dispatch = createEventDispatcher();
+</script>
+
+<Card>
+    {#if error !== ''}
+        <div class="notification is-danger is-light">
+            <button class="delete" on:click={() => dispatch('dismiss-error')} />
+            Error: {error}
+        </div>
+    {/if}
+
+    <TextInput bind:value={username} placeholder="Username" maxlength={32} disabled={loading} />
+    <TextInput bind:value={gameId} placeholder="Game ID" maxlength={32} disabled={loading} />
+
+    <Button title="Join game" on:click={() => joinGame(username, gameId)} colour="primary" {loading}>
+        Join game
+    </Button>
+</Card>
--- a/src/client/SelectWord.svelte
+++ b/src/client/SelectWord.svelte
@ -0,0 +1,22 @@
+<script lang="ts">
+    import Button from "../components/Button.svelte";
+import Card from "../components/Card.svelte";
+import { createEventDispatcher } from "svelte";
+
+    export let words: string[];
+    const dispatch = createEventDispatcher<{ 'pick-word': string }>();
+
+    function pickWord(word: string) {
+        dispatch('pick-word', word);
+    }
+</script>
+
+<Card>
+    <h1>Pick a word!</h1>
+
+    <div class="buttons">
+        {#each words as word}
+            <Button title={word} on:click={() => pickWord(word)} colour="primary">{word}</Button>
+        {/each}
+    </div>
+</Card>
--- a/src/client/WaitingLobby.svelte
+++ b/src/client/WaitingLobby.svelte
@ -0,0 +1,65 @@
+<script lang="ts">
+    import type { Socket } from "socket.io-client";
+    import Button from "../components/Button.svelte";
+    import Card from "../components/Card.svelte";
+
+    import type { ClientToServerEvents, Player, ServerToClientEvents } from "../lib/socket";
+
+    export let players: Player[];
+    export let username: string;
+    export let gameId: string;
+    export let host: boolean;
+    export let socket: Socket<ServerToClientEvents, ClientToServerEvents>;
+</script>
+
+<Card>
+    <h1>
+        Waiting for
+        {#if host}
+        players
+        {:else}
+        the host
+        {/if}
+    </h1>
+
+    <section>
+        <h2>
+            Players
+        </h2>
+
+        <ul>
+            {#each players as player}
+                <li>
+                    <span class:has-text-info={player.username === username}>
+                        {player.username}
+                    </span>
+
+                    {#if player.isHost}
+                    <span class="tag is-warning">
+                        Host
+                    </span>
+                    {/if}
+                </li>
+            {/each}
+        </ul>
+    </section>
+
+    {#if host}
+    <section>
+        <h2>Game</h2>
+        <Button title="Start game" colour="primary" on:click={() => socket.emit('startGame')} disabled={players.length < 2}>Start game</Button>
+    </section>
+    {/if}
+</Card>
+
+<Card>
+    <h2>How to play</h2>
+
+    <p>
+        A random player will be chosen to pick a word, which they will then have to draw it in front of everyone else.
+
+        <br>
+
+        All incorrect guesses are broadcast to the chat window for every player though, so be careful!
+    </p>
+</Card>
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+import type { BulmaColour } from "./utils";
+
+    export let title: string;
+    export let disabled: boolean = false;
+    export let colour: BulmaColour = undefined;
+    export let loading: boolean = false;
+
+    const dispatch = createEventDispatcher();
+
+    function dispatchClick() {
+        if (!disabled) dispatch('click');
+    }
+</script>
+
+<button class={`button is-${colour}`} class:is-loading={loading} {disabled} {title} on:click={dispatchClick}>
+    <slot />
+</button>
--- a/src/components/Card.svelte
+++ b/src/components/Card.svelte
@ -0,0 +1,7 @@
+<div class="container">
+    <div class="card mt-4">
+        <div class="card-content content">
+            <slot />
+        </div>
+    </div>
+</div>
--- a/src/components/TextInput.svelte
+++ b/src/components/TextInput.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+import { createEventDispatcher } from "svelte";
+
+
+    export let placeholder: string;
+    export let value: string;
+    export let id: string = undefined;
+    export let autofocus = false;
+    export let maxlength: number = undefined;
+    export let disabled: boolean = false;
+    const dispatch = createEventDispatcher<{ submit: string }>();
+</script>
+
+<!-- svelte-ignore a11y-autofocus -->
+<div class="field">
+    <div class="control">
+        <input type="text" {id} {placeholder} {autofocus} {maxlength} {disabled} bind:value class="input" on:keyup={(e) => {
+            if (e.key === 'Enter') {
+                dispatch('submit', value);
+            }
+        }}>
+    </div>
+</div>
--- a/src/components/utils.ts
+++ b/src/components/utils.ts
@ -0,0 +1 @@
+export type BulmaColour = 'primary' | 'link' | 'success' | 'warning' | 'danger';
--- a/src/lib/socket.ts
+++ b/src/lib/socket.ts
@ -0,0 +1,43 @@
+export interface ServerToClientEvents {
+    playerJoined: (username: string) => void;
+    playerLeft: (username: string) => void;
+    becameHost: (username: string) => void;
+    waitForWordPick: () => void;
+    pickWord: (words: string[]) => void;
+    startGuessing: () => void;
+    startDrawing: () => void;
+    chatMessage: (author: string, message: string) => void;
+    gameOver: (result: GameOver) => void;
+}
+
+export interface GameOver {
+    leaderboard: (Player & { time: number })[];
+    drawer: string;
+    word: string;
+}
+
+type Result<T> = { error: false; data: T } | { error: true; message: string };
+
+export interface ClientToServerEvents {
+    joinGame: (id: string, username: string, callback: (result: Result<{id: string, isHost: boolean, players: Player[]}>) => void) => void;
+    startGame: () => void;
+
+    pickWord: (word: string) => void;
+    guessWord: (word: string, callback: (success: boolean) => void) => void;
+}
+
+export interface SocketData {
+    gameId: string;
+}
+
+export interface Player {
+    username: string;
+    isHost: boolean;
+}
+
+export type GameState = 'waiting' | 'selectingWord' | 'waitingForWord' | 'drawing' | 'guessing' | 'guessedCorrectly' | 'gameOver';
+
+export interface ChatMessage {
+    author: string;
+    message: string;
+}
--- a/src/lib/util.ts
+++ b/src/lib/util.ts
@ -0,0 +1,27 @@
+export function sleep(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+// https://www.tutorialspoint.com/levenshtein-distance-in-javascript
+export function levenshteinDistance(a: string, b: string): number {
+    const track: number[][] = Array(b.length + 1)
+        .fill(null)
+        .map(() => Array(a.length + 1).fill(null));
+    for (let i = 0; i <= a.length; i += 1) {
+        track[0][i] = i;
+    }
+    for (let j = 0; j <= b.length; j += 1) {
+        track[j][0] = j;
+    }
+    for (let j = 1; j <= b.length; j += 1) {
+        for (let i = 1; i <= a.length; i += 1) {
+            const indicator = a[i - 1] === b[j - 1] ? 0 : 1;
+            track[j][i] = Math.min(
+                track[j][i - 1] + 1, // deletion
+                track[j - 1][i] + 1, // insertion
+                track[j - 1][i - 1] + indicator // substitution
+            );
+        }
+    }
+    return track[b.length][a.length];
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,10 @@
+import './app.css';
+import App from './App.svelte';
+import '@fontsource/noto-sans';
+import 'bulma/css/bulma.css';
+
+const app = new App({
+  target: document.getElementById('app'),
+});
+
+export default app;
--- a/src/server/game.ts
+++ b/src/server/game.ts
@ -0,0 +1,147 @@
+import type { Server, Socket } from "socket.io";
+import type { ClientToServerEvents, Player, ServerToClientEvents, SocketData } from "src/lib/socket";
+import { levenshteinDistance } from "../lib/util.js";
+import randomWords from "./words.js";
+
+export class Game {
+    io: Server<ClientToServerEvents, ServerToClientEvents, {}, SocketData>;
+    gameId: string;
+    players: Map<string, Player>;
+    host: string;
+
+    startTime: number | null;
+    currentPlayer: string | null;
+    currentWord: string | null;
+    successfulPlayers: [string, number][];
+
+    constructor(gameId: string, io: Server<ClientToServerEvents, ServerToClientEvents, {}, SocketData>) {
+        this.io = io;
+        this.gameId = gameId;
+        this.players = new Map();
+    }
+
+    playerJoin(socket: Socket<ClientToServerEvents, ServerToClientEvents, {}, SocketData>, username: string): string | Player {
+        for (const player of this.players.values()) {
+            if (player.username === username) {
+                return 'username taken';
+            }
+        }
+
+        const isHost = this.players.size === 0;
+
+        if (isHost) {
+            this.host = socket.id;
+        }
+
+        const player: Player = {
+            isHost,
+            username,
+        };
+        this.players.set(socket.id, player);
+
+        return player;
+    }
+
+    /**
+     * Called when a client socket disconnects.
+     * 
+     * @param socket Socket that has just disconnected
+     * @returns true if the game is empty, false otherwise
+     */
+    playerLeft(socket: Socket<ClientToServerEvents, ServerToClientEvents, {}, SocketData>): boolean {
+        const player = this.players.get(socket.id);
+        this.players.delete(socket.id);
+        if (this.players.size === 0) return true;
+        if (player.isHost) {
+            // we need to assign a new host for this room
+            const playerIds = Array.from(this.players.keys());
+            const newHostId = playerIds[Math.floor(Math.random() * playerIds.length)];
+            const newHost = this.players.get(newHostId);
+            newHost.isHost = true;
+            this.io.to(this.gameId).emit('becameHost', newHost.username);
+            this.host = newHostId;
+        }
+        this.io.to(this.gameId).emit('playerLeft', player.username);
+        return false;
+    }
+
+    /**
+     * Called when the host presses the 'Start game' button.
+     * Will pick a random player to choose a word, and then
+     * broadcast the start to the other players.
+     */
+    gameStart(socket: Socket<ClientToServerEvents, ServerToClientEvents, {}, SocketData>) {
+        if (!this.players.get(socket.id).isHost) return;
+
+        const playerIds = Array.from(this.players.keys());
+        const player = playerIds[Math.floor(Math.random() * playerIds.length)];
+        const words = randomWords(3);
+        this.currentPlayer = player;
+        this.successfulPlayers = [];
+        this.io.to(this.gameId).except(player).emit('waitForWordPick');
+        this.io.to(player).emit('pickWord', words);
+    }
+
+    pickWord(socket: Socket<ClientToServerEvents, ServerToClientEvents, {}, SocketData>, word: string) {
+        if (socket.id !== this.currentPlayer) return;
+        this.currentWord = word;
+        this.io.to(this.gameId).except(socket.id).emit('startGuessing');
+        this.io.to(socket.id).emit('startDrawing');
+        this.startTime = new Date().getTime();
+    }
+
+    /**
+     * Called when a player makes a guess during a game.
+     * 
+     * @param socket The socket of the player that made the guess
+     * @param guess The word that the player guessed
+     * @returns true if the word was correct, false otherwise
+     */
+    guessWord(socket: Socket<ClientToServerEvents, ServerToClientEvents, {}, SocketData>, guess: string): boolean {
+        if (!this.currentWord || this.successfulPlayers.find(([id, _]) => id === socket.id) !== undefined) return;
+
+        const player = this.players.get(socket.id);
+
+        if (guess.toLocaleLowerCase() === this.currentWord.toLocaleLowerCase()) {
+            // Correct answer!
+            this.io.to(this.gameId).except(socket.id).emit('chatMessage', 'game', `${player.username} guessed the correct word`);
+            this.successfulPlayers.push([socket.id, new Date().getTime() - this.startTime]);
+
+            return true;
+        } else if (levenshteinDistance(guess.toLocaleLowerCase(), this.currentWord.toLocaleLowerCase()) <= 2) {
+            // close guess
+            this.io.to(socket.id).emit('chatMessage', 'game', `${guess} is close!`);
+        }
+
+        // Broadcast incorrect guesses to all players
+        this.io.to(this.gameId).emit('chatMessage', player.username, guess);
+
+        return false;
+    }
+
+    checkGameOver() {
+        if (this.isGameOver()) {
+            const leaderboard = this.successfulPlayers.map(([id, time]) => {
+                const p = this.players.get(id);
+                return {
+                    ...p,
+                    time,
+                };
+            });
+            this.io.to(this.gameId).emit('gameOver', {
+                leaderboard,
+                drawer: this.players.get(this.currentPlayer).username,
+                word: this.currentWord,
+            });
+        }
+    }
+
+    private isGameOver(): boolean {
+        for (const id of this.players.keys()) {
+            if (id !== this.currentPlayer && this.successfulPlayers.find(([i, _]) => id === i) === undefined) {
+                return false;
+            }
+        }
+        return true;
+    }
+}
--- a/src/server/main.ts
+++ b/src/server/main.ts
@ -0,0 +1,109 @@
+import { Server } from 'socket.io';
+import type {
+    ClientToServerEvents,
+    Player,
+    ServerToClientEvents,
+    SocketData,
+} from 'src/lib/socket';
+import { Game } from './game.js';
+import randomWords from './words.js';
+
+const io = new Server<
+    ClientToServerEvents,
+    ServerToClientEvents,
+    {},
+    SocketData
+>({
+    cors: {
+        origin: true,
+    },
+});
+
+const games = new Map<string, Game>();
+
+io.on('connection', (socket) => {
+    socket.on('joinGame', (gameId, username, callback) => {
+        if (gameId.length < 1 || gameId.length > 32) {
+            callback({
+                error: true,
+                message: 'invalid game id',
+            });
+            return;
+        }
+
+        if (username.length === 0 || !/^[a-zA-Z0-9]+$/.test(username)) {
+            callback({
+                error: true,
+                message: 'invalid username',
+            });
+            return;
+        }
+
+        if (!games.has(gameId)) {
+            games.set(gameId, new Game(gameId, io));
+        }
+        const room = games.get(gameId);
+
+        const player = room.playerJoin(socket, username);
+        if (typeof player === 'string') {
+            return callback({
+                error: true,
+                message: player,
+            });
+        }
+
+        io.to(gameId).emit('playerJoined', username);
+
+        socket.data.gameId = gameId;
+        socket.rooms.forEach(room => room !== socket.id && socket.leave(room));
+        socket.join(gameId);
+
+        const players = Array.from(room.players.values());
+
+        players.sort((a, b) => a.username.localeCompare(b.username));
+
+        callback({
+            error: false,
+            data: {
+                id: gameId,
+                isHost: player.isHost,
+                players,
+            },
+        });
+    });
+
+    socket.on('startGame', () => {
+        if (!socket.data.gameId) return;
+        const game = games.get(socket.data.gameId);
+
+        game.gameStart(socket);
+    });
+
+    socket.on('pickWord', (word) => {
+        if (!socket.data.gameId) return;
+        const game = games.get(socket.data.gameId);
+        
+        game.pickWord(socket, word);
+    });
+
+    socket.on('guessWord', (word, callback) => {
+        if (!socket.data.gameId) return;
+        const game = games.get(socket.data.gameId);
+        
+        const result = game.guessWord(socket, word);
+        callback(result);
+        game.checkGameOver();
+    });
+
+    socket.on('disconnecting', () => {
+        socket.leave(socket.id);
+        if (socket.data.gameId) {
+            if (games.get(socket.data.gameId).playerLeft(socket)) {
+                games.delete(socket.data.gameId);
+            }
+        }
+    });
+});
+
+console.log('listening on port :3000');
+io.listen(3000);
--- a/src/server/words.ts
+++ b/src/server/words.ts
@ -0,0 +1,14 @@
+import words from '../assets/wordlist.json' assert {type: 'json'};
+
+export default function randomWords(count = 3): string[] {
+    const randomWords: string[] = [];
+
+    while (randomWords.length < count) {
+        const word = words[Math.floor(Math.random() * words.length)];
+        if (!randomWords.includes(word)) {
+            randomWords.push(word);
+        }
+    }
+
+    return randomWords;
+}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
--- a/svelte.config.js
+++ b/svelte.config.js
@ -0,0 +1,7 @@
+import sveltePreprocess from 'svelte-preprocess'
+
+export default {
+  // Consult https://github.com/sveltejs/svelte-preprocess
+  // for more information about preprocessors
+  preprocess: sveltePreprocess()
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,21 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node"
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,30 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { VitePWA } from 'vite-plugin-pwa';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    svelte(),
+    VitePWA({
+      includeAssets: ['favicon.png', 'apple-touch-icon.png'],
+      manifest: {
+        name: 'Doodly',
+        short_name: 'Doodly',
+        description: 'Drawing game with friends',
+        theme_color: '#ffffff',
+        icons: [
+          {
+            src: 'favicon.png',
+            sizes: '256x256',
+            type: 'image/png',
+          },{
+            src: 'favicon-192.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+        ],
+      },
+    }),
+  ],
+});
				`@ -0,0 +1 @@`
				`export type BulmaColour = 'primary' \| 'link' \| 'success' \| 'warning' \| 'danger';`