From 5bc5faa6efb048ea3a85ff0d6ff192ac17484f68 Mon Sep 17 00:00:00 2001 From: Matteo Settenvini Date: Sun, 1 Sep 2024 23:42:25 +0200 Subject: [PATCH] Prepare to handle discussions in story --- .gitignore | 2 - .vscode/extensions.json | 6 ++ .vscode/launch.json | 22 ++++++ .vscode/settings.json | 8 +++ .vscode/tasks.json | 19 +++++ package.json | 1 + pnpm-lock.yaml | 137 +++++++++++++++++++++++++++++++++++++ src/images/avatar.svg | 4 ++ src/index.ts | 29 +++++--- src/story/main.ink | 98 ++++++++++++++++++++++++++ src/styles/global.scss | 21 ++++-- src/styles/story.scss | 69 ++++++++++++++++++- story/main.ink | 23 +++++-- webpack.config.js | 23 +++++-- work-it-out.code-workspace | 29 -------- 15 files changed, 433 insertions(+), 58 deletions(-) create mode 100644 .vscode/extensions.json create mode 100644 .vscode/launch.json create mode 100644 .vscode/settings.json create mode 100644 .vscode/tasks.json create mode 100644 src/images/avatar.svg create mode 100644 src/story/main.ink delete mode 100644 work-it-out.code-workspace diff --git a/.gitignore b/.gitignore index fc52e39..52c893f 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,5 @@ *.orig *.rej -/.vscode - /node_modules /dist diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..6c8be77 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,6 @@ +{ + "recommendations": [ + "ban.spellright", + "firefox-devtools.vscode-firefox-debug", + ] +} diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..b466591 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,22 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "firefox", + "request": "launch", + "name": "Debug in Browser", + "reAttach": true, + "url": "http://localhost:9000/index.html", + "webRoot": "${workspaceFolder}", + "log": { + "consoleLevel": { + "default": "Warn", + "PathConversion": "Debug", + } + } + } + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..5990269 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,8 @@ +{ + "spellright.language": ["en-US"], + + "[plaintext]": { + "editor.wordWrap": "bounded", + "editor.wordWrapColumn": 80 + } +} diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 0000000..e096cde --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,19 @@ +{ + "version": "2.0.0", + "tasks": [ + { + "type": "npm", + "isBackground": true, + "script": "dev", + "problemMatcher": [ + "$tsc-watch", + ], + "label": "npm: dev", + "detail": "webpack serve --mode development", + "group": { + "kind": "build", + "isDefault": true + } + } + ] +} diff --git a/package.json b/package.json index fe5d5a1..654f9d4 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "browser": "index.js", "devDependencies": { "@tsconfig/node20": "^20.1.4", + "copy-webpack-plugin": "^12.0.2", "css-loader": "^7.1.2", "html-webpack-plugin": "^5.6.0", "inkjs": "^2.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d402651..52d50ef 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: '@tsconfig/node20': specifier: ^20.1.4 version: 20.1.4 + copy-webpack-plugin: + specifier: ^12.0.2 + version: 12.0.2(webpack@5.94.0(webpack-cli@5.1.4)) css-loader: specifier: ^7.1.2 version: 7.1.2(webpack@5.94.0(webpack-cli@5.1.4)) @@ -97,10 +100,26 @@ packages: '@leichtgewicht/ip-codec@2.0.5': resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==} + '@nodelib/fs.scandir@2.1.5': + resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} + engines: {node: '>= 8'} + + '@nodelib/fs.stat@2.0.5': + resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==} + engines: {node: '>= 8'} + + '@nodelib/fs.walk@1.2.8': + resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} + engines: {node: '>= 8'} + '@pkgjs/parseargs@0.11.0': resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} + '@sindresorhus/merge-streams@2.3.0': + resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==} + engines: {node: '>=18'} + '@tsconfig/node20@20.1.4': resolution: {integrity: sha512-sqgsT69YFeLWf5NtJ4Xq/xAF8p4ZQHlmGW74Nu2tD4+g5fAsposc4ZfaaPixVu4y01BEiDCWLRDCvDM5JOsRxg==} @@ -437,6 +456,12 @@ packages: resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==} engines: {node: '>= 0.6'} + copy-webpack-plugin@12.0.2: + resolution: {integrity: sha512-SNwdBeHyII+rWvee/bTnAYyO8vfVdcSTud4EIb6jcZ8inLeWucJE0DnxXQBjlQ5zlteuuvooGQy3LIyGxhvlOA==} + engines: {node: '>= 18.12.0'} + peerDependencies: + webpack: ^5.1.0 + core-util-is@1.0.3: resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} @@ -630,6 +655,10 @@ packages: fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} + fast-glob@3.3.2: + resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==} + engines: {node: '>=8.6.0'} + fast-json-stable-stringify@2.1.0: resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==} @@ -640,6 +669,9 @@ packages: resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==} engines: {node: '>= 4.9.1'} + fastq@1.17.1: + resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==} + faye-websocket@0.11.4: resolution: {integrity: sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==} engines: {node: '>=0.8.0'} @@ -701,6 +733,10 @@ packages: resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==} engines: {node: '>= 6'} + glob-parent@6.0.2: + resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==} + engines: {node: '>=10.13.0'} + glob-to-regexp@0.4.1: resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==} @@ -708,6 +744,10 @@ packages: resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==} hasBin: true + globby@14.0.2: + resolution: {integrity: sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==} + engines: {node: '>=18'} + gopd@1.0.1: resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==} @@ -811,6 +851,10 @@ packages: peerDependencies: postcss: ^8.1.0 + ignore@5.3.2: + resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==} + engines: {node: '>= 4'} + immutable@4.3.7: resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==} @@ -959,6 +1003,10 @@ packages: merge-stream@2.0.0: resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==} + merge2@1.4.1: + resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} + engines: {node: '>= 8'} + methods@1.1.2: resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==} engines: {node: '>= 0.6'} @@ -1115,6 +1163,10 @@ packages: path-to-regexp@0.1.7: resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==} + path-type@5.0.0: + resolution: {integrity: sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==} + engines: {node: '>=12'} + picocolors@1.0.1: resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==} @@ -1179,6 +1231,9 @@ packages: resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==} engines: {node: '>=0.6'} + queue-microtask@1.2.3: + resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} + randombytes@2.1.0: resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} @@ -1235,6 +1290,10 @@ packages: resolution: {integrity: sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==} engines: {node: '>= 4'} + reusify@1.0.4: + resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==} + engines: {iojs: '>=1.0.0', node: '>=0.10.0'} + rimraf@5.0.10: resolution: {integrity: sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==} hasBin: true @@ -1243,6 +1302,9 @@ packages: resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==} engines: {node: '>=18'} + run-parallel@1.2.0: + resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} + safe-buffer@5.1.2: resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==} @@ -1349,6 +1411,10 @@ packages: resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==} engines: {node: '>=14'} + slash@5.1.0: + resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==} + engines: {node: '>=14.16'} + sockjs@0.3.24: resolution: {integrity: sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==} @@ -1496,6 +1562,10 @@ packages: undici-types@6.19.8: resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==} + unicorn-magic@0.1.0: + resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==} + engines: {node: '>=18'} + unpipe@1.0.0: resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==} engines: {node: '>= 0.8'} @@ -1680,9 +1750,23 @@ snapshots: '@leichtgewicht/ip-codec@2.0.5': {} + '@nodelib/fs.scandir@2.1.5': + dependencies: + '@nodelib/fs.stat': 2.0.5 + run-parallel: 1.2.0 + + '@nodelib/fs.stat@2.0.5': {} + + '@nodelib/fs.walk@1.2.8': + dependencies: + '@nodelib/fs.scandir': 2.1.5 + fastq: 1.17.1 + '@pkgjs/parseargs@0.11.0': optional: true + '@sindresorhus/merge-streams@2.3.0': {} + '@tsconfig/node20@20.1.4': {} '@types/body-parser@1.19.5': @@ -2063,6 +2147,16 @@ snapshots: cookie@0.6.0: {} + copy-webpack-plugin@12.0.2(webpack@5.94.0(webpack-cli@5.1.4)): + dependencies: + fast-glob: 3.3.2 + glob-parent: 6.0.2 + globby: 14.0.2 + normalize-path: 3.0.0 + schema-utils: 4.2.0 + serialize-javascript: 6.0.2 + webpack: 5.94.0(webpack-cli@5.1.4) + core-util-is@1.0.3: {} cross-spawn@7.0.3: @@ -2264,12 +2358,24 @@ snapshots: fast-deep-equal@3.1.3: {} + fast-glob@3.3.2: + dependencies: + '@nodelib/fs.stat': 2.0.5 + '@nodelib/fs.walk': 1.2.8 + glob-parent: 5.1.2 + merge2: 1.4.1 + micromatch: 4.0.8 + fast-json-stable-stringify@2.1.0: {} fast-uri@3.0.1: {} fastest-levenshtein@1.0.16: {} + fastq@1.17.1: + dependencies: + reusify: 1.0.4 + faye-websocket@0.11.4: dependencies: websocket-driver: 0.7.4 @@ -2327,6 +2433,10 @@ snapshots: dependencies: is-glob: 4.0.3 + glob-parent@6.0.2: + dependencies: + is-glob: 4.0.3 + glob-to-regexp@0.4.1: {} glob@10.4.5: @@ -2338,6 +2448,15 @@ snapshots: package-json-from-dist: 1.0.0 path-scurry: 1.11.1 + globby@14.0.2: + dependencies: + '@sindresorhus/merge-streams': 2.3.0 + fast-glob: 3.3.2 + ignore: 5.3.2 + path-type: 5.0.0 + slash: 5.1.0 + unicorn-magic: 0.1.0 + gopd@1.0.1: dependencies: get-intrinsic: 1.2.4 @@ -2449,6 +2568,8 @@ snapshots: dependencies: postcss: 8.4.41 + ignore@5.3.2: {} + immutable@4.3.7: {} import-local@3.2.0: @@ -2564,6 +2685,8 @@ snapshots: merge-stream@2.0.0: {} + merge2@1.4.1: {} + methods@1.1.2: {} micromatch@4.0.8: @@ -2691,6 +2814,8 @@ snapshots: path-to-regexp@0.1.7: {} + path-type@5.0.0: {} + picocolors@1.0.1: {} picomatch@2.3.1: {} @@ -2751,6 +2876,8 @@ snapshots: dependencies: side-channel: 1.0.6 + queue-microtask@1.2.3: {} + randombytes@2.1.0: dependencies: safe-buffer: 5.2.1 @@ -2816,12 +2943,18 @@ snapshots: retry@0.13.1: {} + reusify@1.0.4: {} + rimraf@5.0.10: dependencies: glob: 10.4.5 run-applescript@7.0.0: {} + run-parallel@1.2.0: + dependencies: + queue-microtask: 1.2.3 + safe-buffer@5.1.2: {} safe-buffer@5.2.1: {} @@ -2942,6 +3075,8 @@ snapshots: signal-exit@4.1.0: {} + slash@5.1.0: {} + sockjs@0.3.24: dependencies: faye-websocket: 0.11.4 @@ -3083,6 +3218,8 @@ snapshots: undici-types@6.19.8: {} + unicorn-magic@0.1.0: {} + unpipe@1.0.0: {} update-browserslist-db@1.1.0(browserslist@4.23.3): diff --git a/src/images/avatar.svg b/src/images/avatar.svg new file mode 100644 index 0000000..c316a61 --- /dev/null +++ b/src/images/avatar.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/index.ts b/src/index.ts index 25610d4..8e50067 100644 --- a/src/index.ts +++ b/src/index.ts @@ -7,7 +7,7 @@ import { Compiler } from 'inkjs/compiler/Compiler'; import { ErrorType } from 'inkjs/engine/Error'; import "./style.scss"; -import data from '../story/main.ink'; +import data from './story/main.ink'; const story = new Compiler(data).Compile(); @@ -371,9 +371,8 @@ function loadSavePoint() { // Detects which theme (light or dark) to use function setupTheme(globalTagTheme: string | null) { - // load theme from browser memory - var savedTheme; + let savedTheme; try { savedTheme = window.localStorage.getItem('theme'); } catch (e) { @@ -383,8 +382,9 @@ function setupTheme(globalTagTheme: string | null) { // Check whether the OS/browser is configured for dark mode var browserDark = window.matchMedia("(prefers-color-scheme: dark)").matches; - let preferredTheme = savedTheme ?? globalTagTheme ?? (browserDark ? "dark" : null); - preferredTheme && document.body.classList.add(preferredTheme); + let preferredTheme = savedTheme ?? globalTagTheme ?? (browserDark ? "dark" : "light"); + document.body.setAttribute("data-theme", preferredTheme); + console.log(`THEMES: ${savedTheme} ${globalTagTheme} ${browserDark}`) } // Used to hook up the functionality for global functionality buttons @@ -429,9 +429,20 @@ function setupButtons(hasSave: boolean) { continueStory(true); }); - let themeSwitchEl = document.getElementById("theme-switch"); - if (themeSwitchEl) themeSwitchEl.addEventListener("click", function (event) { - document.body.classList.add("switched"); - document.body.classList.toggle("dark"); + let themeSwitchEl = document.getElementById("theme-switch")!; + themeSwitchEl.addEventListener("click", (_) => { + // toggle theme between light and dark. + let currentTheme = document.body.getAttribute("data-theme") ?? "light"; + switch(currentTheme) { + case "light": + default: + currentTheme = "dark"; + break; + case "dark": + currentTheme = "light"; + break; + } + window.localStorage.setItem("theme", currentTheme); + setupTheme(null); }); } diff --git a/src/story/main.ink b/src/story/main.ink new file mode 100644 index 0000000..cdc9e3e --- /dev/null +++ b/src/story/main.ink @@ -0,0 +1,98 @@ +# author: Matteo Settenvini + +// Manual: https://github.com/inkle/ink/blob/master/Documentation/WritingWithInk.md + +VAR stat_assertiveness = 0 +VAR stat_empathy = 0 + +-> disclaimer + +=== disclaimer === + +This is a work of fiction. Names, characters, businesses, places, events, locales, and incidents are either the products of the author’s imagination or used in a fictitious manner. Any resemblance to actual persons, living or dead, or actual events is purely coincidental. # CLASS: disclaimer + ++ [Understood] # CLEAR: -> intro + +=== intro === + +The alarm clock tolls like hell's bells. + +C'mon. # CLASS: strong +Rise and shine. + +I don't want to hear it! # CLASS: talker-sx + +Don't you, now. # CLASS: talker-dx + +* [Be nice.] + ~ stat_empathy++ + -> ending + +* [Be naughty.] + -> ending + +=== ending === + +You have reached the end. + +{ print_stat("{~empathy|love}", stat_empathy) } +{ print_stat("assertiveness", stat_assertiveness) } + +-> END + +// ------------ HELPER functions ------------------ + +=== function print_stat(name, stat) ==== + +You {~have used|decided to employ|went to use} the power of {name} {print_num(stat)} time{stat != 1:s}. + + +=== function print_num(x) === +{ + - x >= 1000: + {print_num(x / 1000)} thousand { x mod 1000 > 0:{print_num(x mod 1000)}} + - x >= 100: + {print_num(x / 100)} hundred { x mod 100 > 0:and {print_num(x mod 100)}} + - x == 0: + zero + - else: + { x >= 20: + { x / 10: + - 2: twenty + - 3: thirty + - 4: forty + - 5: fifty + - 6: sixty + - 7: seventy + - 8: eighty + - 9: ninety + } + { x mod 10 > 0:<>-<>} + } + { x < 10 || x > 20: + { x mod 10: + - 1: one + - 2: two + - 3: three + - 4: four + - 5: five + - 6: six + - 7: seven + - 8: eight + - 9: nine + } + - else: + { x: + - 10: ten + - 11: eleven + - 12: twelve + - 13: thirteen + - 14: fourteen + - 15: fifteen + - 16: sixteen + - 17: seventeen + - 18: eighteen + - 19: nineteen + } + } +} diff --git a/src/styles/global.scss b/src/styles/global.scss index cea0e7f..930bf82 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,5 +1,10 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Quattrocento:wght@400;700&display=swap'); +$fg-light: #555; +$fg-dark: #e0e0e0; +$enabled-link-fg-light: #2d80c8; +$enabled-link-fg-dark: #a5bdff; + body { font-family: 'Inter', sans-serif; font-weight: 600; @@ -34,7 +39,7 @@ h2 { font-style: italic; font-family: sans-serif; font-weight: lighter; - color: #BBB; + color: $fg-light; } .header { @@ -139,14 +144,14 @@ h2 { p { font-size: 16pt; - color: #888; + color: $fg-light; line-height: 1.7em; font-weight: lighter; } a { font-weight: 700; - color: #b97c2c; + color: $enabled-link-fg-light; font-family: sans-serif; text-decoration: none; @@ -252,12 +257,12 @@ img { Dark Theme (Added in Inky 0.10.0) # theme: dark */ -body.dark { +body[data-theme=dark] { background: black; color: white; h2 { - color: #666; + color: $fg-dark; } .container { @@ -269,7 +274,7 @@ body.dark { } a { - color: #cc8f1a; + color: $enabled-link-fg-dark; @media screen and (prefers-reduced-motion: no-preference) { transition: color 0.6s; @@ -280,6 +285,10 @@ body.dark { } } + p { + color: $fg-dark; + } + .unclickable { color: #c4af87; cursor:not-allowed; diff --git a/src/styles/story.scss b/src/styles/story.scss index bc5951d..58fa248 100644 --- a/src/styles/story.scss +++ b/src/styles/story.scss @@ -1,5 +1,72 @@ +@use 'sass:color'; + +// ------ Colors ------------ + +$portrait-bg: #efefef; + +$postbox1-fg: white; +$postbox1-bg: #b65fcf; +$postbox2-fg: black; +$postbox2-bg: #b7e8c1; + +// -------------------------- + .disclaimer { font-variant: small-caps; font-style: italic; text-align: justify; -} \ No newline at end of file +} + +.emph { + font-weight: bold; +} + +.talker { + position: relative; + border-radius: 5pt; + padding: 1ex; +} + +.portrait { + display: block; + position: absolute; + content: ''; + + background: $portrait-bg url('images/avatar.svg') center/60% no-repeat scroll; + border-radius: 50%; + border: .5px solid color.scale($portrait-bg, $blackness: 30%); + + top: 50%; + margin-top: -25px; + height: 50px; + width: 50px; +} + +.talker-sx { + @extend .talker; + background-color: $postbox1-bg; + border: .5px solid color.scale($postbox1-bg, $blackness: 30%); + color: $postbox1-fg; + margin-right: 10em; + + &::before { + @extend .portrait; + left: 100%; + margin-left: .5em; + } +} + +.talker-dx { + @extend .talker; + + background-color: $postbox2-bg; + border: .5px solid color.scale($postbox2-bg, $blackness: 30%); + color: $postbox2-fg; + margin-left: 10em; + + &::before { + @extend .portrait; + right: 100%; + margin-right: .5em; + } +} diff --git a/story/main.ink b/story/main.ink index 7c62ec7..ff20127 100644 --- a/story/main.ink +++ b/story/main.ink @@ -1,5 +1,7 @@ # author: Matteo Settenvini +// Manual: https://github.com/inkle/ink/blob/master/Documentation/WritingWithInk.md + VAR stat_assertiveness = 0 VAR stat_empathy = 0 @@ -13,17 +15,28 @@ This is a work of fiction. Names, characters, businesses, places, events, locale === intro === -The alarm clock rings hell's bells. +The alarm clock tolls like hell's bells. -* Be nice. -> ending - ~ stat_empathy++ -* Be naughty. -> ending +C'mon. # CLASS: strong +Rise and shine. + +I don't want to hear it! # CLASS: talker-paul + +Don't you, now. # CLASS: talker-mary + +* [Be nice.] + ~ stat_empathy++ + -> ending + +* [Be naughty.] + -> ending === ending === You have reached the end. { print_stat("{~empathy|love}", stat_empathy) } +{ print_stat("assertiveness", stat_assertiveness) } -> END @@ -31,7 +44,7 @@ You have reached the end. === function print_stat(name, stat) ==== -You {~have used|decided to employ} the power of {name} {print_num(stat)} time{stat != 1:s}. +You {~have used|decided to employ|went to use} the power of {name} {print_num(stat)} time{stat != 1:s}. === function print_num(x) === diff --git a/webpack.config.js b/webpack.config.js index 9e17ed8..d4d2a15 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,17 +1,19 @@ +const CopyWebpackPlugin = require("copy-webpack-plugin"); const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = { entry: './src/index.ts', // Entry file + devtool: "inline-source-map", output: { - filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), + clean: true, }, module: { rules: [ { - test: /\.ts$/, - use: 'ts-loader', + test: /\.tsx?$/, + use: ['ts-loader'], exclude: /node_modules/, }, { @@ -36,14 +38,23 @@ module.exports = { new HtmlWebpackPlugin({ title: "Work It Out", template: "src/index.html", - }) + }), + new CopyWebpackPlugin({ + patterns: [ + { from: "src/images", to: "images" }, + ] + }), ], devServer: { - static: { - directory: path.join(__dirname, 'dist'), + devMiddleware: { + index: true, + writeToDisk: true, }, liveReload: true, compress: true, port: 9000, }, + optimization: { + runtimeChunk: 'single', + }, }; diff --git a/work-it-out.code-workspace b/work-it-out.code-workspace deleted file mode 100644 index 1cda41a..0000000 --- a/work-it-out.code-workspace +++ /dev/null @@ -1,29 +0,0 @@ -{ - "folders": [ - { - "name": "Ink Story", - "path": "story" - }, - { - "name": "WebPack Sources", - "path": "src" - }, - { - "name": "Toplevel", - "path": "." - } - ], - "extensions": { - "recommendations": [ - "ban.spellright" - ] - }, - "settings": { - "spellright.language": ["en-US"], - - "[plaintext]": { - "editor.wordWrap": "bounded", - "editor.wordWrapColumn": 80 - } - } -} \ No newline at end of file