ash/secsan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity

feat: initial commit

Browse source
This commit is contained in:
Ashhhleyyy 2022-11-10 11:00:40 +00:00
commit 5c2b5fe673
Signed by: ash
GPG key ID: 83B789081A0878FB
21 changed files with 3723 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
.gitignore vendored Normal file
View file

@ -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?

22
index.html Normal file
View file

@ -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>

24
package.json Normal file
View file

@ -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"
}
}

3188
pnpm-lock.yaml Normal file
View file

File diff suppressed because it is too large Load diff

BIN
public/apple-touch-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/favicon-192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
public/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

1
public/vite.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

188
src/app.css Normal file
View file

@ -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;
}

24
src/app.tsx Normal file
View file

@ -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>
)
}

0
src/index.css Normal file
View file

5
src/main.tsx Normal file
View file

@ -0,0 +1,5 @@
import { render } from 'preact'
import { App } from './app'
import './index.css'
render(<App />, document.getElementById('app') as HTMLElement)

50
src/pages/DrawName.tsx Normal file
View file

@ -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;

52
src/pages/EnterNames.tsx Normal file
View file

@ -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;

56
src/shuffle.ts Normal file
View file

@ -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;
}

8
src/util.ts Normal file
View file

@ -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);
});
}

1
src/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="vite/client" />

12
test/shuffle.test.ts Normal file
View file

@ -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]);
}
}
});

22
tsconfig.json Normal file
View file

@ -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" }]
}

9
tsconfig.node.json Normal file
View file

@ -0,0 +1,9 @@
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

37
vite.config.ts Normal file
View file

@ -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'),
},
},
});