diff --git a/css/main.css b/css/main.css index 2160cc3..5c0c6f5 100644 --- a/css/main.css +++ b/css/main.css @@ -141,19 +141,19 @@ div[data-next] { transform: scale(1.1); } -.planet-container1 { +.planet-container0 { grid-area: p1; } -.planet-container2 { +.planet-container1 { grid-area: p2; } -.planet-container3 { +.planet-container2 { grid-area: p3; } -.planet-container4 { +.planet-container3 { grid-area: p4; } -.planet-container5 { +.planet-container4 { grid-area: p5; } .planet-container-player { @@ -164,7 +164,7 @@ div[data-next] { } */ .inactive { - @apply opacity-25; + @apply opacity-25 pointer-events-none; } .next-turn-message { @apply fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-opacity-90 px-4 py-2 border border-gray-300 shadow rounded-lg text-center bg-white z-50; diff --git a/twine_src/css/output.css b/twine_src/css/output.css index ab0ce5d..6fd5671 100644 --- a/twine_src/css/output.css +++ b/twine_src/css/output.css @@ -2035,23 +2035,23 @@ div[data-next]:hover{ transform: scale(1.1); } -.planet-container1 { +.planet-container0 { grid-area: p1; } -.planet-container2 { +.planet-container1 { grid-area: p2; } -.planet-container3 { +.planet-container2 { grid-area: p3; } -.planet-container4 { +.planet-container3 { grid-area: p4; } -.planet-container5 { +.planet-container4 { grid-area: p5; } @@ -2064,6 +2064,7 @@ div[data-next]:hover{ } */ .inactive{ + pointer-events: none; opacity: 0.25; } diff --git a/twine_src/main.twee b/twine_src/main.twee index 24e65fc..945ec28 100644 --- a/twine_src/main.twee +++ b/twine_src/main.twee @@ -82,7 +82,7 @@ Jammy Jam style="width: <%= setup.game.energy / 700 * 100 %>%">
- <%= 7 - setup.game.turn %> weeks to the show! + <%= 7 - s.turn %> weeks to the show!
@@ -117,22 +117,52 @@ Jammy Jam -:: Melodic Quest +:: Melodic Quest [scenario] The Intergalactic Orchestra has lost its melody, scattering notes across the cosmos. Retrieve the musical fragments to restore harmony to the galaxy. [[Next...->Melodic Quest 2]] :: Melodic Quest 2 -Arrived at the second passage! +Let's see if I can find the notes…
- Solve puzzles (+200 energy) - - [[Forget it…|Map Screen]] + Connect + Move on…
-[[Back->Melodic Quest]] + +:: Quantum Conundrum [scenario] + +A quantum computer has gone **haywire**, creating chaos in the time-space continuum. Solve complex puzzles to recalibrate the machine and stabilize reality. + +[[Next...->Quantum Conundrum 2]] + +:: Quantum Conundrum 2 [scenario] + +I have no idea how to solve these puzzles, but i'll give it my best shot… + +
+ Connect + Move on… +
+ +:: Stellar Cradle +A newborn nebula is struggling to form stars. Gather stardust and cosmic energy to nurture its growth and witness the birth of new suns. + +[[Next...->Stellar Cradle 2]] + +:: Stellar Cradle 2 + +Gathering stardust might be fun? + + +
+ Connect + Move on… +
+ + :: HelpPlanets [[Back|Map Screen]] diff --git a/twine_src/scripts/init.js b/twine_src/scripts/init.js index 0c65aa8..3b04189 100644 --- a/twine_src/scripts/init.js +++ b/twine_src/scripts/init.js @@ -1,40 +1,10 @@ window.setup = window.setup || {}; -// this is demented, but it works -// couldn't figure out how to override default behaviour of Twine's a tags - -$(document).on("click", "div[data-next]", function (e) { - var passageName = $(this).attr("data-next"); - renderToSelector("#passage", passageName); -}); - -function startObserving() { - var targetNode = document.getElementById("passageContainer"); - if (targetNode) { - var config = { childList: true, subtree: true }; - var callback = function (mutationsList, observer) { - for (var mutation of mutationsList) { - if (mutation.type === "childList") { - setup.modifyLinks(); - break; - } - } - }; - var observer = new MutationObserver(callback); - observer.observe(targetNode, config); - } else { - setTimeout(startObserving, 500); - } -} -startObserving(); - // scripts/init.js setup.game = { - turn: 1, - energy: 100, planets: [ { - id: 1, + id: 0, imgSrc: "img/planet-1.png", repImgSrc: "img/rep-1.png", splashImgSrc: "img/planet-1-splash.png", @@ -44,9 +14,10 @@ setup.game = { "EmCee for the show. The broadcast is actually being transmitted through DJ FUNKYBEATZ.", description: "DJ FUNKYBEATZ is the onboarder & tutorial for the game. Very welcoming and a little wacky.", + availableTurns: [1, 2, 4, 6], }, { - id: 2, + id: 1, imgSrc: "img/planet-2.png", repImgSrc: "img/rep-2.png", splashImgSrc: "img/planet-2-splash.png", @@ -56,9 +27,10 @@ setup.game = { "Holographic circus show. Involves juggling spoons and repurposing all kinds of garbage. Very silly and wild.", description: "Boris is a loveable grump who has seen some stuff. Loves collecting the weirdos to join his circus planet.", + availableTurns: [1, 3, 5, 6], }, { - id: 3, + id: 2, imgSrc: "img/planet-3.png", repImgSrc: "img/rep-3.png", splashImgSrc: "img/planet-3-splash.png", @@ -67,9 +39,10 @@ setup.game = { project: "Holographic psychedelic performance art drag show.", description: "High fashion. High drama. Dragtastic. Spore T. Spice is fun. Definitely probably on mushrooms some of the time. Incredible gardener and environmentalist. Makes some mean food.", + availableTurns: [1, 4, 5, 7], }, { - id: 4, + id: 3, imgSrc: "img/planet-4.png", repImgSrc: "img/rep-4.png", splashImgSrc: "img/planet-4-splash.png", @@ -79,9 +52,10 @@ setup.game = { "Videography radio livestream of water show (with surfers!) Airships, boats, all things. Tricks! Clown planet lends them some unicylers.", description: "Genderless being made of water. Somewhat surfer-bro but real genuine n sweet. Has a sibling Jestam they refer to, who is stuck trying to make it big in the Dominion Planetation. Jetsam is MORE surfer bro. Jetsam is maybe a shark (but art team can decide.) We may only see Jetsam in a special scenario ending.", + availableTurns: [2, 3, 4, 6], }, { - id: 5, + id: 4, imgSrc: "img/planet-5.png", repImgSrc: "img/rep-5.png", splashImgSrc: "img/planet-5-splash.png", @@ -90,59 +64,51 @@ setup.game = { project: "Audio drama of their heists narrated (like War of the Worlds).", description: "Ghost pets who care. They will send you short videos of pets doing weird n cute things to cheer you up. Sometimes go full goblin mode. They love to cause mischief and mess with capitalism -- sneak into the Dominion Plantation and mess things up.", + availableTurns: [2, 3, 5, 7], }, ], - scenarios: [ - { - scenarioPassage: "Melodic Quest", - complete: false, - }, - // { - // scenarioPassage: "Quantum Conundrum", - // complete: false, - // }, - // { - // scenarioPassage: "Stellar Cradle", - // complete: false, - // }, - ], - turns: [ - { - turnNumber: 1, - planets: [ - { - id: 1, - need: { - askText: "Plant a garden", - energyChange: 5, - helpSuccessText: "Success Text", - helpFailedText: "Failed Text", - }, - }, - { - id: 3, - need: { - askText: "Capture the bees", - energyChange: 15, - helpSuccessText: "Success Text", - helpFailedText: "Failed Text", - }, - }, - { - id: 5, - need: { - askText: "Invite the Queen to dinner", - energyChange: 25, - helpSuccessText: "Success Text", - helpFailedText: "Failed Text", - }, - }, - ], - }, - // ... other turns - ], }; +setup.game.scenarios = window.story.passages + .filter((passage) => passage.tags.includes("scenario")) + .map((passage) => ({ + scenarioPassage: passage.name, + complete: false, + })); + +story.state.scenarioCompletedThisTurn = false; +story.state.turn = 1; +// this is demented, but it works +// couldn't figure out how to override default behaviour of Twine's a tags + +$(document).on("click", "div[data-next]", function (e) { + var passageName = $(this).attr("data-next"); + renderToSelector("#passage", passageName); +}); + +setup.startObserving = function () { + var targetNode = document.getElementById("passageContainer"); + if (targetNode) { + var config = { childList: true, subtree: true }; + var callback = function (mutationsList, observer) { + for (var mutation of mutationsList) { + if (mutation.type === "childList") { + setup.modifyLinks(); + break; + } + } + }; + var observer = new MutationObserver(callback); + observer.observe(targetNode, config); + } else { + setTimeout(startObserving, 500); + } +}; + +document.addEventListener("DOMContentLoaded", function () { + setup.startObserving(); +}); + setup.savePlayerInfo = function () { var playerName = document.getElementById("playerName").value; var planetName = document.getElementById("planetName").value; @@ -186,48 +152,9 @@ setup.checkInputs = function () { ); }; -story.state.setHe = function () { - story.state.pronouns = ["he", "him", "his", "his", "he's"]; - story.state.cPronouns = ["He", "Him", "His", "His", "He's"]; - story.show("Preface"); -}; -story.state.setShe = function () { - story.state.pronouns = ["she", "her", "her", "hers", "she's"]; - story.state.cPronouns = ["She", "Her", "Her", "Hers", "She's"]; - story.show("Preface"); -}; -story.state.setThey = function () { - story.state.pronouns = ["they", "them", "their", "theirs", "they're"]; - story.state.cPronouns = ["They", "Them", "Their", "Theirs", "They're"]; - story.show("Preface"); -}; -story.state.setIt = function () { - story.state.pronouns = ["it", "it", "its", "its", "it's"]; - story.state.cPronouns = ["It", "It", "Its", "Its", "It's"]; - story.show("Preface"); -}; -story.state.changeEnergy = function (change) { - setup.game.energy += change; - setup.updateEnergyBar(); - var energyChangeText = document.getElementById("energyChangeText"); - if (change >= 0) { - energyChangeText.innerText = `+${change}`; - } else { - energyChangeText.innerText = `+${change}`; - } - - energyChangeText.style.opacity = 0; - - setTimeout(function () { - energyChangeText.style.opacity = 1; - }, 10); - - setTimeout(function () { - energyChangeText.style.opacity = 0; - }, 2000); -}; - setup.showPlanet = function (planetIndex) { + story.state.currentPlanet = planetIndex; + const planet = setup.game.planets[planetIndex]; let content = planet.description; let repContent = `
${planet.rep}
`; @@ -256,37 +183,61 @@ setup.modifyLinks = function () { }; setup.renderPlanetPassage = function (planetIndex) { + setup.startObserving(); + + if (story.state.scenarioCompletedThisTurn) { + console.log("A scenario has already been completed this turn."); + return; // Exit the function + } + try { + // Log the planetIndex for debugging + console.log("Rendering planet passage for index: ", planetIndex); + + // Check if the element with the class exists in the DOM + const planetElementSelector = ".planet" + planetIndex; + const planetElement = document.querySelector(planetElementSelector); + + if (!planetElement) { + throw new Error( + `Element with selector "${planetElementSelector}" does not exist in the DOM.` + ); + } + + // Check for inactive class + if (planetElement.classList.contains("inactive")) { + console.log( + `Planet with index ${planetIndex} is inactive and should not be clickable.` + ); + return; // Exit the function if the planet should not be clickable + } + var planetContent = setup.showPlanet(planetIndex); var scenarioData = setup.showRandomIncompleteScenario(); var scenarioContent = scenarioData.content; var passageContent = ""; - // Add check for inactive class - if ( - document - .querySelector(".planet" + planetIndex) - .classList.contains("inactive") - ) { - return; // exit the function if the planet should not be clickable - } + // Only render the passage if scenarioPassage is not null if (scenarioData.scenarioPassage) { passageContent = story.render(scenarioData.scenarioPassage); + story.state.currentScenario = scenarioData.scenarioPassage; } else { console.error("scenarioPassage is null for scenario", scenarioData); } var mapScreen = document.getElementById("mapScreen"); + var passageContainer = document.getElementById("passageContainer"); var passage = document.getElementById("passage"); var planetContentContainer = document.getElementById("planetContent"); - var passageContainer = document.getElementById("passageContainer"); var hud = document.getElementById("hud"); if (mapScreen) mapScreen.style.display = "none"; if (hud) hud.style.display = "flex"; if (passageContainer) { passage.innerHTML = passageContent; - planetContentContainer.innerHTML = planetContent; + if (planetContentContainer) { + planetContentContainer.innerHTML = planetContent; + } passageContainer.style.display = "block"; } } catch (error) { @@ -303,7 +254,7 @@ setup.returnToMap = function () { if (mapScreen) mapScreen.style.display = "grid"; if (passage) passage.innerHTML = ""; - story.state.currentPlanetIndex = null; + story.state.currentPlanet = null; }; setup.showRandomIncompleteScenario = function () { @@ -324,8 +275,11 @@ setup.showRandomIncompleteScenario = function () { } }; +setup.planetClickHandlers = {}; + setup.showMap = function () { var mapScreen = document.getElementById("mapScreen"); + if (mapScreen) { mapScreen.style.display = "grid"; mapScreen.innerHTML = ""; @@ -342,13 +296,22 @@ setup.showMap = function () { img.src = planet.imgSrc; img.onload = function () { - if (setup.checkTurnNeeds(planet, img)) { + if (planet.availableTurns.includes(story.state.turn)) { img.classList.add("active-turn"); + + // Check if a click handler already exists and remove it before adding a new one + if (setup.planetClickHandlers[planet.id]) { + img.removeEventListener( + "click", + setup.planetClickHandlers[planet.id] + ); + } + + // Create a new click handler for the planet + const clickHandler = setup.handlePlanetClick(index); + setup.planetClickHandlers[planet.id] = clickHandler; + img.addEventListener("click", clickHandler); } - img.onclick = function () { - setup.renderPlanetPassage(planet.id - 1); - setup.toggleHUD(true); - }; planetContainer.appendChild(img); setup.appendTooltip(planet, planetContainer); mapScreen.appendChild(planetContainer); @@ -356,6 +319,7 @@ setup.showMap = function () { }; }); + // Check if there is a player's planet and display it if (story.state.playerPlanet) { const playerPlanetContainer = document.createElement("div"); playerPlanetContainer.className = @@ -365,10 +329,11 @@ setup.showMap = function () { playerPlanetImg.src = story.state.playerPlanet.imgSrc; playerPlanetImg.onload = function () { - playerPlanetImg.onclick = function () { - setup.renderPlanetPassage("player"); + // Logic for player planet click + playerPlanetImg.addEventListener("click", function () { + setup.renderPlanetPassage("player"); // Assuming this is the correct way to render the player's planet setup.toggleHUD(true); - }; + }); playerPlanetContainer.appendChild(playerPlanetImg); setup.appendTooltip(story.state.playerPlanet, playerPlanetContainer); mapScreen.appendChild(playerPlanetContainer); @@ -388,18 +353,15 @@ setup.checkForIncompleteScenarios = function () { var incompleteScenarios = setup.game.scenarios.filter(function (scenario) { return !scenario.complete; }); - console.log(incompleteScenarios.length); if (incompleteScenarios.length === 0) { - console.log("All scenarios complete"); document.querySelectorAll(".planet").forEach(function (planet) { console.log("Getting planets…"); planet.style.pointerEvents = "none"; planet.classList.add("inactive"); }); var message = document.createElement("div"); - message.textContent = - "All scenarios complete. Click here to start the next turn."; + message.textContent = "All scenarios complete."; // Tailwind CSS classes to center the message message.classList.add("next-turn-message"); @@ -409,13 +371,6 @@ setup.checkForIncompleteScenarios = function () { } }; -setup.checkTurnNeeds = function (planet, img) { - const currentTurn = setup.game.turns.find( - (turn) => turn.turnNumber === setup.game.turn - ); - return currentTurn && currentTurn.planets.find((p) => p.id === planet.id); -}; - setup.appendTooltip = (planet, container) => { const tooltipDiv = document.createElement("div"); tooltipDiv.className = "tooltip"; @@ -475,96 +430,102 @@ setup.updateEnergyBar = function () { } }; -setup.startNewTurn = function () { - setup.game.turn += 1; - document.getElementById("turnCounter").innerText = setup.game.turn; - setup.game.addressedNeeds = []; - setup.checkPlanetaryNeeds(); - setup.checkTurnEvents(); - // srt checkpoint? -}; - -setup.checkPlanetaryNeeds = function () { - setup.game.planets.forEach((planet) => { - const turnNeed = setup.game.turns.find( - (turn) => - turn.turnNumber === setup.game.turn && - turn.planets.some((p) => p.id === planet.id) - ); - if (turnNeed) { - // Handle the planet's need here - console.log( - "Planet " + planet.name + " has a need: " + turnNeed.need.askText - ); - } - }); -}; - -setup.checkTurnEvents = function () { - // Check if there is an event for the current turn - const turnEvent = setup.game.turns.find( - (turn) => turn.turnNumber === setup.game.turn && turn.event +setup.completeScenario = function () { + var currentScenario = story.state.currentScenario; + const scenario = setup.game.scenarios.find( + (s) => s.scenarioPassage === currentScenario ); - if (turnEvent) { - // Handle the event here - console.log("Event occurs: " + turnEvent.event.description); - } -}; - -setup.addressPlanetaryNeed = function (planetId) { - setup.game.addressedNeeds.push(planetId); - const needsForTurn = setup.game.turns - .find((turn) => turn.turnNumber === setup.game.turn) - .planets.map((planet) => planet.id); + if (scenario && !story.state.scenarioCompletedThisTurn) { + var currentPlanet = setup.game.planets[story.state.currentPlanet]; + scenario.complete = true; + story.state.scenarioCompletedThisTurn = true; + + document + .querySelectorAll(".planet") + .forEach(function (planetElement, index) { + planetElement.classList.remove("active-turn"); + planetElement.classList.add("inactive"); + const clickHandler = setup.planetClickHandlers[index]; + if (clickHandler) { + planetElement.removeEventListener("click", clickHandler); + } + }); - const allNeedsAddressed = needsForTurn.every((id) => - setup.game.addressedNeeds.includes(id) - ); + if (currentPlanet) { + currentPlanet.connections++; + } else { + console.error("currentPlanet is undefined or not found"); + } - if (allNeedsAddressed) { - setup.endTurn(); + setup.startNewTurn(); } -}; -setup.completeScenario = function (energyChange) { - var currentPassageTitle = story.passage.title; - const scenario = setup.game.scenarios.find( - (s) => s.title === currentPassageTitle - ); - if (scenario) scenario.complete = true; - story.checkpoint("Completed " + currentPassageTitle); + story.checkpoint("Completed " + currentScenario); story.show("Map Screen"); - story.state.changeEnergy(energyChange); }; -// planet interactiosn +setup.startNewTurn = function () { + // Increment the turn counter in the story's state + story.state.turn += 1; + // Reset the scenario completion flag for the new turn in the story's state + story.state.scenarioCompletedThisTurn = false; + + // Re-enable interaction with the planets for the new turn + document.querySelectorAll(".planet").forEach(function (planetElement, index) { + planetElement.classList.remove("inactive"); + planetElement.classList.add("active-turn"); + + // Reattach the event listener using the stored handler + const clickHandler = setup.planetClickHandlers[index]; + if (clickHandler) { + planetElement.addEventListener("click", clickHandler); + } + }); -setup.buddyUp = function () { - // Code for the BUDDY UP action -}; + // Update the turn display, if you have one + const turnCounterElement = document.getElementById("turnCounter"); + if (turnCounterElement) { + turnCounterElement.innerText = `Turn: ${story.state.turn}`; + } -setup.trackTime = function () { - // Code for the TRACK TIME action -}; + // Re-render the map screen to reflect any changes + setup.showMap(); -setup.engageInProject = function () { - // Code for the ENGAGE IN PROJECT action + // Save the game state at the start of a new turn + story.checkpoint(); }; -setup.shareSkills = function () { - // Code for the SHARE SKILLS action +setup.handlePlanetClick = function (planetIndex) { + return function (event) { + if (!story.state.scenarioCompletedThisTurn) { + setup.renderPlanetPassage(planetIndex); + setup.toggleHUD(true); + } else { + console.log("A scenario has already been completed this turn."); + } + }; }; +setup.attachEventListenersToPlanets = function () { + document.querySelectorAll(".planet").forEach((planetElement, index) => { + // Ensure that the 'index' passed is correct, based on how you store your planets + // It might be 'planet.id - 1' or another method to identify the specific planet data + const planetIndex = planet.id; // or another way to get the index if necessary + + // Remove any previously attached handlers to avoid multiple assignments + if (setup.planetClickHandlers[planetIndex]) { + planetElement.removeEventListener( + "click", + setup.planetClickHandlers[planetIndex] + ); + } -setup.accountForValue = function () { - // Code for the ACCOUNT FOR VALUE action + // Create a new handler and attach it + setup.planetClickHandlers[planetIndex] = + setup.handlePlanetClick(planetIndex); + planetElement.addEventListener( + "click", + setup.planetClickHandlers[planetIndex] + ); + }); }; - -// Bind the actions to the list items -// window.onload = function () { -// document.getElementById("buddyUp").onclick = setup.buddyUp; -// document.getElementById("trackTime").onclick = setup.trackTime; -// document.getElementById("engageInProject").onclick = setup.engageInProject; -// document.getElementById("shareSkills").onclick = setup.shareSkills; -// document.getElementById("accountForValue").onclick = setup.accountForValue; -// };