UI Overhaul (Incomplete)

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = false

.eslintignore

@@ -0,0 +1,17 @@
+# logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# environment
+node_modules
+dist
+
+# misc
+.husky/__
+.*
+*-env.d.ts

.eslintrc

@@ -0,0 +1,40 @@
+{
+ "env": {
+ "node": true
+ },
+ "extends": [
+ "eslint:recommended",
+ // learn more: https://github.com/jsx-eslint/eslint-plugin-react#installation
+ "plugin:react/recommended",
+ // This disables rules relevant to the new JSX transform as of React 17+
+ // learn more: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform
+ "plugin:react/jsx-runtime",
+ // learn more: https://github.com/import-js/eslint-plugin-import#installation
+ "plugin:import/recommended",
+ // learn more: https://typescript-eslint.io/getting-started
+ "plugin:@typescript-eslint/recommended",
+ // `eslint-config-prettier` disables formatting rules that Prettier is responsible for.
+ // This should ALWAYS be last so it can overwrite the preceding rules
+ // learn more: https://github.com/prettier/eslint-config-prettier#installation
+ "prettier"
+ ],
+ "settings": {
+ "react": {
+ "version": "detect"
+ },
+ "import/parsers": {
+ "@typescript-eslint/parser": [".ts", ".tsx"]
+ },
+ "import/resolver": {
+ "node": {
+ "paths": ["src"]
+ },
+ "typescript": {
+ "alwaysTryTypes": true
+ }
+ }
+ },
+ "rules": {
+ "@typescript-eslint/consistent-type-imports": "error"
+ }
+}

.github/workflows/deploy.yml

@@ -0,0 +1,76 @@
+name: CI/CD
+
+# helpful content:
+# https://dev.to/dyarleniber/setting-up-a-ci-cd-workflow-on-github-actions-for-a-react-app-with-github-pages-and-codecov-4hnp
+
+on:
+ push:
+ branches:
+ - main
+ pull_request:
+ branches:
+ - main
+
+ workflow_dispatch:
+
+concurrency:
+ group: deploy/pages
+ cancel-in-progress: true
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+
+ steps:
+ # Initialize workflow runner
+ - name: Checkout repository 🔎
+ uses: actions/checkout@v3
+
+ - name: Setup Node.js environment ⚙️
+ uses: actions/setup-node@v3
+ with:
+ node-version: 18
+
+ - name: Cache dependencies 🫙
+ uses: actions/cache@v3
+ with:
+ path: |
+ **/node_modules
+ key: ${{ runner.os }}-${{ hashFiles("**/package-lock.json") }}
+
+ - name: Install dependencies 📦
+ run: npm ci
+
+ # Run quality checks
+ - name: Run tests 🧪
+ run: npm test
+
+ - name: Lint codebase ✍️
+ run: npm run lint
+
+ # Build
+ - name: Build static app 🏗️
+ run: npm run build
+
+ - name: Upload artifact 🔄
+ uses: actions/upload-pages-artifact@v1
+ with:
+ path: "dist"
+
+ deploy:
+ needs: build
+
+ permissions:
+ pages: write
+ id-token: write
+
+ environment:
+ name: github-pages
+ url: ${{ steps.deployment.outputs.page_url }}
+
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Deploy to Pages 🚀
+ id: deployment
+ uses: actions/deploy-pages@v1

.gitignore

@@ -0,0 +1,25 @@
+# logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# environment
+node_modules
+dist
+dist-ssr
+*.local
+
+# misc
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint
+npm run format

.prettierignore

@@ -0,0 +1,17 @@
+# logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# environment
+node_modules
+dist
+
+# misc
+.husky/__
+*-lock.json
+index.html

.prettierrc

@@ -0,0 +1,12 @@
+{
+ "arrowParens": "always",
+ "bracketSameLine": false,
+ "bracketSpacing": true,
+ "embeddedLanguageFormatting": "auto",
+ "jsxSingleQuote": false,
+ "printWidth": 80,
+ "quoteProps": "as-needed",
+ "semi": true,
+ "singleQuote": false,
+ "trailingComma": "none"
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+ "recommendations": ["bradlc.vscode-tailwindcss"]
+}

index.html

@@ -1,47 +1,33 @@
 <!DOCTYPE html>
+
 <html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta name="language" content="English" />
+ <meta name="theme-color" content="#f4f4f5" />
+
+ <meta name="title" content="Tower of Hanoi" />
+ <meta name="description" content="Unleash your skills with this free online, mobile-friendly, minimal Tower of Hanoi game. Can you solve each puzzle in the least number of moves?" />
+ <meta name="keywords" content="Tower of Hanoi, game, puzzle, puzzle game, strategy game, web game, HTML5 game, free online game, free game, free mobile game" />
+ <title>Tower of Hanoi</title>
+
+ <!-- Maskable icons generated with Maskable.app: https://maskable.app/editor -->
+ <link rel="apple-touch-icon" href="/icons/apple-touch-180.png" />
+ <link rel="icon" href="/favicon.svg" />
+ <link rel="mask-icon" href="/icons/mask.svg" color="#da69c1" />
+ <link rel="manifest" href="/manifest.json" />
 
-<head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="ie=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <meta name="theme-color" content="#ffffff" />
- <meta name="description" content="A minimal time-passing implementation of the tower of hanoi game" />
- <link rel="shortcut icon" href="./src/app/icons/icon.png" type="image/x-icon">
- <link rel="apple-touch-icon" href="./src/app/icons/icon_192.png">
- <link rel="stylesheet" href="./src/index.css" />
- <link rel="manifest" href="./manifest.json" />
- <title>Tower of Hanoi</title>
-</head>
+ <!-- Odibee Sans: https://fonts.google.com/specimen/Odibee+Sans -->
+ <!-- Inter: https://fonts.google.com/specimen/Inter -->
+ <!-- Material Symbols: https://fonts.google.com/icons -->
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Odibee+Sans&family=Roboto+Condensed:wght@400;700&family=Material+Symbols+Rounded&display=swap" />
 
-<body>
- <main class="content-container">
- <section class="tower" id="start"></section>
- <section class="tower" id="offset"></section>
- <section class="tower" id="end"></section>
- </main>
- <aside class="info-options">
- <input id="disk-slider" type="range" min="4" max="12" value="4" />
- <section>
- <div class="info">
- <div class="moves text">moves: <span class="count"></span></div>
- <div class="disks text">disks: <span class="count"></span></div>
- </div>
- <div class="options">
- <div class="icon reset"></div>
- <div class="icon hash"></div>
- <div class="icon moon"></div>
- </div>
- </section>
- </aside>
- <script src="./src/index.js"></script>
- <script>
- if ("serviceWorker" in navigator)
- navigator.serviceWorker.register("./sw.js")
- .then(registration =>
- console.log(`Registered sw.js @${registration.scope}`)
- )
- </script>
-</body>
+ <script defer src="/src/index.tsx" type="module"></script>
+ </head>
 
-</html>
+ <body>
+ <div id="root" class="grid grid-rows-[auto_1fr] h-full"></div>
+ </body>
+</html>

jest.config.ts

@@ -0,0 +1,14 @@
+import { pathsToModuleNameMapper } from "ts-jest";
+import { compilerOptions } from "./tsconfig.json";
+import type { JestConfigWithTsJest } from "ts-jest";
+
+const config: JestConfigWithTsJest = {
+ moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
+ modulePaths: [compilerOptions.baseUrl],
+ preset: "ts-jest",
+ roots: ["<rootDir>"],
+ testEnvironment: "node",
+ verbose: true
+};
+
+export default config;