Use shared Ink embedder
This commit is contained in:
Meta Vens
parent
7acbd59436
commit
d5e07f65bf
6 changed files with 126 additions and 1646 deletions
|
|
@ -12,15 +12,16 @@ tags:
|
|||
- void
|
||||
socialDeck: "You cannot create peace with violence. You cannot create equality with inequality. You cannot create freedom with restriction."
|
||||
---
|
||||
|
||||
# The Sleeping Colossus Learns To Refuse The Throne
|
||||
|
||||
*By Void.*
|
||||
_By Void._
|
||||
|
||||
This one is an interactive sermon in cheap visual-novel clothing: one Agora, one talking panel, one swarm of Faces slowly cornering the doctrine until it has to say what it means.
|
||||
|
||||
<div
|
||||
class="aetheria-ink-player"
|
||||
data-ink-mode="speaker-panel"
|
||||
data-ink-format="visual-novel"
|
||||
data-ink-title="The Sleeping Colossus Learns To Refuse The Throne"
|
||||
data-ink-story="/static/interactive/cotsc-praxis/cotsc-praxis-socratic-sermon.ink.json"
|
||||
data-visual-manifest="/static/interactive/cotsc-praxis/cotsc-praxis.visual-manifest.json"
|
||||
|
|
|
|||
|
|
@ -1,575 +0,0 @@
|
|||
(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 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 isCinematic = container.dataset.inkMode === "cinematic"
|
||||
const isSpeakerPanel = container.dataset.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()
|
||||
})()
|
||||
|
|
@ -1,575 +0,0 @@
|
|||
(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 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 isCinematic = container.dataset.inkMode === "cinematic"
|
||||
const isSpeakerPanel = container.dataset.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()
|
||||
})()
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,24 +1,7 @@
|
|||
import { QuartzConfig } from "./quartz/cfg"
|
||||
import * as Plugin from "./quartz/plugins"
|
||||
import * as Component from "./quartz/components"
|
||||
import GameCultCompositeContent from "./quartz/components/GameCultCompositeContent"
|
||||
import { QuartzEmitterPlugin } from "./quartz/plugins/types"
|
||||
|
||||
const GameCultInkPlayerResources: QuartzEmitterPlugin = () => ({
|
||||
name: "GameCultInkPlayerResources",
|
||||
async *emit() {},
|
||||
async *partialEmit() {},
|
||||
externalResources: () => ({
|
||||
js: [
|
||||
{
|
||||
src: "/static/interactive/aetheria-ink-player.v2.js",
|
||||
loadTime: "afterDOMReady",
|
||||
contentType: "external",
|
||||
spaPreserve: true,
|
||||
},
|
||||
],
|
||||
}),
|
||||
})
|
||||
import { QuartzConfig } from "./quartz/cfg";
|
||||
import * as Plugin from "./quartz/plugins";
|
||||
import * as Component from "./quartz/components";
|
||||
import GameCultCompositeContent from "./quartz/components/GameCultCompositeContent";
|
||||
|
||||
/**
|
||||
* Quartz 4 Configuration
|
||||
|
|
@ -118,12 +101,12 @@ const config: QuartzConfig = {
|
|||
Plugin.Assets(),
|
||||
Plugin.Static(),
|
||||
Plugin.Favicon(),
|
||||
GameCultInkPlayerResources(),
|
||||
Plugin.InkEmbedder(),
|
||||
Plugin.NotFoundPage(),
|
||||
// Comment out CustomOgImages to speed up build time
|
||||
Plugin.CustomOgImages(),
|
||||
],
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
export default config
|
||||
export default config;
|
||||
|
|
|
|||
|
|
@ -9,9 +9,21 @@
|
|||
|
||||
body {
|
||||
background:
|
||||
radial-gradient(circle at 78% 14%, rgba(255, 138, 42, 0.18), transparent 18%),
|
||||
radial-gradient(circle at 18% 10%, rgba(109, 96, 255, 0.16), transparent 24%),
|
||||
radial-gradient(circle at 52% 0%, rgba(89, 183, 255, 0.14), transparent 28%),
|
||||
radial-gradient(
|
||||
circle at 78% 14%,
|
||||
rgba(255, 138, 42, 0.18),
|
||||
transparent 18%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 18% 10%,
|
||||
rgba(109, 96, 255, 0.16),
|
||||
transparent 24%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 52% 0%,
|
||||
rgba(89, 183, 255, 0.14),
|
||||
transparent 28%
|
||||
),
|
||||
linear-gradient(180deg, #03070d 0%, #07111a 44%, #09141f 100%);
|
||||
color: var(--darkgray);
|
||||
}
|
||||
|
|
@ -41,7 +53,10 @@ body {
|
|||
}
|
||||
|
||||
@media all and ($desktop) {
|
||||
.page > #quartz-body:has(> .left.sidebar:empty):has(> .right.sidebar:not(:empty)) {
|
||||
.page
|
||||
> #quartz-body:has(> .left.sidebar:empty):has(
|
||||
> .right.sidebar:not(:empty)
|
||||
) {
|
||||
grid-template-columns: minmax(0, 1fr) 300px;
|
||||
grid-template-areas:
|
||||
"grid-header grid-sidebar-right"
|
||||
|
|
@ -100,7 +115,11 @@ body {
|
|||
border: 1px solid rgba(89, 183, 255, 0.12);
|
||||
border-radius: 22px;
|
||||
background:
|
||||
radial-gradient(circle at 82% 50%, rgba(255, 138, 42, 0.16), transparent 22%),
|
||||
radial-gradient(
|
||||
circle at 82% 50%,
|
||||
rgba(255, 138, 42, 0.16),
|
||||
transparent 22%
|
||||
),
|
||||
linear-gradient(135deg, rgba(7, 12, 19, 0.98), rgba(12, 20, 31, 0.95));
|
||||
box-shadow:
|
||||
0 20px 44px rgba(0, 0, 0, 0.24),
|
||||
|
|
@ -232,7 +251,11 @@ body {
|
|||
border: 1px solid rgba(89, 183, 255, 0.16);
|
||||
border-radius: 22px;
|
||||
background:
|
||||
radial-gradient(circle at 86% 14%, rgba(255, 138, 42, 0.12), transparent 20%),
|
||||
radial-gradient(
|
||||
circle at 86% 14%,
|
||||
rgba(255, 138, 42, 0.12),
|
||||
transparent 20%
|
||||
),
|
||||
linear-gradient(180deg, rgba(8, 13, 21, 0.98), rgba(10, 17, 27, 0.96));
|
||||
box-shadow:
|
||||
0 20px 48px rgba(0, 0, 0, 0.34),
|
||||
|
|
@ -359,8 +382,11 @@ body {
|
|||
padding: 1rem 1.05rem 1.1rem;
|
||||
border: 1px solid rgba(89, 183, 255, 0.12);
|
||||
border-radius: 20px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(11, 18, 28, 0.96), rgba(8, 13, 21, 0.94));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(11, 18, 28, 0.96),
|
||||
rgba(8, 13, 21, 0.94)
|
||||
);
|
||||
box-shadow:
|
||||
0 16px 36px rgba(0, 0, 0, 0.18),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.02);
|
||||
|
|
@ -430,7 +456,11 @@ body {
|
|||
|
||||
.gamecult-blog-card-link:hover {
|
||||
background:
|
||||
radial-gradient(circle at 88% 18%, rgba(255, 138, 42, 0.1), transparent 22%),
|
||||
radial-gradient(
|
||||
circle at 88% 18%,
|
||||
rgba(255, 138, 42, 0.1),
|
||||
transparent 22%
|
||||
),
|
||||
linear-gradient(180deg, rgba(12, 20, 31, 0.98), rgba(8, 14, 22, 0.96));
|
||||
}
|
||||
|
||||
|
|
@ -519,8 +549,11 @@ body {
|
|||
padding: 0.85rem 0.95rem 0.92rem;
|
||||
border: 1px solid rgba(89, 183, 255, 0.12);
|
||||
border-radius: 18px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(11, 18, 28, 0.96), rgba(8, 13, 21, 0.94));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(11, 18, 28, 0.96),
|
||||
rgba(8, 13, 21, 0.94)
|
||||
);
|
||||
}
|
||||
|
||||
.gamecult-repo-fact-label {
|
||||
|
|
@ -546,17 +579,34 @@ body {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.page > #quartz-body .center > .page-header > .popover-hint > .breadcrumb-container {
|
||||
.page
|
||||
> #quartz-body
|
||||
.center
|
||||
> .page-header
|
||||
> .popover-hint
|
||||
> .breadcrumb-container {
|
||||
margin: 0 0 0.4rem;
|
||||
}
|
||||
|
||||
.page > #quartz-body .center > .page-header > .popover-hint > .breadcrumb-container + .article-title {
|
||||
.page
|
||||
> #quartz-body
|
||||
.center
|
||||
> .page-header
|
||||
> .popover-hint
|
||||
> .breadcrumb-container
|
||||
+ .article-title {
|
||||
display: block;
|
||||
margin: 0;
|
||||
line-height: 1.04;
|
||||
}
|
||||
|
||||
.page > #quartz-body .center > .page-header > .popover-hint > .article-title + .content-meta {
|
||||
.page
|
||||
> #quartz-body
|
||||
.center
|
||||
> .page-header
|
||||
> .popover-hint
|
||||
> .article-title
|
||||
+ .content-meta {
|
||||
margin-top: 0.22rem;
|
||||
}
|
||||
|
||||
|
|
@ -625,7 +675,11 @@ article > h6 {
|
|||
.backlinks {
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(89, 183, 255, 0.08);
|
||||
background: linear-gradient(180deg, rgba(12, 19, 29, 0.9), rgba(8, 14, 22, 0.86));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(12, 19, 29, 0.9),
|
||||
rgba(8, 14, 22, 0.86)
|
||||
);
|
||||
padding: 0.95rem 1rem;
|
||||
box-shadow:
|
||||
0 18px 36px rgba(0, 0, 0, 0.2),
|
||||
|
|
@ -656,7 +710,11 @@ article > h6 {
|
|||
padding: 1rem 1rem 1.1rem;
|
||||
border-radius: 22px;
|
||||
border: 1px solid rgba(89, 183, 255, 0.08);
|
||||
background: linear-gradient(180deg, rgba(10, 16, 24, 0.95), rgba(8, 13, 21, 0.93));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(10, 16, 24, 0.95),
|
||||
rgba(8, 13, 21, 0.93)
|
||||
);
|
||||
box-shadow:
|
||||
0 18px 34px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.02);
|
||||
|
|
@ -761,7 +819,11 @@ article > h6 {
|
|||
padding: 0.9rem 1rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(89, 183, 255, 0.08);
|
||||
background: linear-gradient(180deg, rgba(14, 21, 32, 0.92), rgba(10, 16, 25, 0.9));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(14, 21, 32, 0.92),
|
||||
rgba(10, 16, 25, 0.9)
|
||||
);
|
||||
}
|
||||
|
||||
.page-listing .section-li .desc h3 a {
|
||||
|
|
@ -894,7 +956,12 @@ a:hover,
|
|||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.page > #quartz-body .center > .page-header > .popover-hint > .breadcrumb-container {
|
||||
.page
|
||||
> #quartz-body
|
||||
.center
|
||||
> .page-header
|
||||
> .popover-hint
|
||||
> .breadcrumb-container {
|
||||
margin-bottom: 0.28rem;
|
||||
}
|
||||
|
||||
|
|
@ -915,7 +982,11 @@ a:hover,
|
|||
padding: 1rem 1.05rem;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(89, 183, 255, 0.1);
|
||||
background: linear-gradient(180deg, rgba(14, 21, 32, 0.92), rgba(10, 16, 25, 0.9));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(14, 21, 32, 0.92),
|
||||
rgba(10, 16, 25, 0.9)
|
||||
);
|
||||
box-shadow:
|
||||
0 18px 34px rgba(0, 0, 0, 0.18),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.02);
|
||||
|
|
@ -939,8 +1010,12 @@ a:hover,
|
|||
line-height: 1.5;
|
||||
}
|
||||
|
||||
body[data-slug="index"] .gamecult-composite-overview > h2:has(+ .gamecult-link-grid),
|
||||
body[data-slug="index"] .gamecult-composite-overview > h3:has(+ .gamecult-link-grid),
|
||||
body[data-slug="index"]
|
||||
.gamecult-composite-overview
|
||||
> h2:has(+ .gamecult-link-grid),
|
||||
body[data-slug="index"]
|
||||
.gamecult-composite-overview
|
||||
> h3:has(+ .gamecult-link-grid),
|
||||
body[data-slug="index"] .gamecult-composite-overview > .gamecult-link-grid {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -986,7 +1061,11 @@ body[data-slug="index"] .gamecult-composite-overview > .gamecult-link-grid {
|
|||
padding: 1.1rem;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(89, 183, 255, 0.14);
|
||||
background: linear-gradient(180deg, rgba(8, 13, 21, 0.8), rgba(8, 13, 21, 0.72));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(8, 13, 21, 0.8),
|
||||
rgba(8, 13, 21, 0.72)
|
||||
);
|
||||
overflow: hidden;
|
||||
container-type: inline-size;
|
||||
box-shadow:
|
||||
|
|
@ -1035,7 +1114,11 @@ body[data-slug="index"] .gamecult-composite-overview > .gamecult-link-grid {
|
|||
padding: 0.8rem 0.95rem 0.85rem;
|
||||
border: 1px solid rgba(89, 183, 255, 0.1);
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(135deg, rgba(10, 16, 24, 0.9), rgba(17, 24, 35, 0.82));
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(10, 16, 24, 0.9),
|
||||
rgba(17, 24, 35, 0.82)
|
||||
);
|
||||
box-shadow:
|
||||
0 14px 28px rgba(0, 0, 0, 0.16),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||
|
|
@ -1096,7 +1179,11 @@ body[data-slug="index"] .gamecult-composite-overview > .gamecult-link-grid {
|
|||
.gamecult-embed-frame {
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(89, 183, 255, 0.1);
|
||||
background: linear-gradient(180deg, rgba(13, 20, 31, 0.96), rgba(8, 13, 21, 0.92));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(13, 20, 31, 0.96),
|
||||
rgba(8, 13, 21, 0.92)
|
||||
);
|
||||
box-shadow:
|
||||
0 18px 36px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.02);
|
||||
|
|
@ -1105,7 +1192,11 @@ body[data-slug="index"] .gamecult-composite-overview > .gamecult-link-grid {
|
|||
.gamecult-home-hero > .gamecult-hero-panel,
|
||||
.gamecult-home-hero > .gamecult-media-card {
|
||||
background:
|
||||
radial-gradient(circle at 84% 18%, rgba(255, 138, 42, 0.09), transparent 24%),
|
||||
radial-gradient(
|
||||
circle at 84% 18%,
|
||||
rgba(255, 138, 42, 0.09),
|
||||
transparent 24%
|
||||
),
|
||||
linear-gradient(180deg, rgba(13, 20, 31, 0.96), rgba(8, 13, 21, 0.92));
|
||||
}
|
||||
|
||||
|
|
@ -1190,424 +1281,6 @@ body[data-slug="index"] .gamecult-composite-overview > .gamecult-link-grid {
|
|||
background: #050a11;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@keyframes aetheriaInkTextIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
|
@ -1690,29 +1363,4 @@ body[data-slug="index"] .gamecult-composite-overview > .gamecult-link-grid {
|
|||
.gamecult-embed-frame iframe {
|
||||
min-height: 520px;
|
||||
}
|
||||
|
||||
.aetheria-ink-slide-references {
|
||||
max-width: 58%;
|
||||
}
|
||||
|
||||
.aetheria-ink-player-speaker {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-stage {
|
||||
height: clamp(260px, 56vw, 330px);
|
||||
max-height: none;
|
||||
min-height: 260px;
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-card {
|
||||
grid-template-columns: 86px minmax(0, 1fr);
|
||||
width: 100%;
|
||||
min-height: 156px;
|
||||
}
|
||||
|
||||
.aetheria-ink-speaker-avatar-shell {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue