From dcd178a376ec1d3ba3343e8bd4c3fc473ba4ae16 Mon Sep 17 00:00:00 2001 From: Nicky Case Date: Wed, 20 Feb 2019 13:45:23 -0500 Subject: [PATCH] more flexible text, including anrrator --- index.html | 6 ++ scenes/demo.md | 100 +++++++++++++----- scripts/demo/Demo_SceneSetup.js | 10 +- scripts/game/Game.js | 180 +++++++++++++++++++++++++++----- styles/game.css | 102 ++++++++++++++---- 5 files changed, 320 insertions(+), 78 deletions(-) diff --git a/index.html b/index.html index e280e0a..df6706c 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,12 @@
+
+
+ paused +
click anywhere to continue suffering
+
+
diff --git a/scenes/demo.md b/scenes/demo.md index 1c8c2c7..46b960d 100644 --- a/scenes/demo.md +++ b/scenes/demo.md @@ -1,42 +1,88 @@ -# demo +# act1 -``` -SceneSetup.demo(); -publish("beebee",["normal_down"]); -``` +`SceneSetup.demo();` -> So... scrolling your life away on Twitter, huh? +n: THIS IS A HUMAN -``` -publish("beebee",["normal"]); -publish("hong",["sarcasm"]); -``` +`publish("scene", ["add_beebee"])` -Yeah, I wonder why I don't just sit alone with my thoughts more often. +(#act1b) -`publish("beebee",["normal_down"]);` +n: THIS IS YOU, THAT HUMAN'S ANXIETY -> ... +h: oh, hello again. i'm sorry but i'd like to eat in peace today if that's not too m-- -`publish("beebee",["normal_down_vexed"]);` +n: YOUR JOB IS TO PROTECT YOUR HUMAN FROM *DANGER* -[Oh god, look at that awful news!](#derp) +n: IN FACT, THAT SANDWICH IS PUTTING THEM IN *DANGER* RIGHT NOW -[Ugh, look at that troll comment.](#derp) +n: QUICK, WARN THEM -[hey, a GIF of a cat drinking milk](#milk) `publish("beebee",["normal_speak"])` +[You're eating alone for lunch! Again!](#act1a_alone) + +[You're not studying while eating!](#act1a_study) + +[That white bread's bad for you!](#act1a_bread) + +# act1a_alone + +h: oh no + +b: oh yes + +n: YOU USED *FEAR OF BEING UNLOVED* + +(#act1b) + +# act1a_study + +h: oh no + +b: oh yes + +n: YOU USED *FEAR OF BEING A BAD PERSON* + +(#act1b) + +# act1a_bread + +h: oh no + +b: oh yes + +n: YOU USED *FEAR OF BEING HURT* + +(#act1b) + +# act1b + +n: IT'S SUPER EFFECTIVE! + +n: BUT YOU'RE NOT DONE PROTECTING YOUR HUMAN YET + +h: on second thought, um, maybe I'll look at my phone. + +n: YOUR MOVES ARE: FEAR OF *BEING HURT,* *BEING UNLOVED,* AND *BEING A BAD PERSON* + +n: LOWER YOUR HUMAN'S HP (HARDHEADED-NESS POINTS) TO ZERO + +n: PROTECT YOUR HUMAN... AT ANY COST + +n: GOOD LUCK + +(#act1c) + +# act1c + +h: huh... there's a party invite on Facebook. that looks nice... + +[Say yes, or they'll think you're a loser](#derp) + +[Say no, it's probably full of drugs](#derp) + +[Ignore it, you just make parties sad](#derp) -# milk -`publish("hong",["smile"])` -Heh, yeah that is pretty cu- -``` -publish("beebee",["scream"]); -publish("hong",["shock"]); -HP.attackHong("60p"); -Game.OVERRIDE_TEXT_SPEED = 1.5; -``` -> CATS CAN'T DIGEST COW'S MILK AND YOU'RE A HORRIBLE PERSON FOR ENJOYING ANIMAL ABUSE \ No newline at end of file diff --git a/scripts/demo/Demo_SceneSetup.js b/scripts/demo/Demo_SceneSetup.js index fd5f8ab..e91a359 100644 --- a/scripts/demo/Demo_SceneSetup.js +++ b/scripts/demo/Demo_SceneSetup.js @@ -2,8 +2,6 @@ SceneSetup.demo = function(){ Game.resetScene(); - HP.hong = 80; - // Background var bg = new BG_Anxiety(); Game.scene.children.push(bg); @@ -14,6 +12,12 @@ SceneSetup.demo = function(){ // Beebee var beebee = new Demo_Beebee(); - Game.scene.children.push(beebee); + subscribe("scene", function(command){ + switch(command){ + case "add_beebee": + Game.scene.children.push(beebee); + break; + } + }); }; \ No newline at end of file diff --git a/scripts/game/Game.js b/scripts/game/Game.js index 3094c3f..386bb05 100644 --- a/scripts/game/Game.js +++ b/scripts/game/Game.js @@ -68,9 +68,51 @@ Game.start = function(){ }; Game.update = function(){ - Game.updateText(); - Game.updateCanvas(); - publish("update"); + + if(!Game.paused){ + + // Timeout callbacks... + for(var i=Game.timeoutCallbacks.length-1; i>=0; i--){ // backwards coz removing + var tc = Game.timeoutCallbacks[i]; + tc.timeLeft -= 1000/60; + if(tc.timeLeft<=0){ + tc.callback(); + Game.timeoutCallbacks.splice(i,1); // delete that one + } + } + + // The interface + Game.updateText(); + Game.updateCanvas(); + + // Ayyy + publish("update"); + + } + +}; + +Game.paused = false; +Game.pause = function(){ + Game.paused = true; + document.querySelector("#paused").style.display = "block"; +}; +window.addEventListener("blur", Game.pause); +Game.onUnpause = function(){ + if(Game.paused){ + Game.paused = false; + document.querySelector("#paused").style.display = "none"; + } +}; +window.addEventListener("click", Game.onUnpause); +window.addEventListener("touchstart", Game.onUnpause); + +Game.timeoutCallbacks = []; +Game.setTimeout = function(callback, interval){ + Game.timeoutCallbacks.push({ + callback: callback, + timeLeft: interval + }); }; Game.goto = function(sectionID){ @@ -160,7 +202,7 @@ Game.immediatePromise = function(){ Game.updateText = function(){ var wordsHeight = 80 + Game.wordsDOM.getBoundingClientRect().height; var currentY = parseFloat(Game.wordsDOM.style.top) || 80; - var gotoY = (wordsHeight<260) ? 0 : wordsHeight-260; + var gotoY = (wordsHeight<250) ? 0 : wordsHeight-250; gotoY = 80 - gotoY; var nextY = currentY*0.9 + gotoY*0.1; Game.wordsDOM.style.top = nextY+"px"; @@ -172,14 +214,26 @@ Game.executeText = function(line){ return new RSVP.Promise(function(resolve){ - // Is it human or wolf? - var isWolf = /^\>(.*)/.test(line); - var dialogue = isWolf ? line.match(/^\>(.*)/)[1].trim() : line; // Remove the > for wolf + // Who's speaking? + // b: Beebee, h: Hong, n: Narrator, x: Xavier, y: Yvonne + var regex = /^(.)\:(.*)/ + var speaker = line.match(regex)[1].trim(); + var dialogue = line.match(regex)[2].trim(); // Add the bubble, with animation var div = document.createElement("div"); Game.wordsDOM.appendChild(div); - div.className = isWolf ? "wolf-bubble" : "human-bubble"; + switch(speaker){ + case "b": + div.className = "beebee-bubble"; + break; + case "h": + div.className = "hong-bubble"; + break; + case "n": + div.className = "narrator-bubble"; + break; + } requestAnimationFrame(function(){ requestAnimationFrame(function(){ div.style.opacity = 1; @@ -187,33 +241,107 @@ Game.executeText = function(line){ }); }); - // Add the text, letter by letter! + // TODO: BOLD LETTER BY LETTER... + + // Add the text var interval = 0; var SPEED = Math.round(40 / Game.OVERRIDE_TEXT_SPEED); - for(var i=0; i *Emphasize* *multiple* *words* + var regex = /\*([^\*]*)\*/g; + var emphasized = dialogue.match(regex) || []; + for(var i=emphasized.length-1; i>=0; i--){ // backwards coz replacing + + // Convert + var originalEm = emphasized[i] + var em = originalEm; + em = em.substr(1,em.length-2); // remove * + var ems = em.split(" "); + ems = ems.map(function(word){ + return "*"+word+"*"; + }); + em = ems.join(" "); + + // Replace in main string + var startIndex = dialogue.indexOf(originalEm); + dialogue = dialogue.slice(0, startIndex) + em + dialogue.slice(startIndex+originalEm.length); + + } + + // Add word by word + var dialogueWords = dialogue.split(" "); + for(var i=0; i" + } + + // add word + div.innerHTML += word+" "; + + }, interval); + })(word, interval); + + // Interval + interval += SPEED*5; + + // Larger interval if punctuation... + if(bareWord.slice(-1)==",") interval += SPEED*5; + if(bareWord.slice(-3)=="...") interval += SPEED*15; + + } + + } // Return promise - var nextLineDelay = 300; + var nextLineDelay = SPEED*7; if(dialogue.slice(-1)=="-") nextLineDelay=0; // sudden interrupt! - setTimeout(resolve, interval+nextLineDelay); + Game.setTimeout(resolve, interval+nextLineDelay); }); @@ -240,7 +368,7 @@ Game.executeChoice = function(line){ // Override line... ONCE if(!Game.OVERRIDE_CHOICE_LINE){ - Game.addToQueue("> "+choiceText); + Game.addToQueue("b: "+choiceText); } Game.OVERRIDE_CHOICE_LINE = true; @@ -279,7 +407,7 @@ Game.executeWait = function(line){ // Delayed promise return RSVP.Promise(function(resolve){ - setTimeout(resolve, waitTime); + Game.setTimeout(resolve, waitTime); }); }; diff --git a/styles/game.css b/styles/game.css index 470de1b..2b4063b 100644 --- a/styles/game.css +++ b/styles/game.css @@ -37,8 +37,83 @@ body{ position: relative; top: 80px; } +#paused{ + display: none; -.human-bubble { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: rgba(40,40,40,0.9); + color: #fff; + font-weight: bold; + text-align: center; +} +#paused > div{ + position: absolute; + margin: auto; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 260px; + height: 70px; + font-size: 69px; +} +#paused > div > div{ + font-size: 20px; + font-weight: lighter; + line-height: 1em; + width: 220px; + margin: 15px auto; +} + +.narrator-bubble{ + position: relative; + color: #FFFFFF; + text-align: center; + padding: 0 10px; + font-size: 1.3em; + margin: 25px 15px; + font-weight: bold; +} +.narrator-bubble:before{ + + content: ''; + + position: absolute; + top: -9px; + left: 0; + + border: 6px solid #fff; + border-right: 0; + + width: 10px; + height: calc(100% + 4px); + +} +.narrator-bubble:after{ + + content: ''; + + position: absolute; + top: -9px; + right: 0; + + border: 6px solid #fff; + border-left: 0; + + width: 10px; + height: calc(100% + 4px); + +} +.narrator-bubble i{ + font-style: normal; + color: #ff4040; +} + +.hong-bubble { position: relative; background: #ffffff; color: #000000; @@ -50,7 +125,7 @@ body{ left: -15px; transition: all 0.3s ease-in-out; } -.human-bubble:after { +.hong-bubble:after { content: ''; position: absolute; left: 0; @@ -64,7 +139,7 @@ body{ margin-left: -15px; } -.wolf-bubble { +.beebee-bubble { position: relative; background: #000000; color: #ffffff; @@ -75,25 +150,8 @@ body{ opacity: 0; left: 15px; transition: all 0.3s ease-in-out; - - /*border: 1px solid #ffffff;*/ } -/* -.wolf-bubble:before { - content: ''; - position: absolute; - right: 0; - top: 50%; - width: 0; - height: 0; - border: 16px solid transparent; - border-left-color: #ffffff; - border-right: 0; - margin-top: -16px; - margin-right: -16px; -} -*/ -.wolf-bubble:after { +.beebee-bubble:after { content: ''; position: absolute; right: 0; @@ -119,7 +177,7 @@ body{ background: #2E2E2E; text-align: center; color: #fff; - font-weight: normal; + font-weight: lighter; } #game_choices > div{