bunch of narrative fixes
This commit is contained in:
parent
49261be164
commit
f3c47bf5b0
28
index.html
28
index.html
|
@ -8,20 +8,30 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="game_container">
|
<div id="game_container">
|
||||||
|
|
||||||
|
<!-- The main game -->
|
||||||
<canvas id="game_canvas"></canvas>
|
<canvas id="game_canvas"></canvas>
|
||||||
<div id="game_words"></div>
|
<div id="game_words"></div>
|
||||||
<div id="game_hp"></div>
|
<div id="game_hp"></div>
|
||||||
<div id="game_choices"></div>
|
<div id="game_choices"></div>
|
||||||
|
|
||||||
|
<!-- Bottom Corner Tabs -->
|
||||||
|
<div id="gear" style="display:none">
|
||||||
|
<div class="icon">⚙</div>
|
||||||
|
</div>
|
||||||
|
<div id="about" style="display:none">
|
||||||
|
<div class="icon">?</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Paused Screen -->
|
||||||
<div id="paused">
|
<div id="paused">
|
||||||
<div>
|
<div>
|
||||||
paused
|
paused
|
||||||
<div>click anywhere to keep freaking out</div>
|
<div>click anywhere to keep freaking out</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="loading" onclick="publish('START_GAME')">
|
|
||||||
<div id="loading_progress">loading...</div>
|
<!-- ABOUT / END DEMO -->
|
||||||
<div id="loading_done" style="display:none">play!</div>
|
|
||||||
</div>
|
|
||||||
<div id="end_demo" style="display:none">
|
<div id="end_demo" style="display:none">
|
||||||
<div id="end_demo_tbc"></div>
|
<div id="end_demo_tbc"></div>
|
||||||
<div id="end_demo_words">
|
<div id="end_demo_words">
|
||||||
|
@ -53,10 +63,20 @@
|
||||||
<div></div>
|
<div></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- OPTIONS -->
|
||||||
<div id="options">
|
<div id="options">
|
||||||
<div id="text_speed_preview"></div>
|
<div id="text_speed_preview"></div>
|
||||||
<input id="text_speed_slider" type="range" min=0 value=2 max=4 step=1/>
|
<input id="text_speed_slider" type="range" min=0 value=2 max=4 step=1/>
|
||||||
|
<div id="options_ok">ok 👌</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- LOADING -->
|
||||||
|
<div id="loading" onclick="publish('START_GAME')">
|
||||||
|
<div id="loading_progress">loading...</div>
|
||||||
|
<div id="loading_done" style="display:none">play!</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -4,13 +4,13 @@
|
||||||
|
|
||||||
(...2000)
|
(...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)
|
(...4000)
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,9 @@
|
||||||
|
|
||||||
(...300)
|
(...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"})`
|
`hong({mouth:"0_neutral", eyes:"0_annoyed"})`
|
||||||
|
|
||||||
|
@ -22,6 +24,10 @@ n: QUICK, WARN THEM!
|
||||||
|
|
||||||
`bb({eyes:"normal", mouth:"normal"})`
|
`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 eating alone for lunch! Again!](#act1a_alone)
|
||||||
|
|
||||||
[You're not productive while eating!](#act1a_study)
|
[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: 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#
|
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: 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: ...
|
h: ...
|
||||||
|
|
||||||
|
|
|
@ -4,15 +4,53 @@
|
||||||
|
|
||||||
# intro-play-button
|
# 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
|
# intro-start
|
||||||
|
|
||||||
(...300)
|
(...500)
|
||||||
|
|
||||||
`clearText()`
|
`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)
|
(...600)
|
||||||
|
|
||||||
|
@ -20,4 +58,4 @@ m: THIS IS A HUMAN
|
||||||
|
|
||||||
(...300)
|
(...300)
|
||||||
|
|
||||||
`publish("intro-to-game-2")`
|
`publish("intro-to-game-3")`
|
|
@ -7,6 +7,11 @@ SceneSetup.act1 = function(){
|
||||||
|
|
||||||
Game.resetScene();
|
Game.resetScene();
|
||||||
|
|
||||||
|
// ATTACKS
|
||||||
|
_.attack_harm = 0;
|
||||||
|
_.attack_alone = 0;
|
||||||
|
_.attack_bad = 0;
|
||||||
|
|
||||||
// Background
|
// Background
|
||||||
var bg = new BG_Anxiety();
|
var bg = new BG_Anxiety();
|
||||||
Game.scene.children.push(bg);
|
Game.scene.children.push(bg);
|
||||||
|
|
|
@ -20,6 +20,7 @@ window.hong = function(){
|
||||||
};
|
};
|
||||||
window.attack = function(damage, type){
|
window.attack = function(damage, type){
|
||||||
publish("attack", ["hong", damage, type]);
|
publish("attack", ["hong", damage, type]);
|
||||||
|
_["attack_"+type]++; // HACK
|
||||||
};
|
};
|
||||||
window.attackBB = function(damage, type){
|
window.attackBB = function(damage, type){
|
||||||
publish("attack", ["bb", damage, type]);
|
publish("attack", ["bb", damage, type]);
|
||||||
|
@ -262,8 +263,8 @@ Game.executeText = function(line){
|
||||||
return new RSVP.Promise(function(resolve){
|
return new RSVP.Promise(function(resolve){
|
||||||
|
|
||||||
// Who's speaking?
|
// Who's speaking?
|
||||||
// b: Beebee, h: Hong, n: Narrator, x: Xavier, y: Yvonne
|
// b: Beebee, h: Hong, n: Narrator, n2: Narrator 2, n3: Narrator 3
|
||||||
var regex = /^(.)\:(.*)/
|
var regex = /^([^\:]+)\:(.*)/
|
||||||
var speaker = line.match(regex)[1].trim();
|
var speaker = line.match(regex)[1].trim();
|
||||||
var dialogue = line.match(regex)[2].trim();
|
var dialogue = line.match(regex)[2].trim();
|
||||||
|
|
||||||
|
@ -282,9 +283,15 @@ Game.executeText = function(line){
|
||||||
case "n":
|
case "n":
|
||||||
div.className = "narrator-bubble";
|
div.className = "narrator-bubble";
|
||||||
break;
|
break;
|
||||||
case "m": // narrator 2
|
case "n2": // narrator 2
|
||||||
div.className = "narrator-bubble-2";
|
div.className = "narrator-bubble-2";
|
||||||
break;
|
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(){
|
||||||
requestAnimationFrame(function(){
|
requestAnimationFrame(function(){
|
||||||
|
@ -304,7 +311,9 @@ Game.executeText = function(line){
|
||||||
if(Game.FORCE_TEXT_DURATION>0){
|
if(Game.FORCE_TEXT_DURATION>0){
|
||||||
SPEED = Math.round(Game.FORCE_TEXT_DURATION/dialogue.length);
|
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...
|
// Put in the text, each character a DIFFERENT SPAN...
|
||||||
var span, chr;
|
var span, chr;
|
||||||
|
@ -372,7 +381,7 @@ Game.executeText = function(line){
|
||||||
}else{ // if not, no!
|
}else{ // if not, no!
|
||||||
interval += SPEED;
|
interval += SPEED;
|
||||||
}
|
}
|
||||||
}else if(chr==","){
|
}else if(chr=="," || chr==":"){
|
||||||
interval += SPEED*5;
|
interval += SPEED*5;
|
||||||
}else{
|
}else{
|
||||||
interval += SPEED;
|
interval += SPEED;
|
||||||
|
@ -383,7 +392,7 @@ Game.executeText = function(line){
|
||||||
|
|
||||||
}else{
|
}else{
|
||||||
|
|
||||||
// IF NARRATOR
|
// IF NARRATOR 1 or 2 or 4
|
||||||
|
|
||||||
// *Emphasize multiple words* => *Emphasize* *multiple* *words*
|
// *Emphasize multiple words* => *Emphasize* *multiple* *words*
|
||||||
var regex = /\*([^\*]*)\*/g;
|
var regex = /\*([^\*]*)\*/g;
|
||||||
|
@ -412,9 +421,16 @@ Game.executeText = function(line){
|
||||||
for(var i=0; i<dialogueWords.length; i++){
|
for(var i=0; i<dialogueWords.length; i++){
|
||||||
|
|
||||||
// Is it an emphasized word?
|
// Is it an emphasized word?
|
||||||
|
var reggie = /\*(.*)\*/;
|
||||||
var word = dialogueWords[i];
|
var word = dialogueWords[i];
|
||||||
if(/\*(.*)\*/.test(word)){ // is
|
if(reggie.test(word)){
|
||||||
word = "<i>" + word.match(/\*(.*)\*/)[1].trim() + "</i>";
|
word = "<i>" + word.match(reggie)[1].trim() + "</i>";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Actual emphasis
|
||||||
|
reggie = /\_(.*)\_/;
|
||||||
|
if(reggie.test(word)){
|
||||||
|
word = "<i class='italics'>" + word.match(reggie)[1].trim() + "</i>";
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add the span
|
// Add the span
|
||||||
|
|
|
@ -2,6 +2,7 @@ window.Options = {};
|
||||||
|
|
||||||
(function(){
|
(function(){
|
||||||
|
|
||||||
|
var optionsDOM = $("#options");
|
||||||
var text_speed_slider = $("#text_speed_slider");
|
var text_speed_slider = $("#text_speed_slider");
|
||||||
var text_speed_preview = $("#text_speed_preview");
|
var text_speed_preview = $("#text_speed_preview");
|
||||||
|
|
||||||
|
@ -10,10 +11,10 @@ window.Options = {};
|
||||||
"Show text at a relaxed speed",
|
"Show text at a relaxed speed",
|
||||||
"Show text at the default speed",
|
"Show text at the default speed",
|
||||||
"Show text at a brisk speed",
|
"Show text at a brisk speed",
|
||||||
"Show text NOW! (& click-to-advance)"
|
"INSTANT! With click-to-advance"
|
||||||
];
|
];
|
||||||
var SPEEDS = [
|
var SPEEDS = [
|
||||||
120,
|
100,
|
||||||
80,
|
80,
|
||||||
60,
|
60,
|
||||||
40,
|
40,
|
||||||
|
@ -96,4 +97,38 @@ window.Options = {};
|
||||||
};
|
};
|
||||||
updateText();
|
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";
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
})();
|
})();
|
|
@ -104,7 +104,7 @@ function BG_Intro(){
|
||||||
20
|
20
|
||||||
]
|
]
|
||||||
|
|
||||||
var ticker = 0; //16;//0;
|
var ticker = 16;//0;
|
||||||
var frameTicker = ticker;
|
var frameTicker = ticker;
|
||||||
var parallaxTicker = 0;
|
var parallaxTicker = 0;
|
||||||
var SHOWN_PLAY_BUTTON = false;
|
var SHOWN_PLAY_BUTTON = false;
|
||||||
|
@ -121,13 +121,17 @@ function BG_Intro(){
|
||||||
// Animate Hong: Which frame?
|
// Animate Hong: Which frame?
|
||||||
var parallax = 0;
|
var parallax = 0;
|
||||||
frameTicker += 1/60;
|
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(frameTicker>590/30){
|
||||||
if(GAME_TRANSITION==0) frameTicker = 381/30; // LOOP to NOM.
|
if(GAME_TRANSITION==0 || GAME_TRANSITION==1){
|
||||||
if(GAME_TRANSITION==1) frameTicker = 590/30; // STOP.
|
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
|
parallaxTicker += 1/60; // 0 to 1 in one second
|
||||||
if(parallaxTicker>1) parallaxTicker = 1;
|
if(parallaxTicker>1) parallaxTicker = 1;
|
||||||
|
@ -185,13 +189,18 @@ function BG_Intro(){
|
||||||
var _subscriptions = [];
|
var _subscriptions = [];
|
||||||
_subscriptions.push(
|
_subscriptions.push(
|
||||||
subscribe("intro-to-game-1", function(){
|
subscribe("intro-to-game-1", function(){
|
||||||
GAME_TRANSITION = 1; // STOP LOOPING
|
GAME_TRANSITION = 1; // BYE LOGO
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
_subscriptions.push(
|
_subscriptions.push(
|
||||||
subscribe("intro-to-game-2", function(){
|
subscribe("intro-to-game-2", function(){
|
||||||
|
GAME_TRANSITION = 2; // STOP LOOPING
|
||||||
|
})
|
||||||
|
);
|
||||||
|
_subscriptions.push(
|
||||||
|
subscribe("intro-to-game-3", function(){
|
||||||
frameTicker = 600/30;
|
frameTicker = 600/30;
|
||||||
GAME_TRANSITION = 2; // START PARALLAXING
|
GAME_TRANSITION = 3; // START PARALLAXING
|
||||||
|
|
||||||
// WHOOSH
|
// WHOOSH
|
||||||
sfx("whoosh");
|
sfx("whoosh");
|
||||||
|
|
|
@ -37,6 +37,6 @@ subscribe("START_GAME", function(){
|
||||||
hong({body:"phone1"});
|
hong({body:"phone1"});
|
||||||
Game.goto("act1h");
|
Game.goto("act1h");
|
||||||
|
|
||||||
//Game.goto("intro");
|
//Game.goto("act1");
|
||||||
|
|
||||||
});
|
});
|
156
styles/game.css
156
styles/game.css
|
@ -7,6 +7,12 @@ body{
|
||||||
background: #000;
|
background: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/******************************************************************************************************
|
||||||
|
|
||||||
|
MAIN GAME
|
||||||
|
|
||||||
|
******************************************************************************************************/
|
||||||
|
|
||||||
#game_words, #game_choices, #paused{
|
#game_words, #game_choices, #paused{
|
||||||
-webkit-user-select: none; /* Safari 3.1+ */
|
-webkit-user-select: none; /* Safari 3.1+ */
|
||||||
-moz-user-select: none; /* Firefox 2+ */
|
-moz-user-select: none; /* Firefox 2+ */
|
||||||
|
@ -39,6 +45,57 @@ body{
|
||||||
overflow: hidden;
|
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{
|
#paused, #loading{
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
|
@ -84,6 +141,14 @@ body{
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/******************************************************************************************************
|
||||||
|
|
||||||
|
ABOUT / END DEMO
|
||||||
|
|
||||||
|
******************************************************************************************************/
|
||||||
|
|
||||||
#end_demo{
|
#end_demo{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:0; left:0;
|
top:0; left:0;
|
||||||
|
@ -119,12 +184,58 @@ body{
|
||||||
margin: 5px auto 15px auto;
|
margin: 5px auto 15px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/******************************************************************************************************
|
||||||
|
|
||||||
|
OPTIONS
|
||||||
|
|
||||||
|
******************************************************************************************************/
|
||||||
|
|
||||||
#options{
|
#options{
|
||||||
position: absolute;
|
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{
|
#text_speed_preview{
|
||||||
color:#fff;
|
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
|
DIALOGUEZ
|
||||||
|
|
||||||
***************************************************/
|
******************************************************************************************************/
|
||||||
|
|
||||||
|
|
||||||
.clear-both{
|
.clear-both{
|
||||||
clear:both;
|
clear:both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.narrator-bubble, .narrator-bubble-2{
|
.narrator-bubble, .narrator-bubble-2, .narrator-bubble-4{
|
||||||
position: relative;
|
position: relative;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -216,7 +327,7 @@ DIALOGUEZ
|
||||||
margin: 25px 15px;
|
margin: 25px 15px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.narrator-bubble:before, .narrator-bubble-2:before{
|
.narrator-bubble:before, .narrator-bubble-4:before{
|
||||||
|
|
||||||
content: '';
|
content: '';
|
||||||
|
|
||||||
|
@ -231,7 +342,7 @@ DIALOGUEZ
|
||||||
height: calc(100% + 4px);
|
height: calc(100% + 4px);
|
||||||
|
|
||||||
}
|
}
|
||||||
.narrator-bubble:after, .narrator-bubble-2:after{
|
.narrator-bubble:after, .narrator-bubble-4:after{
|
||||||
|
|
||||||
content: '';
|
content: '';
|
||||||
|
|
||||||
|
@ -246,15 +357,36 @@ DIALOGUEZ
|
||||||
height: calc(100% + 4px);
|
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;
|
font-style: normal;
|
||||||
color: #ff4040;
|
color: #ff4040;
|
||||||
}
|
}
|
||||||
.narrator-bubble-2{
|
.narrator-bubble i.italics, .narrator-bubble-4 i.italics{
|
||||||
color: #000;
|
font-style: italic;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
.narrator-bubble-2:before, .narrator-bubble-2:after{
|
.narrator-bubble-2{
|
||||||
border-color: #000;
|
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 {
|
.hong-bubble {
|
||||||
|
@ -306,7 +438,7 @@ DIALOGUEZ
|
||||||
.beebee-bubble:after {
|
.beebee-bubble:after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 1px;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
|
|
Loading…
Reference in New Issue