mr/WebTools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
MrLetsplay 2023-10-26 21:25:53 +02:00
commit 0167260dc5
Signed by: mr
SSH Key Fingerprint: SHA256:92jBH80vpXyaZHjaIl47pjRq+Yt7XGTArqQg1V7hSqg
21 changed files with 5109 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
.eslintrc.json Normal file
View File

@ -0,0 +1,40 @@
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"@typescript-eslint"
],
"rules": {
"indent": [
"error",
"tab",
{
"SwitchCase": 1
}
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
],
"no-constant-condition": "off"
}
}

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules
dist

6
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,6 @@
{
"editor.detectIndentation": false,
"editor.indentSize": "tabSize",
"editor.tabSize": 4,
"editor.insertSpaces": false,
}

34
README.md Normal file
View File

@ -0,0 +1,34 @@
## Usage
Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
```bash
$ npm install # or pnpm install or yarn install
```
### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
## Available Scripts
In the project directory, you can run:
### `npm run dev` or `npm start`
Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.<br>
### `npm run build`
Builds the app for production to the `dist` folder.<br>
It correctly bundles Solid in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.<br>
Your app is ready to be deployed!
## Deployment
You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)

16
index.html Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
<title>Solid App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/src/index.tsx" type="module"></script>
</body>
</html>

3452
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

25
package.json Normal file
View File

@ -0,0 +1,25 @@
{
"name": "vite-template-solid",
"version": "0.0.0",
"description": "",
"scripts": {
"start": "vite",
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"license": "MIT",
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^6.9.0",
"@typescript-eslint/parser": "^6.9.0",
"eslint": "^8.52.0",
"solid-devtools": "^0.27.3",
"typescript": "^5.1.3",
"vite": "^4.3.9",
"vite-plugin-solid": "^2.7.0"
},
"dependencies": {
"@solidjs/router": "^0.8.3",
"solid-js": "^1.7.6"
}
}

1190
pnpm-lock.yaml Normal file
View File

File diff suppressed because it is too large Load Diff

9
src/App.module.css Normal file
View File

@ -0,0 +1,9 @@
.app {
position: relative;
}
.appContainer {
display: flex;
flex-direction: column;
padding: 10px;
}

15
src/Navigation.tsx Normal file
View File

@ -0,0 +1,15 @@
import { A } from '@solidjs/router';
import { Component } from 'solid-js';
const Navigation: Component = () => {
return (
<>
<A href='/strlen'>String Length</A>
<A href='/strrev'>String Reverse</A>
<A href='/strnoise'>String Noise</A>
{/* Tools: string length, string reverse, string noise */}
</>
);
};
export default Navigation;

BIN
src/assets/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

12
src/index.css Normal file
View File

@ -0,0 +1,12 @@
body {
margin: 0;
--bg: #111111;
--element-bg: #333333;
background-color: var(--bg);
min-height: 100vh;
color: white;
font-family: 'DejaVu Sans Mono', monospace;
}

28
src/index.tsx Normal file
View File

@ -0,0 +1,28 @@
/* @refresh reload */
import { render } from 'solid-js/web';
import './index.css';
import Home from './pages/Home';
import { Route, Router, Routes, hashIntegration } from '@solidjs/router';
import StrLen from './pages/StrLen';
import StrRev from './pages/StrRev';
import StrNoise from './pages/StrNoise';
const root = document.getElementById('root');
if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
throw new Error(
'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
);
}
render(() => (
<Router source={hashIntegration()}>
<Routes>
<Route path="/" component={Home} />
<Route path="/strlen" component={StrLen} />
<Route path="/strrev" component={StrRev} />
<Route path="/strnoise" component={StrNoise} />
</Routes>
</Router>
), root!);

1
src/logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

15
src/pages/Home.tsx Normal file
View File

