anxiety/index.html

<!DOCTYPE html>
<html>
<head>
	
	<!-- THE BIG META -->
	<title>Adventures With Anxiety!</title>  <!-- TRANSLATE -->
	<meta name="description" content="A story-game about a human and their anxiety. You play as the anxiety." />  <!-- TRANSLATE: content -->
	<link rel="icon" type="image/png" href="favicon.png">

	<!-- Twitter Card data -->
	<meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:site" content="@ncasenmare">
	<meta name="twitter:title" content="Adventures With Anxiety!">  <!-- TRANSLATE: content -->
	<meta name="twitter:description" content="A story-game about a human and their anxiety. You play as the anxiety.">  <!-- TRANSLATE: content -->
	<meta name="twitter:image" content="https://ncase.me/anxiety/sharing/thumb.png">

	<!-- Open Graph data -->
	<meta property="og:title" content="Adventures With Anxiety!">  <!-- TRANSLATE: content -->
	<meta property="og:type" content="website">
	<meta property="og:url" content="https://ncase.me/anxiety/">
	<meta property="og:image" content="https://ncase.me/anxiety/sharing/thumb.png">
	<meta property="og:description" content="A story-game about a human and their anxiety. You play as the anxiety.">  <!-- TRANSLATE: content -->
	<meta property="og:site_name" content="Adventures With Anxiety!">  <!-- TRANSLATE: content -->
	
	<!-- Styles -->
	<link rel="stylesheet" type="text/css" href="styles/game.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<!-- - - - - - - - - - - - - - - - - - -->
<!-- THE GAME ITSELF, FRONT AND CENTER -->
<!-- - - - - - - - - - - - - - - - - - -->

<div id="game_container">
	
	<!-- The main game -->
	<canvas id="game_canvas"></canvas>
	<div id="game_words"></div>
	<div id="game_hp"></div>
	<div id="game_choices"></div>

	<!-- Click to Advance-->
	<div id="click_to_advance">
		<span id="cta_text1">
			<div class="mini-icon" pic="click" style="top:3px;"></div>
			<span id="instructions_if_not_mobile">
				click or spacebar <!-- TRANSLATE THIS -->
			</span>
			<span id="instructions_if_mobile" style="display:none">
				tap anywhere <!-- TRANSLATE THIS -->
			</span>
		</span>
		<span id="cta_text2">
			<div class="mini-icon" pic="next"></div>
		</span>
	</div>

	<!-- HACK: SPECIAL ATTACK -->
	<div id="special_attack"></div>

	<!-- Bottom Corner Tabs -->
	<div id="gear" style="display:none" onclick="publish('show_options'); sfx('ui_button1');">
		<div class="icon">
			<div class="mini-icon" pic="gear"></div>
		</div>
	</div>
	<div id="huh" style="display:none">
		<div class="icon">
			<div class="mini-icon" pic="about"></div>
		</div>
	</div>

	<!-- Paused Screen -->
	<div id="paused">
		<div>
			<!-- TRANSLATE THIS -->
			paused
			<div>click anywhere to keep freaking out</div>
		</div>
	</div>

	<!-- LOADING -->
	<div id="loading">
		<div id="loading_bar">
			<div id="loading_bar_bg"></div>
			<div id="loading_pic"></div>
		</div>
	</div>

	<!-- CONTENT NOTES -->
	<div id="content_notes">

		<!-- TRANSLATE THIS -->
		<p style="margin-top: 0.6em;">
			<i style="color:#ff4040">Adventures With Anxiety</i> is about, well, anxiety.
		</p>
		<p>
			But I've made this <i>for</i> folks with anxiety disorder, like myself.
			I hope it can help you see – with humor – how anxiety works.
			And, just maybe, reduce the fear of fear itself.
		</p>
		<p>
			There's also badly-drawn stick figures and a hyperactive wolf.
			Enjoy!
		</p>
		<p style="color:#999; font-size: 16px; line-height: 1.3em;">
			other notes: alcohol abuse, sexuality<span class="hide-if-cuss-free">, a @✩$!load of swearing</span>
		</p>
		<p>
			<a target="_blank" href="https://ncase.me/mental-health/">mental health tips &amp; resources</a>
			&#x1f517;
		</p>
		<div id="cn_ok" onclick="publish('hide_cn');" style="float:none">
			ok <div class="mini-icon" pic="ok" style="top: 3px;"></div>
		</div>

	</div>

	<!-- ABOUT -->
	<div id="about"><!-- about=yes-->
		<div id="about_words">
		
			<!-- TRANSLATE THIS -->
			<div style="font-size: 40px; margin-top: 42px; line-height: 30px;">
				mental health
				<a href="https://ncase.me/mental-health/" target="_blank">resources</a>
			</div>

			<div style="margin-top: 26px; color: #999;">
				&mdash; or &mdash;
			</div>
			
			<div style="font-size: 25px; text-align: left; width: 170px;
						margin-left: 165px; line-height: 25px; margin-top: 31px;">
				
				<!-- TRANSLATE ALL THIS -->
				<div>
					play more of
					<a href="https://ncase.me" target="_blank">my shtuff</a>
				</div>
				<div style="margin-top: 32px;">
					throw coins<br>at me
					<a href="https://www.patreon.com/ncase" target="_blank">on Patreon</a>
				</div>
				<div style="margin-top: 28px;">
					please your ear-holes with Monplaisir's
					<a href="https://chezmonplaisir.bandcamp.com/album/anxiety" target="_blank">original soundtrack</a>
				</div>

			</div>

			<div id="replay"></div>

			<div style="clear:both;"></div>
			<div id="close_about" style="margin: 0; float: right; margin-top: 20px;">close</div> <!-- TRANSLATE -->

		</div>
	</div>

	<!-- OPTIONS -->
	<div id="options">
		<div style="width: 150px; height: 63px; float: left;">
			<div id="text_speed_preview"></div>
			<input id="text_speed_slider" type="range" min=0 value=0.5 max=1 step="0.01"/>
		</div>
		<div style="float: right; width: 135px; height: 63px;">
			<!-- TRANSLATE THIS -->
			And advance
			<div id="text_automatic_toggle">on click</div>
		</div>
		<div style="clear:both"></div>
		<span id="volume_options">
			<div>Volume:</div> <!-- TRANSLATE -->
			<input id="volume_slider" type="range" min=0 max=1 value=1 step="0.01"/>
		</span>
		<div id="options_ok">
			ok <div class="mini-icon" pic="ok" style="top: 3px;"></div> <!-- TRANSLATE -->
		</div>
	</div>

	<!-- Dialogue position debugging elements -->
	<div class='debug' style='position: absolute; width: 5px; height: 250px; background: red;'></div>
	<div class='debug' style='position: absolute; width: 5px; height: 80px; background: white;'></div>

