mbk/davehash
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wow

Browse source
This commit is contained in:
mehbark 2023-04-17 00:24:30 -04:00
parent a5b5f3ff40
commit d32e22ee2b
7 changed files with 413 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
package.json
View file

@ -1,43 +1,44 @@
{ {
"name": "davehash", "name": "davehash",
"version": "0.1.0", "homepage": "davehash/",
"private": true, "version": "0.1.0",
"dependencies": { "private": true,
"@testing-library/jest-dom": "^5.16.5", "dependencies": {
"@testing-library/react": "^13.4.0", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/user-event": "^13.5.0", "@testing-library/react": "^13.4.0",
"@types/jest": "^27.5.2", "@testing-library/user-event": "^13.5.0",
"@types/node": "^16.18.23", "@types/jest": "^27.5.2",
"@types/react": "^18.0.35", "@types/node": "^16.18.23",
"@types/react-dom": "^18.0.11", "@types/react": "^18.0.35",
"react": "^18.2.0", "@types/react-dom": "^18.0.11",
"react-dom": "^18.2.0", "react": "^18.2.0",
"react-scripts": "5.0.1", "react-dom": "^18.2.0",
"typescript": "^4.9.5", "react-scripts": "5.0.1",
"web-vitals": "^2.1.4" "typescript": "^4.9.5",
}, "web-vitals": "^2.1.4"
"scripts": { },
"start": "react-scripts start", "scripts": {
"build": "react-scripts build", "start": "react-scripts start",
"test": "react-scripts test", "build": "react-scripts build",
"eject": "react-scripts eject" "test": "react-scripts test",
}, "eject": "react-scripts eject"
"eslintConfig": { },
"extends": [ "eslintConfig": {
"react-app", "extends": [
"react-app/jest" "react-app",
] "react-app/jest"
}, ]
"browserslist": { },
"production": [ "browserslist": {
">0.2%", "production": [
"not dead", ">0.2%",
"not op_mini all" "not dead",
], "not op_mini all"
"development": [ ],
"last 1 chrome version", "development": [
"last 1 firefox version", "last 1 chrome version",
"last 1 safari version" "last 1 firefox version",
] "last 1 safari version"
} ]
}
} }

44
public/index.html
View file

@ -1,21 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#e00707" />
<meta <meta name="description" content="a cool set of hashing algorithms" />
name="description" <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
content="Web site created using create-react-app" <!--
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML. Only files inside the `public` folder can be referenced from the HTML.
@ -24,12 +21,18 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>davehash</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>
<div id="root"></div> you need to enable javascript to run this app
<!-- <br />
i know that's not very cool
<br />
sorry
</noscript>
<div id="root"></div>
<!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.
@ -38,6 +41,5 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> --></body>
</body>
</html> </html>

46
public/manifest.json
View file

@ -1,25 +1,25 @@
{ {
"short_name": "React App", "short_name": "davehash",
"name": "Create React App Sample", "name": "davehash",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16", "sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon" "type": "image/x-icon"
}, },
{ {
"src": "logo192.png", "src": "logo192.png",
"type": "image/png", "type": "image/png",
"sizes": "192x192" "sizes": "192x192"
}, },
{ {
"src": "logo512.png", "src": "logo512.png",
"type": "image/png", "type": "image/png",
"sizes": "512x512" "sizes": "512x512"
} }
], ],
"start_url": ".", "start_url": "./davehash/",
"display": "standalone", "display": "standalone",
"theme_color": "#000000", "theme_color": "#000000",
"background_color": "#ffffff" "background_color": "#ffffff"
} }

42
src/App.css
View file

