From 8a6d89551eae7f2473a6c1fdc1eceaf4c29f87b8 Mon Sep 17 00:00:00 2001 From: Ardis Lu Date: Sun, 8 Jan 2023 22:49:58 -0800 Subject: [PATCH] Initial commit --- README.md | 5 +++ index.html | 71 ++++++++++++++++++++++++++++++++++++ script.js | 26 ++++++++++++++ sleepy-operators.js | 38 ++++++++++++++++++++ style.css | 88 +++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 228 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 script.js create mode 100644 sleepy-operators.js create mode 100644 style.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..9974fe1 --- /dev/null +++ b/README.md @@ -0,0 +1,5 @@ +# sleepy-operators + +An assortment of sleep-based operators to make your programs sleepier. + +Or: `sleepsort` but for everything. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..f6b40eb --- /dev/null +++ b/index.html @@ -0,0 +1,71 @@ + + + + + + + + + sleepy-operators + + + +

sleepy-operators

+ + + + +

+ +

Open the DevTools console to start the demo.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

OS	Browser	Shortcut
Windows/Linux	Chrome/Edge	`Ctrl` + `Shift` + `J`
Windows/Linux	Firefox	`Ctrl` + `Shift` + `K`
macOS	Chrome/Edge	`â` + `Option` + `J`
macOS	Firefox	`â` + `Option` + `K`
macOS	Safari	`â` + `Option` + `C`

+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..0d3c5f0 --- /dev/null +++ b/script.js @@ -0,0 +1,26 @@ +import * as sleepy from '/sleepy-operators.js'; + +const ascii = + ` _ + | | + ___ | | ___ ___ _____ _ _ +| __|| || _ || _ || _ || | | |_____ +|__ || || __|| __|| |_| || |_| |_____| +|___||_||___||___|| ___||__ | + | | _| | + |_| |____| + _____ _____ ___ ____ ____ | |_ _____ _____ ___ +| _ | _ | _ || _|/ _ || __|| _ || _ | __| +| |_| | |_| | __|| | | |_| || |__| |_| || | |__ | +|_____| ___|___||__| |_____||____|_____||_| |___| + | | + |_|`; + +function help() { + console.log(`%c ${ascii}`, 'font-weight: bold'); + // TODO: print a helpful demo message +} +globalThis.help = help; +help(); + +globalThis.sleepy = sleepy; diff --git a/sleepy-operators.js b/sleepy-operators.js new file mode 100644 index 0000000..3ccb58a --- /dev/null +++ b/sleepy-operators.js @@ -0,0 +1,38 @@ +/** @module sleepy-operators */ + +/** Internal helper function that converts setTimeout into a promise. */ +async function sleep(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +/** + * The classic sleep sort! + * @param {number[]} arr - An array of numbers to sort. Works best with small numbers :) + * @returns {Promise} A promise that resolves to the sorted array. + */ +export async function sort(arr) { + const output = []; + + await Promise.all(arr.map(i => (async () => { + await sleep(Math.abs(i)); + i >= 0 ? output.push(i) : output.unshift(i); + })())); + + return output; +} + +/** + * Sleepily add together a bunch of numbers to get an approximate sum. The returned sum will + * be greater than the true sum by about 5-15 per input number. + * @param {number[]} arr An array of numbers to sum together. + * @returns {Promise} A promise that resolves to the approximate sum of all the numbers in the input array. + */ +export async function sum(arr) { + const start = performance.now(); + for (const i of arr) { + await sleep(i); + } + const end = performance.now(); + + return end - start; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..f40e6f8 --- /dev/null +++ b/style.css @@ -0,0 +1,88 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; + background: radial-gradient(circle at min(300px, 50% - 8px) 50%, hsl(222deg 50% 20%) 300px, hsl(240deg 50% 5%)); + color: hsl(222deg 50% 80%); + block-size: 100dvh; + inline-size: min(720px, 100% - 16px); + margin-block: 0; + margin-inline: 8px auto; + display: grid; + place-items: center; +} + +header { + display: flex; + align-items: center; +} + +p { + font-size: 1.2rem; +} + +span { + font-weight: 700; +} + +table { + border-collapse: collapse; +} + +tr { + transition: background-color 400ms; +} + +tr:hover, +tr:focus-within { + background: hsl(222deg 50% 15%); + transition: background-color 200ms; +} + +th, +td { + line-height: 2; + padding-block: 8px; + padding-inline: 4px 16px; +} + +/* Optically center the shortcut cell vertically (due to styling) */ +td:has(kbd) { + transform: translateY(-2px); +} + +kbd { + background: linear-gradient(180deg, hsl(0deg 0% 20%), hsl(0deg 0% 10%)); + font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; + font-weight: bold; + font-size: 0.75em; + padding-block: 3px; + padding-inline: 6px; + border: 1px solid; + border-radius: 8px; + margin-inline: 4px; +} + +a { + text-decoration: none; + font-weight: 700; + color: inherit; +} + +a>svg { + inline-size: 24px; + block-size: 24px; + padding: 12px; + padding-block-end: 0; + border-radius: 16px; + transition: transform 600ms, filter 800ms; +} + +a>svg:hover, +a>svg:focus-within { + filter: brightness(130%); + transform: translateY(-4px); + transition: transform 200ms, filter 300ms; +} + +abbr:has(kbd) { + text-decoration: none; +} \ No newline at end of file -- 2.47.3