</div>

<div class="debug" id="section_debug_list"></div>

<!-- - - - - - - - - - - - - - - - - - -->
<!-- SHTUFF IN THE CORNER - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - -->

<!-- TRANSLATE ALL OF THIS -->

<div class="corner-text" id="topleft">
Created by
<a href="https://ncase.me/" target="_blank">Nicky Case</a>
<br>
Music by
<a href="https://loyaltyfreakmusic.com" target="_blank">Monplaisir</a>
<br>
Extra code by
<a href="https://spacie.me/" target="_blank">Spacie</a>
<br>
<a href="https://github.com/ncase/anxiety#full-credits" target="_blank">Full credits</a>
<br><br>
No fan-made translations yet!
<br>
<a href="https://github.com/ncase/anxiety#how-to-translate" target="_blank">Make one?</a>
</div>

<div class="corner-text" id="bottomleft">
<img src="sprites/about/cc0.png" height="30" style="opacity:0.7"/>
<br>
You're already free to reuse &amp; remix this for any use!
<a href="https://github.com/ncase/anxiety#public-domain" target="_blank">(huh?)</a>
<br>
<a href="https://github.com/ncase/anxiety" target="_blank">Get the full source code</a>
</div>

<div class="corner-text" id="topright">
Share on an anxiety-app:
<span id="sharing_title">
	Adventures With Anxiety!
</span>
<span id="sharing_desc">
	I just played this story-game about a human and their anxiety! You play *as* the anxiety. 😱
</span>
<div id="share">
	<a id="share_link_fb" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fncase.me%2Fanxiety%2F" target="_blank" class="no_deco">
		<div id="share_fb"></div>
	</a>
	<a id="share_link_tw" href="https://twitter.com/intent/tweet?source=https%3A%2F%2Fncase.me%2Fanxiety%2F&text=I%20just%20played%20this%20story-game%20about%20a%20human%20and%20their%20anxiety!%20You%20play%20*as*%20the%20anxiety.%20%F0%9F%98%B1%20https%3A%2F%2Fncase.me%2Fanxiety%2F"
		target="_blank" class="no_deco">
		<div id="share_tw"></div>
	</a>
	<a id="share_link_em" href="mailto:?subject=Adventures%20with%20Anxiety!&body=I%20just%20played%20this%20story-game%20about%20a%20human%20and%20their%20anxiety!%20You%20play%20*as*%20the%20anxiety.%20%F0%9F%98%B1%20https%3A%2F%2Fncase.me%2Fanxiety%2F"
		target="_blank" class="no_deco">
		<div id="share_em"></div>
	</a>
</div>
<br>
For your sharing pleasure:<br>
<a href="sharing" target="_blank">Videos &amp; Thumbnails</a>
</div>

<div class="corner-text" id="bottomright">
<a href="https://ncase.me/mental-health/" target="_blank">Mental Health Tips &amp; Resources</a>
<span class="hide-if-cuss-free">
	<br><br>
	<a href="?c=1">Cuss-Free Mode</a><br>
	(for educators who want to avoid an awkward PTA meeting)
</span>
</div>


</body>
</html>

<!-- SCRIPTS -->
<script src="scripts/lib/createImageBitmap.js"></script>
<script src="scripts/lib/tickable_observer.js"></script>
<script src="scripts/lib/helpers.js"></script>
<script src="scripts/lib/rsvp.min.js"></script>
<script src="scripts/lib/minpubsub.min.js"></script>
<script src="scripts/lib/howler.min.js"></script>

