Pause during fight

This commit adds a pause button during the fight. It relies upon the new
Events.paused property: when set to true, no buttons will work except
the pause button itself, and cooldown on attack/healing buttons is
interrupted.
This commit also groups event buttons in different groups (attack,
healing, scene), so that the position of "eat meat" and "use meds" does
not depend on how many scene buttons are present (sometimes 1, other
times 2)

css/dark.css

@@ -117,7 +117,7 @@ div.button {
 	border: 1px solid #EEE;
 }
 
-div.button.disabled, div.button.disabled:hover {
+div.button.disabled, div.button.disabled:hover, #event.paused  > #buttons .button {
 	border-color: #444;
 	color: #444;
 }

css/main.css

@@ -245,7 +245,7 @@ div.button:hover {
 	text-decoration: underline;
 }
 
-div.button.disabled, div.button.disabled:hover {
+div.button.disabled, div.button.disabled:hover, #event.paused  > #buttons .button {
 	cursor: default;
 	border-color: #b2b2b2;
 	color: #b2b2b2;
@@ -413,6 +413,16 @@ div.tooltip:hover {
 	display: block;
 }
 
+#pauseButton {
+	text-align:center;
+	margin: 0 0 1.2em;
+}
+
+#pauseButton > .button {
+	float: none;
+	margin: 0 auto;
+}
+
 /* Events */
 
 .eventPanel {
@@ -520,8 +530,11 @@ body.noMask #description {
 	float: none;
 }
 
-#buttons > .button {
+#buttons .button {
 	margin: 0 5px 5px;
+}
+
+#buttons .button, #pauseButton {
 	margin-right: 15px;
 }
 

script/Button.js

