wassname/cardsforscience
1
0
Fork 0
mirror of https://github.com/wassname/cardsforscience.git synced 2026-07-26 13:17:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

Generate basic rules

Browse Source
This commit is contained in:
gitea
2016-02-22 21:55:04 +08:00
parent 0a61334331
commit d9551548ec
5 changed files with 149 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+19 -5
View File
@@ -78,12 +78,21 @@
</h4>
</div>
<div class="panel-body scrollable large" id="elementLarge">
<div class="panel-body large" id="elementLarge">
<div id="elementContent" ng-controller="ElementController as rc">
<div class="row" ng-cloak>
<div class="col-md-3" ng-repeat="r in rc.elements" ng-show="rc.isVisible(r)">
<span id="{{r.key}}" class="{{r.key}} element element-icon {{ r.state.interesting ? 'blink' : '' }} {{'q'+r.state.color+'-12'}}">{{r.key}}</span>
<span
id="{{r.key}}"
class="{{r.key}} element element-icon {{ r.state.interesting ? 'blink' : '' }} {{'q'+r.state.color+'-12'}}"
data-element="{{r.key}}"
data-drag="true"
jqyoui-draggable
data-jqyoui-options="{{rc.dragOptions}}"
>
{{r.key}}
</span>
<span ng-show="r.state.amount > 0" class="white-badge ng-binding">{{r.state.amount}}</span>
</div>
</div>
@@ -98,10 +107,13 @@
<hr class="hidden-xs">
<div id="detector-holder">
<div id="detector" ng-controller="DetectorController as dc">
<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">
<canvas ng-click="dc.click()" id="detector-events" width="400" height="400" class="prevent-select" 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">
@@ -300,12 +312,14 @@
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<script src="bower_components/angular-dragdrop/src/angular-dragdrop.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/external/jquery.ui.touch-punch.min.js"></script>
<script src="js/external/jquery.cookie-1.4.1.min.js"></script>
<script src="js/external/retina.js"></script>
<script src="js/external/fastclick.js"></script>
<script src="bower_components/angular-dragdrop/src/angular-dragdrop.min.js"></script>
<script src="js/storage.js"></script>
<script src="js/helpers.js"></script>
js/app.js
+21
View File
@@ -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);
js/detector/detector.js
+42 -1
View File
@@ -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(){
js/game.js
+43
View File
@@ -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) {
js/gameobjects.js
+24
View File
@@ -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('<div class="col-md-12">'+this.runes[a]+'+'+this.runes[b]+'='+this.runes[r]+'</div>')
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;