<script src="scripts/game/Loader.js"></script>
<script src="scripts/game/Game.js"></script>
<script src="scripts/game/Sprite.js"></script>
<script src="scripts/game/HP.js"></script>
<script src="scripts/game/BG_Anxiety.js"></script>
<script src="scripts/game/Character.js"></script>
<script src="scripts/game/Sounds.js"></script>
<script src="scripts/game/Options.js"></script>
<script src="scripts/game/About.js"></script>
<script src="scripts/game/ContentNotes.js"></script>
<script src="scripts/game/Sharing.js"></script>

<!-- INTRO -->
<script src="scripts/intro/Intro_SceneSetup.js"></script>
<script src="scripts/intro/Intro_BG.js"></script>

<!-- ACT I -->
<script src="scripts/act1/Act1_SceneSetup.js"></script>
<script src="scripts/act1/Act1_Hong.js"></script>
<script src="scripts/act1/Act1_Beebee.js"></script>
<script src="scripts/act1/Act1_Outro_BG.js"></script>

<!-- ACT II -->
<script src="scripts/act2/Act2_SceneSetup.js"></script>
<script src="scripts/act2/Act2_BG.js"></script>
<script src="scripts/act2/Act2_Hong.js"></script>
<script src="scripts/act2/Act2_Beebee.js"></script>

<!-- ACT III -->
<script src="scripts/act3/Act3_SceneSetup.js"></script>
<script src="scripts/act3/Act3_BG.js"></script>
<script src="scripts/act3/Act3_Hong.js"></script>
<script src="scripts/act3/Act3_Beebee.js"></script>

<!-- ACT IV -->
<script src="scripts/act4/Act4_SceneSetup.js"></script>
<script src="scripts/act4/Act4_BG.js"></script>
<script src="scripts/act4/Act4_Hong.js"></script>
<script src="scripts/act4/Act4_Beebee.js"></script>

<!-- CREDITS -->
<script src="scripts/credits/Credits_SceneSetup.js"></script>
<script src="scripts/credits/Credits_BG.js"></script>

<!-- INTERMISSION -->
<script src="scripts/intermission/Intermission_SceneSetup.js"></script>
<script src="scripts/intermission/Intermission_BG.js"></script>

<!-- LET'S GO! -->
<script src="scripts/main.js"></script>
-												the bare bones convo engine

											
										
										
											2019-02-11 17:04:23 +00:00
+								<!DOCTYPE html>
 								<html>
 								<head>
-												AHHH

											
										
										
											2019-05-06 16:20:09 +00:00
 									<!-- THE BIG META -->
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+									<title>Adventures With Anxiety!</title>  <!-- TRANSLATE -->
 									<meta name="description" content="A story-game about a human and their anxiety. You play as the anxiety." />  <!-- TRANSLATE: content -->
-												AHHH

											
										
										
											2019-05-06 16:20:09 +00:00
+									<link rel="icon" type="image/png" href="favicon.png">
 									<!-- Twitter Card data -->
 									<meta name="twitter:card" content="summary_large_image">
 									<meta name="twitter:site" content="@ncasenmare">
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+									<meta name="twitter:title" content="Adventures With Anxiety!">  <!-- TRANSLATE: content -->
 									<meta name="twitter:description" content="A story-game about a human and their anxiety. You play as the anxiety.">  <!-- TRANSLATE: content -->
-												README IS DONE

											
										
										
											2019-09-10 16:57:05 +00:00
+									<meta name="twitter:image" content="https://ncase.me/anxiety/sharing/thumb.png">
-												AHHH

											
										
										
											2019-05-06 16:20:09 +00:00
 									<!-- Open Graph data -->
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+									<meta property="og:title" content="Adventures With Anxiety!">  <!-- TRANSLATE: content -->
-												AHHH

											
										
										
											2019-05-06 16:20:09 +00:00
+									<meta property="og:type" content="website">
-												README IS DONE

											
										
										
											2019-09-10 16:57:05 +00:00
+									<meta property="og:url" content="https://ncase.me/anxiety/">
 									<meta property="og:image" content="https://ncase.me/anxiety/sharing/thumb.png">
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+									<meta property="og:description" content="A story-game about a human and their anxiety. You play as the anxiety.">  <!-- TRANSLATE: content -->
 									<meta property="og:site_name" content="Adventures With Anxiety!">  <!-- TRANSLATE: content -->
-												AHHH

											
										
										
											2019-05-06 16:20:09 +00:00
 									<!-- Styles -->
-												health bar and refactor

											
										
										
											2019-02-17 21:54:29 +00:00
+									<link rel="stylesheet" type="text/css" href="styles/game.css">
-												markup and styling updates

removed dynamic viewport meta tag based scaling, it caused issues where a mobile browser's header wasnt able to be hidden

removed #topleft and #bottomright (corner text) elements because they aren't being used anywhere for anything and made mobile scaling weird

modified the css the new grid standards to vertically and horizontally center the game in a larger window, css can do that now and we dont need weird position absolute and `margin: auto` hacks!

											
										
										
											2019-09-12 04:55:54 +00:00
+									<meta name="viewport" content="width=device-width, initial-scale=1">
-												AHHH

											
										
										
											2019-05-06 16:20:09 +00:00
