diff --git a/index.html b/index.html index f3755bf..6e73aa5 100644 --- a/index.html +++ b/index.html @@ -8,20 +8,30 @@
+ +
+ + + + + +
paused
click anywhere to keep freaking out
-
-
loading...
- -
+ + + +
+
ok 👌
+ + +
+
loading...
+ +
+
diff --git a/scenes/act1-end.md b/scenes/act1-end.md index 05c6a17..12ef38a 100644 --- a/scenes/act1-end.md +++ b/scenes/act1-end.md @@ -4,13 +4,13 @@ (...2000) -n: TOTAL FEARS USED +n: TOTAL FEARS USED: -n: #harm# *BEING HARMED:* {{Game.TEXT_SPEED}} +n: #harm# *BEING HARMED:* {{_.attack_harm}} -n: #alone# *BEING UNLOVED:* {{2+2}} +n: #alone# *BEING UNLOVED:* {{_.attack_alone}} -n: #bad# *BEING A BAD PERSON:* {{window.dick}} +n: #bad# *BEING A BAD PERSON:* {{_.attack_bad}} (...4000) diff --git a/scenes/act1.md b/scenes/act1.md index 1c395e0..ee62f41 100644 --- a/scenes/act1.md +++ b/scenes/act1.md @@ -4,7 +4,9 @@ (...300) -n: AND THIS IS YOU, THAT HUMAN'S ANXIETY +n: AND THIS IS THE HUMAN'S ANXIETY + +n: _YOU_ ARE THE ANXIETY `hong({mouth:"0_neutral", eyes:"0_annoyed"})` @@ -22,6 +24,10 @@ n: QUICK, WARN THEM! `bb({eyes:"normal", mouth:"normal"})` +`Game.OVERRIDE_TEXT_SPEED = 1.25;` + +n4: (LET _YOUR_ WOLF COME OUT TO PLAY! PICK WHAT _YOUR_ ANXIETY WOULD BE MOST LIKELY TO SAY) + [You're eating alone for lunch! Again!](#act1a_alone) [You're not productive while eating!](#act1a_study) @@ -158,7 +164,7 @@ n: BUT YOU'RE NOT DONE SAVING YOUR HUMAN YET n: GET YOUR HUMAN'S ENERGY BAR TO ZERO -n: YOUR MOVES ARE: +n: TO PROTECT YOUR HUMAN'S PHYSICAL + SOCIAL + MORAL NEEDS, YOU CAN USE: n: FEAR OF *BEING HARMED* #harm# @@ -166,7 +172,9 @@ n: FEAR OF *BEING UNLOVED* #alone# n: AND FEAR OF *BEING A BAD PERSON* #bad# -n: (PRO TIP: TRY PLAYING THE CHOICES THAT PERSONALLY HIT YOUR DEEPEST, DARKEST FEARS!) +`Game.OVERRIDE_TEXT_SPEED = 1.25;` + +n4: (PRO-TIP: PLAY THE CHOICES THAT PERSONALLY HIT YOUR DEEPEST, DARKEST FEARS~) h: ... diff --git a/scenes/intro.md b/scenes/intro.md index d8eb7fd..f467bdd 100644 --- a/scenes/intro.md +++ b/scenes/intro.md @@ -4,15 +4,53 @@ # intro-play-button -[Play!](#intro-start) `publish("intro-to-game-1")` +[Play!](#intro-start) `publish("intro-to-game-1"); Game.OVERRIDE_CHOICE_LINE=true;` # intro-start -(...300) +(...500) `clearText()` -m: THIS IS A HUMAN +n3: Note: this is less of a "game", more of an interactive story. Hope you like reading, sucka! + +n3: So before we start, please choose your reading speed: + +`publish("show_options_bottom")` + +# intro-start-2 + +{{if Game.TEXT_SPEED>=100}} +n3: Great! Slowwwly does it. +{{/if}} + +{{if Game.TEXT_SPEED==80}} +n3: About as relaxing as a game about anxiety's gonna get. +{{/if}} + +{{if Game.TEXT_SPEED==60}} +n3: Great! Defaults are everyone's favorite non-choice choice. +{{/if}} + +{{if Game.TEXT_SPEED==40}} +n3: Fast it is! Don't blink! +{{/if}} + +{{if Game.TEXT_SPEED==0}} +n3: Great! Now you can read – or not – at your own pace. (Click anywhere to advance) +{{/if}} + +n3: Also, you can always change text/audio options by clicking the ⚙️ icon below. {{if Game.TEXT_SPEED==0}}(again, click to advance){{/if}} + +n3: Now, let's begin our story... {{if Game.TEXT_SPEED==0}}(you know the drill){{/if}} + +`clearText()` + +(...1000) + +`publish("intro-to-game-2")` + +n2: THIS IS A HUMAN (...600) @@ -20,4 +58,4 @@ m: THIS IS A HUMAN (...300) -`publish("intro-to-game-2")` \ No newline at end of file +`publish("intro-to-game-3")` \ No newline at end of file diff --git a/scripts/act1/Act1_SceneSetup.js b/scripts/act1/Act1_SceneSetup.js index 877b8a4..a10f5fe 100644 --- a/scripts/act1/Act1_SceneSetup.js +++ b/scripts/act1/Act1_SceneSetup.js @@ -7,6 +7,11 @@ SceneSetup.act1 = function(){ Game.resetScene(); + // ATTACKS + _.attack_harm = 0; + _.attack_alone = 0; + _.attack_bad = 0; + // Background var bg = new BG_Anxiety(); Game.scene.children.push(bg); diff --git a/scripts/game/Game.js b/scripts/game/Game.js index c8cab1a..d231722 100644 --- a/scripts/game/Game.js +++ b/scripts/game/Game.js @@ -20,6 +20,7 @@ window.hong = function(){ }; window.attack = function(damage, type){ publish("attack", ["hong", damage, type]); + _["attack_"+type]++; // HACK }; window.attackBB = function(damage, type){ publish("attack", ["bb", damage, type]); @@ -262,8 +263,8 @@ Game.executeText = function(line){ return new RSVP.Promise(function(resolve){ // Who's speaking? - // b: Beebee, h: Hong, n: Narrator, x: Xavier, y: Yvonne - var regex = /^(.)\:(.*)/ + // b: Beebee, h: Hong, n: Narrator, n2: Narrator 2, n3: Narrator 3 + var regex = /^([^\:]+)\:(.*)/ var speaker = line.match(regex)[1].trim(); var dialogue = line.match(regex)[2].trim(); @@ -282,9 +283,15 @@ Game.executeText = function(line){ case "n": div.className = "narrator-bubble"; break; - case "m": // narrator 2 + case "n2": // narrator 2 div.className = "narrator-bubble-2"; break; + case "n3": // narrator 3 + div.className = "narrator-bubble-3"; + break; + case "n4": // narrator 3 + div.className = "narrator-bubble-4"; + break; } requestAnimationFrame(function(){ requestAnimationFrame(function(){ @@ -304,7 +311,9 @@ Game.executeText = function(line){ if(Game.FORCE_TEXT_DURATION>0){ SPEED = Math.round(Game.FORCE_TEXT_DURATION/dialogue.length); } - if(speaker!="n" && speaker!="m"){ + + // IF IT'S BEEBEE, HONG, or NARRATOR 3 + if(speaker=="b" || speaker=="h" || speaker=="n3"){ // Put in the text, each character a DIFFERENT SPAN... var span, chr; @@ -372,7 +381,7 @@ Game.executeText = function(line){ }else{ // if not, no! interval += SPEED; } - }else if(chr==","){ + }else if(chr=="," || chr==":"){ interval += SPEED*5; }else{ interval += SPEED; @@ -383,7 +392,7 @@ Game.executeText = function(line){ }else{ - // IF NARRATOR + // IF NARRATOR 1 or 2 or 4 // *Emphasize multiple words* => *Emphasize* *multiple* *words* var regex = /\*([^\*]*)\*/g; @@ -412,9 +421,16 @@ Game.executeText = function(line){ for(var i=0; i"; + if(reggie.test(word)){ + word = "" + word.match(reggie)[1].trim() + ""; + } + + // Actual emphasis + reggie = /\_(.*)\_/; + if(reggie.test(word)){ + word = "" + word.match(reggie)[1].trim() + ""; } // Add the span diff --git a/scripts/game/Options.js b/scripts/game/Options.js index d247206..c245b92 100644 --- a/scripts/game/Options.js +++ b/scripts/game/Options.js @@ -2,6 +2,7 @@ window.Options = {}; (function(){ + var optionsDOM = $("#options"); var text_speed_slider = $("#text_speed_slider"); var text_speed_preview = $("#text_speed_preview"); @@ -10,10 +11,10 @@ window.Options = {}; "Show text at a relaxed speed", "Show text at the default speed", "Show text at a brisk speed", - "Show text NOW! (& click-to-advance)" + "INSTANT! With click-to-advance" ]; var SPEEDS = [ - 120, + 100, 80, 60, 40, @@ -96,4 +97,38 @@ window.Options = {}; }; updateText(); + ///////////////////////////// + + subscribe("show_options_bottom", function(){ + + optionsDOM.style.top = "447px"; + _clearAllTimeouts(); + text_speed_preview.innerHTML = ""; + + setTimeout(function(){ + updateText(); + },400); + + }); + + $("#options_ok").onclick = function(){ + publish("cut_options_bottom"); + }; + + subscribe("cut_options_bottom", function(){ + optionsDOM.style.display = "none"; + optionsDOM.style.top = ""; + setTimeout(function(){ + optionsDOM.style.display = "block"; + },100); + + // Total hack, but whatever + Game.goto("intro-start-2"); + + // Double total hack + $("#gear").style.display = "block"; + $("#about").style.display = "block"; + + }); + })(); \ No newline at end of file diff --git a/scripts/intro/Intro_BG.js b/scripts/intro/Intro_BG.js index c0611d4..d78ccd4 100644 --- a/scripts/intro/Intro_BG.js +++ b/scripts/intro/Intro_BG.js @@ -104,7 +104,7 @@ function BG_Intro(){ 20 ] - var ticker = 0; //16;//0; + var ticker = 16;//0; var frameTicker = ticker; var parallaxTicker = 0; var SHOWN_PLAY_BUTTON = false; @@ -121,13 +121,17 @@ function BG_Intro(){ // Animate Hong: Which frame? var parallax = 0; frameTicker += 1/60; - if(GAME_TRANSITION==0 || GAME_TRANSITION==1){ + if(GAME_TRANSITION==0 || GAME_TRANSITION==1 || GAME_TRANSITION==2){ if(frameTicker>590/30){ - if(GAME_TRANSITION==0) frameTicker = 381/30; // LOOP to NOM. - if(GAME_TRANSITION==1) frameTicker = 590/30; // STOP. + if(GAME_TRANSITION==0 || GAME_TRANSITION==1){ + frameTicker = 381/30; // LOOP to NOM. + } + if(GAME_TRANSITION==2){ + frameTicker = 590/30; // STOP. + } } } - if(GAME_TRANSITION==2){ + if(GAME_TRANSITION==3){ // START PARALLAXING parallaxTicker += 1/60; // 0 to 1 in one second if(parallaxTicker>1) parallaxTicker = 1; @@ -185,13 +189,18 @@ function BG_Intro(){ var _subscriptions = []; _subscriptions.push( subscribe("intro-to-game-1", function(){ - GAME_TRANSITION = 1; // STOP LOOPING + GAME_TRANSITION = 1; // BYE LOGO }) ); _subscriptions.push( subscribe("intro-to-game-2", function(){ + GAME_TRANSITION = 2; // STOP LOOPING + }) + ); + _subscriptions.push( + subscribe("intro-to-game-3", function(){ frameTicker = 600/30; - GAME_TRANSITION = 2; // START PARALLAXING + GAME_TRANSITION = 3; // START PARALLAXING // WHOOSH sfx("whoosh"); diff --git a/scripts/main.js b/scripts/main.js index 2dc5a73..afdfdb1 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -37,6 +37,6 @@ subscribe("START_GAME", function(){ hong({body:"phone1"}); Game.goto("act1h"); - //Game.goto("intro"); + //Game.goto("act1"); }); \ No newline at end of file diff --git a/styles/game.css b/styles/game.css index 0a0fe56..c118b19 100644 --- a/styles/game.css +++ b/styles/game.css @@ -7,6 +7,12 @@ body{ background: #000; } +/****************************************************************************************************** + +MAIN GAME + +******************************************************************************************************/ + #game_words, #game_choices, #paused{ -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ @@ -39,6 +45,57 @@ body{ overflow: hidden; } + +/****************************************************************************************************** + +BOTTOM TABS + +******************************************************************************************************/ + +#gear, #about{ + position: absolute; + bottom: 0; + background: #191919; + width: 35px; + height: 35px; + cursor: pointer; +} +#gear:hover, #about:hover{ + background: #575757; +} +#gear > .icon, #about > .icon{ + position: absolute; + width: 0; + height: 0; + top: 10px; +} + +#gear{ + left: 0; + border-top-right-radius: 50px; +} +#gear > .icon{ + left: 4px; +} +#about{ + right: 0; + border-top-left-radius: 50px; +} +#about > .icon{ + color: rgba(255,255,255,0.4); + font-weight: bold; + right: 19px; +} + + + + +/****************************************************************************************************** + +PAUSED & LOADING + +******************************************************************************************************/ + #paused, #loading{ display: none; @@ -84,6 +141,14 @@ body{ font-size: 30px; } + + +/****************************************************************************************************** + +ABOUT / END DEMO + +******************************************************************************************************/ + #end_demo{ position: absolute; top:0; left:0; @@ -119,12 +184,58 @@ body{ margin: 5px auto 15px auto; } + +/****************************************************************************************************** + +OPTIONS + +******************************************************************************************************/ + #options{ position: absolute; - bottom: 0px; + top: 600px; + + width: 300px; + background: #2e2e2e; + padding: 15px; + margin: 15px; + + /* Spring OUT only */ + -webkit-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1); /* older webkit */ + -webkit-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); + -moz-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); + -o-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); + transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); /* custom */ + + -webkit-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1); /* older webkit */ + -webkit-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); + -moz-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); + -o-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); + transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); /* custom */ + } #text_speed_preview{ color:#fff; + height: 1.3em; +} +#options_ok{ + display: inline-block; + background: #000; + padding: 5px 10px; + border-radius: 10px; + color: #fff; + font-weight: bold; + margin: 0 auto; + float: right; + + position: relative; + top:0; + + cursor: pointer; +} +#options_ok:hover{ + background: #666; + top:-2px; } /* @@ -196,18 +307,18 @@ input[type="range"]{ -/*************************************************** +/****************************************************************************************************** DIALOGUEZ -***************************************************/ +******************************************************************************************************/ .clear-both{ clear:both; } -.narrator-bubble, .narrator-bubble-2{ +.narrator-bubble, .narrator-bubble-2, .narrator-bubble-4{ position: relative; color: #FFFFFF; text-align: center; @@ -216,7 +327,7 @@ DIALOGUEZ margin: 25px 15px; font-weight: bold; } -.narrator-bubble:before, .narrator-bubble-2:before{ +.narrator-bubble:before, .narrator-bubble-4:before{ content: ''; @@ -231,7 +342,7 @@ DIALOGUEZ height: calc(100% + 4px); } -.narrator-bubble:after, .narrator-bubble-2:after{ +.narrator-bubble:after, .narrator-bubble-4:after{ content: ''; @@ -246,15 +357,36 @@ DIALOGUEZ height: calc(100% + 4px); } -.narrator-bubble i, .narrator-bubble-2 i{ +.narrator-bubble i, .narrator-bubble-2 i, .narrator-bubble-4 i{ font-style: normal; color: #ff4040; } -.narrator-bubble-2{ - color: #000; +.narrator-bubble i.italics, .narrator-bubble-4 i.italics{ + font-style: italic; + color: #fff; } -.narrator-bubble-2:before, .narrator-bubble-2:after{ - border-color: #000; +.narrator-bubble-2{ + color: #fff; + background: #000; + margin: 10px 15px; + padding: 15px 0; +} +.narrator-bubble-4{ + font-size: 20px; +} +.narrator-bubble-3 { + + position: relative; + background: #000000; + color: #ffffff; + padding: 15px; + margin: 5px 30px; + + text-align: center; + + /*opacity: 0; + transition: all 0.3s ease-in-out;*/ + } .hong-bubble { @@ -306,7 +438,7 @@ DIALOGUEZ .beebee-bubble:after { content: ''; position: absolute; - right: 0; + right: 1px; top: 50%; width: 0; height: 0;