feat: initial commit

2022-11-10 11:00:40 +00:00 · 2022-11-10 11:00:40 +00:00 · 5c2b5fe673
commit 5c2b5fe673
21 changed files with 3723 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/index.html
+++ b/index.html
@ -0,0 +1,22 @@
+<!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="Secret santa name drawing" />
+    <title>SecSan</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" />
+    <link rel="preconnect" href="https://fonts.bunny.net">
+    <link href="https://fonts.bunny.net/css?family=ubuntu:500" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,24 @@
+{
+  "name": "secsan",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@preact/signals": "^1.1.2",
+    "preact": "^10.11.2"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.4.0",
+    "@types/node": "^18.11.9",
+    "typescript": "^4.6.4",
+    "vite": "^3.2.3",
+    "vite-plugin-pwa": "^0.13.3",
+    "vitest": "^0.25.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/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/app.css
+++ b/src/app.css
@ -0,0 +1,188 @@
+:root {
+  --background: #13092b;
+  --background-transparent: #13092baa;
+  --background-2: #090f2b;
+  --foreground: #ddd;
+  --foreground-bright: #fff;
+  --foreground-dim: #aaa;
+  --error: orange;
+  --accent: #f9027a;
+  --accent-dim: hsl(331, 50%, 49%);
+  --primary: #8da1ee;
+  --confirm: #82f1b1;
+  --warning: #fb7185;
+}
+
+body {
+  font-family: 'Ubuntu', 'Noto Sans', sans-serif;
+  font-size: 24px;
+  background-color: var(--background);
+  background-image: url('https://ashhhleyyy.dev/assets-gen/background.svg');
+  color: var(--foreground);
+  margin: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  min-height: 100vh;
+  max-width: 100vw;
+}
+
+* {
+  box-sizing: inherit;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html {
+      scroll-behavior: smooth;
+  }
+}
+
+main {
+  margin: 16px;
+  padding: 8px;
+  width: calc(100vw - 32px);
+  max-width: 720px;
+  flex: 1;
+  background-color: var(--background-transparent);
+}
+
+a {
+  color: inherit;
+  font-family: inherit;
+}
+
+h1 {
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+h1::before {
+  content: '# ';
+  margin-right: 16px;
+  color: var(--foreground-dim);
+  font-family: 'JetBrains Mono', 'Oxygen Mono', monospace;
+}
+
+h2::before {
+  content: '## ';
+  color: var(--foreground-dim);
+  font-family: 'JetBrains Mono', 'Oxygen Mono', monospace;
+}
+
+h3::before {
+  content: '### ';
+  color: var(--foreground-dim);
+  font-family: 'JetBrains Mono', 'Oxygen Mono', monospace;
+}
+
+h4::before {
+  content: '#### ';
+  color: var(--foreground-dim);
+  font-family: 'JetBrains Mono', 'Oxygen Mono', monospace;
+}
+
+h5::before {
+  content: '##### ';
+  color: var(--foreground-dim);
+  font-family: 'JetBrains Mono', 'Oxygen Mono', monospace;
+}
+
+h6::before {
+  content: '###### ';
+  color: var(--foreground-dim);
+  font-family: 'JetBrains Mono', 'Oxygen Mono', monospace;
+}
+
+button {
+  border: none;
+  padding: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: initial;
+  color: black;
+  transition: filter 200ms ease;
+  vertical-align: middle;
+  font-family: inherit;
+}
+
+button:hover {
+  filter: brightness(.8);
+}
+
+button.primary {
+  background-color: var(--primary);
+}
+
+button.confirm {
+  background-color: var(--confirm);
+}
+
+button.warning {
+  background-color: var(--warning);
+}
+
+button:disabled {
+  filter: saturate(25%) brightness(.85);
+  cursor: not-allowed;
+}
+
+a.primary {
+  color: var(--primary);
+}
+
+a.confirm {
+  color: var(--confirm);
+}
+
+a.warning {
+  color: var(--warning);
+}
+
+input {
+  margin: 8px 0;
+  background-color: rgba(128, 128, 128, .25);
+  color: white;
+  border: #888 2px solid;
+  padding: 8px;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: medium;
+}
+
+input[type="text"]:focus-visible,
+input[type="password"]:focus-visible {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.button-row {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 8px 0;
+}
+
+.button-row button {
+  flex: 1;
+}
+
+.button-group {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 8px;
+  margin: 8px 0;
+}
+
+.drawn-name {
+  font-size: 72px;
+  width: 100%;
+  display: grid;
+  place-content: center;
+}
--- a/src/app.tsx
+++ b/src/app.tsx
@ -0,0 +1,24 @@
+import { signal } from '@preact/signals';
+import { useState } from 'preact/hooks';
+import './app.css';
+import DrawName from './pages/DrawName';
+import EnterNames from './pages/EnterNames';
+import { buildNameMap } from './shuffle';
+
+const names = signal<string[]>([]);
+
+export function App() {
+  const [shuffled, setShuffled] = useState<[string, string][] | null>(null);
+
+  function start() {
+    setShuffled(buildNameMap(names.value));
+  }
+
+  return (
+    <main>
+      <h1>Secret Santa</h1>
+
+      {shuffled ? <DrawName names={shuffled} /> : <EnterNames start={start} names={names} />}
+    </main>
+  )
+}
--- a/src/index.css
+++ b/src/index.css
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,5 @@
+import { render } from 'preact'
+import { App } from './app'
+import './index.css'
+
+render(<App />, document.getElementById('app') as HTMLElement)
--- a/src/pages/DrawName.tsx
+++ b/src/pages/DrawName.tsx
@ -0,0 +1,50 @@
+import { FunctionComponent } from "preact";
+import { useState } from "preact/hooks";
+import { useWindowEvent } from "../util";
+
+interface Props {
+    names: [string, string][];
+}
+
+const DrawName: FunctionComponent<Props> = ({ names }) => {
+    const [currentPerson, setCurrentPerson] = useState<number | null>(null);
+    const [completed, setCompleted] = useState<number[]>([]);
+
+    useWindowEvent('click', (e) => {
+        if (e.button !== 0) return;
+
+        if (currentPerson !== null) {
+            setCompleted(completed => [...completed, currentPerson])
+            setCurrentPerson(null);
+        }
+    });
+
+    if (currentPerson === null) {
+        if (completed.length === names.length) {
+            return <>
+                <h2>
+                    All done!
+                </h2>
+            </>
+        }
+        return <>
+            <div class="button-group">
+                {names.map(([name, _], i) => {
+                    if (completed.includes(i)) {
+                        return null;
+                    } else {
+                        return <button key={i + "-" + name} class="primary" onClick={() => setCurrentPerson(i)}>{name}</button>;
+                    }
+                })}
+            </div>
+        </>
+    }
+
+    return <>
+        <div class="drawn-name">
+            {names[currentPerson][1]}
+        </div>
+    </>
+}
+
+export default DrawName;
--- a/src/pages/EnterNames.tsx
+++ b/src/pages/EnterNames.tsx
@ -0,0 +1,52 @@
+import { Signal } from "@preact/signals";
+import { FunctionComponent } from "preact";
+import { useState } from "preact/hooks";
+
+interface Props {
+    names: Signal<string[]>;
+    start: () => void;
+}
+
+const EnterNames: FunctionComponent<Props> = ({ names, start }) => {
+    const [name, setName] = useState('');
+
+    function addName() {
+        if (name === '') return;
+        if (names.value.includes(name)) {
+            alert(`${name} has already been added!`);
+            return;
+        }
+        names.value = [...names.value, name];
+        setName('');
+    }
+
+    return <>
+        <ul>
+            {names.value.map((name, i) => <li key={i + "-" + name}>
+                {name}
+            </li>)}
+        </ul>
+
+        <div>
+            <input
+                type="text"
+                placeholder="Name..."
+                value={name}
+                onInput={(e) => setName((e.target! as HTMLInputElement).value)}
+                onKeyPress={(e) => {
+                    if (e.key === 'Enter') {
+                        addName();
+                        e.preventDefault();
+                    }
+                }}
+                />
+
+            <div class="button-row">
+                <button class="primary" onClick={addName}>Add name</button>
+                <button class='confirm' disabled={names.value.length <= 1} onClick={start}>Start drawing</button>
+            </div>
+        </div>
+    </>
+}
+
+export default EnterNames;
--- a/src/shuffle.ts
+++ b/src/shuffle.ts
@ -0,0 +1,56 @@
+// https://stackoverflow.com/a/2450976
+function shuffle<T>(array: T[]) {
+    let currentIndex = array.length,  randomIndex;
+
+    // While there remain elements to shuffle.
+    while (currentIndex != 0) {
+        // Pick a remaining element.
+        randomIndex = Math.floor(Math.random() * currentIndex);
+        currentIndex--;
+
+        // And swap it with the current element.
+        [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
+    }
+
+    return array;
+}
+
+function checkShuffled<T>(old: T[], nw: T[]): boolean {
+    if (old.length !== nw.length) {
+        throw new Error('cannot compare arrays of non-equal length');
+    }
+
+    if (old.length <= 1) {
+        return true;
+    }
+
+    for (let i = 0; i < old.length; i++) {
+        if (old[i] === nw[i]) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+function nonEqualShuffle<T>(input: T[]): T[] {
+    const nw = input.slice();
+
+    shuffle(nw);
+    while (!checkShuffled(input, nw)) {
+        shuffle(nw);
+    }
+
+    return nw;
+}
+
+export function buildNameMap(names: string[]): [person: string, target: string][] {
+    const ret: [string, string][] = [];
+
+    const shuffled = nonEqualShuffle(names);
+    for (let i = 0; i < shuffled.length; i++) {
+        ret.push([names[i], shuffled[i]]);
+    }
+
+    return ret;
+}
--- a/src/util.ts
+++ b/src/util.ts
@ -0,0 +1,8 @@
+import { useEffect } from "preact/hooks";
+
+export function useWindowEvent<K extends keyof WindowEventMap>(type: K, listener: (this: Window, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void {
+    useEffect(() => {
+        window.addEventListener(type, listener, options);
+        return () => window.removeEventListener(type, listener);
+    });
+}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/test/shuffle.test.ts
+++ b/test/shuffle.test.ts
@ -0,0 +1,12 @@
+import { expect, test } from 'vitest';
+import { buildNameMap } from '../src/shuffle';
+
+test('shuffle does not include matching pairs', () => {
+    const names = Array(10).fill(null).map((_, i) => "Test " + i);
+    for (let i = 0; i < 50000; i++) {
+        const shuffled = buildNameMap(names);
+        for (const pair of shuffled) {
+            expect(pair[0]).not.toBe(pair[1]);
+        }
+    }
+});
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,37 @@
+import { defineConfig } from 'vite';
+import preact from '@preact/preset-vite';
+import { VitePWA } from 'vite-plugin-pwa';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    preact(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.png', 'apple-touch-icon.png'],
+      manifest: {
+        name: 'SecSan',
+        short_name: 'SecSan',
+        description: 'Secret santa name drawing',
+        theme_color: '#ffffff',
+        icons: [
+          {
+            src: 'favicon.png',
+            sizes: '256x256',
+            type: 'image/png',
+          },
+          {
+            src: 'favicon-192.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+        ],
+      },
+    }),
+  ],
+  server: {
+    hmr: {
+      clientPort: parseInt(process.env.CLIENT_PORT || '5173'),
+    },
+  },
+});
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>