-												the bare bones convo engine

											
										
										
											2019-02-11 17:04:23 +00:00
+								</head>
 								<body>
-												README IS DONE

											
										
										
											2019-09-10 16:57:05 +00:00
+								<!-- - - - - - - - - - - - - - - - - - -->
 								<!-- THE GAME ITSELF, FRONT AND CENTER -->
 								<!-- - - - - - - - - - - - - - - - - - -->
-												the bare bones convo engine

											
										
										
											2019-02-11 17:04:23 +00:00
+								<div id="game_container">
-												bunch of narrative fixes

											
										
										
											2019-04-29 15:35:25 +00:00
 									<!-- The main game -->
-												pretty dialogue ui

											
										
										
											2019-02-12 19:59:45 +00:00
+									<canvas id="game_canvas"></canvas>
-												more stuff

											
										
										
											2019-02-20 20:22:23 +00:00
+									<div id="game_words"></div>
-												health bar and refactor

											
										
										
											2019-02-17 21:54:29 +00:00
+									<div id="game_hp"></div>
-												more stuff

											
										
										
											2019-02-20 20:22:23 +00:00
+									<div id="game_choices"></div>
-												bunch of narrative fixes

											
										
										
											2019-04-29 15:35:25 +00:00
-												click to advance option

											
										
										
											2019-05-02 15:55:41 +00:00
+									<!-- Click to Advance-->
 									<div id="click_to_advance">
-												a heckload of fixes

											
										
										
											2019-05-05 19:56:00 +00:00
+										<span id="cta_text1">
 											<div class="mini-icon" pic="click" style="top:3px;"></div>
-												SHUT UP IT'S DONE

											
										
										
											2019-09-17 14:24:40 +00:00
+											<span id="instructions_if_not_mobile">
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+												click or spacebar <!-- TRANSLATE THIS -->
-												SHUT UP IT'S DONE

											
										
										
											2019-09-17 14:24:40 +00:00
+											</span>
 											<span id="instructions_if_mobile" style="display:none">
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+												tap anywhere <!-- TRANSLATE THIS -->
-												SHUT UP IT'S DONE

											
										
										
											2019-09-17 14:24:40 +00:00
+											</span>
-												a heckload of fixes

											
										
										
											2019-05-05 19:56:00 +00:00
+										</span>
 										<span id="cta_text2">
 											<div class="mini-icon" pic="next"></div>
 										</span>
-												click to advance option

											
										
										
											2019-05-02 15:55:41 +00:00
+									</div>
-												and some sounds

											
										
										
											2019-06-12 19:08:32 +00:00
+									<!-- HACK: SPECIAL ATTACK -->
 									<div id="special_attack"></div>
-												bunch of narrative fixes

											
										
										
											2019-04-29 15:35:25 +00:00
+									<!-- Bottom Corner Tabs -->
-												the end and about

											
										
										
											2019-09-10 13:57:02 +00:00
+									<div id="gear" style="display:none" onclick="publish('show_options'); sfx('ui_button1');">
-												a heckload of fixes

											
										
										
											2019-05-05 19:56:00 +00:00
+										<div class="icon">
 											<div class="mini-icon" pic="gear"></div>
 										</div>
-												bunch of narrative fixes

											
										
										
											2019-04-29 15:35:25 +00:00
+									</div>
-												ALL THE POLISH

											
										
										
											2019-09-07 21:19:53 +00:00
+									<div id="huh" style="display:none">
-												a heckload of fixes

											
										
										
											2019-05-05 19:56:00 +00:00
+										<div class="icon">
 											<div class="mini-icon" pic="about"></div>
 										</div>
-												bunch of narrative fixes

											
										
										
											2019-04-29 15:35:25 +00:00
+									</div>
 									<!-- Paused Screen -->
-												more flexible text, including anrrator

											
										
										
											2019-02-20 18:45:23 +00:00
+									<div id="paused">
 										<div>
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+											<!-- TRANSLATE THIS -->
-												more flexible text, including anrrator

											
										
										
											2019-02-20 18:45:23 +00:00
+											paused
-												HECK YEAH SPRITES AND ANIMATION

											
										
										
											2019-04-09 18:59:19 +00:00
+											<div>click anywhere to keep freaking out</div>
-												more flexible text, including anrrator

											
										
										
											2019-02-20 18:45:23 +00:00
+										</div>
 									</div>
-												bunch of narrative fixes

											
										
										
											2019-04-29 15:35:25 +00:00
-												END SCREEN DONE

											
										
										
											2019-04-29 19:19:44 +00:00
+									<!-- LOADING -->
 									<div id="loading">
-												a heckload of fixes

											
										
										
											2019-05-05 19:56:00 +00:00
+										<div id="loading_bar">
 											<div id="loading_bar_bg"></div>
 											<div id="loading_pic"></div>
 										</div>
-												END SCREEN DONE

											
										
										
											2019-04-29 19:19:44 +00:00
+									</div>
-												content notes and shtuff

											
										
										
											2019-09-06 20:25:14 +00:00
+									<!-- CONTENT NOTES -->
 									<div id="content_notes">
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+										<!-- TRANSLATE THIS -->
-												content notes and shtuff

											
										
										
											2019-09-06 20:25:14 +00:00
+										<p style="margin-top: 0.6em;">
 											<i style="color:#ff4040">Adventures With Anxiety</i> is about, well, anxiety.
 										</p>
 										<p>
-												ALL THE POLISH

											
										
										
											2019-09-07 21:19:53 +00:00
+											But I've made this <i>for</i> folks with anxiety disorder, like myself.
-												BUNCHA POLISH

											
										
										
											2019-09-09 16:37:58 +00:00
+											I hope it can help you see – with humor – how anxiety works.
 											And, just maybe, reduce the fear of fear itself.
-												content notes and shtuff

											
										
										
											2019-09-06 20:25:14 +00:00
+										</p>
 										<p>
 											There's also badly-drawn stick figures and a hyperactive wolf.
 											Enjoy!
 										</p>
-												BUNCHA POLISH

											
										
										
											2019-09-09 16:37:58 +00:00
+										<p style="color:#999; font-size: 16px; line-height: 1.3em;">
-												README IS DONE

											
										
										
											2019-09-10 16:57:05 +00:00
+											other notes: alcohol abuse, sexuality<span class="hide-if-cuss-free">, a @✩$!load of swearing</span>
-												content notes and shtuff

											
										
										
											2019-09-06 20:25:14 +00:00
+										</p>
 										<p>
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+											<a target="_blank" href="https://ncase.me/mental-health/">mental health tips &amp; resources</a>
-												content notes and shtuff

											
										
										
											2019-09-06 20:25:14 +00:00
+											&#x1f517;
 										</p>
 										<div id="cn_ok" onclick="publish('hide_cn');" style="float:none">
 											ok <div class="mini-icon" pic="ok" style="top: 3px;"></div>
 										</div>
 									</div>
 									<!-- ABOUT -->
-												the end and about

											
										
										
											2019-09-10 13:57:02 +00:00
+									<div id="about"><!-- about=yes-->
-												content notes and shtuff

											
										
										
											2019-09-06 20:25:14 +00:00
+										<div id="about_words">
-												ALL THE POLISH

											
										
										
											2019-09-07 21:19:53 +00:00
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+											<!-- TRANSLATE THIS -->
-												the end and about

											
										
										
											2019-09-10 13:57:02 +00:00
+											<div style="font-size: 40px; margin-top: 42px; line-height: 30px;">
 												mental health
-												correct link

											
										
										
											2019-09-17 14:38:09 +00:00
+												<a href="https://ncase.me/mental-health/" target="_blank">resources</a>
-												END SCREEN DONE

											
										
										
											2019-04-29 19:19:44 +00:00
+											</div>
-												the end and about

											
										
										
											2019-09-10 13:57:02 +00:00
 											<div style="margin-top: 26px; color: #999;">
 												&mdash; or &mdash;
-												start from intro

											
										
										
											2019-04-27 13:08:25 +00:00
+											</div>
-												END SCREEN DONE

											
										
										
											2019-04-29 19:19:44 +00:00
-												the end and about

											
										
										
											2019-09-10 13:57:02 +00:00
+											<div style="font-size: 25px; text-align: left; width: 170px;
 														margin-left: 165px; line-height: 25px; margin-top: 31px;">
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+												<!-- TRANSLATE ALL THIS -->
-												the end and about

											
										
										
											2019-09-10 13:57:02 +00:00
+												<div>
 													play more of
 													<a href="https://ncase.me" target="_blank">my shtuff</a>
 												</div>
 												<div style="margin-top: 32px;">
 													throw coins<br>at me
 													<a href="https://www.patreon.com/ncase" target="_blank">on Patreon</a>
 												</div>
 												<div style="margin-top: 28px;">
 													please your ear-holes with Monplaisir's
 													<a href="https://chezmonplaisir.bandcamp.com/album/anxiety" target="_blank">original soundtrack</a>
 												</div>
-												END SCREEN DONE

											
										
										
											2019-04-29 19:19:44 +00:00
-												the end and about

											
										
										
											2019-09-10 13:57:02 +00:00
+											</div>
-												END SCREEN DONE

											
										
										
											2019-04-29 19:19:44 +00:00
 											<div id="replay"></div>
-												about end demo

											
										
										
											2019-04-30 15:20:45 +00:00
+											<div style="clear:both;"></div>
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+											<div id="close_about" style="margin: 0; float: right; margin-top: 20px;">close</div> <!-- TRANSLATE -->
-												about end demo

											
										
										
											2019-04-30 15:20:45 +00:00
-												start from intro

											
										
										
											2019-04-27 13:08:25 +00:00
+										</div>
-												endscreen

											
										
										
											2019-04-26 17:08:31 +00:00
+									</div>
-												bunch of narrative fixes

											
										
										
											2019-04-29 15:35:25 +00:00
 									<!-- OPTIONS -->
-												text speed

											
										
										
											2019-04-28 16:02:55 +00:00
+									<div id="options">
-												click to advance option

											
										
										
											2019-05-02 15:55:41 +00:00
