Initial skeleton
This commit is contained in:
commit
cb5edfe635
GPG Key ID:
1C1B12600D81DE05
|
|
@ -0,0 +1,6 @@
|
||||||
|
*~
|
||||||
|
*.orig
|
||||||
|
*.rej
|
||||||
|
|
||||||
|
/node_modules
|
||||||
|
/dist
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
{
|
||||||
|
"name": "work-it-out",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"description": "",
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "CC-BY-SA-4.0",
|
||||||
|
"browser": "index.js",
|
||||||
|
"devDependencies": {
|
||||||
|
"@tsconfig/node20": "^20.1.4",
|
||||||
|
"css-loader": "^7.1.2",
|
||||||
|
"html-webpack-plugin": "^5.6.0",
|
||||||
|
"inkjs": "^2.3",
|
||||||
|
"sass": "^1.77.8",
|
||||||
|
"sass-loader": "^16.0.1",
|
||||||
|
"style-loader": "^4.0.0",
|
||||||
|
"ts-loader": "^9.5.1",
|
||||||
|
"typescript": "^5.5.4",
|
||||||
|
"webpack": "^5.94.0",
|
||||||
|
"webpack-cli": "^5.1.4",
|
||||||
|
"webpack-dev-server": "^5.0.4"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"preinstall": "npx only-allow pnpm",
|
||||||
|
"build": "webpack --mode production",
|
||||||
|
"dev": "webpack serve --mode development",
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 20.0.0",
|
||||||
|
"pnpm": ">= 9.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,4 @@
|
||||||
|
declare module '*.ink' {
|
||||||
|
const value: string;
|
||||||
|
export default value;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="icon" href="data:;base64,iVBORw0KGgo="><!-- Empty favicon -->
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="outerContainer">
|
||||||
|
<h3 class="written-in-ink"><a href="https://www.inklestudios.com/ink">WRITTEN IN INK</a></h3>
|
||||||
|
|
||||||
|
<div id="controls" class="buttons">
|
||||||
|
<a id="rewind" title="Restart story from beginning">restart</a>
|
||||||
|
<a id="save" title="Save progress">save</a>
|
||||||
|
<a id="reload" title="Reload from save point">load</a>
|
||||||
|
<a id="theme-switch" title="Switch theme">theme</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="story" class="container">
|
||||||
|
<div class="header">
|
||||||
|
<h1>Work It Out</h1>
|
||||||
|
<h2 class="byline"></h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,434 @@
|
||||||
|
// This file was adapted to Typescript from the original
|
||||||
|
// example from https://github.com/inkle/inky/blob/858f7e545f864d114ed2bc662e0948a53461695c/app/export-for-web-template/main.js
|
||||||
|
// Copyright (c) 2016 inkle Ltd.
|
||||||
|
// Under the MIT license.
|
||||||
|
|
||||||
|
import { Compiler } from 'inkjs/compiler/Compiler';
|
||||||
|
|
||||||
|
import "./style.scss";
|
||||||
|
import data from '../story/main.ink';
|
||||||
|
|
||||||
|
const story = new Compiler(data).Compile();
|
||||||
|
|
||||||
|
// Global tags - those at the top of the ink file
|
||||||
|
// We support:
|
||||||
|
// # theme: dark
|
||||||
|
// # author: Your Name
|
||||||
|
var globalTagTheme: string | null = null;
|
||||||
|
story.globalTags?.forEach((globalTag) => {
|
||||||
|
let splitTag = splitPropertyTag(globalTag);
|
||||||
|
switch (splitTag?.property) {
|
||||||
|
case "theme":
|
||||||
|
globalTagTheme = splitTag.val;
|
||||||
|
break;
|
||||||
|
case "author":
|
||||||
|
var byline = document.querySelector('.byline')!;
|
||||||
|
byline.innerHTML = "by " + splitTag.val;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
setupTheme(globalTagTheme);
|
||||||
|
|
||||||
|
var storyContainer = document.getElementById('story')!;
|
||||||
|
var outerScrollContainer = document.querySelector<HTMLElement>('.outerContainer')!;
|
||||||
|
|
||||||
|
// page features setup
|
||||||
|
var hasSave = loadSavePoint();
|
||||||
|
setupButtons(hasSave);
|
||||||
|
|
||||||
|
// Set initial save point
|
||||||
|
var savePoint = story.state.toJson();
|
||||||
|
|
||||||
|
// Kick off the start of the story!
|
||||||
|
continueStory(true);
|
||||||
|
|
||||||
|
// Main story processing function. Each time this is called it generates
|
||||||
|
// all the next content up as far as the next set of choices.
|
||||||
|
function continueStory(this: any, firstTime: boolean) {
|
||||||
|
var paragraphIndex = 0;
|
||||||
|
var delay = 0.0;
|
||||||
|
|
||||||
|
// Don't over-scroll past new content
|
||||||
|
var previousBottomEdge = firstTime ? 0 : contentBottomEdgeY();
|
||||||
|
|
||||||
|
// Generate story text - loop through available content
|
||||||
|
while (story.canContinue) {
|
||||||
|
|
||||||
|
// Get ink to generate the next paragraph
|
||||||
|
var paragraphText = story.Continue()!;
|
||||||
|
|
||||||
|
// Any special tags included with this line
|
||||||
|
var customClasses: string[] = [];
|
||||||
|
|
||||||
|
story.currentTags?.forEach((tag) => {
|
||||||
|
// Detect tags of the form "X: Y". Currently used for IMAGE and CLASS but could be
|
||||||
|
// customised to be used for other things too.
|
||||||
|
var splitTag = splitPropertyTag(tag);
|
||||||
|
|
||||||
|
switch (splitTag?.property.toUpperCase()) {
|
||||||
|
// AUDIO: src
|
||||||
|
case "AUDIO":
|
||||||
|
if ('audio' in this) {
|
||||||
|
this.audio.pause();
|
||||||
|
this.audio.removeAttribute('src');
|
||||||
|
this.audio.load();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.audio = new Audio(splitTag.val);
|
||||||
|
this.audio.play();
|
||||||
|
break;
|
||||||
|
|
||||||
|
|
||||||
|
// AUDIOLOOP: src
|
||||||
|
case "AUDIOLOOP":
|
||||||
|
if ('audioLoop' in this) {
|
||||||
|
this.audioLoop.pause();
|
||||||
|
this.audioLoop.removeAttribute('src');
|
||||||
|
this.audioLoop.load();
|
||||||
|
}
|
||||||
|
this.audioLoop = new Audio(splitTag.val);
|
||||||
|
this.audioLoop.play();
|
||||||
|
this.audioLoop.loop = true;
|
||||||
|
break;
|
||||||
|
|
||||||
|
// IMAGE: src
|
||||||
|
case "IMAGE":
|
||||||
|
var imageElement = document.createElement('img');
|
||||||
|
imageElement.src = splitTag.val;
|
||||||
|
storyContainer.appendChild(imageElement);
|
||||||
|
|
||||||
|
imageElement.onload = () => {
|
||||||
|
console.log(`scrollingto ${previousBottomEdge}`)
|
||||||
|
scrollDown(previousBottomEdge)
|
||||||
|
}
|
||||||
|
|
||||||
|
showAfter(delay, imageElement);
|
||||||
|
delay += 200.0;
|
||||||
|
break;
|
||||||
|
|
||||||
|
// LINK: url
|
||||||
|
case "LINK":
|
||||||
|
window.location.href = splitTag.val;
|
||||||
|
break;
|
||||||
|
|
||||||
|
|
||||||
|
// LINKOPEN: url
|
||||||
|
case "LINKOPEN":
|
||||||
|
window.open(splitTag.val);
|
||||||
|
break;
|
||||||
|
|
||||||
|
// BACKGROUND: src
|
||||||
|
case "BACKGROUND":
|
||||||
|
outerScrollContainer.style.backgroundImage = 'url(' + splitTag.val + ')';
|
||||||
|
break;
|
||||||
|
|
||||||
|
// CLASS: className
|
||||||
|
case "CLASS":
|
||||||
|
customClasses.push(splitTag.val);
|
||||||
|
break;
|
||||||
|
|
||||||
|
// CLEAR - removes all existing content.
|
||||||
|
case "CLEAR":
|
||||||
|
clearStory();
|
||||||
|
break;
|
||||||
|
|
||||||
|
// RESTART - clears everything and restarts the story from the beginning
|
||||||
|
case "RESTART":
|
||||||
|
restart();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Check if paragraphText is empty
|
||||||
|
if (paragraphText?.trim().length == 0) {
|
||||||
|
continue; // Skip empty paragraphs
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create paragraph element (initially hidden)
|
||||||
|
var paragraphElement = document.createElement('p');
|
||||||
|
paragraphElement.innerHTML = paragraphText;
|
||||||
|
storyContainer.appendChild(paragraphElement);
|
||||||
|
|
||||||
|
// Add any custom classes derived from ink tags
|
||||||
|
for (var i = 0; i < customClasses.length; i++)
|
||||||
|
paragraphElement.classList.add(customClasses[i]);
|
||||||
|
|
||||||
|
// Fade in paragraph after a short delay
|
||||||
|
showAfter(delay, paragraphElement);
|
||||||
|
delay += 200.0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create HTML choices from ink choices
|
||||||
|
story.currentChoices.forEach((choice) => {
|
||||||
|
|
||||||
|
// Create paragraph with anchor element
|
||||||
|
var customClasses: string[] = [];
|
||||||
|
var isClickable = true;
|
||||||
|
choice.tags?.forEach((choiceTag) => {
|
||||||
|
var splitTag = splitPropertyTag(choiceTag);
|
||||||
|
switch(splitTag?.property.toUpperCase()) {
|
||||||
|
|
||||||
|
case "UNCLICKABLE":
|
||||||
|
isClickable = false;
|
||||||
|
break;
|
||||||
|
|
||||||
|
|
||||||
|
case "CLASS":
|
||||||
|
customClasses.push(splitTag.val);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var choiceParagraphElement = document.createElement('p');
|
||||||
|
choiceParagraphElement.classList.add("choice");
|
||||||
|
|
||||||
|
customClasses.forEach((klass) => {
|
||||||
|
choiceParagraphElement.classList.add(klass);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isClickable) {
|
||||||
|
choiceParagraphElement.innerHTML = `<a href='#'>${choice.text}</a>`
|
||||||
|
} else {
|
||||||
|
choiceParagraphElement.innerHTML = `<span class='unclickable'>${choice.text}</span>`
|
||||||
|
}
|
||||||
|
storyContainer.appendChild(choiceParagraphElement);
|
||||||
|
|
||||||
|
// Fade choice in after a short delay
|
||||||
|
showAfter(delay, choiceParagraphElement);
|
||||||
|
delay += 200.0;
|
||||||
|
|
||||||
|
// Click on choice
|
||||||
|
if (isClickable) {
|
||||||
|
var choiceAnchorEl = choiceParagraphElement.querySelectorAll("a")[0];
|
||||||
|
choiceAnchorEl.addEventListener("click", function (event) {
|
||||||
|
|
||||||
|
// Don't follow <a> link
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
// Extend height to fit
|
||||||
|
// We do this manually so that removing elements and creating new ones doesn't
|
||||||
|
// cause the height (and therefore scroll) to jump backwards temporarily.
|
||||||
|
storyContainer.style.height = contentBottomEdgeY() + "px";
|
||||||
|
|
||||||
|
// Remove all existing choices
|
||||||
|
removeAll(".choice");
|
||||||
|
|
||||||
|
// Tell the story where to go next
|
||||||
|
story.ChooseChoiceIndex(choice.index);
|
||||||
|
|
||||||
|
// This is where the save button will save from
|
||||||
|
savePoint = story.state.toJson();
|
||||||
|
|
||||||
|
// Aaand loop
|
||||||
|
continueStory(false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Unset storyContainer's height, allowing it to resize itself
|
||||||
|
storyContainer.style.height = "";
|
||||||
|
|
||||||
|
if (!firstTime)
|
||||||
|
scrollDown(previousBottomEdge);
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearStory() {
|
||||||
|
removeAll("p");
|
||||||
|
removeAll("img");
|
||||||
|
|
||||||
|
// Comment out this line if you want to leave the header visible when clearing
|
||||||
|
setVisible(".header", false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function restart() {
|
||||||
|
clearStory();
|
||||||
|
|
||||||
|
story.ResetState();
|
||||||
|
|
||||||
|
setVisible(".header", true);
|
||||||
|
|
||||||
|
// set save point to here
|
||||||
|
savePoint = story.state.toJson();
|
||||||
|
|
||||||
|
continueStory(true);
|
||||||
|
|
||||||
|
outerScrollContainer.scrollTo(0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------
|
||||||
|
// Various Helper functions
|
||||||
|
// -----------------------------------
|
||||||
|
|
||||||
|
// Detects whether the user accepts animations
|
||||||
|
function isAnimationEnabled() {
|
||||||
|
return window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fades in an element after a specified delay
|
||||||
|
function showAfter(delay: number, el: Element) {
|
||||||
|
if (isAnimationEnabled()) {
|
||||||
|
el.classList.add("hide");
|
||||||
|
setTimeout(function () { el.classList.remove("hide") }, delay);
|
||||||
|
} else {
|
||||||
|
// If the user doesn't want animations, show immediately
|
||||||
|
el.classList.remove("hide");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Scrolls the page down, but no further than the bottom edge of what you could
|
||||||
|
// see previously, so it doesn't go too far.
|
||||||
|
function scrollDown(previousBottomEdge: number) {
|
||||||
|
// If the user doesn't want animations, let them scroll manually
|
||||||
|
if (!isAnimationEnabled()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Line up top of screen with the bottom of where the previous content ended
|
||||||
|
var target = previousBottomEdge;
|
||||||
|
|
||||||
|
// Can't go further than the very bottom of the page
|
||||||
|
var limit = outerScrollContainer.scrollHeight - outerScrollContainer.clientHeight;
|
||||||
|
if (target > limit) target = limit;
|
||||||
|
|
||||||
|
var start = outerScrollContainer.scrollTop;
|
||||||
|
|
||||||
|
var dist = target - start;
|
||||||
|
var duration = 300 + 300 * dist / 100;
|
||||||
|
var startTime: EpochTimeStamp | null = null;
|
||||||
|
function step(time: EpochTimeStamp) {
|
||||||
|
if (startTime == null) startTime = time;
|
||||||
|
var t = (time - startTime) / duration;
|
||||||
|
var lerp = 3 * t * t - 2 * t * t * t; // ease in/out
|
||||||
|
outerScrollContainer.scrollTo(0, (1.0 - lerp) * start + lerp * target);
|
||||||
|
if (t < 1) requestAnimationFrame(step);
|
||||||
|
}
|
||||||
|
requestAnimationFrame(step);
|
||||||
|
}
|
||||||
|
|
||||||
|
// The Y coordinate of the bottom end of all the story content, used
|
||||||
|
// for growing the container, and deciding how far to scroll.
|
||||||
|
function contentBottomEdgeY() {
|
||||||
|
var bottomElement = storyContainer.lastElementChild as HTMLElement;
|
||||||
|
return bottomElement ? bottomElement.offsetTop + bottomElement.offsetHeight : 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove all elements that match the given selector. Used for removing choices after
|
||||||
|
// you've picked one, as well as for the CLEAR and RESTART tags.
|
||||||
|
function removeAll(selector: string) {
|
||||||
|
storyContainer.querySelectorAll<HTMLElement>(selector).forEach((el) => {
|
||||||
|
el.parentNode!.removeChild(el);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Used for hiding and showing the header when you CLEAR or RESTART the story respectively.
|
||||||
|
function setVisible(selector: string, visible: boolean) {
|
||||||
|
var allElements = storyContainer.querySelectorAll(selector);
|
||||||
|
for (var i = 0; i < allElements.length; i++) {
|
||||||
|
var el = allElements[i];
|
||||||
|
if (!visible) {
|
||||||
|
el.classList.add("invisible");
|
||||||
|
} else {
|
||||||
|
el.classList.remove("invisible");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper for parsing out tags of the form:
|
||||||
|
// # PROPERTY: value
|
||||||
|
// e.g. IMAGE: source path
|
||||||
|
function splitPropertyTag(tag: string) {
|
||||||
|
var propertySplitIdx = tag.indexOf(":");
|
||||||
|
if (propertySplitIdx != null) {
|
||||||
|
var property = tag.slice(0, propertySplitIdx).trim();
|
||||||
|
var val = tag.slice(propertySplitIdx + 1).trim();
|
||||||
|
return {
|
||||||
|
property: property,
|
||||||
|
val: val
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Loads save state if exists in the browser memory
|
||||||
|
function loadSavePoint() {
|
||||||
|
|
||||||
|
try {
|
||||||
|
let savedState = window.localStorage.getItem('save-state');
|
||||||
|
if (savedState) {
|
||||||
|
story.state.LoadJson(savedState);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.debug("Couldn't load save state");
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Detects which theme (light or dark) to use
|
||||||
|
function setupTheme(globalTagTheme: string | null) {
|
||||||
|
|
||||||
|
// load theme from browser memory
|
||||||
|
var savedTheme;
|
||||||
|
try {
|
||||||
|
savedTheme = window.localStorage.getItem('theme');
|
||||||
|
} catch (e) {
|
||||||
|
console.debug("Couldn't load saved theme");
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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" : "light");
|
||||||
|
document.body.classList.add(preferredTheme);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Used to hook up the functionality for global functionality buttons
|
||||||
|
function setupButtons(hasSave: boolean) {
|
||||||
|
|
||||||
|
let rewindEl = document.getElementById("rewind");
|
||||||
|
if (rewindEl) rewindEl.addEventListener("click", function (event) {
|
||||||
|
removeAll("p");
|
||||||
|
removeAll("img");
|
||||||
|
setVisible(".header", false);
|
||||||
|
restart();
|
||||||
|
});
|
||||||
|
|
||||||
|
let saveEl = document.getElementById("save");
|
||||||
|
if (saveEl) saveEl.addEventListener("click", function (event) {
|
||||||
|
try {
|
||||||
|
window.localStorage.setItem('save-state', savePoint);
|
||||||
|
document.getElementById("reload")!.removeAttribute("disabled");
|
||||||
|
window.localStorage.setItem('theme', document.body.classList.contains("dark") ? "dark" : "");
|
||||||
|
} catch (e) {
|
||||||
|
console.warn("Couldn't save state");
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
let reloadEl = document.getElementById("reload")!;
|
||||||
|
if (!hasSave) {
|
||||||
|
reloadEl.setAttribute("disabled", "disabled");
|
||||||
|
}
|
||||||
|
reloadEl.addEventListener("click", function (event) {
|
||||||
|
if (reloadEl.getAttribute("disabled"))
|
||||||
|
return;
|
||||||
|
|
||||||
|
removeAll("p");
|
||||||
|
removeAll("img");
|
||||||
|
try {
|
||||||
|
let savedState = window.localStorage.getItem('save-state');
|
||||||
|
if (savedState) story.state.LoadJson(savedState);
|
||||||
|
} catch (e) {
|
||||||
|
console.debug("Couldn't load save state");
|
||||||
|
}
|
||||||
|
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");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,306 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,700|Quattrocento:700');
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
font-weight: lighter;
|
||||||
|
background: white;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (prefers-reduced-motion: no-preference) {
|
||||||
|
body.switched {
|
||||||
|
transition: color 0.6s, background-color 0.6s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2 {
|
||||||
|
text-align: center;
|
||||||
|
font-family: "Quattrocento", Georgia, 'Times New Roman', Times, serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 30pt;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
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 <iframe> support work on itch.io when using mobile iOS
|
||||||
|
*/
|
||||||
|
.outerContainer {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
overflow: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
margin-top: 24px;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 980px) {
|
||||||
|
.outerContainer {
|
||||||
|
margin-top: 44px;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: block;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
padding-top: 4em;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (prefers-reduced-motion: no-preference) {
|
||||||
|
.switched .container {
|
||||||
|
transition: background-color 0.6s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 13pt;
|
||||||
|
color: #888;
|
||||||
|
line-height: 1.7em;
|
||||||
|
font-weight: lighter;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 700;
|
||||||
|
color: #b97c2c;
|
||||||
|
font-family: sans-serif;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unclickable {
|
||||||
|
font-weight: 700;
|
||||||
|
color: #4f3411;
|
||||||
|
font-family: sans-serif;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (prefers-reduced-motion: no-preference) {
|
||||||
|
a {
|
||||||
|
transition: color 0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
transition: color 0.1s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: black;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .hide {
|
||||||
|
opacity: 0.0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .invisible {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container>* {
|
||||||
|
opacity: 1.0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (prefers-reduced-motion: no-preference) {
|
||||||
|
.container>* {
|
||||||
|
transition: opacity 1.0s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Class applied to all choices
|
||||||
|
(Will always appear inside <p> element by default.)
|
||||||
|
*/
|
||||||
|
.choice {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Class applied to first choice
|
||||||
|
*/
|
||||||
|
:not(.choice)+.choice {
|
||||||
|
padding-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Class applied to choice links
|
||||||
|
*/
|
||||||
|
.choice a, .choice span {
|
||||||
|
font-size: 15pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Built-in class:
|
||||||
|
The End # CLASS: end
|
||||||
|
*/
|
||||||
|
.end {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
color: black;
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#controls {
|
||||||
|
z-index: 4;
|
||||||
|
font-size: 9pt;
|
||||||
|
text-align: center;
|
||||||
|
padding-bottom: 6px;
|
||||||
|
position: fixed;
|
||||||
|
right: 14px;
|
||||||
|
top: 4px;
|
||||||
|
user-select: none;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (prefers-reduced-motion: no-preference) {
|
||||||
|
#controls {
|
||||||
|
transition: color 0.6s, background 0.6s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#controls [disabled] {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
#controls>*:not(:last-child):after {
|
||||||
|
content: " | ";
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 980px) {
|
||||||
|
#controls {
|
||||||
|
z-index: 2;
|
||||||
|
padding-top: 24px;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Dark Theme (Added in Inky 0.10.0)
|
||||||
|
# theme: dark
|
||||||
|
*/
|
||||||
|
|
||||||
|
body.dark {
|
||||||
|
background: black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark h2 {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .container {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .written-in-ink {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark a {
|
||||||
|
color: #cc8f1a;
|
||||||
|
}
|
||||||
|
.dark .unclickable{
|
||||||
|
color: #c4af87;
|
||||||
|
cursor:not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark a:hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (prefers-reduced-motion: no-preference) {
|
||||||
|
.dark a {
|
||||||
|
transition: color 0.6s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark strong {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark #controls [disabled] {
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .end {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark #controls {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
# author: Matteo Settenvini
|
||||||
|
|
||||||
|
-> intro
|
||||||
|
|
||||||
|
=== intro ===
|
||||||
|
|
||||||
|
We were thinking that. And again, and again.
|
||||||
|
|
||||||
|
+ Maybe yes -> ending
|
||||||
|
+ Maybe not -> intro
|
||||||
|
|
||||||
|
-> ending
|
||||||
|
|
||||||
|
=== ending ===
|
||||||
|
|
||||||
|
Goodbye then.
|
||||||
|
|
||||||
|
-> END
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"extends": "@tsconfig/node20/tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": ["es2023", "DOM"]
|
||||||
|
},
|
||||||
|
"include": ["src/**/*"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: './src/index.ts', // Entry file
|
||||||
|
output: {
|
||||||
|
filename: 'bundle.js',
|
||||||
|
path: path.resolve(__dirname, 'dist'),
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.ts$/,
|
||||||
|
use: 'ts-loader',
|
||||||
|
exclude: /node_modules/,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.ink$/,
|
||||||
|
type: 'asset/source',
|
||||||
|
exclude: /node_modules/,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.s[ac]ss$/,
|
||||||
|
use: [
|
||||||
|
"style-loader", // Creates `style` nodes from JS strings
|
||||||
|
"css-loader", // Translates CSS into CommonJS
|
||||||
|
"sass-loader", // Compiles Sass to CSS
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.ts', '.js'],
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
title: "Work It Out",
|
||||||
|
template: "src/index.html",
|
||||||
|
})
|
||||||
|
],
|
||||||
|
devServer: {
|
||||||
|
static: {
|
||||||
|
directory: path.join(__dirname, 'dist'),
|
||||||
|
},
|
||||||
|
liveReload: true,
|
||||||
|
compress: true,
|
||||||
|
port: 9000,
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue