Skip to content

Commit

Permalink
Implement new intro flow
Browse files Browse the repository at this point in the history
  • Loading branch information
@jennie
jennie committed Dec 7, 2023
1 parent 4a12ccb commit 2c140ff
Show file tree
Hide file tree
Showing 5 changed files with 177 additions and 68 deletions.
3 changes: 3 additions & 0 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -347,3 +347,6 @@ button {
font-size: 20px; /* Adjust size as needed */
color: red; /* Or any color you prefer */
}
#backToMap {
@apply z-50 text-neutral-100 absolute top-6 right-6 uppercase text-base cursor-pointer;
}
42 changes: 13 additions & 29 deletions twine_src/css/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -745,22 +745,6 @@ select{
visibility: visible;
}

.absolute{
position: absolute;
}

.right-6{
right: 1.5rem;
}

.top-6{
top: 1.5rem;
}

.z-50{
z-index: 50;
}

.mx-auto{
margin-left: auto;
margin-right: auto;
Expand Down Expand Up @@ -826,10 +810,6 @@ select{
flex-shrink: 0;
}

.cursor-pointer{
cursor: pointer;
}

.items-center{
align-items: center;
}
Expand Down Expand Up @@ -882,10 +862,6 @@ select{
font-weight: 600;
}

.uppercase{
text-transform: uppercase;
}

.leading-6{
line-height: 1.5rem;
}
Expand All @@ -900,11 +876,6 @@ select{
color: rgb(79 70 229 / var(--tw-text-opacity));
}

.text-neutral-100{
--tw-text-opacity: 1;
color: rgb(245 245 245 / var(--tw-text-opacity));
}

.text-neutral-200{
--tw-text-opacity: 1;
color: rgb(229 229 229 / var(--tw-text-opacity));
Expand Down Expand Up @@ -3239,6 +3210,19 @@ button:focus-visible{
/* Or any color you prefer */
}

#backToMap{
position: absolute;
top: 1.5rem;
right: 1.5rem;
z-index: 50;
cursor: pointer;
font-size: 1rem;
line-height: 1.5rem;
text-transform: uppercase;
--tw-text-opacity: 1;
color: rgb(245 245 245 / var(--tw-text-opacity));
}

.focus\:ring-indigo-600:focus{
--tw-ring-opacity: 1;
--tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity));
Expand Down
70 changes: 44 additions & 26 deletions twine_src/scripts/2.init.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,37 @@ $(document).ready(function () {
setup.startObserving();
});

setup.renderIntro = function () {
setup.startObserving();
story.show("Map Screen");
var planetContent = setup.showPlanet(0);

var passageContainer = document.getElementById("passageContainer");
var hud = document.getElementById("hud");
var backToMap = document.getElementById("backToMap");

if (mapScreen) mapScreen.style.display = "none";
if (hud) {
hud.style.display = "flex";
backToMap.style.display = "none";
}
if (passageContainer) {
passageContainer.style.display = "block";
}

var introContent = story.render("Intro 3");
var passage = document.getElementById("passage");
if (passage) {
passage.innerHTML = introContent;
setup.typewriter();
}

var planetContentContainer = document.getElementById("planetContent");
if (planetContentContainer) {
planetContentContainer.innerHTML = planetContent;
}
};

setup.savePlayerInfo = function () {
var playerName = document.getElementById("playerName").value;
var planetName = document.getElementById("planetName").value;
Expand All @@ -171,7 +202,7 @@ $(document).ready(function () {

story.state.playerName = playerName;

story.show("Map Screen");
story.show("Intro");
};

setup.checkInputs = function () {
Expand All @@ -196,8 +227,11 @@ $(document).ready(function () {
};

setup.showPlanet = function (planetIndex) {
setup.startObserving();

story.state.currentPlanet = planetIndex;
const planet = setup.game.planets.find((p) => p.id === planetIndex);
console.log("Showing planet:", planet);
let content = planet.description;
let repContent = `<img class='repImage' src='${planet.repImgSrc}' /><div class='repName'>${planet.rep}</div>`;
var repContainer = document.getElementById("rep");
Expand Down Expand Up @@ -267,9 +301,13 @@ $(document).ready(function () {
var passage = document.getElementById("passage");
var planetContentContainer = document.getElementById("planetContent");
var hud = document.getElementById("hud");
var backToMap = document.getElementById("backToMap");

if (mapScreen) mapScreen.style.display = "none";
if (hud) hud.style.display = "flex";
if (hud) {
hud.style.display = "flex";
backToMap.style.display = "block";
}
if (passageContainer) {
passage.innerHTML = passageContent;
setup.typewriter();
Expand Down Expand Up @@ -350,7 +388,10 @@ $(document).ready(function () {
};

setup.planetClickHandlers = {};

$(window).on("sm.passage.showing", function (event, eventObject) {
// Current Passage object
console.log(eventObject.passage.name);
});
setup.showMap = function () {
var mapScreen = document.getElementById("mapScreen");

Expand Down Expand Up @@ -616,22 +657,6 @@ $(document).ready(function () {
setTimeout(setup.showWeekPreamble, 0);
};
setup.updatePlanetsAndTurnCounter = function () {
// console.log(
// "Updating planets and turn counter, Crisis Turn:",
// story.state.isCrisisTurn
// );

// setTimeout(function () {
// const mapScreen = document.getElementById("mapScreen");

// if (story.state.isCrisisTurn) {
// mapScreen.classList.add("crisis");
// console.log("Crisis class added to mapScreen:", mapScreen.classList);
// } else {
// mapScreen.classList.remove("crisis");
// }
// }, 0);

document
.querySelectorAll(".planet")
.forEach(function (planetElement, index) {
Expand Down Expand Up @@ -699,13 +724,6 @@ $(document).ready(function () {

setup.handlePlanetClick = function (planetIndex) {
return function () {
// if (planetIndex === -1) {
// console.log("Player's planet clicked.");
// setup.renderPlayerPlanetPassage();
// setup.toggleHUD(true);
// return;
// }

console.log("Clicked Planet Index:", planetIndex);
if (!story.state.scenarioCompletedThisTurn) {
if (
Expand Down
24 changes: 11 additions & 13 deletions twine_src/setup.twee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,35 +46,37 @@ Unknown Signal: I know, I know. But sometimes community takes a lil' bureaucracy
[[Download the Document|Customization]]

:: Customization

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="./scripts/1.SplitText.min.js"></script>
<% $("body").addClass("customization").removeClass("map") %>

<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="mx-auto max-w-3xl customization-form">
<h1>It's Jammy Jam Time!</h1>
<h2>DJ FUNKYBEATZ: Welcome to Gamma Space collaborative federation!</h2>
<p>Dear Planet Representative,</p>

<p>Please fill out the following information.</p>
<div>
<label for="playerName" class="block text-sm font-medium leading-6 text-gray-900">What's your name?</label>
<label for="playerName" class="block text-sm font-medium leading-6 text-gray-900">Your full name:</label>
<div class="mt-2">
<input id="playerName" name="playerName" type="text" value="" oninput="setup.checkInputs()" class="customization-text-input">
</div>
</div>
<div>
<label for="planetName" class="block text-sm font-medium leading-6 text-gray-900">What's your planet's name?</label>
<label for="planetName" class="block text-sm font-medium leading-6 text-gray-900">The name of your planet:</label>
<div class="mt-2">
<input id="planetName" name="planetName" type="text" value="" oninput="setup.checkInputs()" class="customization-text-input">
</div>
</div>
<div>
<label for="projectDescription" class="block text-sm font-medium leading-6 text-gray-900">Tell us about your project.</label>
<label for="projectDescription" class="block text-sm font-medium leading-6 text-gray-900">Your planet's main artistic output (eg. singing, dancing, competitive digital zip-lining, intergalactic fermentation stations):</label>
<div class="mt-2">
<input id="projectDescription" name="projectDescription" type="text" value="" oninput="setup.checkInputs()" class="customization-text-input">
</div>
</div>

<div>
<p for="planetImg" class="text-base font-semibold text-neutral-50">Home Planet</p>
<!-- <p for="planetImg" class="text-base font-semibold text-neutral-50">Home Planet</p> -->
<p class="text-sm text-neutral-200">Pick a planet body:</p>
<fieldset class="mt-4" id="planetImg">
<div class="space-y-4">
Expand All @@ -92,10 +94,7 @@ Unknown Signal: I know, I know. But sometimes community takes a lil' bureaucracy
</div>
</fieldset>
</div>
<button id="nextButton" onclick="setup.savePlayerInfo()" class="disabled:opacity-25" disabled>Next</button>
<% if (story.state.playerName && story.state.planetName) { %>
[[Next->Map Screen]]
<% } %>
<button id="nextButton" onclick="setup.savePlayerInfo()" class="disabled:opacity-25" disabled>Transmit the document</button>
</div>
</div>

Expand All @@ -107,7 +106,7 @@ Unknown Signal: I know, I know. But sometimes community takes a lil' bureaucracy
<div id="ui">
<div id="playerScreen">
<div class="text-sm">
<span id="turnCounter"><%= 7 - s.turn %> weeks to the radio show!</span>
<span id="turnCounter"><%= 8 - s.turn %> weeks to the radio show!</span>
</div>
<div id="playerInfo"></div>
</div>
Expand All @@ -120,7 +119,7 @@ Unknown Signal: I know, I know. But sometimes community takes a lil' bureaucracy
</div>

<div id="hud">
<span onclick="setup.returnToMap()" class="z-50 text-neutral-100 absolute top-6 right-6 uppercase text-base cursor-pointer">&larr; back to map</span>
<span onclick="setup.returnToMap()" id="backToMap">&larr; back to map</span>
<div id="planet-splash" class="flex-shrink-0 px-6 pt-6"></div>

<div id="planet-info">
Expand All @@ -133,7 +132,6 @@ Unknown Signal: I know, I know. But sometimes community takes a lil' bureaucracy

<script>
setup.showMap();
setup.toggleHUDTop(true)
</script>

<% console.log(setup.game) %>
Expand Down
106 changes: 106 additions & 0 deletions twine_src/story.twee
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,109 @@
:: Intro
Unknown Signal: Well, <%= story.state.playerName %> from <%= story.state.playerPlanet.name %>. It's my honour and delight to *welcome you*...

[[Next|Intro 2]]

:: Intro 2
Unknown Signal: **... to the Gamma Federation!**

<button id="renderIntroButton" onclick="setup.renderIntro();" >Next</button>

:: Intro 3
Unknown Signal: I just realized I had my video turned off this whole time... *some host I am!*

[[Next|Intro 4]]

:: Intro 4
Unknown Signal: Allow me to introduce myself. I am ❄︎pioGA⍓︎rovvst♏︎♋︎S:laQN⬧︎doü⧫︎ffpz⍓︎?MBzx■︎Bzt.

[[Next|Intro 5]]

:: Intro 5
Unknown Signal: But my friends call me *DJ FUNKYBEATZ.* 🎵

[[Next|Intro 6]]

:: Intro 6
DJ: We're grateful to have you as the newest member of the Federation.

[[Next|Intro 7]]

:: Intro 7

DJ: I know you've had a tough time recently, what with losing your job at the Dominion Planetation and all. I know what that place can do to your trust...

[[Next|Intro 8]]

:: Intro 8
DJ: But things are different here. There's no overlord. No forced overtime. Just a commitment to our collective wellbeing and shared values. I know you already got the values information beforehand, but I'll share them again.

[[Next|Intro 9]]

:: Intro 9
- Collective care and support
- Personal and Collective Accountability
- Creative Empowerment
- Challenging Systemic Norms
- Art as a Means for Change*

[[Next|Intro 10]]

:: Intro 10
DJ: Opting into the Federation means opting into the values. The values are iterative, but commitment to the Federation means commitment working *with* us to make those changes.

[[Next|Intro 11]]

:: Intro 11
DJ: But I'm talking your ear off! I'm so excited to see how you will exhibit your [projectDescription] during the Radio Show in **7 weeks**.

<div class="passage-choices">
[[Radio show?|Radio Show Explanation]]
<span onclick="setup.returnToMap();">Oh yeah, I know about that.</span>
</div>

:: Radio Show Explanation
DJ: YOU DON'T KNOW ABOUT THE RADIO SHOW?!?
DJ: ...

[[Next|Radio Show Explanation 2]]

:: Radio Show Explanation 2
DJ: Sorry, I got a little carried away there. It's just... a kinda big deal.

[[Next|Radio Show Explanation 3]]

:: Radio Show Explanation 3
DJ: Every **year** The Gamma Federation hosts an intergalactic radio show where all the Gamma planets exhibit their artistic creations across the galaxy.

[[Next|Radio Show Explanation 4]]

:: Radio Show Explanation 4
DJ: As you get acquainted with the Federation, I encourage you to check in on the other planets every so often to see how their projects are coming along for the radio show. This is something we call the *buddy system*.

[[Next|Radio Show Explanation 5]]

:: Radio Show Explanation 5
DJ: *Check in on your buddies🎵<br>
and they'll check in on youuu.<br>
It makes us all do better,<br>
and it's easy enough to dooo!*🎵

[[Next|Radio Show Explanation 6]]

:: Radio Show Explanation 6
DJ: Okay, yeah yeah. Not my finest work.

[[Next|Radio Show Explanation 7]]

:: Radio Show Explanation 7
DJ: Nothing to add? Wow. An alien can take a hint. Well, off with you then. I'm transmitting the coordinates of the other planets to you now.

<div class="passage-choices">
<span onclick="setup.returnToMap();">Open map</span>
</div>



<!-- Planet request scenarios, random -->
:: 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.
Expand Down

0 comments on commit 2c140ff

Please sign in to comment.