From 7eec6ce4da714afc4d659320cb0f4ef6647d3d81 Mon Sep 17 00:00:00 2001 From: Matteo Settenvini Date: Sun, 1 Sep 2024 14:28:50 +0200 Subject: [PATCH] Add story basic framework --- .gitignore | 2 + src/index.html | 4 +- src/index.ts | 9 +- src/style.scss | 298 +----------------------------------- src/styles/global.scss | 303 +++++++++++++++++++++++++++++++++++++ src/styles/story.scss | 5 + story/main.ink | 81 +++++++++- work-it-out.code-workspace | 29 ++++ 8 files changed, 424 insertions(+), 307 deletions(-) create mode 100644 src/styles/global.scss create mode 100644 src/styles/story.scss create mode 100644 work-it-out.code-workspace diff --git a/.gitignore b/.gitignore index 52c893f..fc52e39 100644 --- a/.gitignore +++ b/.gitignore @@ -2,5 +2,7 @@ *.orig *.rej +/.vscode + /node_modules /dist diff --git a/src/index.html b/src/index.html index 5bca5c8..9db4428 100644 --- a/src/index.html +++ b/src/index.html @@ -7,8 +7,10 @@ <%= htmlWebpackPlugin.options.title %> -
+
+ +

WRITTEN IN INK

diff --git a/src/index.ts b/src/index.ts index 25031b5..25610d4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,12 +4,17 @@ // Under the MIT license. import { Compiler } from 'inkjs/compiler/Compiler'; +import { ErrorType } from 'inkjs/engine/Error'; import "./style.scss"; import data from '../story/main.ink'; const story = new Compiler(data).Compile(); +story.onError = (message: string, type: ErrorType) => { + document.getElementById('errors')!.innerText = `BUG: ${type}: ${message}`; +}; + // Global tags - those at the top of the ink file // We support: // # theme: dark @@ -243,14 +248,12 @@ function clearStory() { function restart() { clearStory(); - story.ResetState(); setVisible(".header", true); // set save point to here savePoint = story.state.toJson(); - continueStory(true); outerScrollContainer.scrollTo(0, 0); @@ -335,7 +338,7 @@ function setVisible(selector: string, visible: boolean) { } // Helper for parsing out tags of the form: -// # PROPERTY: value +// # PROPERTY: valuedi // e.g. IMAGE: source path function splitPropertyTag(tag: string) { var propertySplitIdx = tag.indexOf(":"); diff --git a/src/style.scss b/src/style.scss index e39ce0a..8f6a554 100644 --- a/src/style.scss +++ b/src/style.scss @@ -1,296 +1,2 @@ -@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'); - -body { - font-family: 'Inter', sans-serif; - font-weight: 600; - background: white; - overflow: hidden; - - @media screen and (prefers-reduced-motion: no-preference) { - &.switched { - transition: color 0.6s, background-color 0.6s; - } - } -} - -@mixin titles { - text-align: center; - font-family: "Quattrocento", Georgia, 'Times New Roman', Times, serif; - margin: 0; - padding: 0; -} - -h1 { - @include titles; - - font-size: 30pt; - margin-bottom: 10px; -} - -h2 { - @include titles; - - font-size: 14pt; - font-style: italic; - font-family: sans-serif; - font-weight: lighter; - color: #BBB; -} - -.header { - padding-top: 3em; - padding-bottom: 3em; -} - -/* - Built-in class: - # author: Name -*/ -.byline { - font-style: italic; -} - -.written-in-ink { - z-index: 3; - font-size: 9pt; - font-family: sans-serif; - text-align: center; - font-weight: 700; - position: fixed; - display: block; - width: 100%; - background: white; - margin: 0; - padding-top: 6px; - padding-bottom: 6px; - height: 14px; - top: 0; -} - -@media screen and (prefers-reduced-motion: no-preference) { - .written-in-ink { - transition: color 0.6s, background 0.6s; - } -} - -/* - Enables