+										<div style="width: 150px; height: 63px; float: left;">
 											<div id="text_speed_preview"></div>
 											<input id="text_speed_slider" type="range" min=0 value=0.5 max=1 step="0.01"/>
 										</div>
 										<div style="float: right; width: 135px; height: 63px;">
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+											<!-- TRANSLATE THIS -->
-												click to advance option

											
										
										
											2019-05-02 15:55:41 +00:00
+											And advance
 											<div id="text_automatic_toggle">on click</div>
 										</div>
 										<div style="clear:both"></div>
-												a heckload of fixes

											
										
										
											2019-05-05 19:56:00 +00:00
+										<span id="volume_options">
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+											<div>Volume:</div> <!-- TRANSLATE -->
-												END SCREEN DONE

											
										
										
											2019-04-29 19:19:44 +00:00
+											<input id="volume_slider" type="range" min=0 max=1 value=1 step="0.01"/>
 										</span>
-												a heckload of fixes

											
										
										
											2019-05-05 19:56:00 +00:00
+										<div id="options_ok">
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+											ok <div class="mini-icon" pic="ok" style="top: 3px;"></div> <!-- TRANSLATE -->
-												a heckload of fixes

											
										
										
											2019-05-05 19:56:00 +00:00
+										</div>
-												bunch of narrative fixes

											
										
										
											2019-04-29 15:35:25 +00:00
+									</div>
-												dialogue animation + debugger

refactored all the dialogue text animations to use css animation and transforms rather than frame by frame positioning

this causes some issues and the code isnt the cleanest, but its already feels smoother so thats a good start!

using the devtools for debugging was getting annoying so I added a `Game.debug()` method that toggles a custom debugger that includes a drawer containing links to all points in the script

											
										
										
											2019-09-12 05:58:12 +00:00
+									<!-- Dialogue position debugging elements -->
 									<div class='debug' style='position: absolute; width: 5px; height: 250px; background: red;'></div>
 									<div class='debug' style='position: absolute; width: 5px; height: 80px; background: white;'></div>
-												the bare bones convo engine

											
										
										
											2019-02-11 17:04:23 +00:00
+								</div>
-												AHHH

											
										
										
											2019-05-06 16:20:09 +00:00
-												dialogue animation + debugger

refactored all the dialogue text animations to use css animation and transforms rather than frame by frame positioning

this causes some issues and the code isnt the cleanest, but its already feels smoother so thats a good start!

using the devtools for debugging was getting annoying so I added a `Game.debug()` method that toggles a custom debugger that includes a drawer containing links to all points in the script

											
										
										
											2019-09-12 05:58:12 +00:00
+								<div class="debug" id="section_debug_list"></div>
-												heck yeah it works

											
										
										
											2019-09-16 14:29:13 +00:00
-												README IS DONE

											
										
										
											2019-09-10 16:57:05 +00:00
+								<!-- - - - - - - - - - - - - - - - - - -->
 								<!-- SHTUFF IN THE CORNER - - - - - - - -->
 								<!-- - - - - - - - - - - - - - - - - - -->
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+								<!-- TRANSLATE ALL OF THIS -->
-												README IS DONE

											
										
										
											2019-09-10 16:57:05 +00:00
+								<div class="corner-text" id="topleft">
 								Created by
 								<a href="https://ncase.me/" target="_blank">Nicky Case</a>
 								<br>
 								Music by
-												SHUT UP IT'S DONE

											
										
										
											2019-09-17 14:24:40 +00:00
+								<a href="https://loyaltyfreakmusic.com" target="_blank">Monplaisir</a>
-												README IS DONE

											
										
										
											2019-09-10 16:57:05 +00:00
+								<br>
-												spacie

											
										
										
											2019-09-16 14:32:20 +00:00
+								Extra code by
-												SHUT UP IT'S DONE

											
										
										
											2019-09-17 14:24:40 +00:00
+								<a href="https://spacie.me/" target="_blank">Spacie</a>
-												spacie

											
										
										
											2019-09-16 14:32:20 +00:00
+								<br>
-												SHUT UP IT'S DONE

											
										
										
											2019-09-17 14:24:40 +00:00
+								<a href="https://github.com/ncase/anxiety#full-credits" target="_blank">Full credits</a>
-												pre-spacie pull

											
										
										
											2019-09-16 11:30:42 +00:00
+								<br><br>
 								No fan-made translations yet!
 								<br>
 								<a href="https://github.com/ncase/anxiety#how-to-translate" target="_blank">Make one?</a>
-												README IS DONE

											
										
										
											2019-09-10 16:57:05 +00:00
+								</div>
 								<div class="corner-text" id="bottomleft">
 								<img src="sprites/about/cc0.png" height="30" style="opacity:0.7"/>
 								<br>
 								You're already free to reuse &amp; remix this for any use!
-												pre-spacie pull

											
										
										
											2019-09-16 11:30:42 +00:00
+								<a href="https://github.com/ncase/anxiety#public-domain" target="_blank">(huh?)</a>
-												README IS DONE

											
										
										
											2019-09-10 16:57:05 +00:00
+								<br>
 								<a href="https://github.com/ncase/anxiety" target="_blank">Get the full source code</a>
 								</div>
 								<div class="corner-text" id="topright">
 								Share on an anxiety-app:
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+								<span id="sharing_title">
 									Adventures With Anxiety!
 								</span>
 								<span id="sharing_desc">
 									I just played this story-game about a human and their anxiety! You play *as* the anxiety. 😱
 								</span>
