From 6ace681a91779fbdf05199ceab63c377a908b8c6 Mon Sep 17 00:00:00 2001 From: AndySky21 Date: Mon, 15 Feb 2016 21:04:02 +0100 Subject: [PATCH] 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 | 2 +- css/main.css | 17 +++++- script/Button.js | 12 ++-- script/events.js | 147 ++++++++++++++++++++++++++++++++++------------- 4 files changed, 130 insertions(+), 48 deletions(-) diff --git a/css/dark.css b/css/dark.css index 2d04f7c..e34cb34 100644 --- a/css/dark.css +++ b/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; } diff --git a/css/main.css b/css/main.css index 869d6e7..35ceb0e 100644 --- a/css/main.css +++ b/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; } diff --git a/script/Button.js b/script/Button.js index 35d46ef..b72c965 100644 --- a/script/Button.js +++ b/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); } diff --git a/script/events.js b/script/events.js index 11d077d..ec9ef5e 100644 --- a/script/events.js +++ b/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 = { $('
').text(scene.notification).appendTo(desc); - // Draw the wanderer - Events.createFighterDiv('@', World.health, World.getMaxHealth()).attr('id', 'wanderer').appendTo(desc); + // Draw pause button + Events.paused = true; + var pauseBox = $('
').attr('id', 'pauseButton').appendTo(desc); + var pause = new Button.Button({ + id: 'pause', + text: '', + cooldown: Events._PAUSE_COOLDOWN, + click: Events.togglePause + }).appendTo(pauseBox); + $('').addClass('text').insertBefore(pause.children('.cooldown')); + $('
').addClass('clear').appendTo(pauseBox); + Events.togglePause(pause); + var fightBox = $('
').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 = $('
').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); } + $('
').addClass('clear').appendTo(attackBtns); - Events.createEatMeatButton().appendTo(btns); + var healBtns = $('
').appendTo(btns).attr('id','healButtons'); + Events.createEatMeatButton().appendTo(healBtns); if((Path.outfit['medicine'] || 0) !== 0) { - Events.createUseMedsButton().appendTo(btns); + Events.createUseMedsButton().appendTo(healBtns); } + $('
').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() { - if(Path.outfit['cured meat'] > 0) { - Path.outfit['cured meat']--; + doHeal: function(healing, cured, btn){ + if(Path.outfit[healing] > 0) { + Path.outfit[healing]--; World.updateSupplies(); - if(Path.outfit['cured meat'] === 0) { - Button.setDisabled($('#eat'), true); + if(Path.outfit[healing] === 0) { + Button.setDisabled(btn, true); } - var hp = World.health; - hp += World.meatHeal(); - hp = hp > World.getMaxHealth() ? World.getMaxHealth() : hp; + var hp = World.health + cured; + hp = Math.min(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() { - if(Path.outfit['medicine'] > 0) { - Path.outfit['medicine']--; - World.updateSupplies(); - if(Path.outfit['medicine'] === 0) { - Button.setDisabled($('#meds'), true); - } + eatMeat: function(btn) { + Events.doHeal('cured meat', World.meatHeal(), btn); + }, - var hp = World.health; - hp += World.medsHeal(); - 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); - } - } + useMeds: function(btn) { + Events.doHeal('medicine', World.medsHeal(), btn); }, 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 = $('
').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 = $('
').appendTo(btns).attr('id','healButtons'); Events.createEatMeatButton(0).appendTo(btns); if((Path.outfit['medicine'] || 0) !== 0) { Events.createUseMedsButton(0).appendTo(btns); } + $('
').addClass('clear').appendTo(healBtns); } + $('
').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();