more flexible text, including anrrator
This commit is contained in:
Nicky Case
parent
45b2fe1814
commit
dcd178a376
|
|
@ -12,6 +12,12 @@
|
|||
<div id="game_words" class="no_select"></div>
|
||||
<div id="game_hp"></div>
|
||||
<div id="game_choices" class="no_select"></div>
|
||||
<div id="paused">
|
||||
<div>
|
||||
paused
|
||||
<div>click anywhere to continue suffering</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
100
scenes/demo.md
100
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
|
||||
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
|
@ -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<dialogue.length; i++){
|
||||
if(speaker!="n"){
|
||||
|
||||
var ch = dialogue[i];
|
||||
// If not narrator, add letter by letter...
|
||||
for(var i=0; i<dialogue.length; i++){
|
||||
|
||||
// for scopin'
|
||||
(function(ch, interval){
|
||||
setTimeout(function(){
|
||||
div.innerHTML += ch;
|
||||
}, interval);
|
||||
})(ch, interval);
|
||||
var chr = dialogue[i];
|
||||
|
||||
// If it's the last char & it's "-", skip
|
||||
if(i==dialogue.length-1 && chr=="-") break;
|
||||
|
||||
// for scopin'
|
||||
(function(chr, interval){
|
||||
Game.setTimeout(function(){
|
||||
div.innerHTML += chr;
|
||||
}, interval);
|
||||
})(chr, interval);
|
||||
|
||||
// Bigger interval
|
||||
if(i!=dialogue.length-1){ // NOT last
|
||||
if(chr=="."){
|
||||
interval += SPEED*9;
|
||||
}else if(chr==","){
|
||||
interval += SPEED*5;
|
||||
}else{
|
||||
interval += SPEED;
|
||||
}
|
||||
}
|
||||
|
||||
// Bigger interval
|
||||
if(ch=="."){
|
||||
interval += SPEED*10;
|
||||
}else{
|
||||
interval += SPEED;
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
// IF NARRATOR
|
||||
|
||||
// *Emphasize multiple words* => *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<dialogueWords.length; i++){
|
||||
|
||||
var word = dialogueWords[i];
|
||||
var bareWord = word;
|
||||
if(/\*(.*)\*/.test(bareWord)){
|
||||
bareWord = word.match(/\*(.*)\*/)[1].trim();
|
||||
}
|
||||
|
||||
// for scopin'
|
||||
(function(word, interval){
|
||||
Game.setTimeout(function(){
|
||||
|
||||
// if emphasize, emphasize!
|
||||
if(/\*(.*)\*/.test(word)){
|
||||
word = "<i>" + word.match(/\*(.*)\*/)[1].trim() + "</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);
|
||||
});
|
||||
|
||||
};
|
||||
|
|
|
|||
102
styles/game.css
102
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{
|
||||
|
|
|
|||
Loading…
Reference in New Issue