feat: initial version (#1)

* feat: basic gameplay

* build: build settings

* ci: basic deploy flow

* build: building for deploy

* build: dictionary building on CI

* build: dictionary building on CI

.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    extends: [
+        '@tophat/eslint-config/base',
+        '@tophat/eslint-config/jest',
+        '@tophat/eslint-config/web',
+    ],
+}

.github/workflows/main.yml

@@ -0,0 +1,59 @@
+name: Publish
+
+on:
+  push:
+    branches: main
+  pull_request:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    name: Publish
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        id: node-setup
+        with:
+          node-version: 16
+      - name: Install
+        run: yarn
+      - name: Build
+        run: yarn build:frontend
+      - name: Build dictionary
+        env:
+          DICTIONARY_TAG: rev_22-01-2022-22-04
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh release download --repo mcataford/words ${{ env.DICTIONARY_TAG }}
+          yarn ts-node script/buildDictionary.ts
+      - name: Deploy preview
+        if: ${{ github.ref != 'refs/heads/main' }}
+        id: preview-deploy
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        run: |
+          yarn netlify deploy > output.log
+          echo "::set-output name=draft-url::$(grep 'Website Draft URL' output.log)"
+      - name: Report
+        if: ${{ github.ref != 'refs/heads/main' }}
+        uses: actions/github-script@v2
+        env:
+          DRAFT_URL: ${{ steps.preview-deploy.outputs.draft-url }}
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            github.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: `:eyes: Branch deployed at ${process.env.DRAFT_URL}`
+            })
+      - name: Deploy
+        if: ${{ github.ref == 'refs/heads/main' }}
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        run: |
+          yarn netlify deploy --prod
+

.gitignore

@@ -6,6 +6,20 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 
+**/.netlify
+
+*.txt
+puzzles.sqlite
+
+.pnp.*
+**/.yarn/*
+!**/.yarn/patches
+!**/.yarn/plugins
+!**/.yarn/releases
+!**/.yarn/sdks
+!**/.yarn/versions
+
+**/.parcel-cache
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-sources.cjs

README.md

@@ -1 +1 @@
-# infinite-wordle
+# wordle

netlify.toml

@@ -0,0 +1,9 @@
+[dev]
+    command = "yarn parcel serve packages/frontend/src/index.html"
+
+[build]
+    publish = "dist"
+
+[functions]
+    directory = "packages/backend/src/"
+    included_files = ["puzzles.sqlite"]

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "wordle",
+  "private": true,
+  "workspaces": {
+    "packages": [
+      "packages/*"
+    ]
+  },
+  "scripts": {
+    "start": "yarn netlify dev",
+    "lint:fix": "yarn eslint packages/**/src/**/*.(t|j)s script/*.(t|j)s --fix",
+    "build:frontend": "yarn parcel build packages/frontend/src/index.html --dist-dir ./dist"
+  },
+  "devDependencies": {
+    "@tophat/eslint-config": "^2.0.0",
+    "@tophat/eslint-import-resolver-require": "^0.1.3",
+    "@types/node": "^17.0.8",
+    "@types/sqlite3": "^3.1.8",
+    "@typescript-eslint/eslint-plugin": "^5.9.1",
+    "@typescript-eslint/parser": "^5.9.1",
+    "eslint": "^8.6.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jest": "^25.3.4",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^27.4.7",
+    "netlify-cli": "^8.6.18",
+    "parcel": "^2.1.1",
+    "prettier": "^2.5.1",
+    "ts-node": "^10.4.0",
+    "typescript": "^4.5.4"
+  }
+}

packages/backend/package.json

@@ -0,0 +1,9 @@
+{
+    "name": "backend",
+    "private": true,
+    "dependencies": {
+        "@netlify/functions": "^0.10.0",
+        "@shared/types": "workspace:packages/types",
+        "sqlite3": "^5.0.2"
+    }
+}

packages/backend/src/api/constants.ts

@@ -0,0 +1,6 @@
+export const DEFAULT_PUZZLE_LENGTH = 5
+
+export const pathsMap = {
+    '^puzzle/(?<puzzleId>[0-9]+)/?$': 'puzzle-detail',
+    '^$': 'puzzle-list',
+}

packages/backend/src/api/index.ts