@ -0,0 +1,15 @@
import type { Component } from 'solid-js';
import styles from './Page.module.css';
import Navigation from '../Navigation';
const Home: Component = () => {
return (
<div class={styles.page}>
<h1>(Possibly) Useful Tools</h1>
<Navigation />
</div>
);
};
export default Home;

42
src/pages/Page.module.css Normal file
View File

@ -0,0 +1,42 @@
.page {
display: flex;
flex-direction: column;
padding: 10px;
gap: 5px;
}
h1,
h2,
h3 {
margin: 0;
margin-top: 10px;
flex-shrink: 2;
}
a {
color: white;
text-decoration: none;
background-color: var(--element-bg);
padding: 10px;
border-radius: 10px;
flex-shrink: 2;
}
input,
textarea {
background-color: var(--element-bg);
color: white;
padding: 10px;
border-radius: 5px;
outline: none;
border: none;
}
button {
background-color: var(--element-bg);
color: white;
padding: 10px;
border-radius: 5px;
border: none;
cursor: pointer;
}

35
src/pages/StrLen.tsx Normal file
View File

@ -0,0 +1,35 @@
import { Component, createSignal } from 'solid-js';
import styles from './Page.module.css';
import { JSX } from 'solid-js';
import Navigation from '../Navigation';
const StrLen: Component = () => {
const [output, setOutput] = createSignal(0);
const onChange: JSX.EventHandler<HTMLTextAreaElement, InputEvent> = (event) => {
setOutput(event.currentTarget.value.length);
};
let outputField: HTMLInputElement | undefined;
const copy = async () => {
outputField!.select();
document.execCommand('copy');
};
return (
<div class={styles.page}>
<h1>String Length</h1>
<h2>Input</h2>
<textarea oninput={onChange} />
<h2>Output</h2>
<input value={output()} ref={outputField} />
<button onclick={copy}>Copy Output</button>
<h2>All Tools</h2>
<Navigation />
</div>
);
};
export default StrLen;

115
src/pages/StrNoise.tsx Normal file
View File

