about end demo

index.html

@@ -19,7 +19,7 @@
 	<div id="gear" style="display:none" onclick="publish('show_options')">
 		<div class="icon">⚙</div>
 	</div>
-	<div id="about" style="display:none">
+	<div id="about"><!-- style="display:none">-->
 		<div class="icon">?</div>
 	</div>
 
@@ -41,8 +41,14 @@
 	<div id="end_demo">
 		<div id="end_demo_tbc"></div>
 		<div id="end_demo_words">
-			Augh games take so long to make!
-			This one will be done summer 2019, and released for <i>free</i>.
+			<span id="end_words1">
+				Augh games take so long to make!
+				This one will be done August 2019, and released for <i>free</i>.
+			</span>
+			<span id="end_words2">
+				This is a demo for my upcoming story-game,
+				which will be released for <i>free</i> in August 2019.
+			</span>
 			Get notified via my (once-a-month) newsletter!
 			<div>
 				<form id="the_newsletter" method="POST" accept-charset="utf-8" target="_blank">
@@ -106,6 +112,9 @@
 
 			<div id="replay"></div>
 
+			<div style="clear:both;"></div>
+			<div id="close_about">close</div>
+
 		</div>
 	</div>
 

scripts/act1/Act1_SceneSetup.js

@@ -51,4 +51,11 @@ SceneSetup.act1_end = function(){
 	$("#game_container").style.background = "#000";
 	$("#game_choices").style.display = "none";
 
+	// KILL
+	Game.scene.kill = function(){
+		Game.FORCE_TEXT_Y = -1;
+		$("#game_container").style.background = "";
+		$("#game_choices").style.display = "";
+	};
+
 };

scripts/game/About.js

@@ -1,14 +1,77 @@
+window.About = {};
+
 (function(){
 
-var gdpr = $("#gdpr");
-var submit = $("#submit");
-gdpr.oninput = function(){
-	var isChecked = gdpr.checked;
-	submit.disabled = !isChecked;
-	submit.value = isChecked ? "Subscribe! →" : "← plz consent";
-};
-gdpr.oninput();
+	// Newsletter stuff
+	var gdpr = $("#gdpr");
+	var submit = $("#submit");
+	gdpr.oninput = function(){
+		var isChecked = gdpr.checked;
+		submit.disabled = !isChecked;
+		submit.value = isChecked ? "Subscribe! →" : "← plz consent";
+	};
+	gdpr.oninput();
+	$("#the_newsletter").setAttribute("action", "https://sendy.ncase.me/subscribe");
+
+	// The About Button
+	var aboutDOM = $("#end_demo");
+
+	$("#about").onclick = function(){
+		aboutDOM.setAttribute("about","yes");
+		aboutDOM.style.top = "40px";
+
+		// Hi
+		About.showing = true;
+		Game.pause();
+
+	};
+	$("#close_about").onclick = function(){
+
+		aboutDOM.style.top = "";
+		//aboutDOM.setAttribute("about","yes");
+
+		// Bye
+		About.showing = false;
+
+	};
+
+	// SHOW END
+	subscribe("END_OF_DEMO", function(){
+
+		// Hi
+		About.showing = true;
+		Game.pause();
+
+		// Cut in
+		aboutDOM.removeAttribute("about");
+		aboutDOM.style.display = "none";
+		aboutDOM.style.top = "0px";
+		setTimeout(function(){
+			aboutDOM.style.display = "block";
+		},10);
+	});
+
+	// Replay
+	$("#replay").onclick = function(){
+
+		// TODO: UI/SCREAM SOUNDS
+
+		// Cut out
+		aboutDOM.style.top = "";
+		aboutDOM.style.display = "none";
+		setTimeout(function(){
+			aboutDOM.style.display = "block";
+		},100);
+
+		// Bye
+		About.showing = false;
+
+		// Back to the beginning! (after a second)
+		setTimeout(function(){
+			publish("START_GAME");
+		}, 1000);
+
+	};
 
-$("#the_newsletter").setAttribute("action", "https://sendy.ncase.me/subscribe");
 
 })();

scripts/game/Game.js

@@ -118,17 +118,25 @@ Game.pause = function(){
 	Game.pausedDOM.style.display = "block";
 	Howler.mute(true);
 
-	$("#paused").setAttribute("modal", Options.showing ? "yes" : "no" );
+	$("#paused").setAttribute("modal", (Options.showing||About.showing) ? "yes" : "no" );
 	
 };
 window.addEventListener("blur", Game.pause);
 Game.onUnpause = function(){
-	if(Game.paused && !Options.showing){
+	if(Game.paused && !(Options.showing||About.showing)){
 		Game.paused = false;
 		Game.pausedDOM.style.display = "none";
 		Howler.mute(false);
 	}
 };
+Game.pausedDOM.onclick = function(){
+	if(Options.showing){
+		publish("hide_options");
+	}
+	if(About.showing){
+		$("#close_about").onclick();
+	}
+};
 window.addEventListener("click", Game.onUnpause);
 window.addEventListener("touchstart", Game.onUnpause);
 

scripts/intro/Intro_BG.js

@@ -104,7 +104,7 @@ function BG_Intro(){
 		20
 	]
 
-	var ticker = 16;//0;
+	var ticker = 0; //16;//0;
 	var frameTicker = ticker;
 	var parallaxTicker = 0;
 	var SHOWN_PLAY_BUTTON = false;

styles/game.css

@@ -160,13 +160,31 @@ ABOUT / END DEMO
 ******************************************************************************************************/
 
 #end_demo{
+	
 	position: absolute;
-	top:0; left:0;
+	top:600px;
+	left:0;
+
 	background: #2E2E2E;
 	width: 100%;
 	height: 100%;
 	color:#fff;
 	text-align: center;
+
+	/* 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 */
+
+
 }
 #end_demo_tbc{
 	background: url(../sprites/end_demo/tbc.png);
@@ -301,6 +319,27 @@ 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=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; }
+#end_demo[about=yes] #close_about{
+	display: block;
+	float: none;
+    width: 50px;
+    margin: 10px auto;
+}
+
 
 /******************************************************************************************************
 
@@ -336,7 +375,7 @@ OPTIONS
 #text_speed_preview{
 	height: 1.3em;
 }
-#options_ok{
+#close_about, #options_ok{
 	display: inline-block;
     background: #000;
     padding: 5px 10px;
@@ -351,7 +390,7 @@ OPTIONS
 
     cursor: pointer;
 }
-#options_ok:hover{
+#close_about:hover, #options_ok:hover{
 	background: #666;
 	top:-2px;
 }