@@ -13,7 +13,7 @@ var Button = {
 			.addClass('button')
 			.text(typeof(options.text) != 'undefined' ? options.text : "button")
 			.click(function() {
-				if(!$(this).hasClass('disabled')) {
+				if(!$(this).hasClass('disabled') && (!Events.paused || $(this).data("handler") == Events.togglePause)) {
 					Button.cooldown($(this));
 					$(this).data("handler")($(this));
 				}
@@ -73,13 +73,16 @@ var Button = {
 			// param "start" takes value from cooldown time if not specified
 			var start, left;
 			switch(option){
-				// a switch will allow for several uses of cooldown function
 				case 'state':
 					if(!$SM.get(id)){
 						return;
 					}
 					start = Math.min($SM.get(id), cd);
-					left = (start / cd).toFixed(4);
+					left = (start / cd).toFixed(3);
+					break;
+				case 'pause':
+					left = (btn.children('div.cooldown').width() / btn.width()).toFixed(3);
+					start = cd * left;
 					break;
 				default:
 					start = cd;
@@ -98,7 +101,7 @@ var Button = {
 			if (Engine.options.doubleTime){
 				time /= 2;
 			}
-			$('div.cooldown', btn).width(left * 100 +"%").animate({width: '0%'}, time * 1000, 'linear', function() {
+			$('div.cooldown', btn).width(Math.floor(left * 100) +"%").animate({width: '0%'}, time * 1000, 'linear', function() {
 				Button.clearCooldown(btn, true);
 			});
 			btn.addClass('disabled');
@@ -107,7 +110,6 @@ var Button = {
 	},
 
 	clearCooldown: function(btn, ended) {
-		var ended = ended || false;
 		if(!ended){
 			$('div.cooldown', btn).stop(true, true);
 		}

script/events.js

@@ -9,6 +9,7 @@ var Events = {
 	_EAT_COOLDOWN: 5,
 	_MEDS_COOLDOWN: 7,
 	_LEAVE_COOLDOWN: 1,
+	_PAUSE_COOLDOWN: 0.4,
 	STUN_DURATION: 4000,
 	BLINK_INTERVAL: false,
 
@@ -77,15 +78,29 @@ var Events = {
 
 		$('<div>').text(scene.notification).appendTo(desc);
 
-		// Draw the wanderer
+		// Draw pause button
-		Events.createFighterDiv('@', World.health, World.getMaxHealth()).attr('id', 'wanderer').appendTo(desc);
+		Events.paused = true;
+		var pauseBox = $('<div>').attr('id', 'pauseButton').appendTo(desc);
+		var pause = new Button.Button({
+			id: 'pause',
+			text: '',
+			cooldown: Events._PAUSE_COOLDOWN,
+			click: Events.togglePause
+		}).appendTo(pauseBox);
+		$('<span>').addClass('text').insertBefore(pause.children('.cooldown'));
+		$('<div>').addClass('clear').appendTo(pauseBox);
+		Events.togglePause(pause);
 
+		var fightBox = $('<div>').attr('id', 'fight').appendTo(desc);
+		// Draw the wanderer
+		Events.createFighterDiv('@', World.health, World.getMaxHealth()).attr('id', 'wanderer').appendTo(fightBox);
 		// Draw the enemy
-		Events.createFighterDiv(scene.chara, scene.health, scene.health).attr('id', 'enemy').appendTo(desc);
+		Events.createFighterDiv(scene.chara, scene.health, scene.health).attr('id', 'enemy').appendTo(fightBox);
 
 		// Draw the action buttons
 		var btns = $('#buttons', Events.eventPanel());
 
+		var attackBtns = $('<div>').appendTo(btns).attr('id','attackButtons');
 		var numWeapons = 0;
 		for(var k in World.Weapons) {
 			var weapon = World.Weapons[k];
@@ -103,21 +118,81 @@ var Events = {
 					}
 				}
 				numWeapons++;
-				Events.createAttackButton(k).appendTo(btns);
+				Events.createAttackButton(k).appendTo(attackBtns);
 			}
 		}
 		if(numWeapons === 0) {
 			// No weapons? You can punch stuff!
-			Events.createAttackButton('fists').prependTo(btns);
+			Events.createAttackButton('fists').prependTo(attackBtns);
 		}
+		$('<div>').addClass('clear').appendTo(attackBtns);
 
-		Events.createEatMeatButton().appendTo(btns);
+		var healBtns = $('<div>').appendTo(btns).attr('id','healButtons');
+		Events.createEatMeatButton().appendTo(healBtns);
 		if((Path.outfit['medicine'] || 0) !== 0) {
-			Events.createUseMedsButton().appendTo(btns);
+			Events.createUseMedsButton().appendTo(healBtns);
 		}
+		$('<div>').addClass('clear').appendTo(healBtns);
 
 		// Set up the enemy attack timer
-		Events._enemyAttackTimer = Engine.setTimeout(Events.enemyAttack, scene.attackDelay * 1000);
+		Events._enemyAttackTimer = Engine.setInterval(Events.enemyAttack, scene.attackDelay * 1000);
+	},
+
+	setPause: function(btn){
+		Events.paused = true;
+		$('#event').addClass('paused');
+		Button.clearCooldown(btn);
+		var active = 0;
+		$('#buttons').find('.button').each(function(i){
+			if($(this).data('onCooldown')){
+				$(this).children('.cooldown').stop(true,false);
+				active++;
+			}
+		});
+		Engine.log('fight paused. stopped '+ active +' buttons');
+	},
+
+	removePause: function(state){
+		var log, time, target;
+		switch(state){
+			case 'set':
+				log = 'started';
+				time = 0;
+				target = $();
+				break;
+			case 'end':
+				$('#pause').addClass('disabled');
+				log = 'ended';
+				time = Events._FIGHT_SPEED;
+				target = $();
+				break;
+			default:
+				log = 'resumed';
+				time = Events._PAUSE_COOLDOWN * 1000;
+				target = $('#buttons').find('.button');
+				break;
+		}
+		Engine.setTimeout(function(){
+			Events.paused = false;
+			$('#event').removeClass('paused');
+			target.each(function(i){
+				if($(this).data('onCooldown')){
+					Button.cooldown($(this), 'pause');
+				}
+			});
+			Engine.log('Event '+ log);
+		}, time);
+	},
+
+	togglePause: function(btn){
+		var text = btn.children('.text').first();
+		if(Events.paused) {
+			Events.removePause()
+			text.text( _('pause.') );
+		} else {
+			Events.setPause(btn);
+			text.text( _('resume.') )
+		}
 	},
 
 	createEatMeatButton: function(cooldown) {
@@ -201,52 +276,35 @@ var Events = {
 		});
 	},
 
-	eatMeat: function() {
+	doHeal: function(healing, cured, btn){
-		if(Path.outfit['cured meat'] > 0) {
+		if(Path.outfit[healing] > 0) {
-			Path.outfit['cured meat']--;
+			Path.outfit[healing]--;
 			World.updateSupplies();
-			if(Path.outfit['cured meat'] === 0) {
+			if(Path.outfit[healing] === 0) {
-				Button.setDisabled($('#eat'), true);
+				Button.setDisabled(btn, true);
 			}
 
-			var hp = World.health;
+			var hp = World.health + cured;
-			hp += World.meatHeal();
+			hp = Math.min(World.getMaxHealth(),hp);
-			hp = hp > World.getMaxHealth() ? World.getMaxHealth() : hp;
 			World.setHp(hp);
 
 			if(Events.activeEvent()) {
 				var w = $('#wanderer');
 				w.data('hp', hp);
 				Events.updateFighterDiv(w);
-				Events.drawFloatText('+' + World.meatHeal(), '#wanderer .hp');
+				Events.drawFloatText('+' + cured, '#wanderer .hp');
 				var takeETbutton = Events.setTakeAll();
 				Events.canLeave(takeETbutton);
 			}
 		}
 	},
 
-	useMeds: function() {
+	eatMeat: function(btn) {
-		if(Path.outfit['medicine'] > 0) {
+		Events.doHeal('cured meat', World.meatHeal(), btn);
-			Path.outfit['medicine']--;
+	},
-			World.updateSupplies();
-			if(Path.outfit['medicine'] === 0) {
-				Button.setDisabled($('#meds'), true);
-			}
 
-			var hp = World.health;
+	useMeds: function(btn) {
-			hp += World.medsHeal();
+		Events.doHeal('medicine', World.medsHeal(), btn);
-			hp = hp > World.getMaxHealth() ? World.getMaxHealth() : hp;
-			World.setHp(hp);
-
-			if(Events.activeEvent()) {
-				var w = $('#wanderer');
-				w.data('hp', hp);
-				Events.updateFighterDiv(w);
-				Events.drawFloatText('+' + World.medsHeal(), '#wanderer .hp');
-				var takeETbutton = Events.setTakeAll();
-				Events.canLeave(takeETbutton);
-			}
-		}
 	},
 
 	useWeapon: function(btn) {
@@ -424,6 +482,10 @@ var Events = {
 
 	enemyAttack: function() {
 
+		if(Events.paused){
+			return;
+		}
+
 		var scene = Events.activeEvent().scenes[Events.activeScene];
 
 		if(!$('#enemy').data('stunned')) {
@@ -445,12 +507,11 @@ var Events = {
 					}
 			});
 		}
-
-		Events._enemyAttackTimer = Engine.setTimeout(Events.enemyAttack, scene.attackDelay * 1000);
 	},
 
 	winFight: function() {
 		Events.won = true;
+		Events.removePause('end');
 		clearTimeout(Events._enemyAttackTimer);
 		$('#enemy').animate({opacity: 0}, 300, 'linear', function() {
 			Engine.setTimeout(function() {
@@ -465,6 +526,7 @@ var Events = {
 
 					var takeETbtn = Events.drawLoot(scene.loot);
 
+					var exitBtns = $('<div>').appendTo(btns).attr('id','exitButtons');
 					if(scene.buttons) {
 						// Draw the buttons
 						leaveBtn = Events.drawButtons(scene);
@@ -483,11 +545,15 @@ var Events = {
 						});
 						Button.cooldown(leaveBtn.appendTo(btns));
 
+						var healBtns = $('<div>').appendTo(btns).attr('id','healButtons');
 						Events.createEatMeatButton(0).appendTo(btns);
 						if((Path.outfit['medicine'] || 0) !== 0) {
 							Events.createUseMedsButton(0).appendTo(btns);
 						}
+						$('<div>').addClass('clear').appendTo(healBtns);
 					}
+					$('<div>').addClass('clear').appendTo(exitBtns);
+
 					Events.allowLeave(takeETbtn, leaveBtn);
 				} catch(e) {
 					// It is possible to die and win if the timing is perfect. Just let it fail.
@@ -983,6 +1049,7 @@ var Events = {
 
 	endEvent: function() {
 		Events.eventPanel().animate({opacity:0}, Events._PANEL_FADE, 'linear', function() {
+			Events.removePause('end');
 			Events.eventPanel().remove();
 			Events.activeEvent().eventPanel = null;
 			Events.eventStack.shift();