diff --git a/index.html b/index.html index e8f74e9..b7c513d 100644 --- a/index.html +++ b/index.html @@ -17,16 +17,25 @@
- 👆click anywhere - ⚪️ + +
+ click anywhere + + +
+
@@ -39,13 +48,15 @@
-
loading...
- +
+
+
+
+
-
Augh games take so long to make! @@ -81,14 +92,14 @@
-
+
Help me keep making free games?
-
+
A share on an anxiety-app helps too!
@@ -104,7 +115,7 @@
-
+
Above all, thank you for playing! <3
@@ -135,11 +146,13 @@
on click
-
diff --git a/scenes/act1.md b/scenes/act1.md index 73ea81e..5bcc017 100644 --- a/scenes/act1.md +++ b/scenes/act1.md @@ -26,7 +26,7 @@ n: QUICK, WARN THEM! `Game.OVERRIDE_TEXT_SPEED = 1.25;` -n4: (LET _YOUR_ ANXIETY COME OUT TO PLAY! PICK WHAT _YOUR_ ANXIETY WOULD MOST LIKELY SAY TO YOU) +n4: (LET _YOUR_ ANXIETY COME OUT TO PLAY! PICK WHAT _YOUR_ FEAR WOULD MOST LIKELY SAY TO YOU) [You're eating alone for lunch! Again!](#act1a_alone) @@ -162,7 +162,7 @@ b: I am best protector! 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 EMPTY n: TO PROTECT YOUR HUMAN'S PHYSICAL + SOCIAL + MORAL NEEDS, YOU CAN USE: @@ -341,7 +341,7 @@ h: I'll say no. `Game.OVERRIDE_TEXT_SPEED = 1.5;` {{if _.fifteencigs}} -b: All you ever do is cry in a corner and worry about how loneliness is as deadly as 15 cigarettes a day. +b: All you ever do is cry in a corner about how loneliness is as deadly as 15 cigarettes a day. {{/if}} {{if _.seppuku}} @@ -349,7 +349,7 @@ b: All you ever do at parties is worry about how you should be doing work instea {{/if}} {{if _.whitebread}} -b: All you ever do is just panic about the unhealthy food options and think about how every tiny bit is going to kill you. +b: All you ever do is worry about how the unhealthy food options are going to kill you. {{/if}} ``` @@ -405,7 +405,7 @@ h: What's new on Twitter? [Oh no, look at that horrible news story!](#act1d_news) -[Oh no, is that a subtweet of *you?*](#act1d_subtweet) +[Oh no, is that tweet secretly about *you?*](#act1d_subtweet) [hey, a GIF of a cat drinking milk](#act1d_milk) @@ -464,9 +464,13 @@ h: Screw it, let's look at Snapchat. # act1d_subtweet +`bb({eyes:"fear"});` + +b: It's a subtweet! A sneaky, sneaky subtweet! + `hong({eyes:"annoyed"});` -h: ...probably not? +h: It's probably not? `bb({eyes:"narrow", mouth:"small"});` @@ -825,20 +829,20 @@ h: Why are you like this?! # act1e_ignore_posture ``` -bb({eyes:"fear"}); +bb({eyes:"anger"}); Game.OVERRIDE_TEXT_SPEED = 1.5; ``` -b: Do you want to have a pretzel for a spine?! +b: Do you want to have a pretzel for a spine?! Stop hunching over your screen! ``` -bb({body:"fear"}); -Game.OVERRIDE_TEXT_SPEED = 1.5; +bb({body:"meta"}); ``` -b: Do you want your freak skeleton to end up in a cheap tourist trap museum?! +b: That means you too. ``` +bb({body:"normal", mouth:"normal"}); hong({mouth:"shock", eyes:"shock"}); attack("10p", "harm"); ``` @@ -1004,6 +1008,7 @@ b: You think other people's genitals are Pokémon for you to collect? bb({body:"sing", eyes:"pretty", mouth:"shut"}); music("pokemon"); Game.clearText(); +Game.FORCE_CANT_SKIP = true; ``` ``` @@ -1051,11 +1056,15 @@ b: ♫ with sweaty dick and balls!- (...1000) -`bb({eyes:"smile", mouth:"smile"})` +``` +bb({eyes:"smile", mouth:"smile"}); +Game.FORCE_TEXT_DURATION = 1000; +``` -b: ♫ PERVY-MON, GOTTA CA- +b: ♫ PERVY-MON! GOTTA CA- ``` +Game.FORCE_CANT_SKIP = false; Game.clearText(); music(false); bb({body:"normal", mouth:"normal", eyes:"normal"}); @@ -1254,14 +1263,14 @@ h: Now excuse me while I eat this delicious sandwich in goddamn peace. `hong({body:"2_sammich_eat"});` -(...600) +(...601) ``` sfx("sandwich"); hong({body:"2_sammich_eaten", eyes:"0_lookaway", mouth:"0_chew1"}) ``` -(...600) +(...601) ``` bb({body:"normal", eyes:"uncertain", mouth:"shut"}); @@ -1359,13 +1368,13 @@ n: CONGRATULATIONS (...500) -n: YOU HAVE SUCCESSFULLY PROTECTED YOUR HUMAN +n: YOU'VE SUCCESSFULLY PROTECTED YOUR HUMAN'S NEEDS FOR SAFETY, LOVE, AND GOODNESS -n: LOOK HOW GRATEFUL THEY ARE +n: WHY, LOOK HOW GRATEFUL THEY ARE! (...500) -n: NOW THAT THEIR ENERGY IS ZERO, YOU CAN DIRECTLY CONTROL THEIR ACTIONS! +n: NOW THAT THEIR ENERGY IS ZERO, YOU CAN DIRECTLY CONTROL THEIR ACTIONS `bb({mouth:"smile", eyes:"normal"});` diff --git a/scenes/act1-end.md b/scenes/act1_end.md similarity index 58% rename from scenes/act1-end.md rename to scenes/act1_end.md index c70b874..9a3c157 100644 --- a/scenes/act1-end.md +++ b/scenes/act1_end.md @@ -2,9 +2,13 @@ `SceneSetup.act1_end()` -(...2000) +(...1000) -n: TOTAL FEARS USED: +`sfx("dramatic");` + +(...1000) + +n: YOUR FEARS: n: #harm# *BEING HARMED:* {{_.attack_harm}} @@ -12,10 +16,17 @@ n: #alone# *BEING UNLOVED:* {{_.attack_alone}} n: #bad# *BEING A BAD PERSON:* {{_.attack_bad}} -(...4000) +(...3150) `Game.clearText()` (...2000) +``` +publish("TO_BE_CONTINUED"); +sfx("fart"); +``` + +(...2500) + `publish("END_OF_DEMO")` \ No newline at end of file diff --git a/scenes/intro.md b/scenes/intro.md index 62753ba..6536bd1 100644 --- a/scenes/intro.md +++ b/scenes/intro.md @@ -4,7 +4,9 @@ # intro-play-button -[👉 Play! 👈](#intro-start) `publish("intro-to-game-1"); Game.OVERRIDE_CHOICE_LINE=true;` +`Game.HACK_MAKE_THE_LINE_BIG=true;` + +[
PLAY!
](#intro-start) `publish("intro-to-game-1"); Game.OVERRIDE_CHOICE_LINE=true;` # intro-start @@ -20,7 +22,7 @@ n3: So before we start, how would *you* like to read? # intro-start-2 -n3: Great! Note: you can always change text/audio options with the ⚙️ icon below. +n3: Great! Note: you can always change text/audio options with the ⚙ icon below. n3: Now, let's begin our story... @@ -38,4 +40,6 @@ n2: THIS IS A HUMAN (...300) -`publish("intro-to-game-3")` \ No newline at end of file +(#act1_end) + +`/*publish("intro-to-game-3")*/` \ No newline at end of file diff --git a/scripts/act1/Act1_Beebee.js b/scripts/act1/Act1_Beebee.js index 749fd89..614468d 100644 --- a/scripts/act1/Act1_Beebee.js +++ b/scripts/act1/Act1_Beebee.js @@ -68,7 +68,9 @@ function Act1_Beebee(){ "eyes_pained1", "eyes_pained2", "mouth_shut", - "eyes_anger" + "eyes_anger", + + "body_meta*" ], x: 270-7.5, diff --git a/scripts/act1/Act1_SceneSetup.js b/scripts/act1/Act1_SceneSetup.js index 00fbed7..7d807b6 100644 --- a/scripts/act1/Act1_SceneSetup.js +++ b/scripts/act1/Act1_SceneSetup.js @@ -1,6 +1,9 @@ Loader.addSounds([ { id:"music_battle", src:"sounds/music/battle.mp3" }, - { id:"music_pokemon", src:"sounds/music/pokemon.mp3" } + { id:"music_pokemon", src:"sounds/music/pokemon.mp3" }, + + { id:"dramatic", src:"sounds/sfx/dramatic.mp3" }, + { id:"fart", src:"sounds/sfx/fart.mp3" } ]); SceneSetup.act1 = function(){ @@ -47,13 +50,16 @@ SceneSetup.act1_end = function(){ stopAllSounds(); // HACK + Game.TEXT_SPEED = 50; Game.FORCE_TEXT_Y = 52; + Game.FORCE_CANT_SKIP = true; $("#game_container").style.background = "#000"; $("#game_choices").style.display = "none"; // KILL Game.scene.kill = function(){ Game.FORCE_TEXT_Y = -1; + Game.FORCE_CANT_SKIP = false; $("#game_container").style.background = ""; $("#game_choices").style.display = ""; }; diff --git a/scripts/game/About.js b/scripts/game/About.js index 46b7e29..c415b1c 100644 --- a/scripts/game/About.js +++ b/scripts/game/About.js @@ -41,6 +41,12 @@ Loader.addSounds([ }; + // SHOW TBC + var tbc = $("#end_demo_tbc"); + subscribe("TO_BE_CONTINUED", function(){ + tbc.style.display = "block"; + }); + // SHOW END subscribe("END_OF_DEMO", function(){ @@ -51,16 +57,23 @@ Loader.addSounds([ // Cut in aboutDOM.removeAttribute("about"); aboutDOM.style.display = "none"; - aboutDOM.style.top = "0px"; + aboutDOM.style.display = "block"; setTimeout(function(){ - aboutDOM.style.display = "block"; + aboutDOM.style.top = "0px"; // slide in },10); + + // Sound + Howler.mute(false); + sfx("rustle"); + music('campus', {volume:0.5, fade:1}); + }); // Replay $("#replay").onclick = function(){ // UI/SCREAM SOUNDS + stopAllSounds(); sfx("yelp"); // Cut out @@ -69,6 +82,7 @@ Loader.addSounds([ setTimeout(function(){ aboutDOM.style.display = "block"; },100); + tbc.style.display = "none"; // Bye About.showing = false; diff --git a/scripts/game/Game.js b/scripts/game/Game.js index 2eac7d3..cfb6032 100644 --- a/scripts/game/Game.js +++ b/scripts/game/Game.js @@ -151,6 +151,9 @@ Game.setTimeout = function(callback, interval){ // SKIP TEXT WHEN CLICK ANYWHERE (but NOT capture in choice) Game.clearAllTimeouts = function(){ + // NOPE + if(Game.FORCE_CANT_SKIP) return; + // Is this DURING while someone is talking? var isInterrupting = (Game.WHO_IS_SPEAKING!=null); @@ -281,6 +284,7 @@ window.clearText = Game.clearText; // Execute text! Just add it to text DOM. Game.TEXT_SPEED = 50; Game.CLICK_TO_ADVANCE = true; +Game.FORCE_CANT_SKIP = false; Game.OVERRIDE_TEXT_SPEED = 1; Game.FORCE_TEXT_DURATION = -1; Game.WHO_IS_SPEAKING = null; // "h", "b", "n" etc... @@ -532,8 +536,10 @@ Game.executeText = function(line){ // Return promise var nextLineDelay = Game.TEXT_SPEED*7; // don't override this if(dialogue.slice(-1)=="-") nextLineDelay=0; // sudden interrupt! - if(Game.CLICK_TO_ADVANCE){ // IF IT'S CLICK-TO-ADVANCE, "INFINITE" TIMEOUT. - nextLineDelay = 1000*10000; // ten thousand seconds + if(!Game.FORCE_CANT_SKIP){ + if(Game.CLICK_TO_ADVANCE){ // IF IT'S CLICK-TO-ADVANCE, "INFINITE" TIMEOUT. + nextLineDelay = 1000*10000; // ten thousand seconds + } } // No one's speaking anymore. @@ -542,10 +548,12 @@ Game.executeText = function(line){ }, interval); // Show the clicky UI - if(Game.CLICK_TO_ADVANCE){ - Game.setTimeout(function(){ - publish("show_click_to_advance"); - }, interval+Game.TEXT_SPEED*2); + if(!Game.FORCE_CANT_SKIP){ + if(Game.CLICK_TO_ADVANCE){ + Game.setTimeout(function(){ + publish("show_click_to_advance"); + }, interval+Game.TEXT_SPEED*2); + } } // DONE WITH IT @@ -567,6 +575,7 @@ Loader.addSounds([ // Execute choice! Add it to choice DOM. Game.OVERRIDE_CHOICE_LINE = false; +Game.HACK_MAKE_THE_LINE_BIG = false; Game.executeChoice = function(line){ var choiceText = line.match(/\[([^\]]*)\]/)[1].trim(); @@ -621,23 +630,31 @@ Game.executeChoice = function(line){ setTimeout(function(){ div.style.top = "0px"; sfx("ui_show_choice", {volume:0.4}); - },0); + },10); - // If it's too big, shrink font size - setTimeout(function(){ - var choiceHeight = div.getBoundingClientRect().height; - if(choiceHeight>40) div.style.fontSize = "18px"; - // And if still too much??? + // Or... FORCE + if(Game.HACK_MAKE_THE_LINE_BIG){ + div.style.fontSize = "30px"; + }else{ + + // If it's too big, shrink font size setTimeout(function(){ var choiceHeight = div.getBoundingClientRect().height; - if(choiceHeight>40) div.style.fontSize = "16px"; + if(choiceHeight>40) div.style.fontSize = "18px"; // And if still too much??? setTimeout(function(){ var choiceHeight = div.getBoundingClientRect().height; - if(choiceHeight>40) div.style.fontSize = "14px"; - },0); - },0); - },0); + if(choiceHeight>40) div.style.fontSize = "16px"; + // And if still too much??? + setTimeout(function(){ + var choiceHeight = div.getBoundingClientRect().height; + if(choiceHeight>40) div.style.fontSize = "14px"; + },1); + },1); + },1); + + } + Game.HACK_MAKE_THE_LINE_BIG = false; // Wait a bit before adding new line return new RSVP.Promise(function(resolve){ @@ -668,8 +685,17 @@ Game.executeWait = function(line){ var waitTime = parseInt(line.match(/^\(\.\.\.(\d+)\)/)[1].trim()); // Unless it's click to advance, then IGNORE ALL WAITS - if(Game.CLICK_TO_ADVANCE && waitTime<=1000){ // hack: unless the wait is long. - waitTime = 0; // TODO: Tag anim-waits, do not ignore. + if(!Game.FORCE_CANT_SKIP){ + + // Specific wait-time, don't skip? + var waitTimeString = waitTime+""; + var lastDigit = waitTimeString[waitTimeString.length-1]; + var cantSkip = (lastDigit=="1"); // CAN'T SKIP. + + if(!cantSkip && Game.CLICK_TO_ADVANCE && waitTime<999){ // hack: unless the wait is long. + waitTime = 0; + } + } // Delayed promise @@ -735,7 +761,7 @@ Game.parseLine = function(line){ var condition = fullConditional.match(/\{\{if\s+([^\{\}]*)\}\}/)[1]; // Extract the inside text - var insideText = fullConditional.match(/\}\}([^\{\}]*)\{\{/)[1].trim(); + var insideText = fullConditional.match(/\}\}([^\{\}]*)\{\{/)[1].trim()+" "; // Eval condition! var conditionIsTrue = false; diff --git a/scripts/game/HP.js b/scripts/game/HP.js index 6411983..62e1802 100644 --- a/scripts/game/HP.js +++ b/scripts/game/HP.js @@ -144,14 +144,14 @@ function HitPoints(){ } } var sx=isRight ? 360 : 0, sy=200*1, sw=360, sh=200; - var offset = (1-self[side+"White"])*360;//self[side+"WhiteWidth"]; + var offset = (1-self[side+"White"])*295;//self[side+"WhiteWidth"]; offset *= isRight ? -1 : 1; ctx.globalCompositeOperation = "source-atop"; ctx.drawImage(self.image, sx,sy,sw,sh, (sx+offset)/2,0,sw/2,sh/2); // Red var sx=isRight ? 360 : 0, sy=200*2, sw=360, sh=200; - var offset = (1-self[side+"Red"])*360;//self[side+"WhiteWidth"]; + var offset = (1-self[side+"Red"])*295;//self[side+"WhiteWidth"]; offset *= isRight ? -1 : 1; ctx.globalCompositeOperation = "source-atop"; ctx.drawImage(self.image, sx,sy,sw,sh, (sx+offset)/2,0,sw/2,sh/2); diff --git a/scripts/game/Loader.js b/scripts/game/Loader.js index 006bb4d..ad9d72e 100644 --- a/scripts/game/Loader.js +++ b/scripts/game/Loader.js @@ -3,7 +3,16 @@ window.Library = { images: {}, sounds: {} }; -Loader.load = function(){ +Loader.load = function(progressCallback){ + + var totalAssets = Loader.sceneSources.length + Loader.imageConfigs.length + Loader.soundConfigs.length; + var assetsLoaded = 0; + subscribe("assetLoaded", function(){ + assetsLoaded++; + progressCallback(assetsLoaded/totalAssets); + }); + + // Gotta LOAD 'EM ALL return new RSVP.Promise(function(resolve){ var loadPromises = []; @@ -42,7 +51,10 @@ Loader.loadImage = function(imageConfig){ var img = new Image(); var id = imageConfig.id; Library.images[id] = img; // ADD TO LIBRARY - img.onload = resolve; + img.onload = function(){ + publish("assetLoaded"); + resolve(); + } img.src = imageConfig.src; }); }; @@ -62,6 +74,7 @@ Loader.loadScene = function(src){ xhr.onload = function() { if(xhr.status===200){ Game.parseSceneMarkdown(xhr.responseText); // PARSE INTO GAME + publish("assetLoaded"); resolve(); } }; @@ -85,6 +98,7 @@ Loader.loadSound = function(soundConfig){ var id = soundConfig.id; Library.sounds[id] = sound; // ADD TO LIBRARY sound.once("load",function(){ + publish("assetLoaded"); resolve(); }); }); diff --git a/scripts/game/Options.js b/scripts/game/Options.js index 4ee01fe..c60511d 100644 --- a/scripts/game/Options.js +++ b/scripts/game/Options.js @@ -69,14 +69,19 @@ Loader.addSounds([ }); subscribe("hide_click_to_advance", function(){ + click_to_advance.style.display = "none"; + + if(currentBlinkingInterval) clearInterval(currentBlinkingInterval); + currentBlinkingInterval = null; + }); + var currentBlinkingInterval; var blinkCTA = function(){ - if(click_to_advance.style.display=="block"){ + currentBlinkingInterval = setInterval(function(){ ctaAlpha = (ctaAlpha==1) ? 0 : 1; click_to_advance.style.opacity = ctaAlpha; - setTimeout(blinkCTA, 700); - } + }, 700); }; /////////////////////////////////// @@ -170,7 +175,13 @@ Loader.addSounds([ // Showing/hiding options ///////// /////////////////////////////////// + + var ALREADY_DID_INTRO = false; + subscribe("show_options_bottom", function(){ + + ALREADY_DID_INTRO = false; + optionsDOM.setAttribute("past_intro", ALREADY_DID_INTRO ? "yes" : "no"); optionsDOM.style.top = "447px"; _clearAllTimeouts(); @@ -184,7 +195,6 @@ Loader.addSounds([ }); - var ALREADY_DID_INTRO = false; $("#options_ok").onclick = function(){ if(!ALREADY_DID_INTRO){ @@ -214,7 +224,10 @@ Loader.addSounds([ }); subscribe("show_options", function(){ - $("#volume_options").style.display = "block"; + + ALREADY_DID_INTRO = true; + optionsDOM.setAttribute("past_intro", ALREADY_DID_INTRO ? "yes" : "no"); + optionsDOM.style.top = "200px"; Options.showing = true; Game.pause(); diff --git a/scripts/game/Sounds.js b/scripts/game/Sounds.js index 742f8f0..1affb98 100644 --- a/scripts/game/Sounds.js +++ b/scripts/game/Sounds.js @@ -54,7 +54,7 @@ window.music = function(song, options){ // Fade out or cut previous? if(options.fade==0){ if(window.CURRENT_MUSIC) window.CURRENT_MUSIC.stop(); - }else{ + }else if(window.CURRENT_MUSIC){ var currentVolume = window.CURRENT_MUSIC.volume(); window.CURRENT_MUSIC.fade(currentVolume, 0, options.fade*1000); } diff --git a/scripts/intro/Intro_BG.js b/scripts/intro/Intro_BG.js index fbed5ce..8b09efc 100644 --- a/scripts/intro/Intro_BG.js +++ b/scripts/intro/Intro_BG.js @@ -19,6 +19,9 @@ Loader.addSounds([ ]); function BG_Intro(){ + + var ticker = 18;//0; + var self = this; @@ -104,7 +107,6 @@ function BG_Intro(){ 20 ] - var ticker = 18;//0; var frameTicker = ticker; var parallaxTicker = 0; var SHOWN_PLAY_BUTTON = false; diff --git a/scripts/intro/Intro_SceneSetup.js b/scripts/intro/Intro_SceneSetup.js index 3cc77d2..5fe9e25 100644 --- a/scripts/intro/Intro_SceneSetup.js +++ b/scripts/intro/Intro_SceneSetup.js @@ -14,4 +14,8 @@ SceneSetup.intro = function(){ var bg = new BG_Intro(); Game.scene.children.push(bg); + // TOTAL HACK + $("#gear").style.display = "none"; + $("#about").style.display = "none"; + }; \ No newline at end of file diff --git a/scripts/main.js b/scripts/main.js index f4a42cf..c4d8113 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -2,13 +2,17 @@ Loader.addScenes([ "scenes/intro.md", "scenes/act1.md", - "scenes/act1-end.md" + "scenes/act1_end.md" ]); -Loader.load().then(function(){ +Loader.load(function(progress){ - $("#loading_progress").style.display = "none"; - $("#loading_done").style.display = "block"; + $("#loading_bar_bg").style.height = (progress*50)+"px"; + +}).then(function(){ + + $("#loading").setAttribute("loaded","yes"); $("#loading").onclick = function(){ + sfx("pop"); publish('START_GAME'); }; @@ -17,21 +21,27 @@ Loader.load().then(function(){ }); subscribe("START_GAME", function(){ - + $("#loading").style.display = "none"; Game.start(); - SceneSetup.act1(); + + /*SceneSetup.act1(); //music('battle', {volume:0.5}); hong({body:"phone1"}); publish("hp_show"); _.seppuku = true; _.hookuphole = true; - _.catmilk = true; + _.catmilk = true;*/ - Game.goto("act1i"); - //Game.goto("intro"); + /*_.attack_harm = 0; + _.attack_alone = 0; + _.attack_bad = 0; + Game.goto("act1_end"); + */ + + Game.goto("intro"); }); \ No newline at end of file diff --git a/sounds/sfx/dramatic.mp3 b/sounds/sfx/dramatic.mp3 new file mode 100644 index 0000000..ec1ad29 Binary files /dev/null and b/sounds/sfx/dramatic.mp3 differ diff --git a/sounds/sfx/fart.mp3 b/sounds/sfx/fart.mp3 new file mode 100644 index 0000000..278ba5a Binary files /dev/null and b/sounds/sfx/fart.mp3 differ diff --git a/sprites/act1/act1_beebee.png b/sprites/act1/act1_beebee.png index 0de5808..3bd9405 100644 Binary files a/sprites/act1/act1_beebee.png and b/sprites/act1/act1_beebee.png differ diff --git a/sprites/end_demo/patreon.png b/sprites/end_demo/patreon.png index acaadc8..bb5ccfa 100644 Binary files a/sprites/end_demo/patreon.png and b/sprites/end_demo/patreon.png differ diff --git a/sprites/end_demo/share.png b/sprites/end_demo/share.png index f31173b..cb2de19 100644 Binary files a/sprites/end_demo/share.png and b/sprites/end_demo/share.png differ diff --git a/sprites/ui/icons.png b/sprites/ui/icons.png new file mode 100644 index 0000000..36ddb81 Binary files /dev/null and b/sprites/ui/icons.png differ diff --git a/sprites/ui/preloader.png b/sprites/ui/preloader.png new file mode 100644 index 0000000..46d6838 Binary files /dev/null and b/sprites/ui/preloader.png differ diff --git a/styles/game.css b/styles/game.css index 3fdf52c..266c171 100644 --- a/styles/game.css +++ b/styles/game.css @@ -13,7 +13,7 @@ MAIN GAME ******************************************************************************************************/ -#game_words, #game_choices, #paused, #options, #loading, #gear, #about, #click_to_advance{ +div{ /*, #game_words, #game_choices, #paused, #options, #loading, #gear, #about, #click_to_advance{*/ -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; /* IE 10+ */ @@ -113,7 +113,7 @@ PAUSED & LOADING font-weight: bold; text-align: center; } -#paused > div, #loading > div{ +#paused > div{ position: absolute; margin: auto; top: 0; @@ -138,17 +138,57 @@ PAUSED & LOADING display: none; } +#loading_bar{ + width: 150px; + height: 100px; + overflow: hidden; + + position: absolute; + margin: auto; + top: 0; + left: 0; + right: 0; + bottom: 0; +} +#loading_bar_bg{ + width: 140px; + height: 0px; + background: #ff4040; + position: absolute; + left:5px; + bottom: 42px; +} +#loading_pic{ + width: 100%; + height: 100%; + background: url(../sprites/ui/preloader.png); + position: absolute; + top: 0; + left: 0; + background-size: 100%; +} #loading{ display:block; - background: #333; + background:#282828; +} +#loading[loaded=yes]{ cursor: pointer; + background:#282828; } -#loading:hover{ - background: #444; +#loading[loaded=yes]:hover{ + background:#444; } -#loading > div{ - height: 50px; - font-size: 30px; +#loading[loaded=yes] #loading_bar_bg{ + display: none; +} +#loading[loaded=yes] #loading_pic{ + background-position: 0px -100%; +} +#loading[loaded=yes]:hover #loading_pic{ + background-position: 0px -200%; +} +#loading[loaded=yes]:active #loading_pic{ + background-position: 0px -300%; } @@ -187,6 +227,11 @@ ABOUT / END DEMO } #end_demo_tbc{ + + position: absolute; + top: 220px; + display: none; + background: url(../sprites/end_demo/tbc.png); background-size: 100%; width: 100%; @@ -263,7 +308,7 @@ ABOUT / END DEMO #patreon{ width: 160px; - height: 48px; + height: 56px; background: url(../sprites/end_demo/patreon.png); background-size: 100%; margin: 5px auto 10px auto; @@ -319,17 +364,21 @@ ABOUT / END DEMO background-position: -200px; } -#end_demo #end_demo_tbc{ display: block; } #end_demo #end_words1{ display: inline; } #end_demo #end_words2{ display: none; } #end_demo #replay{ display: block; } #end_demo #close_about{ display: none; } +#end_demo .about_padding{ + padding-top: 10px; +} +#end_demo #end_demo_words{ + padding-top: 50px; +} #end_demo[about=yes]{ padding-top: 25px; height: 490px; } -#end_demo[about=yes] #end_demo_tbc{ display: none; } #end_demo[about=yes] #end_words1{ display: none; } #end_demo[about=yes] #end_words2{ display: inline; } #end_demo[about=yes] #replay{ display: none; } @@ -339,6 +388,12 @@ ABOUT / END DEMO width: 50px; margin: 10px auto; } +#end_demo[about=yes] .about_padding{ + padding-top: 0px; +} +#end_demo[about=yes] #end_demo_words{ + padding-top: 0px; +} /****************************************************************************************************** @@ -372,6 +427,12 @@ OPTIONS transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); /* custom */ } +#options #volume_options{ + display: none; +} +#options[past_intro=yes] #volume_options{ + display: block; +} #text_speed_preview{ height: 1.3em; } @@ -495,6 +556,35 @@ DIALOGUEZ clear:both; } +.mini-icon{ + display: inline-block; + background: url(../sprites/ui/icons.png); + background-size: 700%; + width: 20px; height:20px; + position: relative; +} +.mini-icon[pic="gear"]{ + background-position: -0px 0px; +} +.mini-icon[pic="about"]{ + background-position: -100% 0px; +} +.mini-icon[pic="next"]{ + background-position: -200% 0px; +} +.mini-icon[pic="play1"]{ + background-position: -300% 0px; +} +.mini-icon[pic="play2"]{ + background-position: -400% 0px; +} +.mini-icon[pic="click"]{ + background-position: -500% 0px; +} +.mini-icon[pic="ok"]{ + background-position: -600% 0px; +} + .narrator-bubble, .narrator-bubble-2, .narrator-bubble-4{ position: relative; color: #FFFFFF;