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

1
package.json
View file

@ -1,5 +1,6 @@
{ {
"name": "davehash", "name": "davehash",
"homepage": "davehash/",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {

20
public/index.html
View file

@ -4,11 +4,8 @@
<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"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <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
@ -24,10 +21,16 @@
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>
you need to enable javascript to run this app
<br />
i know that's not very cool
<br />
sorry
</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <!--
This HTML file is a template. This HTML file is a template.
@ -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>

6
public/manifest.json
View file

@ -1,6 +1,6 @@
{ {
"short_name": "React App", "short_name": "davehash",
"name": "Create React App Sample", "name": "davehash",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "favicon.ico",
@ -18,7 +18,7 @@
"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"

8
src/App.css
View file

@ -1,5 +1,6 @@
.App { .App {
text-align: center; text-align: center;
display: inline-block;
} }
.App-logo { .App-logo {
@ -14,14 +15,13 @@
} }
.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 {

73
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() {
let [name, setName] = useState("");
let [yVowel, setYVowel] = useState(true);
let [size, setSize] = useState(10);
let [hash_fn, setHashFn] = useState(() => hashes[0].fn);
return ( return (
<div className="App"> <div className="App App-header">
<header className="App-header"> <input onChange={e => setName(e.target.value)} value={name}></input>
<img src={logo} className="App-logo" alt="logo" /> <div style={{ display: "flex" }}>
<p> <p>Y is a vowel:</p>
Edit <code>src/App.tsx</code> and save to reload. <input
</p> type="checkbox"
<a checked={yVowel}
className="App-link" onChange={_ => setYVowel(!yVowel)}
href="https://reactjs.org" ></input>
target="_blank" </div>
rel="noopener noreferrer" <div
style={{
display: "flex",
alignItems: "center",
}}
> >
Learn React <p>Sylladex size:</p>
</a> <input
</header> 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> </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,
]),
},
];

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