@ -1,38 +1,38 @@
.App { .App {
text-align: center; text-align: center;
display: inline-block;
} }
.App-logo { .App-logo {
height: 40vmin; height: 40vmin;
pointer-events: none; pointer-events: none;
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.App-logo { .App-logo {
animation: App-logo-spin infinite 20s linear; animation: App-logo-spin infinite 20s linear;
} }
} }
.App-header { .App-header {
background-color: #282c34; background-color: white;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; /* justify-content: center; */
font-size: calc(10px + 2vmin); font-size: 14px;
color: white;
} }
.App-link { .App-link {
color: #61dafb; color: #61dafb;
} }
@keyframes App-logo-spin { @keyframes App-logo-spin {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }

81
src/App.tsx
View file

@ -1,26 +1,65 @@
import React from 'react'; import React, { useState } from "react";
import logo from './logo.svg'; import "./App.css";
import './App.css'; import DaveHash, { hashes, HashFn, ShowHashDesc } from "./DaveHash";
function App() { function App() {
return ( let [name, setName] = useState("");
<div className="App"> let [yVowel, setYVowel] = useState(true);
<header className="App-header"> let [size, setSize] = useState(10);
<img src={logo} className="App-logo" alt="logo" /> let [hash_fn, setHashFn] = useState(() => hashes[0].fn);
<p>
Edit <code>src/App.tsx</code> and save to reload. return (
</p> <div className="App App-header">
<a <input onChange={e => setName(e.target.value)} value={name}></input>
className="App-link" <div style={{ display: "flex" }}>
href="https://reactjs.org" <p>Y is a vowel:</p>
target="_blank" <input
rel="noopener noreferrer" type="checkbox"
> checked={yVowel}
Learn React onChange={_ => setYVowel(!yVowel)}
</a> ></input>
</header> </div>
</div> <div
); style={{
display: "flex",
alignItems: "center",
}}
>
<p>Sylladex size:</p>
<input
onChange={e => {
let new_size = parseInt(e.target.value, 10);
return setSize(new_size == new_size ? new_size : 0);
}}
value={size}
width="10vw"
></input>
</div>
<div
className="hash-fns"
children={hashes.map((h, i) => (
<div
key={i}
onClick={() => setHashFn(() => h.fn)}
className={
`${h.fn}` == `${hash_fn}` ? "active-hash-fn" : ""
}
>
<ShowHashDesc bla={h.bla} />
</div>
))}
></div>
<br />
<DaveHash
text={name}
y_vowel={yVowel}
sylladex_size={size}
hash_fn={hash_fn}
/>
</div>
);
} }
// TODO: more hash functions (configurable) and, like, an actual sylladex thingy (optional detect collisions)
export default App; export default App;

177
src/DaveHash.tsx Normal file
View file

@ -0,0 +1,177 @@
import { Fragment } from "react";
export default function DaveHash({
text,
y_vowel = false,
sylladex_size = 10,
hash_fn = basic_hash,
}: {
text: string;
y_vowel?: boolean;
sylladex_size?: number;
hash_fn?: HashFn;
}): JSX.Element {
let letters = text.toUpperCase().split("");
let math_result = (
<span> {math({ letters, y_vowel, sylladex_size, hash_fn })}</span>
);
// children.push();
let letters__ = (
<div style={{ display: "block" }} className="davehash">
<Word letters={letters} y_vowel={y_vowel} hash_fn={hash_fn} />
{math_result}
</div>
);
return letters__;
}
function Word({
letters,
y_vowel,
hash_fn,
}: {
letters: string[];
y_vowel: boolean;
hash_fn: HashFn;
}): JSX.Element {
let children = letters.map((letter, i) => (
<Fragment key={i}>{Letter({ letter, y_vowel, hash_fn })}</Fragment>
));
return <Fragment children={children}></Fragment>;
}
function math({
letters,
y_vowel,
sylladex_size,
hash_fn,
}: {
letters: string[];
y_vowel: boolean;
sylladex_size: number;
hash_fn: HashFn;
}): string {
let nums: number[] = letters
.filter(is_letter)
.map(l => hash_fn(l, y_vowel).value);
let sum = nums.reduce((a, b) => a + b, 0);
return `(${
nums.length > 0 ? nums.join("+") : 0
} = ${sum}%${sylladex_size} = ${sum % sylladex_size})`;
}
type HashResult = { color: Color; value: number };
// prettier-ignore
type AsciiLetter =
| "A" | "B" | "C" | "D" | "E"
| "F" | "G" | "H" | "I" | "J"
| "K" | "L" | "M" | "N" | "O"
| "P" | "Q" | "R" | "S" | "T"
| "U" | "V" | "W" | "X" | "Y"
| "Z";
export type HashFn = (_: AsciiLetter, y_vowel: boolean) => HashResult;
type Color = string;
type HashLetterAssoc = [AsciiLetter, Color, number];
type HashInfo = { fn: HashFn; bla: HashLetterAssoc[] };
function Letter({
letter,
y_vowel,
hash_fn,
}: {
letter: string;
y_vowel: boolean;
hash_fn: HashFn;
}): JSX.Element {
return is_letter(letter) ? (
<span style={{ color: hash_fn(letter, y_vowel).color }}>{letter}</span>
) : (
<span className="space">{letter}</span>
);
}
const basic_hash: HashFn = (l, y_vowel) =>
is_vowel(l, y_vowel)
? { color: "red", value: 1 }
: { color: "blue", value: 2 };
function is_vowel(letter: AsciiLetter, y_vowel: boolean): boolean {
let vowels = "aeiou".split("");
if (y_vowel) {
vowels.push("y");
}
return !vowels.every(v => v != letter.toLowerCase());
}
function is_letter(letter: string): letter is AsciiLetter {
let letters = "QWERTYUIOPASDFGHJKLZXCVBNM".split("");
return !letters.every(v => v != letter);
}
const reversed_hash: HashFn = (l, y_vowel) =>
!is_vowel(l, y_vowel)
? { color: "red", value: 1 }
: { color: "blue", value: 2 };
export function ShowHashDesc({ bla }: { bla: HashLetterAssoc[] }): JSX.Element {
return (
<div
className="hash-desc"
children={bla.map((hla, i) => (
<Fragment key={i}>{ShowHashLetterAssoc({ hla })}</Fragment>
))}
></div>
);
}
function ShowHashLetterAssoc({ hla }: { hla: HashLetterAssoc }): JSX.Element {
return (
<p className="hash-letter-assoc">
<span style={{ color: hla[1] }}>{hla[0].toUpperCase()}</span>=
{hla[2]};<span style={{ color: "#00000000" }}> </span>
</p>
);
}
const scrabble_hash: HashFn = (l, _) => {
// prettier-ignore
let dict = {
A: 1, B: 3, C: 3, D: 2, E: 1,
F: 4, G: 2, H: 4, I: 1, J: 8,
K: 5, L: 1, M: 3, N: 1, O: 1,
P: 3, Q: 10, R: 1, S: 1, T: 1,
U: 1, V: 4, W: 4, X: 8, Y: 4,
Z: 10,
};
return { color: "#05d000", value: dict[l] };
};
export const hashes: HashInfo[] = [
{
fn: basic_hash,
bla: [
["C", "blue", 2],
["V", "red", 1],
],
},
{
fn: reversed_hash,
bla: [
["C", "red", 1],
["V", "blue", 2],
],
},
{
fn: scrabble_hash,
bla: "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
.split("")
.map(l => [
l as AsciiLetter,
"#05d000",
scrabble_hash(l as AsciiLetter, false).value,
]),
},
];

75
src/index.css
View file

@ -1,13 +1,72 @@
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: "Courier New", Courier, monospace;
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', font-weight: bold;
sans-serif; -webkit-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale; white-space: pre;
}
#root {
margin-top: 5vh;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace; monospace;
}
.vowel {
color: red;
}
.consonant {
color: blue;
}
.davehash {
font-size: 14px;
display: flex;
}
* {
margin: 0;
max-width: 100vw;
max-height: 100vh;
}
body {
overflow: hidden;
}
.space {
width: 0.75rem;
}
.hash-desc {
display: block;
cursor: pointer;
width: 40vmin;
margin-left: auto;
margin-right: auto;
/* text-overflow: ellipsis; */
overflow: hidden;
text-align: left;
/* max-height: 17px; */
}
.hash-letter-assoc {
display: inline-block;
}
/* .hash-letter-assoc::after {
content: " ";
} */
.active-hash-fn {
background-color: #e7e7e7;
}
input[type="checkbox"] {
cursor: pointer;
} }