diff --git a/index.html b/index.html index b2fe7eb..bfcccf0 100644 --- a/index.html +++ b/index.html @@ -78,12 +78,21 @@ -
+
- {{r.key}} + + {{r.key}} + {{r.state.amount}}
@@ -98,10 +107,13 @@
-
+
- + Your detector. Click on it to generate events. @@ -300,12 +312,14 @@
+ + + - diff --git a/js/app.js b/js/app.js index 4409b27..f318bcc 100644 --- a/js/app.js +++ b/js/app.js @@ -47,6 +47,17 @@ // 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,lab); + } this.click = function() { lab.clickDetector(); detector.addEvent(); @@ -56,6 +67,16 @@ }); 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); diff --git a/js/detector/detector.js b/js/detector/detector.js index 5543640..bc06b56 100644 --- a/js/detector/detector.js +++ b/js/detector/detector.js @@ -131,7 +131,48 @@ var detector = draw: function(duration) { detector.bubblr.start(duration); - } + }, + + onDrop: function(event, ui, lab){ + // 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); + 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 isCoveredByDraggable = top <= draggableBottom && bottom >= draggableTop + && left <= draggableRight && right >= draggableLeft; + return isCoveredByDraggable; + }); + for (var i = 0; i < $droppablesCoveredByDraggable.length; i++) { + this.experiment($draggable,$droppablesCoveredByDraggable[i]); + } + console.log('droppables', $droppablesCoveredByDraggable.length); + + // duplicate + var newRune = this.runeElem(ui.draggable.data('id'),$draggable.parent().parent()); + newRune.position({my:'center', at:'center',of: $draggable}) + + // var newRune = ui.draggable.clone(true,true); + // $draggable.parent().append(newRune); + }, }; window.requestAnimFrame = (function(){ diff --git a/js/game.js b/js/game.js index 2c43666..882466f 100644 --- a/js/game.js +++ b/js/game.js @@ -12,6 +12,7 @@ var Game = (function(Helpers,GameObjects,ObjectStorage) { this.achievements = null; this.allObjects = {lab : this.lab}; this.loaded = false; + this.rules= null; }; Game.prototype.load = function() { @@ -52,9 +53,51 @@ var Game = (function(Helpers,GameObjects,ObjectStorage) { var o = this.allObjects[key]; o.loadState(ObjectStorage.load(key)); } + + this.rules = this.generateRules(); + this.loaded = true; }; + /** Generate rules between runes **/ + Game.prototype.generateRules= function(){ + var elements = this.elements; + // generate rules and store them with a hash of inredients + // the rule will be an object with ingredients, catalysts, conditions, results + // todo make a strcture that's more like a tree with progression etc + // todo add duds, misleading ones, explosions wildcards + // todo make this theory based? + // todo simulation + var rules={}; + for (var k = 0; k < this.elements.length*5; k++) { + // make a rules + var rule={ingredients:[],catalysts:[],conditions:[],results:[],inputs:[]} + var numOfIngredients = 2+Math.round(Math.random()*2); + for (var i = 0; i < numOfIngredients; i++) { + var j = Math.round(Math.random()*(elements.length-1)); + rule.ingredients.push(elements[j].key); + } + + if (Math.random()<0.1) { + var j = Math.round(Math.random()*(elements.length-1)); + rule.catalysts.push(elements[j].key); + } + var numOfresults = Math.round(Math.random()*3); + for (var i = 0; i < numOfresults; i++) { + var j = Math.round(Math.random()*(elements.length-1)); + rule.results.push(elements[j].key); + } + rule.inputs=[].concat(rule.ingredients,rule.catalysts) + rule.ingredients.sort() + rule.results.sort() + rule.catalysts.sort() + rule.inputs.sort(); + // index byhash of sorted array of ingredients + rules[rule.inputs]=rule + } + return rules; + }, + Game.prototype.save = function() { // Save every object's state to local storage for (var key in this.allObjects) { diff --git a/js/gameobjects.js b/js/gameobjects.js index c6c7182..138c7b2 100644 --- a/js/gameobjects.js +++ b/js/gameobjects.js @@ -40,6 +40,7 @@ var GameObjects = (function() { time: 0 } }]); + }; Lab.prototype = Object.create(GameObject.prototype); @@ -73,6 +74,29 @@ var GameObjects = (function() { return false; }; + /** Run an experiment depending on ingredients and conditions **/ + Lab.prototype.experiment = function(options) { + var elements = options.elements || []; + var elementKeys = elements.map(function(e){return $(e).data('element')}); + elementKeys.sort(); // this makes reaction be independant of order + + var result = this.rules[elementKeys] + if (result) { + this.reaction(result.ingredients,result.rune) + } + return result; + }; + + /** Remove ingredients and make results with animations **/ + Lab.prototype.reaction= function(ingredients,results){ + // TODO put new rune in old position, add animations + var rune = this.runeElem(r,$(aElem).parent().parent()); + $('#observationsContent').append('
'+this.runes[a]+'+'+this.runes[b]+'='+this.runes[r]+'
') + this.bubblr.start(1500); + // TODO use jqueru ui transfer effect to remove or puff + $(aElem).remove(); + $(bElem).remove(); + } Lab.prototype.buy = function(cost) { if (this.state.money >= cost) { this.state.money -= cost;