diff --git a/css/style.css b/css/style.css index 28a1d30..d4e0cd2 100644 --- a/css/style.css +++ b/css/style.css @@ -30,10 +30,10 @@ h1 br { position: relative; } -#detector .test-tube, #detector .detector-events{ - position: absolute; - left: 0; - top: 0; +#detector-flame{ + position: relative; + /* So it looks like the flame it touching the test-tube */ + top: -60px; } #detector-core { @@ -109,6 +109,7 @@ h1 br { color: #666; } +/* Floating updates */ .update-value { position: absolute; right: 1em; diff --git a/index.html b/index.html index 56b7fd4..34d85d3 100644 --- a/index.html +++ b/index.html @@ -108,15 +108,15 @@
- - --> + Your detector. Click on it to generate events. - + Your bunsen burner. Click it to turn on and off.
diff --git a/js/app.js b/js/app.js index d03a3a5..3880ca7 100644 --- a/js/app.js +++ b/js/app.js @@ -2,194 +2,258 @@ * Define the angular app */ 'use strict'; -(function() { - Helpers.validateSaveVersion(); +var app = (function () { + Helpers.validateSaveVersion(); - // init game - var game = new Game.Game(); - game.load(); + // init game + // var game = new Game(); + // + // + // var lab = game.lab; + // var elements = game.elements; + // var workers = game.workers; + // var upgrades = game.upgrades; + // var achievements = game.achievements; + // var allObjects = game.allObjects; + // var lastSaved; - var lab = game.lab; - var elements = game.elements; - var workers = game.workers; - var upgrades = game.upgrades; - var achievements = game.achievements; - var allObjects = game.allObjects; - var lastSaved; + var app = angular.module('scienceAlchemy', ['ngDragDrop']); - var app = angular.module('scienceAlchemy', ['ngDragDrop']); + // directives - // add helpers as filters - app.filter('niceNumber', ['$filter', function($filter) { - return Helpers.formatNumberPostfix; - }]); + /** Change scope values on window resize **/ + app.directive('resize', function ($window) { + return function (scope, element, attr) { + // make window into an angular element + var w = angular.element($window); + // watch window h&w, onchange scope + scope.$watch( + function () { + return { + 'h': w.height(), + 'w': w.width() + }; + }, + function (newValue, oldValue) { + // update scope values + scope.windowHeight = newValue.h; + scope.windowWidth = newValue.w; - app.filter('niceTime', ['$filter', function($filter) { - return Helpers.formatTime; - }]); + // new function + scope.resizeWithOffset = function (offsetH) { + scope.$eval(attr.notifier); + return { + 'height': (newValue.h - offsetH) + 'px' + //,'width': (newValue.w - 100) + 'px' + }; + }; - app.filter('currency', ['$filter', function($filter) { - return function(input) { - return 'JTN ' + $filter('niceNumber')(input); - }; - }]); + }, + true + ); - app.filter('reverse', ['$filter', function($filter) { - return function(items) { - return items.slice().reverse(); - }; - }]); + // update scope on resize event + w.bind('resize', function () { + scope.$apply(); + }); + } + }); - // Hack to prevent text highlighting - document.getElementById('detector').addEventListener('mousedown', function(e) { - e.preventDefault(); - }); - // controllers - app.controller('DetectorController', function() { - this.dropOptions={ - // accept: ".rune", - addClasses: true, - // greedy: true, - // tolerance: "pointer", - activeClass: "ui-state-hover", - hoverClass: "ui-state-active", - } - this.onDrop = function(event,ui){ - detector.onDrop(event,ui,game); - } - this.click = function() { - lab.clickDetector(); - detector.addEvent(); - UI.showUpdateValue("#update-data", lab.state.detector); - return false; - }; - this.toggleFlameFuel = function(){ - console.log('toggleFlameFuel'); - detector.flame.toggleFuel(); - } - }); + // factories to provide game objects + app.factory('elements', function () { + var elements = Helpers.loadFile('json/elements.json'); + elements = elements.map( + function (r) { + return new GameObjects.Element(r); + }); + return elements + }); - app.controller('ElementController', ['$compile', function($compile) { - this.dragOptions = { - revert: true,//"invalid", - zIndex: 100, - // helper: "clone", // drags a clone - // opacity: 0.75, - // start: this.onRuneDrop.bind(this), - // stop: this.onRuneDrop.bind(this), - cancel:false, - // containment:false - }; - this.elements = elements; - this.isVisible = function(item) { - return item.isVisible(lab); - }; - this.isAvailable = function(item) { - return item.isAvailable(lab); - }; - this.doElement = function(item) { - var cost = item.element(lab); - if (cost > 0) { - UI.showUpdateValue("#update-data", -cost); - UI.showUpdateValue("#update-reputation", item.state.reputation); - } - }; - this.showInfo = function(r) { - UI.showModal(r.name, r.getInfo()); - UI.showLevels(r.state.level); - }; - }]); + app.factory('game', function () { + var game = new Game(); + game.load(); + return game; + }); - app.controller('LabController', ['$interval', function($interval) { - this.lab = lab; - this.showDetectorInfo = function() { - if (!this._detectorInfo) { - this._detectorInfo = Helpers.loadFile('html/detector.html'); - } - UI.showModal('Detector', this._detectorInfo); - }; - $interval(function() { // one tick - var grant = lab.getGrant(); - UI.showUpdateValue("#update-funding", grant); - var sum = 0; - for (var i = 0; i < workers.length; i++) { - sum += workers[i].state.hired * workers[i].state.rate; - } - if (sum > 0) { - lab.acquireData(sum); - UI.showUpdateValue("#update-data", sum); - detector.addEventExternal(workers.map(function(w) { - return w.state.hired; - }).reduce(function(a, b){return a + b}, 0)); - } - }, 1000); - }]); + app.factory('detector', function () { + var detector = new Detector(); + detector.init(400); + return detector; + }); - app.controller('HRController', function() { - this.workers = workers; - this.isVisible = function(worker) { - return worker.isVisible(lab); - }; - this.isAvailable = function(worker) { - return worker.isAvailable(lab); - }; - this.hire = function(worker) { - var cost = worker.hire(lab); - if (cost > 0) { - UI.showUpdateValue("#update-funding", -cost); - } - }; - }); + // add helpers as filters + app.filter('niceNumber', ['$filter', function ($filter) { + return Helpers.formatNumberPostfix; + }]); - app.controller('UpgradesController', function() { - this.upgrades = upgrades; - this.isVisible = function(upgrade) { - return upgrade.isVisible(lab, allObjects); - }; - this.isAvailable = function(upgrade) { - return upgrade.isAvailable(lab, allObjects); - }; - this.upgrade = function(upgrade) { - if (upgrade.buy(lab, allObjects)) { - UI.showUpdateValue("#update-funding", upgrade.cost); - } - } - }); + app.filter('niceTime', ['$filter', function ($filter) { + return Helpers.formatTime; + }]); - app.controller('AchievementsController', function($scope) { - $scope.achievements = achievements; - $scope.progress = function() { - return achievements.filter(function(a) { return a.validate(lab, allObjects, lastSaved); }).length; - }; - }); + app.filter('currency', ['$filter', function ($filter) { + return function (input) { + return 'JTN ' + $filter('niceNumber')(input); + }; + }]); - app.controller('SaveController', - ['$scope', '$interval', function($scope, $interval) { - lastSaved = new Date().getTime(); - $scope.lastSaved = lastSaved; - $scope.saveNow = function() { - var saveTime = new Date().getTime(); - game.lab.state.time += saveTime - lastSaved; - game.save(); - lastSaved = saveTime; - $scope.lastSaved = lastSaved; - }; - $scope.restart = function() { - if (window.confirm( - 'Do you really want to restart the game? All progress will be lost.' - )) { - ObjectStorage.clear(); - window.location.reload(true); - } - }; - $interval($scope.saveNow, 10000); - }]); + app.filter('reverse', ['$filter', function ($filter) { + return function (items) { + return items.slice().reverse(); + }; + }]); - app.controller('StatsController', function($scope) { - $scope.lab = lab; - }); - analytics.init(); - analytics.sendScreen(analytics.screens.main); + + // controllers + app.controller('DetectorController', ['$scope','game','detector', function ($scope,game,detector) { + // this.detector.init(400); + this.dropOptions = { + // accept: ".rune", + addClasses: true, + // greedy: true, + // tolerance: "pointer", + activeClass: "ui-state-hover", + hoverClass: "ui-state-active", + } + this.onDrop = function (event, ui) { + detector.onDrop(event, ui, game); + } + this.click = function () { + game.lab.clickDetector(); + detector.addEvent(); + UI.showUpdateValue("#update-data", game.lab.state.detector); + return false; + }; + this.toggleFlameFuel = function () { + console.log('toggleFlameFuel'); + detector.flame.toggleFuel(); + } + }]); + + app.controller('ElementController', ['$scope', '$compile','game','detector', function ($scope, $compile,game,detector) { + this.dragOptions = { + revert: true, //"invalid", + zIndex: 100, + // helper: "clone", // drags a clone + // opacity: 0.75, + // start: this.onRuneDrop.bind(this), + // stop: this.onRuneDrop.bind(this), + cancel: false, + // containment:false + }; + this.elements = game.elements; + this.isVisible = function (item) { + return item.isVisible(game.lab); + }; + this.isAvailable = function (item) { + return item.isAvailable(game.lab); + }; + this.doElement = function (item) { + var cost = item.element(game.lab); + if (cost > 0) { + UI.showUpdateValue("#update-data", -cost); + UI.showUpdateValue("#update-reputation", item.state.reputation); + } + }; + this.showInfo = function (r) { + UI.showModal(r.name, r.getInfo()); + UI.showLevels(r.state.level); + }; + }]); + + app.controller('LabController', ['$interval','game','detector', function ($interval,game,detector) { + this.lab = game.lab; + this.showDetectorInfo = function () { + if (!this._detectorInfo) { + this._detectorInfo = Helpers.loadFile('html/detector.html'); + } + UI.showModal('Detector', this._detectorInfo); + }; + $interval(function () { // one tick + var grant = game.lab.getGrant(); + UI.showUpdateValue("#update-funding", grant); + var sum = 0; + for (var i = 0; i < game.workers.length; i++) { + sum += game.workers[i].state.hired * game.workers[i].state.rate; + } + if (sum > 0) { + game.lab.acquireData(sum); + UI.showUpdateValue("#update-data", sum); + detector.addEventExternal(game.workers.map(function (w) { + return w.state.hired; + }).reduce(function (a, b) { + return a + b + }, 0)); + } + }, 1000); + }]); + + app.controller('HRController', ['$scope','game', function ($scope,game) { + this.workers = game.workers; + this.isVisible = function (worker) { + return worker.isVisible(game.lab); + }; + this.isAvailable = function (worker) { + return worker.isAvailable(game.lab); + }; + this.hire = function (worker) { + var cost = worker.hire(game.lab); + if (cost > 0) { + UI.showUpdateValue("#update-funding", -cost); + } + }; + }]); + + app.controller('UpgradesController', ['$scope','game', function ($scope,game) { + this.upgrades = game.upgrades; + this.isVisible = function (upgrade) { + return upgrade.isVisible(game.lab, game.allObjects); + }; + this.isAvailable = function (upgrade) { + return upgrade.isAvailable(game.lab, game.allObjects); + }; + this.upgrade = function (upgrade) { + if (upgrade.buy(game.lab, game.allObjects)) { + UI.showUpdateValue("#update-funding", upgrade.cost); + } + } + }]); + + app.controller('AchievementsController', function ($scope,game) { + $scope.achievements = game.achievements; + $scope.progress = function () { + return game.achievements.filter(function (a) { + return a.validate(game.lab, game.allObjects, game.lastSaved); + }).length; + }; + }); + + app.controller('SaveController', ['$scope', '$interval','game', function ($scope, $interval,game) { + game.lastSaved = new Date().getTime(); + $scope.lastSaved = game.lastSaved; + $scope.saveNow = function () { + var saveTime = new Date().getTime(); + game.lab.state.time += saveTime - game.lastSaved; + game.save(); + game.lastSaved = saveTime; + $scope.lastSaved = game.lastSaved; + }; + $scope.restart = function () { + if (window.confirm( + 'Do you really want to restart the game? All progress will be lost.' + )) { + ObjectStorage.clear(); + window.location.reload(true); + } + }; + $interval($scope.saveNow, 10000); + }]); + + app.controller('StatsController', ['$scope','game',function ($scope, game) { + $scope.lab = game.lab; + }]); + + analytics.init(); + analytics.sendScreen(analytics.screens.main); })(); diff --git a/js/detector/detector.js b/js/detector/detector.js index f8cb9be..d1ccc27 100644 --- a/js/detector/detector.js +++ b/js/detector/detector.js @@ -1,229 +1,187 @@ /** Manages the detector animation in the canvas of the detector pane **/ -var detector = -{ - core: - { - canvas: null, - ctx: null - }, - - events: - { - canvas: null, - ctx: null, - list: [], - }, - - flame: - { - canvas: null, - ctx: null - }, - - visible: true, - - width: 400, - height: 400, - - ratio: 1, - - lastRender: 0, - - bubblr: undefined, - - init: function(baseSize) - { - // get canvas - detector.core.canvas = document.getElementById('detector-core'); - detector.core.ctx = detector.core.canvas.getContext('2d'); - //detector.core.ctx = new C2S(400,400); - - detector.events.canvas = document.getElementById('detector-events'); - detector.events.ctx = detector.events.canvas.getContext('2d'); - - detector.flame.canvas = document.getElementById('detector-flame'); - detector.flame.ctx = detector.events.canvas.getContext('2d'); - - // set size - // TODO resize "#detector-flame" too - var devicePixelRatio = window.devicePixelRatio || 1; - var backingStoreRatio = detector.core.ctx.webkitBackingStorePixelRatio || - detector.core.ctx.mozBackingStorePixelRatio || - detector.core.ctx.msBackingStorePixelRatio || - detector.core.ctx.oBackingStorePixelRatio || - detector.core.ctx.backingStorePixelRatio || 1; - - var ratio = devicePixelRatio / backingStoreRatio; - - detector.ratio = baseSize / 400; - - detector.width = baseSize; - detector.height = baseSize; - - detector.core.canvas.width = baseSize; - detector.core.canvas.height = baseSize; - - detector.events.canvas.width = baseSize; - detector.events.canvas.height = baseSize; - - detector.flame.canvas.width = baseSize; - detector.flame.canvas.height = baseSize; - - if (devicePixelRatio !== backingStoreRatio) { - var oldWidth = detector.core.canvas.width; - var oldHeight = detector.core.canvas.height; - - detector.core.canvas.width = oldWidth * ratio; - detector.core.canvas.height = oldHeight * ratio; - detector.core.canvas.style.width = oldWidth + 'px'; - detector.core.canvas.style.height = oldHeight + 'px'; - - detector.events.canvas.width = oldWidth * ratio; - detector.events.canvas.height = oldHeight * ratio; - detector.events.canvas.style.width = oldWidth + 'px'; - detector.events.canvas.style.height = oldHeight + 'px'; - - // now scale the context to counter - // the fact that we've manually scaled - // our canvas element - detector.core.ctx.scale(ratio, ratio); - detector.events.ctx.scale(ratio, ratio); - } +var Detector = function(){ - detector.initBubbles(); - detector.initFlame(); - // TODO refactor flame animation and put it here - // this.flame = $('#detector-flame').flame(); - - detector.animate(); - }, - - initBubbles: function(){ - // init the test tube animation - var bubblrElem = $('#detector-core').bubblr({ - backgroundColor: '#e8e8e8', - bubbleColor: "#bfbfbf", - bubbleMinSize: 3, - bubbleMaxSize: 5, - bubbleMaxSpeed: 2, - bubbleMinSpeed: 1, - animationSpeed: 20, - // bubbleXposMultiplier allows us to position bubbles on the x-axis - bubbleXposMultiplier: 2, - // bubbleYpopLimit determines how far in pixels from the canvas's - // top edge bubbles will disappear - bubbleYpopLimit: 10 - }); - detector.bubblr = bubblrElem.data('plugin_bubblr'); - }, - - initFlame: function(){ - var flameElem = $('#detector-flame').flame(); - this.flame = flameElem.data('plugin_flame') - }, - - onResize: function(){ - this.bubblr.onResize(); - this.flame.onResize(); - }, - - animate: function(time) - { - // var duration = typeof time !== 'undefined' ? time - detector.lastRender : 16; - // detector.lastRender = time; + return { + core: + { + canvas: null, + ctx: null + }, // - // requestAnimFrame(detector.animate); - // detector.draw(duration); - }, + // events: + // { + // canvas: null, + // ctx: null, + // list: [], + // }, - /** When a user clicks the detector **/ - addEvent: function() - { - detector.bubblr.bubble(); // bubble for 500ms, TODO make one bubble - }, + flame: + { + canvas: null, + ctx: null + }, - /** When a worker clicks the detector **/ - addEventExternal: function(numWorkers) - { - // detector.bubblr.bubble(numWorkers); - }, + visible: true, - /** Draw current events **/ - draw: function(duration) - { - detector.bubblr.bubble(); - }, + width: 400, + height: 400, - onDrop: function(event, ui, game){ - // TODO tidy this, attach new runes to something better - // FIXME at the moment it duplicates runes, but we need a better system - var self=this; - console.debug('onDrop',arguments); - var $draggable = $(ui.draggable), - $droppable = $(event.target); + ratio: 1, - // if the dragger came from the elements panels, clone it to here - var newElement = $draggable.clone(); - var $detector = $droppable.parent() - $detector.append(newElement); - // also set position to that of droppable - newElement.offset($draggable.offset()) + lastRender: 0, + + bubblr: undefined, + + init: function(baseSize,element) + { + // get canvas + this.core.canvas = document.getElementById('detector-core'); + if (!this.core.canvas) { + this.core.canvas=$(''); + $(element).append(this.core.canvas); + } + this.core.ctx = this.core.canvas.getContext('2d'); + + this.flame.canvas = document.getElementById('detector-flame'); + this.flame.ctx = this.flame.canvas.getContext('2d'); + + this.initBubbles(); + this.initFlame(); + }, + + initBubbles: function(){ + // init the test tube animation + var bubblrElem = $('#detector-core').bubblr({ + backgroundColor: '#e8e8e8', + bubbleColor: "#bfbfbf", + bubbleMinSize: 3, + bubbleMaxSize: 5, + bubbleMaxSpeed: 2, + bubbleMinSpeed: 1, + animationSpeed: 20, + // bubbleXposMultiplier allows us to position bubbles on the x-axis + bubbleXposMultiplier: 2, + // bubbleYpopLimit determines how far in pixels from the canvas's + // top edge bubbles will disappear + bubbleYpopLimit: 10 + }); + this.bubblr = bubblrElem.data('plugin_bubblr'); + }, + + initFlame: function(){ + var flameElem = $('#detector-flame').flame(); + this.flamer = flameElem.data('plugin_flame') + }, + + bindOnResize: function(){ + // HACK + $(window).on('resize',this.onResize.bind(this)); + }, + + onResize: function(){ + // TODO, do one, schedule a check and then prevent firing until then + if ($(window).width() >= 1200) { + if (this.width != 500) { + $('#detector').width(500).height(500); + this.init(500); + } + } else if ($(window).width() < 768 && $(window).height() - 90 < 300) { + var newWidth = $(window).width() - Math.max($(window).width() - ($(window).height() - 90 + 10), 300) - 10; + if (this.width != newWidth) { + $('#detector').width(newWidth).height(newWidth); + this.init(newWidth); + } + } else if ($(window).width() < 992) { + if (this.width != 300) { + $('#detector').width(300).height(300); + this.init(300); + } + } else { + if (this.width != 400) { + $('#detector').width(400).height(400); + this.init(400); + } + } + + this.bubblr.onResize(); + this.flamer.onResize(); + }, + + /** When a user clicks the detector **/ + addEvent: function() + { + this.bubblr.bubble(); // bubble for 500ms, TODO make one bubble + }, + + /** When a worker clicks the detector **/ + addEventExternal: function(numWorkers) + { + // this.bubblr.bubble(numWorkers); + }, + + /** Draw current events **/ + draw: function(duration) + { + this.bubblr.bubble(); + }, + + onDrop: function(event, ui, game){ + // TODO tidy this, attach new runes to something better + // FIXME at the moment it duplicates runes, but we need a better system + var self=this; + console.debug('onDrop',arguments); + var $draggable = $(ui.draggable), + $droppable = $(event.target); + + // if the dragger came from the elements panels, clone it to here + var newElement = $draggable.clone(); + var $detector = $droppable.parent() + $detector.append(newElement); + // also set position to that of droppable + newElement.offset($draggable.offset()) - var elementStore = game.elements.filter(function(e){return e.key==$draggable.data('element')}); - elementStore[0].state.amount-=1; + var elementStore = game.elements.filter(function(e){return e.key==$draggable.data('element')}); + elementStore[0].state.amount-=1; - // get everything intersecting the drop + // get everything intersecting the drop - var draggableTop = $draggable.offset().top; - var draggableHeight = $draggable.height(); - var draggableBottom = draggableTop + draggableHeight; - var draggableLeft = $draggable.offset().left; - var draggableWidth = $draggable.height(); - var draggableRight = draggableLeft + draggableWidth; - var $droppables = $(".ui-droppable"); - var $droppablesCoveredByDraggable = $droppables.filter( function() { - var $droppable = $(this); - var top = $droppable.offset().top; - var height = $droppable.height(); - var bottom = top + height; + var draggableTop = $draggable.offset().top; + var draggableHeight = $draggable.height(); + var draggableBottom = draggableTop + draggableHeight; + var draggableLeft = $draggable.offset().left; + var draggableWidth = $draggable.height(); + var draggableRight = draggableLeft + draggableWidth; + var $droppables = $(".ui-droppable"); + var $droppablesCoveredByDraggable = $droppables.filter( function() { + var $droppable = $(this); + var top = $droppable.offset().top; + var height = $droppable.height(); + var bottom = top + height; - var left = $droppable.offset().left; - var width = $droppable.width(); - var right = left + width; + var left = $droppable.offset().left; + var width = $droppable.width(); + var right = left + width; - var isCoveredByDraggable = top <= draggableBottom && bottom >= draggableTop - && left <= draggableRight && right >= draggableLeft; - return isCoveredByDraggable; - }); - // TODO also get draggable covered by droppable - for (var i = 0; i < $droppablesCoveredByDraggable.length; i++) { + var isCoveredByDraggable = top <= draggableBottom && bottom >= draggableTop + && left <= draggableRight && right >= draggableLeft; + return isCoveredByDraggable; + }); + // TODO also get draggable covered by droppable + for (var i = 0; i < $droppablesCoveredByDraggable.length; i++) { - } - // just get one thes with a data-element attribute - var inputs = $droppablesCoveredByDraggable.filter(function(e){ - return $(e).data('element'); - }) - inputs.push($draggable); - var reaction = game.experiment({inputs:inputs}); - console.log('droppables', $droppablesCoveredByDraggable.length); + } + // just get one thes with a data-element attribute + var inputs = $droppablesCoveredByDraggable.filter(function(e){ + return $(e).data('element'); + }) + inputs.push($draggable); + var reaction = game.experiment({inputs:inputs}); + console.log('droppables', $droppablesCoveredByDraggable.length); - }, + }, + } }; - -window.requestAnimFrame = (function(){ - return window.requestAnimationFrame || - window.webkitRequestAnimationFrame || - window.mozRequestAnimationFrame || - window.oRequestAnimationFrame || - window.msRequestAnimationFrame || - function(/* function */ callback, /* DOMElement */ element){ - window.setTimeout(callback, 1000 / 60); - }; -})(); - -// start detector at this height -(function() { detector.init(400); $('#detector').width(400).height(400); })(); diff --git a/js/detector/flame.js b/js/detector/flame.js index 985e8c3..073a95f 100644 --- a/js/detector/flame.js +++ b/js/detector/flame.js @@ -6,7 +6,6 @@ * @copyright (c) 2015 wassname * @license: MIT */ -// TODO recenter on canvas/window resize ;(function ( $, window, document, undefined ) { var pluginName = "flame"; diff --git a/js/game.js b/js/game.js index bc55915..bec4758 100644 --- a/js/game.js +++ b/js/game.js @@ -53,6 +53,8 @@ var Game = (function(Helpers,GameObjects,ObjectStorage) { o.loadState(ObjectStorage.load(key)); } + // this.detector.init(400,$('#detector')); + this.rules = this.generateRules(); this.loaded = true; @@ -119,7 +121,7 @@ var Game = (function(Helpers,GameObjects,ObjectStorage) { } - // TODO use jqueru ui transfer effect to remove or puff + // TODO use angular effects to remove in puff of fade $(aElem).remove(); $(bElem).remove(); @@ -147,5 +149,5 @@ var Game = (function(Helpers,GameObjects,ObjectStorage) { } }; - return {Game : Game}; + return Game; }(Helpers,GameObjects,ObjectStorage)); diff --git a/js/helpers.js b/js/helpers.js index 7617d7d..f2ba604 100644 --- a/js/helpers.js +++ b/js/helpers.js @@ -17,6 +17,14 @@ var Helpers = (function () { return res; }; + var makeGameObject = function(type, object) { + // It's okay to define this function here since load is only called + // once anyway... + var o = new type(object); + _this.allObjects[o.key] = o; + return o; + }; + /** Format a number with proper postfix. */ var formatNumberPostfix = function (number) { @@ -41,7 +49,7 @@ var Helpers = (function () { return (number / prefixes[i].magnitude).toFixed(1) + prefixes[i].label; } } - return number; + return number; } var formatTime = function (msec) { @@ -77,7 +85,7 @@ var Helpers = (function () { ObjectStorage.save('saveVersion', saveVersion); } }; - + return { loadFile: loadFile, formatNumberPostfix: formatNumberPostfix, diff --git a/js/ui.js b/js/ui.js index bd96c40..b7b2ca2 100644 --- a/js/ui.js +++ b/js/ui.js @@ -3,74 +3,10 @@ /** Define UI specific stuff. */ var UI = (function () { - /** Resize the scrollable containers and make sure they are resized whenever - * the window is resized. - * Also introduce FastClick for faster clicking on mobile. + /** Introduce FastClick for faster clicking on mobile. */ $(function() { FastClick.attach(document.body); - - var resize = function() { - var h = $(window).height(); - var offset = 111; - if ($(window).width() < 992) { - offset = 112; - } - $('.scrollable').height(h - offset + 'px'); - - var types = ['element', 'hr', 'upgrades']; - - if ($(window).width() < 992) { - for (var i = 0; i < types.length; i++) { - if ($('#' + types[i] + 'Content').parent().attr('id') == types[i] + 'Large') { - $('#' + types[i] + 'Content').detach().appendTo('#' + types[i]); - } - } - } else { - for (var i = 0; i < types.length; i++) { - if ($('#' + types[i] + 'Content').parent().attr('id') != types[i] + 'Large') { - $('#' + types[i] + 'Content').detach().appendTo('#' + types[i] + 'Large'); - } - } - } - - if ($(window).width() < 600) { - var newWidth = Math.max($(window).width() - ($(window).height() - 90 + 10), 300); - $('#column-lab').width($(window).width() - newWidth); - $('#column-tabs').width(newWidth); - } else { - $('#column-lab').removeAttr('style'); - $('#column-tabs').removeAttr('style'); - } - - if ($(window).width() >= 1200) { - if (detector.width != 500) { - $('#detector').width(500).height(500); - detector.init(500); - } - } else if ($(window).width() < 768 && $(window).height() - 90 < 300) { - var newWidth = $(window).width() - Math.max($(window).width() - ($(window).height() - 90 + 10), 300) - 10; - if (detector.width != newWidth) { - $('#detector').width(newWidth).height(newWidth); - detector.init(newWidth); - } - } else if ($(window).width() < 992) { - if (detector.width != 300) { - $('#detector').width(300).height(300); - detector.init(300); - } - } else { - if (detector.width != 400) { - $('#detector').width(400).height(400); - detector.init(400); - } - } - - detector.onResize(); - } - - $(window).resize(resize); - resize(); }); /** Show a bootstrap modal with dynamic content e.g. background info **/