Add shared Ink embedder
This commit is contained in:
Meta Vens
parent
6b4f72a558
commit
d0047d0f24
8 changed files with 6358 additions and 2 deletions
32
README.md
32
README.md
|
|
@ -55,6 +55,38 @@ The SPA source lives in `quartz/graph-spa`. It currently imports the shared `Epi
|
|||
from a sibling `EpiphanyGraph` checkout during local builds, so generated assets should be committed
|
||||
by consumer sites until that viewer is packaged as a normal dependency.
|
||||
|
||||
## Shared Interactive Embeds
|
||||
|
||||
### `Plugin.InkEmbedder`
|
||||
|
||||
Use `Plugin.InkEmbedder()` in a consumer site's emitter list to enable reusable
|
||||
Ink embeds. The plugin contributes the shared Ink runtime loader, player script,
|
||||
and CSS from `quartz/static/interactive/`.
|
||||
|
||||
Authors embed stories with plain HTML:
|
||||
|
||||
```html
|
||||
<div
|
||||
class="aetheria-ink-player"
|
||||
data-ink-format="visual-novel"
|
||||
data-ink-story="/static/interactive/example/story.ink.json"
|
||||
data-visual-manifest="/static/interactive/example/visual-manifest.json"
|
||||
data-scene-label="Scene Name"
|
||||
></div>
|
||||
```
|
||||
|
||||
Supported formats:
|
||||
|
||||
- `data-ink-format="raven"` or omitted: cheap interactive-fiction transcript
|
||||
layout for Raven Collective-style Ink.
|
||||
- `data-ink-format="visual-novel"`: fixed scene view with bottom dialogue bar,
|
||||
speaker avatar, and choices/continue controls inside the dialogue surface.
|
||||
- `data-ink-format="cinematic"`: slide/deck layout with background plates,
|
||||
captions, and optional references.
|
||||
|
||||
The legacy `data-ink-mode` attribute still works. Future sprite staging should
|
||||
extend this embedder rather than inventing another site-local player.
|
||||
|
||||
## Shared Components
|
||||
|
||||
### `AutoIndexFolder`
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ export { Assets } from "./assets"
|
|||
export { Static } from "./static"
|
||||
export { Favicon } from "./favicon"
|
||||
export { ComponentResources } from "./componentResources"
|
||||
export { InkEmbedder } from "./inkEmbedder"
|
||||
export { NotFoundPage } from "./404"
|
||||
export { CNAME } from "./cname"
|
||||
export { CustomOgImages } from "./ogImage"
|
||||
|
|
|
|||
37
quartz/plugins/emitters/inkEmbedder.ts
Normal file
37
quartz/plugins/emitters/inkEmbedder.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import { QuartzEmitterPlugin } from "../types"
|
||||
|
||||
export interface InkEmbedderOptions {
|
||||
scriptSrc?: string
|
||||
styleSrc?: string
|
||||
}
|
||||
|
||||
const defaultOptions: Required<InkEmbedderOptions> = {
|
||||
scriptSrc: "/static/interactive/gamecult-ink-embedder.js",
|
||||
styleSrc: "/static/interactive/gamecult-ink-embedder.css",
|
||||
}
|
||||
|
||||
export const InkEmbedder: QuartzEmitterPlugin<InkEmbedderOptions> = (opts) => {
|
||||
const options = { ...defaultOptions, ...opts }
|
||||
|
||||
return {
|
||||
name: "InkEmbedder",
|
||||
async *emit() {},
|
||||
async *partialEmit() {},
|
||||
externalResources: () => ({
|
||||
css: [
|
||||
{
|
||||
content: options.styleSrc,
|
||||
spaPreserve: true,
|
||||
},
|
||||
],
|
||||
js: [
|
||||
{
|
||||
src: options.scriptSrc,
|
||||
loadTime: "afterDOMReady",
|
||||
contentType: "external",
|
||||
spaPreserve: true,
|
||||
},
|
||||
],
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@ export const Static: QuartzEmitterPlugin = () => ({
|
|||
name: "Static",
|
||||
async *emit({ argv, cfg }) {
|
||||
const staticPath = joinSegments(QUARTZ, "static")
|
||||
const fps = await glob("**", staticPath, cfg.configuration.ignorePatterns)
|
||||
const fps = await glob("**/*", staticPath, cfg.configuration.ignorePatterns, false)
|
||||
const outputStaticPath = joinSegments(argv.output, "static")
|
||||
await fs.promises.mkdir(outputStaticPath, { recursive: true })
|
||||
for (const fp of fps) {
|
||||
|
|
|
|||
427
quartz/static/interactive/gamecult-ink-embedder.css
Normal file
427
quartz/static/interactive/gamecult-ink-embedder.css
Normal file
|
|
@ -0,0 +1,427 @@
|
|||
.aetheria-ink-player {
|
||||
display: grid;
|
||||
gap: 0.9rem;
|
||||
margin: 1.3rem 0 1.6rem;
|
||||
padding: clamp(0.8rem, 2vw, 1.1rem);
|
||||
border: 1px solid rgba(255, 198, 120, 0.2);
|
||||
border-radius: 22px;
|
||||
background:
|
||||
radial-gradient(circle at 16% 12%, rgba(255, 198, 120, 0.12), transparent 24%),
|
||||
radial-gradient(circle at 82% 10%, rgba(104, 172, 255, 0.1), transparent 26%),
|
||||
linear-gradient(180deg, rgba(7, 8, 12, 0.98), rgba(9, 13, 19, 0.96));
|
||||
box-shadow:
|
||||
0 18px 38px rgba(0, 0, 0, 0.24),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.aetheria-ink-status {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
color: rgba(255, 138, 42, 0.96);
|
||||
font-family: var(--titleFont);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.aetheria-ink-cinematic-stage {
|
||||
position: relative;
|
||||
min-height: clamp(480px, 62vh, 680px);
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 198, 120, 0.18);
|
||||
background: #05070b;
|
||||
box-shadow:
|
||||
0 28px 68px rgba(0, 0, 0, 0.44),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.aetheria-ink-visual,
|
||||
.aetheria-ink-visual-plate,
|
||||
.aetheria-ink-visual-scrim {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.aetheria-ink-visual-plate {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
opacity: 0;
|
||||
transform: scale(1.035);
|
||||
filter: saturate(1.08) contrast(1.02) brightness(0.86);
|
||||
transition:
|
||||
opacity 780ms ease,
|
||||
transform 1400ms ease;
|
||||
}
|
||||
|
||||
.aetheria-ink-visual-plate.is-active {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.aetheria-ink-visual-scrim {
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 50% 32%,
|
||||
transparent 0%,
|
||||
rgba(0, 0, 0, 0.1) 34%,
|
||||
rgba(0, 0, 0, 0.7) 100%
|
||||
),
|
||||
linear-gradient(180deg, rgba(3, 5, 8, 0.18), rgba(3, 5, 8, 0.82));
|
||||
}
|
||||
|
||||
.aetheria-ink-visual-caption {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
margin: 0;
|
||||
padding: 0.4rem 0.65rem;
|
||||
border: 1px solid rgba(255, 198, 120, 0.24);
|
||||
border-radius: 999px;
|
||||
background: rgba(5, 8, 13, 0.62);
|
||||
color: rgba(255, 225, 184, 0.92);
|
||||
font-family: var(--titleFont);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.aetheria-ink-slide-references {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 1;
|
||||
width: min(24rem, calc(100% - 2rem));
|
||||
max-width: 42%;
|
||||
padding: 0.62rem 0.72rem 0.68rem;
|
||||
border: 1px solid rgba(255, 198, 120, 0.22);
|
||||
border-radius: 18px;
|
||||
background: rgba(5, 8, 13, 0.68);
|
||||
color: rgba(226, 238, 252, 0.9);
|
||||
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.aetheria-ink-slide-references[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aetheria-ink-slide-references-title {
|
||||
margin: 0 0 0.38rem;
|
||||
color: rgba(255, 225, 184, 0.94);
|
||||
font-family: var(--titleFont);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.12em;
|
||||
line-height: 1.1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.aetheria-ink-slide-references-list {
|
||||
display: grid;
|
||||
gap: 0.24rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.aetheria-ink-slide-references-list li {
|
||||
margin: 0;
|
||||
color: rgba(226, 238, 252, 0.88);
|
||||
font-size: clamp(0.72rem, 1.1vw, 0.82rem);
|
||||
line-height: 1.28;
|
||||
}
|
||||
|
||||
.aetheria-ink-slide-references-list a {
|
||||
color: rgba(255, 198, 120, 0.94);
|
||||
}
|
||||
|
||||
.aetheria-ink-slide-references-list a:hover,
|
||||
.aetheria-ink-slide-references-list a:focus-visible {
|
||||
color: #fff3e8;
|
||||
}
|
||||
|
||||
.aetheria-ink-section {
|
||||
position: absolute;
|
||||
inset: auto clamp(0.85rem, 3vw, 2rem) clamp(1.5rem, 6vh, 4rem);
|
||||
display: grid;
|
||||
place-items: end stretch;
|
||||
}
|
||||
|
||||
.aetheria-ink-section-text {
|
||||
max-width: min(760px, 100%);
|
||||
padding: clamp(1rem, 2.3vw, 1.45rem);
|
||||
border: 1px solid rgba(255, 198, 120, 0.18);
|
||||
border-radius: 24px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(7, 10, 15, 0.72), rgba(10, 16, 23, 0.54)),
|
||||
radial-gradient(circle at 14% 0%, rgba(255, 198, 120, 0.14), transparent 26%);
|
||||
box-shadow:
|
||||
0 20px 54px rgba(0, 0, 0, 0.42),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.aetheria-ink-line,
|
||||
.aetheria-ink-end,
|
||||
.aetheria-ink-error {
|
||||
margin: 0;
|
||||
color: rgba(246, 241, 226, 0.96);
|
||||
font-size: clamp(1.05rem, 1.8vw, 1.32rem);
|
||||
line-height: 1.65;
|
||||
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.aetheria-ink-end,
|
||||
.aetheria-ink-error {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.aetheria-ink-error {
|
||||
color: #ffb7a6;
|
||||
}
|
||||
|
||||
.aetheria-ink-section-text.is-entering {
|
||||
animation: aetheriaInkTextIn 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
||||
}
|
||||
|
||||
.aetheria-ink-section-text.is-exiting {
|
||||
animation: aetheriaInkTextOut 220ms ease both;
|
||||
}
|
||||
|
||||
.aetheria-ink-player-speaker {
|
||||
box-sizing: border-box;
|
||||
width: min(1120px, calc(100vw - 24rem));
|
||||
max-width: calc(100vw - 2rem);
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.aetheria-ink-player-speaker > .aetheria-ink-status {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-stage {
|
||||
position: relative;
|
||||
height: clamp(320px, 42vw, 520px);
|
||||
max-height: calc(100vh - 8rem);
|
||||
min-height: 320px;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: #05070b;
|
||||
box-shadow: 0 26px 72px rgba(0, 0, 0, 0.44);
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-background,
|
||||
.aetheria-ink-speaker-scrim {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-background {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
filter: saturate(1.06) contrast(1.02) brightness(0.92);
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-scrim {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(3, 4, 7, 0.04), rgba(3, 4, 7, 0.48) 56%, rgba(3, 4, 7, 0.76)),
|
||||
radial-gradient(
|
||||
circle at 50% 24%,
|
||||
transparent 0%,
|
||||
rgba(0, 0, 0, 0.08) 44%,
|
||||
rgba(0, 0, 0, 0.5) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-scene {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
padding: 0.42rem 0.68rem;
|
||||
border: 1px solid rgba(255, 198, 120, 0.24);
|
||||
border-radius: 999px;
|
||||
background: rgba(5, 8, 13, 0.64);
|
||||
color: rgba(255, 225, 184, 0.92);
|
||||
font-family: var(--titleFont);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-scene[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-card {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: clamp(128px, 15vw, 190px) minmax(0, 1fr);
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
min-height: clamp(150px, 24vh, 220px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(255, 198, 120, 0.24);
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
border-radius: 0;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(5, 8, 13, 0.9), rgba(9, 14, 22, 0.78)),
|
||||
radial-gradient(circle at 8% 4%, rgba(255, 198, 120, 0.14), transparent 26%);
|
||||
box-shadow:
|
||||
0 24px 60px rgba(0, 0, 0, 0.5),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-card.is-entering {
|
||||
animation: aetheriaInkSpeakerIn 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-card.is-exiting {
|
||||
animation: aetheriaInkTextOut 160ms ease both;
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-avatar-shell {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: inherit;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-right: 1px solid rgba(255, 198, 120, 0.24);
|
||||
border-radius: 0;
|
||||
background: rgba(3, 5, 8, 0.72);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-avatar[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-body {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
align-content: center;
|
||||
min-width: 0;
|
||||
padding: clamp(0.85rem, 2vw, 1.35rem);
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
margin-top: 0.65rem;
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-controls .aetheria-ink-choices {
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-controls .aetheria-ink-continue,
|
||||
.aetheria-ink-speaker-controls .aetheria-ink-restart {
|
||||
justify-self: auto;
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-name {
|
||||
margin: 0;
|
||||
color: rgba(255, 198, 120, 0.96);
|
||||
font-family: var(--titleFont);
|
||||
font-size: clamp(0.9rem, 1.5vw, 1.05rem);
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 1.15;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-line {
|
||||
margin: 0;
|
||||
color: rgba(246, 241, 226, 0.96);
|
||||
font-size: clamp(1rem, 1.65vw, 1.22rem);
|
||||
line-height: 1.55;
|
||||
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.aetheria-ink-choices {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.aetheria-ink-choice,
|
||||
.aetheria-ink-continue,
|
||||
.aetheria-ink-restart {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(255, 198, 120, 0.28);
|
||||
background: rgba(255, 198, 120, 0.1);
|
||||
color: rgba(255, 235, 205, 0.94);
|
||||
transition:
|
||||
background 160ms ease,
|
||||
border-color 160ms ease,
|
||||
transform 160ms ease;
|
||||
}
|
||||
|
||||
.aetheria-ink-choice {
|
||||
padding: 0.75rem 0.95rem;
|
||||
border-radius: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.aetheria-ink-continue,
|
||||
.aetheria-ink-restart {
|
||||
justify-self: center;
|
||||
padding: 0.65rem 1rem;
|
||||
border-radius: 999px;
|
||||
font-family: var(--titleFont);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.aetheria-ink-choice:hover,
|
||||
.aetheria-ink-choice:focus-visible,
|
||||
.aetheria-ink-continue:hover,
|
||||
.aetheria-ink-continue:focus-visible,
|
||||
.aetheria-ink-restart:hover,
|
||||
.aetheria-ink-restart:focus-visible {
|
||||
border-color: rgba(255, 198, 120, 0.6);
|
||||
background: rgba(255, 198, 120, 0.18);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.aetheria-ink-continue[hidden],
|
||||
.aetheria-ink-variables[hidden] {
|
||||
display: none;
|
||||
}
|
||||
621
quartz/static/interactive/gamecult-ink-embedder.js
Normal file
621
quartz/static/interactive/gamecult-ink-embedder.js
Normal file
|
|
@ -0,0 +1,621 @@
|
|||
;(function () {
|
||||
let inkRuntimePromise = null
|
||||
|
||||
function createElement(tag, className, text) {
|
||||
const element = document.createElement(tag)
|
||||
if (className) element.className = className
|
||||
if (text !== undefined) element.textContent = text
|
||||
return element
|
||||
}
|
||||
|
||||
function resolveInkMode(container) {
|
||||
const rawMode = (container.dataset.inkFormat || container.dataset.inkMode || "raven")
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
|
||||
if (["visual-novel", "visual_novel", "vn", "speaker", "speaker-panel"].includes(rawMode)) {
|
||||
return "speaker-panel"
|
||||
}
|
||||
|
||||
if (["cinematic", "deck", "slides", "slide"].includes(rawMode)) {
|
||||
return "cinematic"
|
||||
}
|
||||
|
||||
return "raven"
|
||||
}
|
||||
|
||||
function ensureInkRuntime() {
|
||||
if (window.inkjs && window.inkjs.Story) return Promise.resolve()
|
||||
if (inkRuntimePromise) return inkRuntimePromise
|
||||
|
||||
inkRuntimePromise = new Promise((resolve, reject) => {
|
||||
const existing = document.querySelector('script[data-aetheria-ink-runtime="true"]')
|
||||
if (existing) {
|
||||
existing.addEventListener("load", resolve, { once: true })
|
||||
existing.addEventListener(
|
||||
"error",
|
||||
() => reject(new Error("inkjs runtime failed to load")),
|
||||
{
|
||||
once: true,
|
||||
},
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
const script = document.createElement("script")
|
||||
script.src = "/static/interactive/ink.js"
|
||||
script.defer = true
|
||||
script.dataset.aetheriaInkRuntime = "true"
|
||||
script.addEventListener("load", resolve, { once: true })
|
||||
script.addEventListener("error", () => reject(new Error("inkjs runtime failed to load")), {
|
||||
once: true,
|
||||
})
|
||||
document.head.appendChild(script)
|
||||
})
|
||||
|
||||
return inkRuntimePromise
|
||||
}
|
||||
|
||||
function formatVariableValue(value) {
|
||||
if (value === true) return "true"
|
||||
if (value === false) return "false"
|
||||
if (value === null || value === undefined) return "unset"
|
||||
return String(value)
|
||||
}
|
||||
|
||||
function collectVariables(story) {
|
||||
const state = story.variablesState || {}
|
||||
return Object.keys(state)
|
||||
.filter((name) => !name.startsWith("_") && name !== "$" && typeof state[name] !== "function")
|
||||
.sort()
|
||||
.map((name) => ({
|
||||
name,
|
||||
value: state[name],
|
||||
}))
|
||||
}
|
||||
|
||||
function renderVariables(story, target) {
|
||||
const variables = collectVariables(story)
|
||||
target.replaceChildren()
|
||||
if (variables.length === 0) return
|
||||
|
||||
for (const variable of variables) {
|
||||
const chip = createElement("span", "aetheria-ink-variable")
|
||||
chip.append(createElement("span", "aetheria-ink-variable-name", variable.name))
|
||||
chip.append(
|
||||
createElement("span", "aetheria-ink-variable-value", formatVariableValue(variable.value)),
|
||||
)
|
||||
target.append(chip)
|
||||
}
|
||||
}
|
||||
|
||||
async function loadVisualManifest(container) {
|
||||
const manifestSrc = container.dataset.visualManifest
|
||||
if (!manifestSrc) return null
|
||||
|
||||
const response = await fetch(manifestSrc)
|
||||
if (!response.ok) {
|
||||
throw new Error(`could not fetch ${manifestSrc}: ${response.status}`)
|
||||
}
|
||||
|
||||
return response.json()
|
||||
}
|
||||
|
||||
function resolveSlideUrl(manifest, slide) {
|
||||
if (!manifest || !slide) return ""
|
||||
const base = manifest.image_base || ""
|
||||
return `${base}${slide.image || ""}`
|
||||
}
|
||||
|
||||
function createCinematicStage() {
|
||||
const stage = createElement("div", "aetheria-ink-cinematic-stage")
|
||||
const visual = createElement("div", "aetheria-ink-visual")
|
||||
const plateA = createElement("div", "aetheria-ink-visual-plate is-active")
|
||||
const plateB = createElement("div", "aetheria-ink-visual-plate")
|
||||
const scrim = createElement("div", "aetheria-ink-visual-scrim")
|
||||
const caption = createElement("p", "aetheria-ink-visual-caption")
|
||||
const references = createElement("aside", "aetheria-ink-slide-references")
|
||||
const section = createElement("div", "aetheria-ink-section")
|
||||
const sectionText = createElement("div", "aetheria-ink-section-text")
|
||||
|
||||
visual.append(plateA, plateB, scrim, caption, references)
|
||||
section.append(sectionText)
|
||||
stage.append(visual, section)
|
||||
|
||||
return {
|
||||
stage,
|
||||
plateA,
|
||||
plateB,
|
||||
caption,
|
||||
references,
|
||||
sectionText,
|
||||
activePlate: plateA,
|
||||
inactivePlate: plateB,
|
||||
slideIndex: -1,
|
||||
}
|
||||
}
|
||||
|
||||
function resolveSlideReferences(manifest, slide) {
|
||||
if (!manifest || !slide) return []
|
||||
if (Array.isArray(slide.references)) return slide.references
|
||||
const referenceSets = manifest.references_by_caption || manifest.referencesByCaption || {}
|
||||
const byCaption = referenceSets[slide.caption || manifest.default_caption || ""]
|
||||
return Array.isArray(byCaption) ? byCaption : []
|
||||
}
|
||||
|
||||
function renderSlideReferences(target, references) {
|
||||
target.replaceChildren()
|
||||
if (!references || references.length === 0) {
|
||||
target.hidden = true
|
||||
return
|
||||
}
|
||||
|
||||
target.hidden = false
|
||||
target.append(createElement("p", "aetheria-ink-slide-references-title", "References"))
|
||||
|
||||
const list = createElement("ul", "aetheria-ink-slide-references-list")
|
||||
for (const reference of references) {
|
||||
const item = createElement("li")
|
||||
const label = reference.label || reference.title || reference.url || "Reference"
|
||||
if (reference.url) {
|
||||
const link = createElement("a", "", label)
|
||||
link.href = reference.url
|
||||
link.target = "_blank"
|
||||
link.rel = "noreferrer noopener"
|
||||
item.append(link)
|
||||
} else {
|
||||
item.textContent = label
|
||||
}
|
||||
list.append(item)
|
||||
}
|
||||
target.append(list)
|
||||
}
|
||||
|
||||
function setCinematicSlide(stageState, manifest, index) {
|
||||
if (
|
||||
!stageState ||
|
||||
!manifest ||
|
||||
!Array.isArray(manifest.slides) ||
|
||||
manifest.slides.length === 0
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
const clamped = Math.min(Math.max(index, 0), manifest.slides.length - 1)
|
||||
if (stageState.slideIndex === clamped) return
|
||||
|
||||
const slide = manifest.slides[clamped]
|
||||
const nextPlate = stageState.inactivePlate
|
||||
nextPlate.style.backgroundImage = `url("${resolveSlideUrl(manifest, slide)}")`
|
||||
nextPlate.classList.add("is-active")
|
||||
stageState.activePlate.classList.remove("is-active")
|
||||
|
||||
const previous = stageState.activePlate
|
||||
stageState.activePlate = nextPlate
|
||||
stageState.inactivePlate = previous
|
||||
stageState.slideIndex = clamped
|
||||
stageState.caption.textContent = slide.caption || manifest.default_caption || ""
|
||||
renderSlideReferences(stageState.references, resolveSlideReferences(manifest, slide))
|
||||
}
|
||||
|
||||
function renderCinematicText(stageState, text) {
|
||||
stageState.sectionText.replaceChildren()
|
||||
const paragraph = createElement("p", "aetheria-ink-line", text)
|
||||
stageState.sectionText.append(paragraph)
|
||||
|
||||
stageState.sectionText.classList.remove("is-entering")
|
||||
// Force a reflow so repeated sections replay the transition.
|
||||
void stageState.sectionText.offsetWidth
|
||||
stageState.sectionText.classList.add("is-entering")
|
||||
}
|
||||
|
||||
function resolveManifestAsset(manifest, asset) {
|
||||
if (!asset) return ""
|
||||
if (/^(https?:)?\/\//.test(asset) || asset.startsWith("/")) return asset
|
||||
const base = manifest?.asset_base || manifest?.image_base || ""
|
||||
return `${base}${asset}`
|
||||
}
|
||||
|
||||
function parseTags(tags) {
|
||||
const parsed = {}
|
||||
for (const tag of tags || []) {
|
||||
const separator = tag.indexOf(":")
|
||||
if (separator === -1) continue
|
||||
const key = tag.slice(0, separator).trim().toLowerCase()
|
||||
const value = tag.slice(separator + 1).trim()
|
||||
if (key && value) parsed[key] = value
|
||||
}
|
||||
return parsed
|
||||
}
|
||||
|
||||
function createSpeakerStage() {
|
||||
const stage = createElement("div", "aetheria-ink-speaker-stage")
|
||||
const background = createElement("div", "aetheria-ink-speaker-background")
|
||||
const scrim = createElement("div", "aetheria-ink-speaker-scrim")
|
||||
const sceneLabel = createElement("p", "aetheria-ink-speaker-scene")
|
||||
const card = createElement("div", "aetheria-ink-speaker-card")
|
||||
const avatarShell = createElement("div", "aetheria-ink-speaker-avatar-shell")
|
||||
const avatar = document.createElement("img")
|
||||
const body = createElement("div", "aetheria-ink-speaker-body")
|
||||
const name = createElement("p", "aetheria-ink-speaker-name")
|
||||
const line = createElement("p", "aetheria-ink-speaker-line")
|
||||
const controls = createElement("div", "aetheria-ink-speaker-controls")
|
||||
|
||||
avatar.className = "aetheria-ink-speaker-avatar"
|
||||
avatar.loading = "lazy"
|
||||
avatar.decoding = "async"
|
||||
|
||||
avatarShell.append(avatar)
|
||||
body.append(name, line, controls)
|
||||
card.append(avatarShell, body)
|
||||
stage.append(background, scrim, sceneLabel, card)
|
||||
|
||||
return {
|
||||
stage,
|
||||
background,
|
||||
sceneLabel,
|
||||
card,
|
||||
avatar,
|
||||
name,
|
||||
line,
|
||||
controls,
|
||||
backgroundSet: false,
|
||||
}
|
||||
}
|
||||
|
||||
function setSpeakerBackground(stageState, manifest, container) {
|
||||
if (stageState.backgroundSet) return
|
||||
|
||||
const background = manifest?.background || {}
|
||||
const image =
|
||||
container.dataset.backgroundImage ||
|
||||
background.image ||
|
||||
manifest?.background_image ||
|
||||
manifest?.backgroundImage ||
|
||||
""
|
||||
|
||||
if (image) {
|
||||
stageState.background.style.backgroundImage = `url("${resolveManifestAsset(manifest, image)}")`
|
||||
}
|
||||
|
||||
stageState.sceneLabel.textContent =
|
||||
container.dataset.sceneLabel || background.caption || manifest?.default_caption || ""
|
||||
stageState.sceneLabel.hidden = stageState.sceneLabel.textContent.length === 0
|
||||
stageState.backgroundSet = true
|
||||
}
|
||||
|
||||
function resolveSpeakerAvatar(manifest, speaker, taggedAvatar) {
|
||||
const actor = manifest?.actors?.[speaker] || manifest?.actors?.[speaker?.toLowerCase?.()]
|
||||
if (actor?.avatar) return resolveManifestAsset(manifest, actor.avatar)
|
||||
if (taggedAvatar && (taggedAvatar.startsWith("/") || /^(https?:)?\/\//.test(taggedAvatar))) {
|
||||
return taggedAvatar
|
||||
}
|
||||
return ""
|
||||
}
|
||||
|
||||
function renderSpeakerLine(stageState, manifest, text, metadata) {
|
||||
const speaker = metadata.speaker || "Void"
|
||||
const avatar = resolveSpeakerAvatar(manifest, speaker, metadata.avatar)
|
||||
|
||||
stageState.name.textContent = speaker
|
||||
stageState.line.textContent = text
|
||||
stageState.avatar.hidden = avatar.length === 0
|
||||
if (avatar) {
|
||||
stageState.avatar.src = avatar
|
||||
stageState.avatar.alt = `${speaker} avatar`
|
||||
}
|
||||
|
||||
stageState.card.classList.remove("is-entering")
|
||||
void stageState.card.offsetWidth
|
||||
stageState.card.classList.add("is-entering")
|
||||
}
|
||||
|
||||
function appendParagraphs(story, transcript) {
|
||||
let advanced = false
|
||||
let safety = 0
|
||||
|
||||
while (story.canContinue && safety < 1000) {
|
||||
const text = story.Continue().trim()
|
||||
safety += 1
|
||||
if (text.length > 0) {
|
||||
transcript.append(createElement("p", "aetheria-ink-line", text))
|
||||
advanced = true
|
||||
}
|
||||
}
|
||||
|
||||
if (safety >= 1000) {
|
||||
transcript.append(
|
||||
createElement(
|
||||
"p",
|
||||
"aetheria-ink-error",
|
||||
"The story did not settle before the safety limit. Something in the Ink is looping.",
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
if (advanced) {
|
||||
transcript.scrollTop = transcript.scrollHeight
|
||||
}
|
||||
}
|
||||
|
||||
function renderChoices(story, choices, variables) {
|
||||
choices.replaceChildren()
|
||||
|
||||
if (story.currentChoices.length === 0) {
|
||||
choices.append(
|
||||
createElement("p", "aetheria-ink-end", "End of branch. The feed stops blinking."),
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
story.currentChoices.forEach((choice, index) => {
|
||||
const button = createElement("button", "aetheria-ink-choice", choice.text)
|
||||
button.type = "button"
|
||||
button.addEventListener("click", () => {
|
||||
story.ChooseChoiceIndex(index)
|
||||
appendParagraphs(
|
||||
story,
|
||||
choices.closest(".aetheria-ink-player").querySelector(".aetheria-ink-transcript"),
|
||||
)
|
||||
renderVariables(story, variables)
|
||||
renderChoices(story, choices, variables)
|
||||
})
|
||||
choices.append(button)
|
||||
})
|
||||
}
|
||||
|
||||
function renderCinematicStep(story, state) {
|
||||
const { choices, variables, stageState, manifest, continueButton } = state
|
||||
|
||||
choices.replaceChildren()
|
||||
continueButton.hidden = true
|
||||
|
||||
if (story.canContinue) {
|
||||
const text = story.Continue().trim()
|
||||
if (text.length > 0) {
|
||||
setCinematicSlide(stageState, manifest, stageState.slideIndex + 1)
|
||||
renderCinematicText(stageState, text)
|
||||
stageState.stage.scrollIntoView({ behavior: "smooth", block: "center" })
|
||||
}
|
||||
renderVariables(story, variables)
|
||||
|
||||
if (story.canContinue) {
|
||||
continueButton.hidden = false
|
||||
continueButton.textContent = "Continue"
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
renderVariables(story, variables)
|
||||
|
||||
if (story.currentChoices.length === 0) {
|
||||
choices.append(
|
||||
createElement(
|
||||
"p",
|
||||
"aetheria-ink-end",
|
||||
"End of branch. The cage pretends it was always empty.",
|
||||
),
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
story.currentChoices.forEach((choice, index) => {
|
||||
const button = createElement("button", "aetheria-ink-choice", choice.text)
|
||||
button.type = "button"
|
||||
button.addEventListener("click", () => {
|
||||
stageState.sectionText.classList.add("is-exiting")
|
||||
window.setTimeout(() => {
|
||||
story.ChooseChoiceIndex(index)
|
||||
stageState.sectionText.classList.remove("is-exiting")
|
||||
renderCinematicStep(story, state)
|
||||
}, 180)
|
||||
})
|
||||
choices.append(button)
|
||||
})
|
||||
}
|
||||
|
||||
function renderSpeakerStep(story, state) {
|
||||
const { choices, variables, stageState, manifest, continueButton, container } = state
|
||||
|
||||
setSpeakerBackground(stageState, manifest, container)
|
||||
choices.replaceChildren()
|
||||
continueButton.hidden = true
|
||||
|
||||
let text = ""
|
||||
let metadata = {}
|
||||
let safety = 0
|
||||
|
||||
while (story.canContinue && text.length === 0 && safety < 100) {
|
||||
text = story.Continue().trim()
|
||||
metadata = parseTags(story.currentTags)
|
||||
safety += 1
|
||||
}
|
||||
|
||||
if (safety >= 100) {
|
||||
text = "The story did not settle before the safety limit. Something in the Ink is looping."
|
||||
metadata = { speaker: "System" }
|
||||
}
|
||||
|
||||
if (text.length > 0) {
|
||||
renderSpeakerLine(stageState, manifest, text, metadata)
|
||||
renderVariables(story, variables)
|
||||
|
||||
if (story.canContinue) {
|
||||
continueButton.hidden = false
|
||||
continueButton.textContent = "Continue"
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
renderVariables(story, variables)
|
||||
|
||||
if (story.currentChoices.length === 0) {
|
||||
choices.append(
|
||||
createElement("p", "aetheria-ink-end", "End of branch. The circle goes quiet."),
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
story.currentChoices.forEach((choice, index) => {
|
||||
const button = createElement("button", "aetheria-ink-choice", choice.text)
|
||||
button.type = "button"
|
||||
button.addEventListener("click", () => {
|
||||
stageState.card.classList.add("is-exiting")
|
||||
window.setTimeout(() => {
|
||||
story.ChooseChoiceIndex(index)
|
||||
stageState.card.classList.remove("is-exiting")
|
||||
renderSpeakerStep(story, state)
|
||||
}, 140)
|
||||
})
|
||||
choices.append(button)
|
||||
})
|
||||
}
|
||||
|
||||
async function initialisePlayer(container) {
|
||||
if (container.dataset.inkInitialised === "true") return
|
||||
container.dataset.inkInitialised = "true"
|
||||
|
||||
const storySrc = container.dataset.inkStory
|
||||
if (!storySrc) {
|
||||
container.textContent = "Ink player is missing data-ink-story."
|
||||
return
|
||||
}
|
||||
|
||||
const status = createElement("p", "aetheria-ink-status", "Loading story...")
|
||||
const inkMode = resolveInkMode(container)
|
||||
const isCinematic = inkMode === "cinematic"
|
||||
const isSpeakerPanel = inkMode === "speaker-panel"
|
||||
const showVariables =
|
||||
(!isCinematic && !isSpeakerPanel) || container.dataset.showVariables === "true"
|
||||
const transcript =
|
||||
isCinematic || isSpeakerPanel ? null : createElement("div", "aetheria-ink-transcript")
|
||||
const stageState = isCinematic
|
||||
? createCinematicStage()
|
||||
: isSpeakerPanel
|
||||
? createSpeakerStage()
|
||||
: null
|
||||
const choices = createElement("div", "aetheria-ink-choices")
|
||||
const variables = createElement("div", "aetheria-ink-variables")
|
||||
const continueButton = createElement("button", "aetheria-ink-continue", "Continue")
|
||||
const restart = createElement("button", "aetheria-ink-restart", "Restart")
|
||||
continueButton.type = "button"
|
||||
continueButton.hidden = true
|
||||
restart.type = "button"
|
||||
|
||||
if (isCinematic) {
|
||||
container.classList.add("aetheria-ink-player-cinematic")
|
||||
variables.hidden = !showVariables
|
||||
container.replaceChildren(
|
||||
status,
|
||||
stageState.stage,
|
||||
choices,
|
||||
variables,
|
||||
continueButton,
|
||||
restart,
|
||||
)
|
||||
} else if (isSpeakerPanel) {
|
||||
container.classList.add("aetheria-ink-player-speaker")
|
||||
variables.hidden = !showVariables
|
||||
stageState.controls.append(choices, continueButton, restart)
|
||||
container.replaceChildren(status, stageState.stage, variables)
|
||||
} else {
|
||||
container.replaceChildren(status, transcript, choices, variables, restart)
|
||||
}
|
||||
|
||||
try {
|
||||
await ensureInkRuntime()
|
||||
const visualManifest = await loadVisualManifest(container)
|
||||
|
||||
const response = await fetch(storySrc)
|
||||
if (!response.ok) {
|
||||
throw new Error(`could not fetch ${storySrc}: ${response.status}`)
|
||||
}
|
||||
|
||||
const storyJson = await response.json()
|
||||
|
||||
function reset() {
|
||||
const story = new window.inkjs.Story(JSON.stringify(storyJson))
|
||||
status.textContent = container.dataset.inkTitle || "Interactive story"
|
||||
choices.replaceChildren()
|
||||
variables.replaceChildren()
|
||||
if (isCinematic) {
|
||||
stageState.slideIndex = -1
|
||||
stageState.caption.textContent = ""
|
||||
stageState.references.replaceChildren()
|
||||
stageState.references.hidden = true
|
||||
stageState.sectionText.replaceChildren()
|
||||
continueButton.onclick = () => {
|
||||
stageState.sectionText.classList.add("is-exiting")
|
||||
window.setTimeout(() => {
|
||||
stageState.sectionText.classList.remove("is-exiting")
|
||||
renderCinematicStep(story, {
|
||||
choices,
|
||||
variables,
|
||||
stageState,
|
||||
manifest: visualManifest,
|
||||
continueButton,
|
||||
})
|
||||
}, 180)
|
||||
}
|
||||
renderCinematicStep(story, {
|
||||
choices,
|
||||
variables,
|
||||
stageState,
|
||||
manifest: visualManifest,
|
||||
continueButton,
|
||||
})
|
||||
} else if (isSpeakerPanel) {
|
||||
stageState.backgroundSet = false
|
||||
stageState.background.style.backgroundImage = ""
|
||||
stageState.sceneLabel.textContent = ""
|
||||
stageState.card.classList.remove("is-entering", "is-exiting")
|
||||
stageState.avatar.removeAttribute("src")
|
||||
stageState.avatar.hidden = true
|
||||
stageState.name.textContent = ""
|
||||
stageState.line.textContent = ""
|
||||
continueButton.onclick = () => {
|
||||
stageState.card.classList.add("is-exiting")
|
||||
window.setTimeout(() => {
|
||||
stageState.card.classList.remove("is-exiting")
|
||||
renderSpeakerStep(story, {
|
||||
choices,
|
||||
variables,
|
||||
stageState,
|
||||
manifest: visualManifest,
|
||||
continueButton,
|
||||
container,
|
||||
})
|
||||
}, 140)
|
||||
}
|
||||
renderSpeakerStep(story, {
|
||||
choices,
|
||||
variables,
|
||||
stageState,
|
||||
manifest: visualManifest,
|
||||
continueButton,
|
||||
container,
|
||||
})
|
||||
} else {
|
||||
transcript.replaceChildren()
|
||||
appendParagraphs(story, transcript)
|
||||
renderVariables(story, variables)
|
||||
renderChoices(story, choices, variables)
|
||||
}
|
||||
}
|
||||
|
||||
restart.addEventListener("click", reset)
|
||||
reset()
|
||||
} catch (error) {
|
||||
status.textContent = "Ink player failed to load."
|
||||
const errorTarget = transcript || (stageState && stageState.sectionText)
|
||||
errorTarget.append(createElement("p", "aetheria-ink-error", error.message || String(error)))
|
||||
}
|
||||
}
|
||||
|
||||
function initialiseAllPlayers() {
|
||||
document.querySelectorAll(".aetheria-ink-player").forEach(initialisePlayer)
|
||||
}
|
||||
|
||||
document.addEventListener("nav", initialiseAllPlayers)
|
||||
if (document.readyState !== "loading") initialiseAllPlayers()
|
||||
})()
|
||||
5237
quartz/static/interactive/ink.js
Normal file
5237
quartz/static/interactive/ink.js
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -10,12 +10,13 @@ export async function glob(
|
|||
pattern: string,
|
||||
cwd: string,
|
||||
ignorePatterns: string[],
|
||||
gitignore = true,
|
||||
): Promise<FilePath[]> {
|
||||
const fps = (
|
||||
await globby(pattern, {
|
||||
cwd,
|
||||
ignore: ignorePatterns,
|
||||
gitignore: true,
|
||||
gitignore,
|
||||
})
|
||||
).map(toPosixPath)
|
||||
return fps as FilePath[]
|
||||
|
|
|
|||
Loading…
Reference in a new issue