@@ -0,0 +1,64 @@
+import { Handler } from '@netlify/functions'
+import type { PuzzleAttemptResponse, PuzzleDetails } from '@shared/types'
+
+import { DEFAULT_PUZZLE_LENGTH } from './constants'
+import { analyzeAttempt, isWordValid, parsePath } from './utils'
+import { getPuzzleById, getRandomPuzzle } from './orm'
+
+async function handleListRequest(event) {
+    if (!['GET'].includes(event.httpMethod)) return { statusCode: 405 }
+
+    const length = parseInt(
+        event.queryStringParameters.puzzleLength ?? DEFAULT_PUZZLE_LENGTH,
+    )
+    const puzzle = await getRandomPuzzle(length)
+    const response: PuzzleDetails = {
+        id: puzzle.id,
+        length: puzzle.solution.length,
+    }
+
+    return { statusCode: 200, body: JSON.stringify(response) }
+}
+
+async function handleDetailRequest(event, context, parsedPath) {
+    if (!['POST', 'GET'].includes(event.httpMethod)) return { statusCode: 405 }
+
+    const puzzleId = parsedPath.parameters.puzzleId
+
+    const puzzleSolution = await getPuzzleById(parseInt(puzzleId))
+
+    if (!puzzleSolution) return { statusCode: 400 }
+
+    if (event.httpMethod === 'GET')
+        return {
+            statusCode: 200,
+            body: JSON.stringify({ length: puzzleSolution.solution.length }),
+        }
+
+    if (event.httpMethod === 'POST') {
+        const body = JSON.parse(event.body)
+
+        const isValid = await isWordValid(body.attempt)
+        const response: PuzzleAttemptResponse = {
+            feedback: isValid
+                ? analyzeAttempt(body.attempt, puzzleSolution.solution)
+                : [],
+            attempt: body.attempt,
+            accepted: isValid,
+        }
+
+        return { statusCode: 200, body: JSON.stringify(response) }
+    }
+}
+
+const handler: Handler = async (event, context) => {
+    const parsedPath = parsePath(event.path)
+
+    if (!parsedPath) return { statusCode: 404 }
+
+    if (parsedPath.label === 'puzzle-list') return handleListRequest(event)
+    else if (parsedPath.label === 'puzzle-detail')
+        return handleDetailRequest(event, context, parsedPath)
+}
+
+export { handler }

packages/backend/src/api/orm.ts

@@ -0,0 +1,45 @@
+import * as sqlite from 'sqlite3'
+
+import type { PuzzleRecord } from './types'
+
+const database = new sqlite.Database('./puzzles.sqlite')
+
+export async function getRandomPuzzle(length): Promise<PuzzleRecord> {
+    return new Promise((resolve, reject) => {
+        database.all(
+            `select * from puzzles WHERE length(solution) = ${length} ORDER BY RANDOM() limit 1;`,
+            (err, rows) => {
+                if (!rows || rows.length !== 1) reject()
+                else resolve(rows[0])
+            },
+        )
+    })
+}
+
+export async function getPuzzleById(
+    puzzleId: number,
+): Promise<PuzzleRecord | null> {
+    return new Promise((resolve) => {
+        database.all(
+            `select * from puzzles WHERE id = ${puzzleId};`,
+            (err, rows) => {
+                if (!rows || rows.length !== 1) resolve(null)
+                else resolve(rows[0])
+            },
+        )
+    })
+}
+
+export async function getPuzzleBySolution(
+    word: string,
+): Promise<PuzzleRecord | null> {
+    return new Promise((resolve) => {
+        database.all(
+            `select * from puzzles WHERE solution = "${word}";`,
+            (err, rows) => {
+                if (!rows || rows.length !== 1) resolve(null)
+                else resolve(rows[0])
+            },
+        )
+    })
+}

packages/backend/src/api/utils.ts

@@ -0,0 +1,60 @@
+import {
+    FragmentFeedbackType,
+    ParsedPath,
+    PuzzleAttemptFragmentFeedback,
+} from '@shared/types'
+
+import { pathsMap } from './constants'
+import { getPuzzleBySolution } from './orm'
+
+export async function isWordValid(word: string): Promise<boolean> {
+    const puzzle = await getPuzzleBySolution(word)
+
+    return !!puzzle
+}
+
+export function analyzeAttempt(
+    attempt: string,
+    solution: string,
+): PuzzleAttemptFragmentFeedback[] {
+    const feedback = []
+
+    for (const idx in [...attempt]) {
+        if (attempt[idx] === solution[idx])
+            feedback.push({
+                letter: attempt[idx],
+                feedback: FragmentFeedbackType.Correct,
+            })
+        else if (solution.includes(attempt[idx]))
+            feedback.push({
+                letter: attempt[idx],
+                feedback: FragmentFeedbackType.Misplaced,
+            })
+        else
+            feedback.push({
+                letter: attempt[idx],
+                feedback: FragmentFeedbackType.Incorrect,
+            })
+    }
+
+    return feedback
+}
+
+export function parsePath(path: string): ParsedPath | undefined {
+    const unprefixedPath = path.replace(/^\/\.netlify\/functions\/api\/?/, '')
+    for (const pathPattern of [...Object.keys(pathsMap)]) {
+        const match = unprefixedPath.match(new RegExp(pathPattern))
+        if (!match) {
+            continue
+        }
+
+        const matchedFragments = Object.entries(match.groups ?? {}).reduce(
+            (acc, [key, value]) => {
+                return { ...acc, [key]: value }
+            },
+            {},
+        )
+
+        return { label: pathsMap[pathPattern], parameters: matchedFragments }
+    }
+}

packages/frontend/package.json

@@ -0,0 +1,9 @@
+{
+    "name": "frontend",
+    "version": "1.0.0",
+    "license": "MIT",
+    "packageManager": "yarn@3.1.1",
+    "dependencies": {
+        "@shared/types": "workspace:packages/types"
+    }
+}

packages/frontend/src/index.css

@@ -0,0 +1,75 @@
+html, body {
+    padding: 0;
+    background-color: #f5f5f5;
+    display: flex;
+    justify-content: center;
+    font-family: 'Source Code Pro', monospace;
+}
+
+#app {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#app-container {
+    max-width: 500px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 5px;
+}
+
+#app-container > section {
+    border: 1px dashed grey;
+    padding: 10px;
+}
+
+#game-grid {
+    display: flex;
+    gap: 5px;
+    width: 100%;
+    flex-direction: column;
+}
+
+#game-grid .row {
+    display: flex;
+    gap: 5px;
+}
+
+#game-grid .cell {
+    width: calc(100% / 5);
+    aspect-ratio: 1;
+    border: 1px solid black;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.misplaced {
+    color: #c14621;
+}
+
+.correct {
+    color: green;
+}
+
+.incorrect {
+    color: grey;
+}
+
+#game-grid .cell[data-status="misplaced"] {
+    background-color: #c14621;
+}
+
+#game-grid .cell[data-status="correct"] {
+    background-color: green;
+}
+
+#game-grid .cell[data-status="incorrect"] {
+    background-color: grey;
+}

packages/frontend/src/index.html

@@ -0,0 +1,27 @@
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="index.css"/>
+        <script type="module" src="index.ts"></script>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;800&display=swap"
+        rel="stylesheet"> 
+    </head>
+    <body>
+        <div id="app-container">
+        <header>
+            <h1>Infinite wordle</h1>
+        </header>
+        <section>
+            <h2>How to play</h2>
+            <p>A wordle puzzle is simple: you must guess a randomly chosen word in at most as many guesses as it has
+            letters.</p>
+            <p>In each guess, letters marked in <strong class="correct">this color</strong> are at the right place,
+            anything <strong class="misplaced">this color</strong> is present in the word, but misplaced and anything
+            <strong class="incorrect">like this</strong> is not part of the word at all.</p>
+        </section>
+        <main id="app"></main>
+        </div>
+    </body>
+</html>

packages/frontend/src/index.ts

