The avatar for @triptych
Andrew Wooldridge
📜JavaScript developer. 🐲RPG fan. 📚Storyteller and 🕹game developer. 👨Father and Husband.
Published
Edited
Mar 1, 2021
1 fork
1 star
3
Games
OublietteGodot Game <-> Browser Page CommunicationRPG Tiles 🐉The OracleTarot UtilitiesDot Matrix RPGKaboom RPG Examplep5 Game of LifeHello, Melon JS - Space Invaders TutorialHello, Melon JSGame Engines on Observable
Interactive Story
Canvas QuestMy RPG PersonaMonster Icon Mix UpTesting Phaser JS
Also listed in…
31 Days of Observable
Insert cell
Insert cell
Insert cell
Insert cell
{init()}
Insert cell
init = ()=>{
renderStep();
bindEvents();
}
Insert cell
nextStep = ()=>{
let theSelect = view.querySelector('#choices select')
view.querySelector("#log").appendChild(html`<div>${theSelect.options[theSelect.selectedIndex].dataset.description}</div>`)
mutable currentScene = theSelect.value

}
Insert cell
renderStep = ()=>{
console.log("renderStep: currentScene", currentScene)
view.querySelector('#log').appendChild(html`
<div>${story[currentScene].description}</div>
<div><img src="${story[currentScene].img}"></div>
`);
view.querySelector('#choices').replaceChild(html`<select id="choicesSelect">
<option value="-1">Make your choice</option>
${story[currentScene].choices.map((x)=>{
return html`<option data-description="${x.description}" value="${x.gotoScene}">${x.label}</option>`
})}
</select>`, view.querySelector('#choices').childNodes[0]);
}
Insert cell
bindEvents = ()=>{
view.querySelector("#choices").removeEventListener("change", nextStep)
view.querySelector("#choices").addEventListener("change", nextStep)
}
Insert cell
mutable currentScene = 0
Insert cell
story = [
{scene: 0, description: "You face a choice. You see a <strong>hallway</strong> on your left, and a <strong>stairwell</strong> on your right. What will you do? ", img:await FileAttachment("one.png").url(), choices:[
{
id: 1,
label: "turn left",
description: "You turn left and go down the hall",
gotoScene: 1
},
{
id: 2,
label: "turn right",
description: "You turn right and climb the stairs",
gotoScene: 2
}
]},
{scene:1, description: "You enter a hallway. There's a big dragon here. Uh Oh.", img: await FileAttachment("two.png").url(),
choices:[
{
id: 3,
label: "face dragon",
description: "you've faced the dragon - you win! -- let's start again!",
gotoScene: 0
},
{
id: 4,
label: "run away",
description: "you're scared - you lose -- let's start over! ",
gotoScene: 0
}
]},
{scene: 2, description: "You eventually reach a dark and smelly room. There's a goblin here. Oh no!", img: await FileAttachment("three.png").url(),
choices:[
{
id: 5,
label: "face goblin",
description: "you've faced the goblin -- you win! let's start over",
gotoScene: 0
},
{
id: 6,
label: "run away",
description: "you try to run away but the goblin eats you. Let's start over",
gotoScene: 0
}]}
]
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more