From d348d15cfec0b5f2283d994a4e83030d33168176 Mon Sep 17 00:00:00 2001 From: Alex Date: Sat, 11 May 2024 00:08:40 +0800 Subject: [PATCH] Update --- esbuild.config.mjs | 6 +- package-lock.json | 103 +++++++++--- package.json | 3 +- src/icons/index.ts | 2 + src/styles.css | 5 + src/styles/deck.css | 86 ++++++++++ src/styles/dice.css | 56 +++++++ src/styles/layout.css | 90 +++++++++++ src/styles/shared.css | 14 ++ src/styles/word.css | 49 ++++++ src/utils/dictionary/index.ts | 2 + src/utils/dictionary/oracle.ts | 4 + src/utils/word.ts | 12 ++ src/view/dice.ts | 1 + src/view/index.ts | 19 +-- src/view/word.ts | 14 +- styles.css | 281 --------------------------------- 17 files changed, 419 insertions(+), 328 deletions(-) create mode 100644 src/styles.css create mode 100644 src/styles/deck.css create mode 100644 src/styles/dice.css create mode 100644 src/styles/layout.css create mode 100644 src/styles/shared.css create mode 100644 src/styles/word.css create mode 100644 src/utils/dictionary/oracle.ts delete mode 100644 styles.css diff --git a/esbuild.config.mjs b/esbuild.config.mjs index bf8b269..9289935 100644 --- a/esbuild.config.mjs +++ b/esbuild.config.mjs @@ -15,7 +15,7 @@ const context = await esbuild.context({ banner: { js: banner, }, - entryPoints: ["src/main.ts"], + entryPoints: ["src/main.ts", "src/styles.css"], bundle: true, external: [ "obsidian", @@ -46,11 +46,11 @@ const context = await esbuild.context({ ], format: "cjs", target: "es2022", - logLevel: "info", + logLevel: watch ? "info" : "error", sourcemap: watch ? "inline" : false, minify: true, treeShaking: true, - outfile: "main.js", + outdir: "dist", logOverride: { "empty-import-meta": "silent" }, }); diff --git a/package-lock.json b/package-lock.json index 538ee62..0abc3d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,13 +1,16 @@ { "name": "alexkurowski/solo-toolkit", - "version": "0.1.1", + "version": "0.1.6", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "alexkurowski/solo-toolkit", - "version": "0.1.1", + "version": "0.1.6", "license": "MIT", + "dependencies": { + "@codemirror/language": "^6.10.1" + }, "devDependencies": { "@eslint/js": "^9.2.0", "@types/node": "^16.11.6", @@ -25,19 +28,28 @@ "typescript-eslint": "^7.8.0" } }, + "node_modules/@codemirror/language": { + "version": "6.10.1", + "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.1.tgz", + "integrity": "sha512-5GrXzrhq6k+gL5fjkAwt90nYDmjlzTIJV8THnxNFtNKWotMIlzzN+CpqxqwXOECnUdOndmSeWntVrVcv5axWRQ==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.23.0", + "@lezer/common": "^1.1.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0", + "style-mod": "^4.0.0" + } + }, "node_modules/@codemirror/state": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz", - "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==", - "dev": true, - "peer": true + "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==" }, "node_modules/@codemirror/view": { "version": "6.26.3", "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.26.3.tgz", "integrity": "sha512-gmqxkPALZjkgSxIeeweY/wGQXBfwTUaLs8h7OKtSwfbj9Ct3L11lD+u1sS7XHppxFQoMDiMDp07P9f3I2jWOHw==", - "dev": true, - "peer": true, "dependencies": { "@codemirror/state": "^6.4.0", "style-mod": "^4.1.0", @@ -500,6 +512,27 @@ "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==", "dev": true }, + "node_modules/@lezer/common": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz", + "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==" + }, + "node_modules/@lezer/highlight": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.0.tgz", + "integrity": "sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==", + "dependencies": { + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@lezer/lr": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.0.tgz", + "integrity": "sha512-Wst46p51km8gH0ZUmeNrtpRYmdlRHUpN1DQd3GFAyKANi8WVz8c2jHYTf1CVScFaCjQw1iO3ZZdqGDxQPRErTg==", + "dependencies": { + "@lezer/common": "^1.0.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -2547,9 +2580,7 @@ "node_modules/style-mod": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz", - "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==", - "dev": true, - "peer": true + "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==" }, "node_modules/supports-color": { "version": "7.2.0", @@ -2909,9 +2940,7 @@ "node_modules/w3c-keyname": { "version": "2.2.8", "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz", - "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==", - "dev": true, - "peer": true + "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==" }, "node_modules/which": { "version": "2.0.2", @@ -2963,19 +2992,28 @@ } }, "dependencies": { + "@codemirror/language": { + "version": "6.10.1", + "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.1.tgz", + "integrity": "sha512-5GrXzrhq6k+gL5fjkAwt90nYDmjlzTIJV8THnxNFtNKWotMIlzzN+CpqxqwXOECnUdOndmSeWntVrVcv5axWRQ==", + "requires": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.23.0", + "@lezer/common": "^1.1.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0", + "style-mod": "^4.0.0" + } + }, "@codemirror/state": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz", - "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==", - "dev": true, - "peer": true + "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==" }, "@codemirror/view": { "version": "6.26.3", "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.26.3.tgz", "integrity": "sha512-gmqxkPALZjkgSxIeeweY/wGQXBfwTUaLs8h7OKtSwfbj9Ct3L11lD+u1sS7XHppxFQoMDiMDp07P9f3I2jWOHw==", - "dev": true, - "peer": true, "requires": { "@codemirror/state": "^6.4.0", "style-mod": "^4.1.0", @@ -3208,6 +3246,27 @@ "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==", "dev": true }, + "@lezer/common": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz", + "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==" + }, + "@lezer/highlight": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.0.tgz", + "integrity": "sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==", + "requires": { + "@lezer/common": "^1.0.0" + } + }, + "@lezer/lr": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.0.tgz", + "integrity": "sha512-Wst46p51km8gH0ZUmeNrtpRYmdlRHUpN1DQd3GFAyKANi8WVz8c2jHYTf1CVScFaCjQw1iO3ZZdqGDxQPRErTg==", + "requires": { + "@lezer/common": "^1.0.0" + } + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -4570,9 +4629,7 @@ "style-mod": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz", - "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==", - "dev": true, - "peer": true + "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==" }, "supports-color": { "version": "7.2.0", @@ -4793,9 +4850,7 @@ "w3c-keyname": { "version": "2.2.8", "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz", - "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==", - "dev": true, - "peer": true + "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==" }, "which": { "version": "2.0.2", diff --git a/package.json b/package.json index 8397b83..6b16f20 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "dev": "node esbuild.config.mjs watch", "build": "tsc --noEmit -skipLibCheck && node esbuild.config.mjs", - "deploy": "rm -rf ./dist && mkdir -p dist/solo-rpg-toolkit && cp main.js dist/solo-rpg-toolkit && cp styles.css dist/solo-rpg-toolkit && cp manifest.json dist/solo-rpg-toolkit", + "deploy": "rm -rf ./dist/solo-rpg-toolkit && mkdir -p dist/solo-rpg-toolkit && cp dist/main.js dist/solo-rpg-toolkit && cp dist/styles.css dist/solo-rpg-toolkit && cp manifest.json dist/solo-rpg-toolkit", "lint": "tsc --noEmit && eslint ./src", "version": "ruby tasks/version.rb", "release": "ruby tasks/release.rb" @@ -15,6 +15,7 @@ "author": "Alex Kurowski", "license": "MIT", "devDependencies": { + "@codemirror/language": "^6.10.1", "@eslint/js": "^9.2.0", "@types/node": "^16.11.6", "@typescript-eslint/eslint-plugin": "5.29.0", diff --git a/src/icons/index.ts b/src/icons/index.ts index aa9f8e1..a1b5a37 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -15,6 +15,8 @@ const icons = { '', "srt-d20": '', + "srt-d100": + '', }; export const registerIcons = () => { diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..610a03a --- /dev/null +++ b/src/styles.css @@ -0,0 +1,5 @@ +@import "./styles/shared"; +@import "./styles/layout"; +@import "./styles/deck"; +@import "./styles/dice"; +@import "./styles/word"; diff --git a/src/styles/deck.css b/src/styles/deck.css new file mode 100644 index 0000000..da6ab79 --- /dev/null +++ b/src/styles/deck.css @@ -0,0 +1,86 @@ +.srt-container { + .deck-buttons { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: var(--size-4-4); + white-space: nowrap; + + .deck-size { + min-width: 50px; + line-height: var(--input-height); + text-align: right; + } + } + + .deck-results { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-end; + gap: var(--size-4-4); + width: 100%; + overflow: hidden; + + .deck-result { + flex-grow: 0; + flex-shrink: 0; + width: 76px; + height: 104px; + padding: var(--size-4-1) var(--size-4-2); + background: #fcfcfc; + border-radius: var(--radius-m); + border: var(--size-2-1) solid #fcfcfc; + cursor: pointer; + transition: border-color 0.3s ease-in-out; + animation: 0.5s ease-in-out srt-fadein; + + &:hover { + border-color: var(--interactive-accent); + } + + .deck-result-content { + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + font-weight: 500; + + &.deck-result-red { + color: var(--color-red); + } + + &.deck-result-black { + color: #212121; + } + } + } + + .deck-result-value { + display: inline-block; + text-align: right; + } + + .deck-result-type { + position: relative; + top: 1px; + } + } + + &.srt-desktop-layout { + .deck-results { + flex-direction: column-reverse; + margin-bottom: var(--size-4-6); + } + } + + &.srt-mobile-layout { + .deck-buttons { + .deck-size { + padding-left: var(--size-4-5); + } + } + } +} diff --git a/src/styles/dice.css b/src/styles/dice.css new file mode 100644 index 0000000..3e8fdee --- /dev/null +++ b/src/styles/dice.css @@ -0,0 +1,56 @@ +.srt-container { + .dice-buttons { + display: flex; + flex-direction: column; + gap: var(--size-4-2); + width: 100%; + + .dice-variant { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + justify-content: flex-end; + gap: var(--size-4-2); + + .clickable-icon { + padding: var(--size-4-1); + + svg { + width: 28px; + height: 28px; + } + } + } + + .dice-results { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + justify-content: flex-end; + } + + .dice-result-value { + min-width: 32px; + text-align: center; + } + } + + &.srt-mobile-layout { + .dice-buttons { + gap: var(--size-4-1); + + .dice-variant { + .clickable-icon { + padding: var(--size-4-3); + + svg { + width: 36px; + height: 36px; + } + } + } + } + } +} diff --git a/src/styles/layout.css b/src/styles/layout.css new file mode 100644 index 0000000..3e356a3 --- /dev/null +++ b/src/styles/layout.css @@ -0,0 +1,90 @@ +.srt-container { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-end; + position: relative; + width: 100%; + height: 100%; + max-height: 100%; + overflow: hidden; + + .srt-tab-picker { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + flex-wrap: wrap-reverse; + gap: var(--size-4-4); + width: 100%; + padding-top: var(--size-4-4); + margin-top: var(--size-4-4); + border-top: 1px solid var(--color-base-40); + + .srt-tab-picker-tabs { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + gap: var(--size-4-2); + + .clickable-icon { + transition: + color 0.3s, + background 0.3s; + + &.highlight { + color: var(--text-on-accent); + background: var(--interactive-accent); + } + } + } + } + + .srt-tab { + flex: 1; + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: flex-end; + gap: var(--size-4-4); + width: 100%; + overflow: hidden; + } + + &.srt-desktop-layout { + flex-direction: column-reverse; + justify-content: flex-start; + + .srt-tab-picker { + margin-top: 0; + padding-top: 0; + padding-bottom: var(--size-4-4); + margin-bottom: var(--size-4-4); + border-top: none; + border-bottom: 1px solid var(--color-base-40); + } + + .srt-tab { + justify-content: flex-start; + width: 100%; + } + } + + &.srt-mobile-layout { + .srt-tab-picker { + .clickable-icon { + padding: var(--size-4-2); + + svg { + width: 28px; + height: 28px; + } + } + + .srt-tab-picker-tabs { + gap: var(--size-4-4); + } + } + } +} diff --git a/src/styles/shared.css b/src/styles/shared.css new file mode 100644 index 0000000..80c57d7 --- /dev/null +++ b/src/styles/shared.css @@ -0,0 +1,14 @@ +.srt-container { + .nofade { + animation: none !important; + } +} + +@keyframes srt-fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} diff --git a/src/styles/word.css b/src/styles/word.css new file mode 100644 index 0000000..16e9bc8 --- /dev/null +++ b/src/styles/word.css @@ -0,0 +1,49 @@ +.srt-container { + .word-buttons { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: var(--size-4-4); + } + + .word-results { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-end; + gap: var(--size-4-4); + width: 100%; + overflow: hidden; + + .word-result { + display: flex; + flex-direction: row; + text-decoration: none; + cursor: pointer; + animation: 0.5s ease-in-out srt-fadein; + + &:not(:hover) { + color: var(--text-normal); + } + } + + .word-result-type { + display: inline-block; + min-width: 60px; + font-size: 0.75em; + line-height: 2em; + color: var(--color-base-60); + text-align: right; + margin-right: var(--size-4-4); + } + } + + &.srt-desktop-layout { + .word-results { + flex-direction: column-reverse; + margin-bottom: var(--size-4-6); + } + } +} diff --git a/src/utils/dictionary/index.ts b/src/utils/dictionary/index.ts index b35816c..3248f22 100644 --- a/src/utils/dictionary/index.ts +++ b/src/utils/dictionary/index.ts @@ -1,3 +1,4 @@ +import oracle from './oracle'; import adjectives from "./adjectives"; import adverbs from "./adverbs"; import nouns from "./nouns"; @@ -12,6 +13,7 @@ import hairs from "./hairs"; import settlement from "./settlement"; export const dictionary = { + oracle, adjectives, adverbs, nouns, diff --git a/src/utils/dictionary/oracle.ts b/src/utils/dictionary/oracle.ts new file mode 100644 index 0000000..b9a6fb3 --- /dev/null +++ b/src/utils/dictionary/oracle.ts @@ -0,0 +1,4 @@ +export default [ + ["extreme yes", "yes", "yes", "no", "no", "extreme no"], + ["but", "", "", "", "", "and"], +]; diff --git a/src/utils/word.ts b/src/utils/word.ts index d67609a..71d240b 100644 --- a/src/utils/word.ts +++ b/src/utils/word.ts @@ -2,6 +2,16 @@ import { dictionary } from "./dictionary"; import { randomFrom } from "./dice"; import { capitalize } from "./helpers"; +const getOracle = () => { + const answer1 = randomFrom(dictionary.oracle[0]); + const answer2 = randomFrom(dictionary.oracle[1]); + if (answer2) { + return capitalize(`${answer1}, ${answer2}`); + } else { + return capitalize(answer1); + } +}; + const getNoun = () => randomFrom(dictionary.nouns); const getVerb = () => randomFrom(dictionary.verbs); const getAdjective = () => randomFrom(dictionary.adjectives); @@ -121,6 +131,8 @@ const getTown = () => export const generateWord = (type: string): string => { switch (type) { + case "Oracle": + return getOracle(); case "Subject": return getSubject(); case "Action": diff --git a/src/view/dice.ts b/src/view/dice.ts index c65f89b..1ce96ab 100644 --- a/src/view/dice.ts +++ b/src/view/dice.ts @@ -25,6 +25,7 @@ export class DiceView { this.createDiceBtn(10); this.createDiceBtn(12); this.createDiceBtn(20); + this.createDiceBtn(100); this.repopulateResults(); } diff --git a/src/view/index.ts b/src/view/index.ts index a015830..2c5f8bc 100644 --- a/src/view/index.ts +++ b/src/view/index.ts @@ -16,8 +16,6 @@ interface DevApp extends App { export const VIEW_TYPE = "MAIN_VIEW"; -const resetTimeout = 800; - const tabLabels = { dice: "Dice", deck: "Deck", @@ -122,24 +120,9 @@ export class SoloToolkitView extends ItemView { setCta(this.tab); - let lastBtnClickAt = 0; - const maybeReset = (tab: keyof typeof btns) => { - if (this.tab === tab) { - const now = Date.now(); - if (lastBtnClickAt && now - lastBtnClickAt <= resetTimeout) { - this[tab].reset(); - lastBtnClickAt = 0; - } else { - lastBtnClickAt = now; - } - } else { - lastBtnClickAt = 0; - } - }; - const btnOnClick = (tab: keyof typeof btns) => () => { - maybeReset(tab); this.tab = tab; + if (tab === "dice") this.dice.reset(); setCta(tab); this.createTab(); updateResetBtnTooltip(); diff --git a/src/view/word.ts b/src/view/word.ts index c990b8a..d4b381d 100644 --- a/src/view/word.ts +++ b/src/view/word.ts @@ -4,6 +4,17 @@ import { generateWord, randomFrom, clickToCopy } from "../utils"; const MAX_REMEMBER_SIZE = 1000; +const wordLabels: { [word: string]: string } = { + Oracle: "yes/no answer", + Subject: "a subject", + Action: "an action", + Name: "a name", + Aspects: "character aspects", + Skills: "character skills", + Job: "occupation", + Town: "a town name", +}; + export class WordView { view: View; words: [string, string][]; @@ -22,6 +33,7 @@ export class WordView { this.wordBtnsEl = this.view.tabViewEl.createDiv("word-buttons"); this.wordBtnsEl.empty(); + this.createWordBtn("Oracle"); this.createWordBtn("Subject"); this.createWordBtn("Action"); this.createWordBtn("Name"); @@ -67,7 +79,7 @@ export class WordView { createWordBtn(type: string) { new ButtonComponent(this.wordBtnsEl) .setButtonText(type) - .setTooltip(`Generate ${type.toLowerCase()}`) + .setTooltip(`Generate ${wordLabels[type] || type.toLowerCase()}`) .onClick(() => { const value = generateWord(type); this.words.push([type, value]); diff --git a/styles.css b/styles.css deleted file mode 100644 index c43f4c8..0000000 --- a/styles.css +++ /dev/null @@ -1,281 +0,0 @@ -.srt-container { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: flex-end; - position: relative; - width: 100%; - height: 100%; - max-height: 100%; - overflow: hidden; - - .srt-tab-picker { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - flex-wrap: wrap-reverse; - gap: var(--size-4-4); - width: 100%; - padding-top: var(--size-4-4); - margin-top: var(--size-4-4); - border-top: 1px solid var(--color-base-40); - - .srt-tab-picker-tabs { - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-end; - gap: var(--size-4-2); - - .clickable-icon { - transition: - color 0.3s, - background 0.3s; - - &.highlight { - color: var(--text-on-accent); - background: var(--interactive-accent); - } - } - } - } - - .srt-tab { - flex: 1; - display: flex; - flex-direction: column; - align-items: stretch; - justify-content: flex-end; - gap: var(--size-4-4); - width: 100%; - overflow: hidden; - } - - .dice-buttons { - display: flex; - flex-direction: column; - gap: var(--size-4-2); - width: 100%; - - .dice-variant { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: center; - justify-content: flex-end; - gap: var(--size-4-2); - - .clickable-icon { - padding: var(--size-4-1); - - svg { - width: 28px; - height: 28px; - } - } - } - - .dice-results { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: center; - justify-content: flex-end; - } - - .dice-result-value { - min-width: 32px; - text-align: center; - } - } - - .deck-buttons { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - justify-content: center; - gap: var(--size-4-4); - white-space: nowrap; - - .deck-size { - min-width: 50px; - line-height: var(--input-height); - text-align: right; - } - } - - .deck-results { - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-end; - gap: var(--size-4-4); - width: 100%; - overflow: hidden; - - .deck-result { - flex-grow: 0; - flex-shrink: 0; - width: 80px; - height: 104px; - padding: var(--size-4-1) var(--size-4-2); - background: #fcfcfc; - border-radius: var(--radius-m); - border: var(--size-2-1) solid #fcfcfc; - cursor: pointer; - transition: border-color 0.3s ease-in-out; - animation: 0.5s ease-in-out srt-fadein; - - &:hover { - border-color: var(--interactive-accent); - } - - .deck-result-content { - display: inline-flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - font-weight: 500; - - &.deck-result-red { - color: var(--color-red); - } - - &.deck-result-black { - color: #212121; - } - } - } - - .deck-result-value { - display: inline-block; - text-align: right; - } - - .deck-result-type { - position: relative; - top: 1px; - } - } - - .word-buttons { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - justify-content: center; - gap: var(--size-4-4); - } - - .word-results { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: flex-end; - gap: var(--size-4-4); - width: 100%; - overflow: hidden; - - .word-result { - display: flex; - flex-direction: row; - text-decoration: none; - cursor: pointer; - animation: 0.5s ease-in-out srt-fadein; - - &:not(:hover) { - color: var(--text-normal); - } - } - - .word-result-type { - display: inline-block; - min-width: 60px; - font-size: 0.75em; - line-height: 2em; - color: var(--color-base-60); - text-align: right; - margin-right: var(--size-4-4); - } - } - - &.srt-desktop-layout { - flex-direction: column-reverse; - justify-content: flex-start; - - .srt-tab-picker { - margin-top: 0; - padding-top: 0; - padding-bottom: var(--size-4-4); - margin-bottom: var(--size-4-4); - border-top: none; - border-bottom: 1px solid var(--color-base-40); - } - - .srt-tab { - justify-content: flex-start; - width: 100%; - } - - .deck-results { - flex-direction: column-reverse; - margin-bottom: var(--size-4-6); - } - - .word-results { - flex-direction: column-reverse; - margin-bottom: var(--size-4-6); - } - } - - &.srt-mobile-layout { - .srt-tab-picker { - .clickable-icon { - padding: var(--size-4-2); - - svg { - width: 28px; - height: 28px; - } - } - - .srt-tab-picker-tabs { - gap: var(--size-4-4); - } - } - - .dice-buttons { - .dice-variant { - .clickable-icon { - padding: var(--size-4-3); - - svg { - width: 36px; - height: 36px; - } - } - } - } - - .deck-buttons { - .deck-size { - padding-left: var(--size-4-5); - } - } - } - - .nofade { - animation: none !important; - } -} - -@keyframes srt-fadein { - from { - opacity: 0; - } - to { - opacity: 1; - } -}