@@ -0,0 +1,111 @@
+import {
+    GameState,
+    PuzzleAttemptFragmentFeedback,
+    PuzzleAttemptResponse,
+} from '@shared/types'
+
+async function validateAttempt(
+    attempt: string,
+    puzzleId: number,
+): Promise<PuzzleAttemptResponse> {
+    const response = await fetch(
+        `/.netlify/functions/api/puzzle/${puzzleId}/`,
+        { method: 'POST', body: JSON.stringify({ attempt }) },
+    )
+    const body = await response.json()
+
+    return body as PuzzleAttemptResponse
+}
+
+/*
+ * Draws the game grid as the root element's sole child.
+ */
+function draw(state: GameState) {
+    const rootElement = document.getElementById('app')
+
+    const letters = [...state.pastAttempts, state.currentWord]
+
+    const cellTable = document.createElement('div')
+    cellTable.id = 'game-grid'
+    for (let height = 0; height < state.puzzleSize; height++) {
+        const row = document.createElement('div')
+        row.className = "row"
+        const currentWord = letters.length > 0 ? letters.shift() : []
+
+        for (let width = 0; width < state.puzzleSize; width++) {
+            const cell = document.createElement('div')
+            cell.className = "cell"
+
+            if (width < currentWord.length) {
+                const cellData = currentWord[width]
+                cell.appendChild(document.createTextNode(cellData.letter))
+
+                cell.dataset.status = (
+                    cellData as PuzzleAttemptFragmentFeedback
+                ).feedback
+            }
+            row.appendChild(cell)
+        }
+        cellTable.appendChild(row)
+    }
+
+    const existingGrid = rootElement.children?.[0]
+
+    if (existingGrid) rootElement.replaceChild(cellTable, existingGrid)
+    else rootElement.appendChild(cellTable)
+}
+
+async function initialize() {
+    const response = await fetch('/.netlify/functions/api/')
+    const body = await response.json()
+
+    const gridWidth = body.length
+
+    const state: GameState = {
+        currentWord: [],
+        pastAttempts: [],
+        puzzleSize: gridWidth,
+        puzzleId: body.id,
+    }
+
+    draw(state)
+
+    window.addEventListener('keydown', async (event) => {
+        const { ctrlKey, shiftKey, key } = event
+        let handled = false
+        if (
+            key.match(/^[a-zA-Z]$/) &&
+            !shiftKey &&
+            !ctrlKey &&
+            state.currentWord.length < state.puzzleSize
+        ) {
+            state.currentWord.push({ letter: key.toLowerCase() })
+            handled = true
+        } else if (
+            key === 'Enter' &&
+            state.currentWord.length === state.puzzleSize
+        ) {
+            const currentWord = state.currentWord
+                .map((fragment) => fragment.letter)
+                .join('')
+            const result = await validateAttempt(currentWord, state.puzzleId)
+
+            if (result.accepted) {
+                state.pastAttempts.push(result.feedback)
+            }
+
+            state.currentWord = []
+            handled = true
+        } else if (key === 'Backspace' && state.currentWord.length > 0) {
+            state.currentWord = state.currentWord.slice(0, -1)
+            handled = true
+        }
+
+        if (handled) {
+            draw(state)
+            event.preventDefault()
+        }
+    })
+}
+
+initialize()

packages/types/index.ts

@@ -0,0 +1,43 @@
+export enum FragmentFeedbackType {
+    Correct = 'correct',
+    Misplaced = 'misplaced',
+    Incorrect = 'incorrect',
+}
+
+export interface PuzzleRecord {
+    id: number
+    solution: string
+}
+
+export interface ParsedPath {
+    label: string
+    parameters: {
+        [key: string]: string
+    }
+}
+
+export interface PuzzleDetails {
+    length: number
+    id: number
+}
+
+export interface PuzzleAttemptFragment {
+    letter: string
+}
+
+export interface PuzzleAttemptFragmentFeedback extends PuzzleAttemptFragment {
+    feedback: FragmentFeedbackType
+}
+
+export interface PuzzleAttemptResponse {
+    feedback: PuzzleAttemptFragmentFeedback[]
+    attempt: string
+    accepted: boolean
+}
+
+export interface GameState {
+    currentWord: PuzzleAttemptFragment[]
+    pastAttempts: PuzzleAttemptFragmentFeedback[][]
+    puzzleSize: number
+    puzzleId: number
+}

packages/types/package.json

@@ -0,0 +1,3 @@
+{
+    "name": "@shared/types"
+}

script/buildDictionary.ts

@@ -0,0 +1,45 @@
+import { promises as fs } from 'fs'
+
+import * as sqlite3 from 'sqlite3'
+
+async function getDictionarySource(
+    url: string,
+    databasePath: string,
+): Promise<void> {
+    const database = new sqlite3.Database(databasePath)
+    const queries: string[] = []
+
+    queries.push(
+        'CREATE TABLE puzzles (id INTEGER PRIMARY KEY AUTOINCREMENT, solution TEXT NOT NULL);',
+    )
+
+    const src = await fs.readFile(url, 'utf-8')
+
+    const lines = src.split('\n').map((word) => word.toLowerCase())
+
+    console.group('Building database')
+    const dbStart = Date.now()
+    const queryParts: string[] = []
+    for (const line of lines) {
+        // Reject anything non-alpha
+        if (!line.match(/^[a-z]{3,}$/)) continue
+
+        queryParts.push(`(NULL, "${line}")`)
+    }
+    console.info(`Selected ${queryParts.length} words from file`)
+
+    queries.push(`INSERT INTO puzzles VALUES ${queryParts.join(',')};`)
+
+    database.serialize(() => {
+        for (const query of queries) database.run(query)
+    })
+    const dbEnd = Date.now() - dbStart
+    console.info(`Inserted ${queries.length} records (${dbEnd} ms)`)
+    console.groupEnd()
+}
+const WORD_LIST = './dictionary_common.txt'
+const DATABASE_PATH = './puzzles.sqlite'
+
+getDictionarySource(WORD_LIST, DATABASE_PATH).catch((e) => {
+    throw e
+})