placeholder pics in act ii

2019-06-12 12:23:26 -04:00 · 2019-06-12 12:23:26 -04:00 · 91d5a8f90e
parent 77336a08b6
commit 91d5a8f90e
8 changed files with 1211 additions and 166 deletions
--- a/scenes/act2.md
+++ b/scenes/act2.md
--- a/scenes/act2_test.md
+++ b/scenes/act2_test.md
@ -0,0 +1,558 @@
+// TODO: CUT TO 2000 words (SANS CODE)
+
+# act2
+
+`SceneSetup.act2();`
+
+n: party words party words party words
+
+n: // callback: retweet news story, or subtweet, or Tinder serial killer (or: fallback - anxiety in general)
+
+`publish("act2-out-1");`
+
+b: Yelling
+
+`publish("act2-in-2");`
+
+r: Badness
+
+`publish("act2-out-3");`
+
+b: Oh no
+
+`publish("act2-flash");`
+
+h: What the heck
+
+`publish("act2-in-4");`
+
+r: Oh ya
+
+`publish("act2-out-5");`
+
+b: Oh no
+
+# oh_no
+
+[Oh god they all hate you!](#act2a_social)
+
+[Ogling the host, you pervert?](#act2a_perv)
+
+[So let's talk about *the meaning of life*.](#act2a_meaning)
+
+# act2a_social
+
+b: They're secretly gossiping about you!
+
+`publish("act2-in-2");`
+
+b: They're talking behind your back IN FRONT OF YOUR BACK
+
+b: We're just bringing this party down by being around here. Human, we have to leave *now* before--
+
+(#act2b)
+
+# act2a_perv
+
+b: // pokemon?
+
+b: They're more attractive than you, which means if you so much as *look* at them,
+
+b: then YOU'RE A CREEP
+
+b: A creepy, crappy, pervert terrible terrible creepazoid bad bad bad cree--
+
+(#act2b)
+
+# act2a_meaning
+
+b: What can we possibly do that matters in the grand scheme of things?
+
+b: Even if we somehow change the course of humanity, all of humanity will die one day.
+
+b: Humanity dies, the sun dies, the entire universe dies, what the hell are we supposed to--
+
+(#act2b)
+
+# act2b
+
+b: ...
+
+b: Hey, can... can you hear me?
+
+b: ...
+
+b: GASP
+
+[I must warn you *louder!*](#act2b_louder)
+
+[I must warn you about a *different* moral/social danger!](#act2b_different)
+
+[Human, you're ignoring danger! That's dangerous!](#act2b_ignore)
+
+# act2b_louder
+
+b: // decide...
+
+# act2b_louder_social
+
+b: EMOTIONS ARE CONTAGIOUS! SO IF YOU DON'T LEAVE YOU'LL INFECT EVERYONE WITH YOUR MENTAL ILLNESS! 
+
+b: You'll create a deadly outbreak of SAD LUMP SYNDROME
+
+b: We need to get out of here and quarantine ourselves forever in a small room with Netflix and food delivery!
+
+(#act2c)
+
+# act2b_louder_perv
+
+b: DON'T BE A CREEP. IT'S AGAINST THE LAW!
+
+b: Creep Law, Section 74.5: (1) Any Person who checks out (a) that sweet ass (b) those ripped arms (2) shall be hereby referred to as
+
+b: "A BIG DISGUSTING TRASH PERVERT"
+
+(#act2c)
+
+# act2b_louder_meaning
+
+b: BUT YOU KNOW WHAT'S WORSE THAN HAVING NO IMPACT? HAVING *ALL* THE IMPACT.
+
+b: Alfred Nobel wanted world peace, and for cultures to understand each other. So he decided to make travel easier. So he needed a way to cheaply create train tunnels. So he invented a new material called "dynamite"...
+
+b: ...which was used in World War I to KILL MILLIONS OF PEOPLE
+
+b: IT'S THE BUTTERFLY EFFECT, HUMAN! HOW MANY PEOPLE ARE YOU ACCIDENTALLY KILLING RIGHT NOW
+
+(#act2c)
+
+# act2b_different_social
+
+b: Actually, you know what's worse than no-one liking you? _Everyone_ liking you.
+
+b: That is, if you become like one of _these_ shallow party animals. A shallow life with shallow friends who only know the shallow you!
+
+b: Human, we need to get away from these dopamine zombies before they turn us into one of them!
+
+(#act2c)
+
+# act2b_different_moral
+
+b: People are dying in famines and genocides *right now* and you're just partying!
+
+b: A wise person once said, "the only thing necessary for the triumph of evil is for good folks to do nothing."
+
+b: YOU'RE DOING NOTHING.
+
+b: BY PARTYING, YOU'RE HELPING *HITLER*.
+
+(#act2c)
+
+# act2b_ignore
+
+b: You think you're safe just because you took the batteries out of the carbon monoxide detector?
+
+b: You won't smell the monoxide coming! You'll just get sleepy and then you'll--
+
+b: DIEEEEEEEEEEEEEEEEEEEEEE
+
+(#actbc)
+
+# act2c
+
+b: ...
+
+b: Oh thank goodness human, I think you can hear me again!
+
+[I'll go (even) *LOUDER!*](#act2c_louder)
+
+[I'll warn you about *(yet) another* moral/social danger!](#act2c_another)
+
+[Wait, did you check that punch before drinking it?](#act2c_punch)
+
+#act2c_louder
+
+// 6 possibilities
+
+# act2c_louder_netflix
+
+b: Actually, is Netflix and food delivery quarantined enough?! We'd still infect the delivery person!
+
+b: We need to move out to the middle of the Canadian Yukon territories, and have our food delivered to us by drone!
+
+b: And then they'd have to sterilize the drone after each use to rid it of your SAD LUMP GERMS
+
+# act2c_louder_law
+
+b: The BIG DISGUSTING TRASH PERVERT shall be sentenced to no less than five (5) years in one of those medieval public-humiliation things where people throw rotten fruit at them
+
+b: unless they're actually _into_ that sort of thing
+
+b: in which case that further proves them being a BIG DISGUSTING TRASH PERVERT
+
+# act2c_louder_butterfly
+
+b: BUTTERFLY EFFECT! Did you drive to this party in your fossil-fuel car?
+
+b: BAM, ONE KID DROWNED IN FLORIDA.
+
+b: Remember that time you said that mean thing to that stranger?
+
+b: BAM, THEY'RE PROBABLY SUICIDED BY NOW
+
+(#act2d)
+
+
+# act2c_louder_zombies
+
+b: These popularity-zombies will stumble towards you mumbling,
+
+b: LIIIIIKES. LIIIIIIIIIIKES.
+
+b: And they'll bite you and turn you into a brainless bro and/or thoughtless thot!
+
+(#act2d)
+
+# act2c_louder_hitler
+
+b: THE NAZIS ARE GOOSE-STEPPING BACK ON THE STREETS RIGHT NOW
+
+b: And they're saying:
+
+b: *Good thing those 'good folks' slacked off with crap like 'relaxing' and 'self-care'!*
+
+b: *Now our plans can go fourth, reich on schedule!*
+
+(#act2d)
+
+# act2c_louder_ignore
+
+b: Come to think about it, do we know if this building _has_ a monoxide detector?!
+
+b: What if we're all being poisoned *RIGHT NOW?*
+
+b: WE WOULDN'T EVEN KNOW. ONE MOMENT WE'RE HERE, NEXT MOMENT WE STOP EXISTING FOREVER AND EVER AND EV--
+
+(#act2d)
+
+# act2c_different_social
+
+b: What if we're just _fundamentally incapable_ of ever being loved, or loving another?
+
+b: What if something irreversibly broke inside of us a long time ago? Or what if that something never existed in us in the first place?
+
+b: Oh god we're broken! We're so broken so broken so brok--
+
+(#act2d)
+
+# act2c_different_moral
+
+b: What if we're just _fundamentally rotten?_ Other people have a strong inner drive to do goodness, but we only do "good" out of guilt or shame, if at all.
+
+b: What if it's in our nature to hurt others? What if we can't be anything _other_ than a burden to those close to us?
+
+b: Oh god we're broken! We're so broken so broken so brok--
+
+(#act2d)
+
+# act2c_punch
+
+b: Like, I'm not being irrational here. People _do_ actually drug in punch bowls. That is an actual danger.
+
+b: Human, is your head hurting? Do your limbs feel limp? I think we're dying. We need to call an ambulance RIGHT NOW.
+
+b: HUMAN, WE'RE DYING. WE'RE DYING WE'RE DYING WE'RE DYI--
+
+(#act2d)
+
+# act2d
+
+h: FUCK!
+
+h: FUCKING FUCK-FUKKITY _FUUUUUCK_
+
+b: Oh thank goodness, human! I'm so glad you can finally hear me again!
+
+b: Why did you try ignoring me?
+
+h: Holy whoring hell, you stupid sack of shit.
+
+h: You know that Native American story? "There are two wolves inside you, one is hope, one is despair. Which wolf wins? The one you feed."
+
+h: I was trying to fucking _starve_ you, you sadistic asshole.
+
+h: Fuck it, I'll do positive affirmations instead.
+
+h: *I am loved. I am good. I am smart. I am beautiful. I am special.*
+
+[You know "affirmations" were disproven, right?](#act2d_disproven)
+
+[Golly, human, you're becoming a narcissist!](#act2d_narcissist)
+
+[ohmygod you can't just credit every "wise" story to Native Americans](#act2d_racist)
+
+# act2d_disproven
+
+b: In fact, they actually _backfire_ for people with low self-esteem! 
+
+b: It was a well-designed study – randomized controlled trial, experimenter was blinded as to who was in which group. Here's what they found. If you already had low self-esteem, being asked to repeat affirmations makes you feel *worse* than if you'd said nothing at all!
+
+b: Wood et al, 2009. Look it up on Google Scholar, human,
+
+b: THEN STOP SPREADING UNSCIENTIFIC FAKE NEWS
+
+(#act2e)
+
+# act2d_narcissist
+
+b: You _need_ to humbly see your own flaws in order to grow as a person!
+
+b: You can't spray air freshener over a moldy room! Covering up your flaws with these narcissistic statements will make you worse in the long-run.
+
+b: Thankfully, I, as your loyal guard-wolf, can alert you to your flaws. And right now, it's-
+
+b: EVERYTHING. EVERYTHING IS WRONG
+
+(#act2e)
+
+# act2d_racist
+
+b: Native Americans are, like, _actual people_, not a bunch of "noble savages" you can namedrop to make your fortune-cookie advice sound more _exotic_.
+
+b: You're reducing individual persons & complex cultures to a Hallmark card! That's "benevolent racism", human! 
+
+b: STOP BEING RACIST YOU SQUINTY-EYED JERK
+
+(#act2e)
+
+# act2e
+
+h: FUCKDAMMIT.
+
+h: You know what? You're _irrational._
+
+h: Everyone already knows emotions are irrational! Especially fear!
+
+h: Why should I listen to a moron shitstain like you?!
+
+b: ...
+
+[...Jeez human. That's really hurtful to say.]()
+
+[Human, I'm in your brain. We're equally rational.]()
+
+[Wait, what happened to "your feelings are valid"?]()
+
+# act2e_hurtful
+
+b: I'm _part_ of you, you know. When you say that, you're hurting _yourself._
+
+b: Why are you hitting yourself, human? STOP HITTING YOURSELF.
+
+(#act2f)
+
+# act2e_rational
+
+b: Which means if _I'm_ irrational, then _you're_ irrational!
+
+b: And if we're both so dumb and stupid, we'll never figure out how to be happy! Oh god we're so lost! So lost so lost so los--
+
+(#act2f)
+
+# act2e_valid
+
+b: So "they" say that emotions are irrational, that emotions are not to be trusted.
+
+b: But "they" _also_ say that feelings are valid, that you should always accept your emotions.
+
+b: Maybe "they" are just full of crap! "They" have fed hurtful lies to you your whole life!
+
+(#act2f)
+
+# act2f
+
+h: ...
+
+h: I hate this. God, it hurts so much, I hate this.
+
+h: I can't appease you. I can't ignore you. I can't fight you. 
+
+h: No matter what I do, I can't seem to get rid of yo--
+
+b: Well maybe you're NOT _SUPPOSED_ TO GET RID ME.
+
+b: Jeez, how do you think _I_ feel, human?!
+
+b: I'm trying my best to be your guard-dog, but you keep seeing me as some Big Bad Wolf!
+
+b: So I try even _harder_ to alert you to danger. More danger! Louder danger! But no matter how hard I try, you _still_ think of me as your enemy!
+
+b: Sure, I raise false alarms sometimes. Maybe even most of the time!
+
+b: But I'm _trying_, human.
+
+b: ...I'm trying.
+
+// TODO: MORE EXPLICIT LESSON. "BE PATIENT WITH ME".
+
+b: ...Would it hurt for you to just sit with me for a while, instead of running away by distracting yourself wi--
+
+r: Hey.
+
+r: It seems like you're caught up in an argument with yourself.
+
+h2: (nods)
+
+r: You're not alone, kid. Anxiety is super common.
+
+r: Heck, just yesterday, I heard someone on campus had a nervous breakdown and smashed their phone / curled up into a ball and cried!
+
+h2: ...huh imagine that.
+
+r: That's why I host all these parties. I want to help people be happy.
+
+h2: ...but my anxiety...
+
+r: Don't worry, buddy. There's actually a very simple trick to get the negative voices in your head to be quiet forever.
+
+(...2000)
+
+r: (gives bottle)
+
+r: Heads up, it's a lot stronger than... anything, really.
+
+r: Enjoy!
+
+(...2000)
+
+[Oh god.](#act2g)
+
+[Please don't do this.](#act2g)
+
+[We don't know what's in that drink.](#act2g)
+
+# act2g
+
+// interrupt
+
+h: Mmm, what an exquisite palette!
+
+h: A rich flavor of "shut your mind up", with an aftertaste of "don't feel anything ever again".
+
+b: This is bad. Human, this is really, really bad.
+
+[This is literally how addiction starts.]()
+
+[They could've put something bad in that drink.]()
+
+[I *knew* the host had some terrible neurosis.]()
+
+
+# act2h
+
+h: Not just delicious, but also cheaper than therapy!
+
+b: GOD HUMAN STOP
+
+h: Hehehe!
+
+h: And what are _you_ gonna do about it, asshole?
+
+b: I'm so sorry, human.
+
+b: I'm going to have to use my SPECIAL ATTACK
+
+[]()
+
+[]()
+
+[]()
+
+# act2h_attack
+
+h: What's this crap?
+
+h: You're gonna yap more stupid words at me again to try t--
+
+# act2i
+
+h: WHAT THE HELL WAS THAT
+
+b: I'm sorry. It was the only way.
+
+h: I COULD *SEE* IT. I COULD *FEEL* IT. // the blood, the guilt, the humiliation
+
+b: I'm sorry, human.
+
+n: [FINISH THEM]
+
+[{FIGHT: Punch that jerk host.}]()
+
+[{FLIGHT: Let's get out of here.}]()
+
+# act2j_fight
+
+// all the minor callbacks
+
+b: They were taking advantage of you, a scared vulnerable human.
+
+b: Punch that asshole. Knock their fucking lights out.
+
+b: PUNCH THEM PUNCH THEM PUNCH THEM PUNCH THEM PUNCH THEM PUNCH THEM PUNCH THEM PUNCH THEM PUNCH THEM PUNCH THE--
+
+
+# act2j_flight
+
+// all the minor callbacks
+
+b: God, I knew it. The host and all these partygoers are full of neuroses. They dull their pain with distraction.
+
+b: And they're trying to trick you into doing the same thing! They're corrupting you! We need to get out!
+
+b: GET OUT GET OUT GET OUT GET OUT GET OUT GET OUT GET OUT GET OUT GET OUT GET OUT GET OUT GET OUT GET OU--
+
+# act2k_fight
+
+h: (punch)
+
+r: Y-you...
+
+r: ...are *kinky*.
+
+r: I like that. You're invited to my party next weekend.
+
+h: ok thank you bye
+
+r: I wanna see you let out that *vicious* side of you more, kid!
+
+(...1000)
+
+# act2k_flight
+
+h: ok sorry i have to go
+
+r: Ah, the voice was too strong, huh?
+
+r: Come to my party next weekend. I promise I'll mix something even stronger for you.
+
+h: ok thank you bye
+
+r: I wanna see you finally let loose, kid!
+
+(...1000)
+
+# act2k_end
+
+b: Human! Are you okay?!
+
+b: God, that was *close.* We really could've--
+
+h: (slam)
+
+h: I'm going to the party next weekend.
+
+h: The next time we fight, I'm not just going to *defeat* you...
+
+h: ...I'm going to fucking *kill* you.
+
+(...5000)
--- a/scripts/act2/Act2_BG.js
+++ b/scripts/act2/Act2_BG.js
@ -38,13 +38,33 @@ function BG_Party(){
 		image: Library.images.party_action,
 		grid:{ width:4, height:3 },
 		frame:{ width:720, height:600 },
-		y: 189
+		y: 189,
+		frameNames:[
+			"pre",
+			"twist1",
+			"twist2",
+			"twist3",
+			"twist4",
+			"end",
+			"end_run",
+			"end_slap1",
+			"end_slap2",
+			"end_slap3"
+		]
 	});
 	self.outroSprite = new Sprite({
 		image: Library.images.hong_bb_outro,
 		grid:{ width:4, height:2 },
 		frame:{ width:720, height:400 },
-		y: 260
+		y: 260,
+		frameNames:[
+			"end1",
+			"end2",
+			"end3",
+			"end4",
+			"end5",
+			"end6"
+		]
 	});

 	// Anxiety BG
@ -100,7 +120,7 @@ function BG_Party(){
 			// 0 to -180 in one second, smoothed
 			var t = Math.cos(parallaxTicker*Math.TAU/2); // 1 to -1
 			t = (1-t)/2; // 0 to 1
-			parallax = -t*200;
+			parallax = -t*210;

 			// Anxiety Alpha
 			ALPHAS[1] = t;
@ -109,8 +129,8 @@ function BG_Party(){
 			if(t==1 || t==0){
 				PARALLAXING = null;

-				// Stage 1 transition end
-				if(STAGE==1){
+				// Stage 1 or 3 transition end
+				if(STAGE==1 || STAGE==3){
 					ALPHAS[2] = 0; // Party Action
 					ALPHAS[4] = 1; // Hong
 					ALPHAS[5] = 1; // Beebee
@ -164,22 +184,45 @@ function BG_Party(){
 			sfx("whoosh"); // WHOOSH
 		}),
 		subscribe("act2-in-2", function(){
+
+			// SHOW ACTION, HIDE CHARS
+			ALPHAS[2] = 1; // Party Action
+			ALPHAS[4] = 0; // Hong
+			ALPHAS[5] = 0; // Beebee
+
+			// WHOOSH
 			STAGE = 2;
 			PARALLAXING = "in";
-			sfx("whoosh"); // WHOOSH
+			sfx("whoosh");
+
 		}),
 		subscribe("act2-out-3", function(){
 			STAGE = 3;
+			PARALLAXING = "out";
 			sfx("whoosh"); // WHOOSH
 		}),
 		subscribe("act2-in-4", function(){
+
+			// SHOW ACTION, HIDE CHARS
+			ALPHAS[2] = 1; // Party Action
+			ALPHAS[4] = 0; // Hong
+			ALPHAS[5] = 0; // Beebee
+
+			// WHOOSH
 			STAGE = 4;
-			sfx("whoosh"); // WHOOSH
+			PARALLAXING = "in";
+			sfx("whoosh");
+
 		}),
 		subscribe("act2-out-5", function(){
 			STAGE = 5;
 			PARALLAXING = "out";
-			sfx("whoosh"); // WHOOSH
+		}),
+		subscribe("act2-party-action", function(frameName){
+			self.partyActionSprite.gotoFrameByName(frameName);
+		}),
+		subscribe("act2-outro", function(frameName){
+			self.outroSprite.gotoFrameByName(frameName);
 		})
 	);

--- a/scripts/act2/Act2_Beebee.js
+++ b/scripts/act2/Act2_Beebee.js
@ -53,6 +53,7 @@ function Act2_Beebee(){
 	});
 	var _subscriptions = [];
 	_subscriptions.push( subscribe("bb", self.gotoFrames) );
+	_subscriptions.push( subscribe("attack_bb", self.showAttackedIcon) );

 	// Draw! Same as earlier except a lot of vibration
 	var ticker = 0;
--- a/scripts/game/Character.js
+++ b/scripts/game/Character.js
@ -160,21 +160,26 @@ function Character(spriteConfig, animLoops){
 		// Draw attacked icon
 		if(IVE_BEEN_ATTACKED){
 			
-			var icon = self.fears[attackedIconShown];
-			icon.draw(ctx);
+			if(attackedIconShown){
+				var icon = self.fears[attackedIconShown];
+				icon.draw(ctx);

-			var caption = self.fearCaptionSprite;
-			caption.gotoFrameByName(attackedIconShown);
-			caption.x = icon.x;
-			caption.y = icon.y-37;
-			caption.alpha = icon.alpha;
-			caption.draw(ctx);
+				var caption = self.fearCaptionSprite;
+				caption.gotoFrameByName(attackedIconShown);
+				caption.x = icon.x;
+				caption.y = icon.y-37;
+				caption.alpha = icon.alpha;
+				caption.draw(ctx);
+			}
 			
 			attackedTimer += 1/60;
 			if(attackedTimer>1.75){
-				icon.y -= 1;
-				icon.alpha -= 1/15;
-				if(icon.alpha<0){
+				if(attackedIconShown){
+					icon.y -= 1;
+					icon.alpha -= 1/15;
+				}
+				iconAlpha_HACK -= 1/15;
+				if(iconAlpha_HACK<0){
 					attackedIconShown = null;
 					IVE_BEEN_ATTACKED = false;
 				}
@ -184,6 +189,7 @@ function Character(spriteConfig, animLoops){
 		ctx.restore();

 	};
+	var iconAlpha_HACK = 0;

 	// Anim Loop logic!
 	self.animLoops.forEach(function(rule){
@ -226,11 +232,14 @@ function Character(spriteConfig, animLoops){
 	var attackedTimer = 0;
 	self.showAttackedIcon = function(type){
 		IVE_BEEN_ATTACKED = true;
-		attackedIconShown = type;
-		var icon = self.fears[attackedIconShown];
-		icon.x = 82;
-		icon.y = 250;
-		icon.alpha = 1;
+		if(type){
+			attackedIconShown = type;
+			var icon = self.fears[attackedIconShown];
+			icon.x = 82;
+			icon.y = 250;
+			icon.alpha = 1;
+		}
+		iconAlpha_HACK = 1;
 		attackedTimer = 0;
 	};

--- a/scripts/game/Game.js
+++ b/scripts/game/Game.js
@ -23,7 +23,7 @@ window.attack = function(damage, type){
 	_["attack_"+type]++; // HACK
 };
 window.attackBB = function(damage, type){
-	publish("attack", ["bb", damage, type]);
+	publish("attack", ["bb", damage]);
 };

 // Init
@ -312,6 +312,12 @@ Game.executeText = function(line){
 			case "h":
 				div.className = "hong-bubble";
 				break;
+			case "h2":
+				div.className = "hong2-bubble";
+				break;
+			case "r":
+				div.className = "hunter-bubble";
+				break;
 			case "n":
 				div.className = "narrator-bubble";
 				break;
@ -344,8 +350,8 @@ Game.executeText = function(line){
 			SPEED = Math.round(Game.FORCE_TEXT_DURATION/dialogue.length);
 		}

-		// IF IT'S BEEBEE, HONG, or NARRATOR 3
-		if(speaker=="b" || speaker=="h" || speaker=="n3"){
+		// IF IT'S BEEBEE, HONG, or NARRATOR 3, or HUNTER
+		if(speaker=="b" || speaker=="h" || speaker=="h2" || speaker=="n3" || speaker=="r"){

 			// Put in the text, each character a DIFFERENT SPAN...
 			var span, chr;
@ -387,7 +393,7 @@ Game.executeText = function(line){
 						if(!forceNoSound){
 							var chr = div.children[index].innerHTML;
 							if(chr!=" "){
-								if(speaker=="h"){
+								if(speaker=="h" || speaker=="h2"){
 									voice("hong", {volume:0.3});
 								}
 								if(speaker=="b"){
--- a/scripts/game/HP.js
+++ b/scripts/game/HP.js
@ -77,6 +77,7 @@ function HitPoints(){
 		}else{
 			self.doDamage(damage, "beebee");
 			self.rightShake = 30;
+			publish("attack_bb");
 		}

 		// Sound
--- a/styles/game.css
+++ b/styles/game.css
@ -717,6 +717,67 @@ DIALOGUEZ
 	margin-right: -15px;
 }

+.hong2-bubble {
+	position: relative;
+	background: #ffffff;
+	color: #000000;
+	border-radius: .4em;
+	padding: 15px;
+	margin: 5px 30px;
+
+	opacity: 0;
+	left: 15px;
+	transition: all 0.3s ease-in-out;
+
+	display: inline-block;
+	float: right;
+
+}
+.hong2-bubble:after {
+	content: '';
+	position: absolute;
+	right: 1px;
+	top: 50%;
+	width: 0;
+	height: 0;
+	border: 15px solid transparent;
+	border-left-color: #ffffff;
+	border-right: 0;
+	margin-top: -15px;
+	margin-right: -15px;
+}
+
+.hunter-bubble {
+	position: relative;
+	background: #ff4040;
+	color: #fff;
+	font-weight: normal;
+	border-radius: .4em;
+	padding: 15px;
+	margin: 5px 30px;
+
+	opacity: 0;
+	left: -15px;
+	transition: all 0.3s ease-in-out;
+
+	display: inline-block;
+	float: left;
+
+}
+.hunter-bubble:after {
+	content: '';
+	position: absolute;
+	left: 1px;
+	top: 50%;
+	width: 0;
+	height: 0;
+	border: 15px solid transparent;
+	border-right-color: #ff4040;
+	border-left: 0;
+	margin-top: -15px;
+	margin-left: -15px;
+}
+
 #game_choices{
 	
 	width: 100%;