mirror of
https://github.com/wassname/cardsforscience.git
synced 2026-06-27 16:14:52 +08:00
Simplified ui, refactored detector and app.js
This commit is contained in:
+5
-4
@@ -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;
|
||||
|
||||
+4
-4
@@ -108,15 +108,15 @@
|
||||
<div id="detector-holder">
|
||||
|
||||
<div id="detector" ng-controller="DetectorController as dc">
|
||||
<canvas id="detector-core" class="test-tube" width="400"
|
||||
height="400" style=""></canvas>
|
||||
<canvas ng-click="dc.click()" id="detector-events" width="400" height="400" class="prevent-select" data-drop="true"
|
||||
<!-- <canvas id="detector-core" class="test-tube center-block " width="400"
|
||||
height="400" style=""></canvas> -->
|
||||
<canvas ng-click="dc.click()" id="detector-core" width="400" height="400" class="test-tube prevent-select center-block " data-drop="true"
|
||||
jqyoui-droppable="{onDrop: 'dc.onDrop'}"
|
||||
data-jqyoui-options="{{dc.dropOptions}}"
|
||||
>
|
||||
Your detector. Click on it to generate events.
|
||||
</canvas>
|
||||
<canvas id="detector-flame" width="400" height="400" class="prevent-select" ng-click="dc.toggleFlameFuel()">
|
||||
<canvas id="detector-flame" width="300" height="300" class="prevent-select center-block " ng-click="dc.toggleFlameFuel()">
|
||||
Your bunsen burner. Click it to turn on and off.
|
||||
</canvas>
|
||||
</div>
|
||||
|
||||
@@ -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);
|
||||
})();
|
||||
|
||||
+167
-209
@@ -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=$('<canvas id="detector-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); })();
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
* @copyright (c) 2015 wassname
|
||||
* @license: MIT
|
||||
*/
|
||||
// TODO recenter on canvas/window resize
|
||||
;(function ( $, window, document, undefined ) {
|
||||
var pluginName = "flame";
|
||||
|
||||
|
||||
+4
-2
@@ -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));
|
||||
|
||||
+10
-2
@@ -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,
|
||||
|
||||
@@ -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 **/
|
||||
|
||||
Reference in New Issue
Block a user