-												README IS DONE

											
										
										
											2019-09-10 16:57:05 +00:00
+								<div id="share">
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+									<a id="share_link_fb" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fncase.me%2Fanxiety%2F" target="_blank" class="no_deco">
-												README IS DONE

											
										
										
											2019-09-10 16:57:05 +00:00
+										<div id="share_fb"></div>
 									</a>
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+									<a id="share_link_tw" href="https://twitter.com/intent/tweet?source=https%3A%2F%2Fncase.me%2Fanxiety%2F&text=I%20just%20played%20this%20story-game%20about%20a%20human%20and%20their%20anxiety!%20You%20play%20*as*%20the%20anxiety.%20%F0%9F%98%B1%20https%3A%2F%2Fncase.me%2Fanxiety%2F"
-												README IS DONE

											
										
										
											2019-09-10 16:57:05 +00:00
+										target="_blank" class="no_deco">
 										<div id="share_tw"></div>
 									</a>
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+									<a id="share_link_em" href="mailto:?subject=Adventures%20with%20Anxiety!&body=I%20just%20played%20this%20story-game%20about%20a%20human%20and%20their%20anxiety!%20You%20play%20*as*%20the%20anxiety.%20%F0%9F%98%B1%20https%3A%2F%2Fncase.me%2Fanxiety%2F"
-												README IS DONE

											
										
										
											2019-09-10 16:57:05 +00:00
+										target="_blank" class="no_deco">
 										<div id="share_em"></div>
 									</a>
 								</div>
-												presskit

											
										
										
											2019-09-17 20:43:49 +00:00
+								<br>
 								For your sharing pleasure:<br>
 								<a href="sharing" target="_blank">Videos &amp; Thumbnails</a>
-												README IS DONE

											
										
										
											2019-09-10 16:57:05 +00:00
+								</div>
 								<div class="corner-text" id="bottomright">
-												correct link

											
										
										
											2019-09-17 14:38:09 +00:00
+								<a href="https://ncase.me/mental-health/" target="_blank">Mental Health Tips &amp; Resources</a>
-												README IS DONE

											
										
										
											2019-09-10 16:57:05 +00:00
+								<span class="hide-if-cuss-free">
-												pre-spacie pull

											
										
										
											2019-09-16 11:30:42 +00:00
+									<br><br>
-												SHUT UP IT'S DONE

											
										
										
											2019-09-17 14:24:40 +00:00
+									<a href="?c=1">Cuss-Free Mode</a><br>
-												README IS DONE

											
										
										
											2019-09-10 16:57:05 +00:00
+									(for educators who want to avoid an awkward PTA meeting)
 								</span>
 								</div>
-												heck yeah it works

											
										
										
											2019-09-16 14:29:13 +00:00
-												the bare bones convo engine

											
										
										
											2019-02-11 17:04:23 +00:00
+								</body>
 								</html>
-												health bar and refactor

											
										
										
											2019-02-17 21:54:29 +00:00
+								<!-- SCRIPTS -->
-												add createImageBitmap polyfill

the changes i made to the image pipeline required stuff that needs a polyfill, so here it is!

											
										
										
											2019-09-14 13:11:31 +00:00
+								<script src="scripts/lib/createImageBitmap.js"></script>
-												seperate observer logic

i split apart the code that tells the dialogue when to update into a seperate file so that i can use it in other places! seemed like a faster solution to have observable-esque behaviour without using very new features, setting up compilers, and including huge libraries!