@ -0,0 +1,115 @@
import { Component, createEffect, createSignal, on } from 'solid-js';
import styles from './Page.module.css';
import Navigation from '../Navigation';
function murmurHash3(string: string) {
let i = 0, hash: number;
for (hash = 1779033703 ^ string.length; i < string.length; i++) {
const bitwise_xor_from_character = hash ^ string.charCodeAt(i);
hash = Math.imul(bitwise_xor_from_character, 3432918353);
hash = hash << 13 | hash >>> 19;
}
return () => {
// Return the hash that you can use as a seed
hash = Math.imul(hash ^ (hash >>> 16), 2246822507);
hash = Math.imul(hash ^ (hash >>> 13), 3266489909);
return (hash ^= hash >>> 16) >>> 0;
};
}
function simpleFastCounter32(seed_1: number, seed_2: number, seed_3: number, seed_4: number) {
return () => {
seed_1 >>>= 0;
seed_2 >>>= 0;
seed_3 >>>= 0;
seed_4 >>>= 0;
let cast32 = (seed_1 + seed_2) | 0;
seed_1 = seed_2 ^ seed_2 >>> 9;
seed_2 = seed_3 + (seed_3 << 3) | 0;
seed_3 = (seed_3 << 21 | seed_3 >>> 11);
seed_4 = seed_4 + 1 | 0;
cast32 = cast32 + seed_4 | 0;
seed_3 = seed_3 + cast32 | 0;
return (cast32 >>> 0) / 4294967296;
};
}
const StrNoise: Component = () => {
const [output, setOutput] = createSignal('');
const [input, setInput] = createSignal('');
const [noiseLevel, setNoiseLevel] = createSignal(10);
const [seed, setSeed] = createSignal('0');
const [shuffle, setShuffle] = createSignal(true);
const [randomize, setRandomize] = createSignal(true);
const [swapAdjacent, setSwapAdjancent] = createSignal(true);
createEffect(on([input, noiseLevel, seed, shuffle, randomize, swapAdjacent], () => {
const s = murmurHash3(seed());
const generator = simpleFastCounter32(s(), s(), s(), s());
const types = [];
if (shuffle()) types.push('shuffle');
if (randomize()) types.push('randomize');
if (swapAdjacent()) types.push('swap_adjacent');
const arr = input().split('');
const its = noiseLevel() / 100 * arr.length * 2;
console.log('EEE', its);
for (let i = 0; i < its; i++) {
const type = types[Math.floor(generator() * types.length)];
if (type == 'shuffle') {
const a = Math.floor(generator() * arr.length);
const b = Math.floor(generator() * arr.length);
[arr[a], arr[b]] = [arr[b], arr[a]];
} else if (type == 'randomize') {
// TODO
} else if (type == 'swap_adjacent') {
const a = Math.floor(generator() * (arr.length - 1));
[arr[a], arr[a + 1]] = [arr[a + 1], arr[a]];
}
}
setOutput(arr.join(''));
}));
let outputField: HTMLInputElement | undefined;
const copy = async () => {
outputField!.select();
document.execCommand('copy');
};
return (
<div class={styles.page}>
<h1>String Noise</h1>
<h2>Input</h2>
<textarea value={input()} oninput={e => setInput(e.currentTarget.value)} />
<h2>Noise Level</h2>
<input type={'range'} min={0} max={100} value={noiseLevel()} oninput={e => setNoiseLevel(parseInt(e.currentTarget.value))} />
<h2>Noise Types</h2>
<div class={styles.checkbox}>
<input type={'checkbox'} checked={shuffle()} onchange={e => setShuffle(e.currentTarget.checked)} />
<label>Shuffle</label>
</div>
<div class={styles.checkbox}>
<input type={'checkbox'} checked={randomize()} onchange={e => setRandomize(e.currentTarget.checked)} />
<label>Randomize</label>
</div>
<div class={styles.checkbox}>
<input type={'checkbox'} checked={swapAdjacent()} onchange={e => setSwapAdjancent(e.currentTarget.checked)} />
<label>Swap Adjacent</label>
</div>
<h2>Seed</h2>
<input type={'seed'} min={0} max={100} value={seed()} onInput={e => setSeed(e.currentTarget.value)} />
<h2>Output</h2>
<input value={output()} ref={outputField} />
<button onclick={copy}>Copy Output</button>
<h2>All Tools</h2>
<Navigation />
</div>
);
};
export default StrNoise;

35
src/pages/StrRev.tsx Normal file
View File

@ -0,0 +1,35 @@
import { Component, createSignal } from 'solid-js';
import styles from './Page.module.css';
import { JSX } from 'solid-js';
import Navigation from '../Navigation';
const StrRev: Component = () => {
const [output, setOutput] = createSignal('');
const onChange: JSX.EventHandler<HTMLTextAreaElement, InputEvent> = (event) => {
setOutput(event.currentTarget.value.split('').reverse().join(''));
};
let outputField: HTMLInputElement | undefined;
const copy = async () => {
outputField!.select();
document.execCommand('copy');
};
return (
<div class={styles.page}>
<h1>String Reverse</h1>
<h2>Input</h2>
<textarea oninput={onChange} />
<h2>Output</h2>
<input value={output()} ref={outputField} />
<button onclick={copy}>Copy Output</button>
<h2>All Tools</h2>
<Navigation />
</div>
);
};
export default StrRev;

17
tsconfig.json Normal file
View File

@ -0,0 +1,17 @@
{
"compilerOptions": {
"strict": true,
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
"types": [
"vite/client"
],
"noEmit": true,
"isolatedModules": true
}
}

20
vite.config.ts Normal file
View File

@ -0,0 +1,20 @@
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
// import devtools from 'solid-devtools/vite';
export default defineConfig({
plugins: [
/*
Uncomment the following line to enable solid-devtools.
For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme
*/
// devtools(),
solidPlugin(),
],
server: {
port: 3000,
},
build: {
target: 'esnext',
},
});