(not 100% sure its totally working, but i havn't caught it failing yet!)

											
										
										
											2019-09-12 07:21:12 +00:00
+								<script src="scripts/lib/tickable_observer.js"></script>
-												backup

											
										
										
											2019-04-18 11:40:22 +00:00
+								<script src="scripts/lib/helpers.js"></script>
-												SS ready DONE

											
										
										
											2019-02-18 20:59:10 +00:00
+								<script src="scripts/lib/rsvp.min.js"></script>
-												health bar and refactor

											
										
										
											2019-02-17 21:54:29 +00:00
+								<script src="scripts/lib/minpubsub.min.js"></script>
-												SOUNDS

											
										
										
											2019-04-23 19:12:41 +00:00
+								<script src="scripts/lib/howler.min.js"></script>
-												health bar and refactor

											
										
										
											2019-02-17 21:54:29 +00:00
-												SS ready DONE

											
										
										
											2019-02-18 20:59:10 +00:00
+								<script src="scripts/game/Loader.js"></script>
-												more sounds

											
										
										
											2019-04-25 18:07:41 +00:00
+								<script src="scripts/game/Game.js"></script>
-												health bar and refactor

											
										
										
											2019-02-17 21:54:29 +00:00
+								<script src="scripts/game/Sprite.js"></script>
-												HELL YEAH ACT 3 is DONEEEEEEE

											
										
										
											2019-07-30 20:17:36 +00:00
+								<script src="scripts/game/HP.js"></script>
-												SS ready DONE

											
										
										
											2019-02-18 20:59:10 +00:00
+								<script src="scripts/game/BG_Anxiety.js"></script>
-												backup

											
										
										
											2019-04-18 11:40:22 +00:00
+								<script src="scripts/game/Character.js"></script>
-												SOUNDS

											
										
										
											2019-04-23 19:12:41 +00:00
+								<script src="scripts/game/Sounds.js"></script>
-												text speed

											
										
										
											2019-04-28 16:02:55 +00:00
+								<script src="scripts/game/Options.js"></script>
-												END SCREEN DONE

											
										
										
											2019-04-29 19:19:44 +00:00
+								<script src="scripts/game/About.js"></script>
-												content notes and shtuff

											
										
										
											2019-09-06 20:25:14 +00:00
+								<script src="scripts/game/ContentNotes.js"></script>
-												actually final fixes aaaahhhh

											
										
										
											2019-09-18 16:26:08 +00:00
+								<script src="scripts/game/Sharing.js"></script>
-												heck yeah cute anim

											
										
										
											2019-02-18 17:24:52 +00:00
-												HELL YEAH ACT 4 SPRITES PRETTY MUCH INTEGRATED

											
										
										
											2019-08-14 15:54:04 +00:00
+								<!-- INTRO -->
-												super rough beebee animation

											
										
										
											2019-03-17 18:41:19 +00:00
+								<script src="scripts/intro/Intro_SceneSetup.js"></script>
-												HECK YEAH SPRITES AND ANIMATION

											
										
										
											2019-04-09 18:59:19 +00:00
+								<script src="scripts/intro/Intro_BG.js"></script>
-												super rough beebee animation

											
										
										
											2019-03-17 18:41:19 +00:00
-												and some sounds

											
										
										
											2019-06-12 19:08:32 +00:00
+								<!-- ACT I -->
-												whoosh in and out with alpha

											
										
										
											2019-06-11 14:45:09 +00:00
+								<script src="scripts/act1/Act1_SceneSetup.js"></script>
-												ACT I YEAH

											
										
										
											2019-02-22 23:48:24 +00:00
+								<script src="scripts/act1/Act1_Hong.js"></script>
 								<script src="scripts/act1/Act1_Beebee.js"></script>
-												backup

											
										
										
											2019-04-18 11:40:22 +00:00
+								<script src="scripts/act1/Act1_Outro_BG.js"></script>
-												health bar and refactor

											
										
										
											2019-02-17 21:54:29 +00:00
-												and some sounds

											
										
										
											2019-06-12 19:08:32 +00:00
+								<!-- ACT II -->
-												more scripts

											
										
										
											2019-05-22 19:47:13 +00:00
+								<script src="scripts/act2/Act2_SceneSetup.js"></script>
-												a bit of placeholder act ii

											
										
										
											2019-06-06 16:32:57 +00:00
+								<script src="scripts/act2/Act2_BG.js"></script>
-												act ii chars

											
										
										
											2019-06-11 18:31:28 +00:00
+								<script src="scripts/act2/Act2_Hong.js"></script>
 								<script src="scripts/act2/Act2_Beebee.js"></script>
-												more scripts

											
										
										
											2019-05-22 19:47:13 +00:00
-												act 3 anims

											
										
										
											2019-06-14 15:03:30 +00:00
+								<!-- ACT III -->
 								<script src="scripts/act3/Act3_SceneSetup.js"></script>
 								<script src="scripts/act3/Act3_BG.js"></script>
 								<script src="scripts/act3/Act3_Hong.js"></script>
 								<script src="scripts/act3/Act3_Beebee.js"></script>
-												all sprites in

											
										
										
											2019-06-17 19:33:15 +00:00
+								<!-- ACT IV -->
 								<script src="scripts/act4/Act4_SceneSetup.js"></script>
 								<script src="scripts/act4/Act4_BG.js"></script>
-												HELL YEAH ACT 4 SPRITES PRETTY MUCH INTEGRATED

											
										
										
											2019-08-14 15:54:04 +00:00
+								<script src="scripts/act4/Act4_Hong.js"></script>
 								<script src="scripts/act4/Act4_Beebee.js"></script>
-												all sprites in

											
										
										
											2019-06-17 19:33:15 +00:00
-												ALL STITCHED

											
										
										
											2019-06-26 15:03:27 +00:00
+								<!-- CREDITS -->
 								<script src="scripts/credits/Credits_SceneSetup.js"></script>
-												credits half done in sprites

											
										
										
											2019-09-02 16:35:36 +00:00
+								<script src="scripts/credits/Credits_BG.js"></script>
-												ALL STITCHED

											
										
										
											2019-06-26 15:03:27 +00:00
-												intermission heck yeah

											
										
										
											2019-06-21 15:33:04 +00:00
+								<!-- INTERMISSION -->
 								<script src="scripts/intermission/Intermission_SceneSetup.js"></script>
 								<script src="scripts/intermission/Intermission_BG.js"></script>
-												heck yeah it works

											
										
										
											2019-09-16 14:29:13 +00:00
+								<!-- LET'S GO! -->
-												the end and about

											
										
										
											2019-09-10 13:57:02 +00:00
+								<script src="scripts/main.js"></script>