Replaced detector with test tube

This commit is contained in:
2016-02-22 16:08:27 +08:00
parent d72846ae3f
commit b82e68d05c
15 changed files with 607 additions and 501 deletions
+28 -1
View File
@@ -203,7 +203,7 @@ h1 br {
}
@media screen and (orientation:landscape) and (max-width: 767px) {
}
@media screen and (min-width: 768px) {
@@ -295,3 +295,30 @@ h1 br {
background-image: url('../assets/pc32@2x.png');
}
}
/* bubblr http://likeadev.com/show/how-to-make-a-cool-laboratory-tube-with-animated-bubbles.html */
.test-tube-container {
padding-top: 50px;
}
.test-tube {
/*width: 100%;*/
height: 425px;
border-left: 5px solid #949494;
border-right: 5px solid #949494;
border-bottom: 5px solid #949494;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.test-tube .test-tube-bg {
background: #e8e8e8;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
height: 400px;
top: 20px;
position: relative;
}
.test-tube .substance {
top: -20px;
position: relative
}
+21 -8
View File
@@ -13,7 +13,7 @@
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" type="image/png" href="assets/favicon.png" />
<link rel="apple-touch-icon" href="assets/mobile/icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/mobile/icon.png">
@@ -28,7 +28,7 @@
</script>
<!-- End Google Analytics -->
</head>
<body>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
@@ -104,12 +104,20 @@
<hr class="hidden-xs">
<div id="detector-holder">
<div id="detector" ng-controller="DetectorController as dc">
<canvas id="detector-core" width="400" height="400">
Your detector. Click on it to generate events.
</canvas>
<div class="test-tube-container">
<div class="test-tube">
<div class="test-tube-bg">
<canvas id="detector-core'" class="substance" width="400"
height="400" style=""></canvas>
</div>
</div>
</div>
<canvas ng-click="dc.click()" id="detector-events" width="400" height="400" class="prevent-select">
Your detector. Click on it to generate events.
</canvas>
<canvas id="detector-flame" width="400" height="400" class="prevent-select">
Your bunsen burner. Click it to turn on and off.
</canvas>
</div>
</div>
<button id="detector-info" class="btn btn-info" ng-click="lc.showDetectorInfo()"><i class="fa fa-info"></i></button>
@@ -301,7 +309,7 @@
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.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>
@@ -310,8 +318,13 @@
<script src="js/helpers.js"></script>
<script src="js/analytics.js"></script>
<script src="js/gameobjects.js"></script>
<script src="js/event.js"></script>
<script src="js/detector.js"></script>
<script src="js/detector/flame.js"></script>
<script src="js/detector/bubblr.js"></script>
<script src="js/detector/event.js"></script>
<script src="js/detector/detector.js"></script>
<script src="js/ui.js"></script>
<script src="js/game.js"></script>
<script src="js/app.js"></script>
+8 -7
View File
@@ -1,3 +1,4 @@
/** Custom google analystics events **/
var analytics =
{
enabled: true,
@@ -15,19 +16,19 @@ var analytics =
categoryResearch: 'Research',
categoryHR: 'HR',
categoryUpgrades: 'Upgrades',
actionResearch: 'Research',
actionHire: 'Hire',
actionBuy: 'Buy'
},
init: function()
{
if (typeof Helpers.analytics === 'undefined' || Helpers.analytics == '') {
analytics.enabled = false;
return;
}
ga('create', Helpers.analytics);
ga('set', { 'appName': 'Particle Clicker', 'appId': 'ch.cern.particle-clicker', 'appVersion': '0.9' });
ga('set', 'anonymizeIp', true);
@@ -54,22 +55,22 @@ var analytics =
analytics.sendScreen(analytics.screens.main);
});
},
sendScreen: function(type)
{
if (!analytics.enabled || typeof type === 'undefined') {
return;
}
ga('send', 'screenview', { 'screenName': type });
},
sendEvent: function(category, action, label, value)
{
if (!analytics.enabled || typeof category === 'undefined' || typeof action === 'undefined' || typeof label === 'undefined' || typeof value === 'undefined') {
return;
}
//ga('send', 'event', category, action, label, value, {'screenName': analytics.screens.main });
}
};
+6
View File
@@ -1,7 +1,11 @@
/**
* Define the angular app
*/
'use strict';
(function() {
Helpers.validateSaveVersion();
// init game
var game = new Game.Game();
game.load();
@@ -15,6 +19,7 @@
var app = angular.module('particleClicker', []);
// add helpers as filters
app.filter('niceNumber', ['$filter', function($filter) {
return Helpers.formatNumberPostfix;
}]);
@@ -35,6 +40,7 @@
};
}]);
// controllers
app.controller('DetectorController', function() {
this.click = function() {
lab.clickDetector();
-322
View File
@@ -1,322 +0,0 @@
var detector =
{
core:
{
canvas: null,
ctx: null
},
events:
{
canvas: null,
ctx: null,
list: [],
},
visible: true,
width: 400,
height: 400,
ratio: 1,
colors:
{
siliconRing: '#FFF371',
siliconRingLine: '#EAC918',
ecal: '#C5FF82',
ecalLine: '#9EFF28',
hcal: '#E1FF79',
hcalLine: '#C9FF2D',
lightRing: '#A0B3FF',
lightRingLine: '#A0B3FF',
darkRing: '#7280B8',
darkRingLine: '#7280B8',
mucalLight: '#FFDFB7',
mucalLightLine: '#FFDFB7',
mucalDark: '#EA301F',
mucalDarkLine: '#C5291A'
},
radius:
{
siliconInner: 10,
silicon: 30,
siliconSpace: 35,
ecal: 50,
hcal: 80,
darkRing1: 83,
darkRing1Space: 86,
lightRing: 92,
lightRingSpace: 94,
darkRing2: 100,
mucal: 107,
mucalLight: 8,
mucalDark: 18
},
tracks:
[
{
name: 'electron',
color: '#0016EA'
},
{
name: 'jet',
color: '#0B7700'
},
{
name: 'muon',
color: '#775400'
}
],
lastRender: 0,
animate: function(time)
{
var duration = typeof time !== 'undefined' ? time - detector.lastRender : 16;
detector.lastRender = time;
requestAnimFrame(detector.animate);
detector.draw(duration);
},
init: function(baseSize)
{
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');
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;
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);
}
detector.coreDraw();
detector.animate();
},
coreDraw: function()
{
var ctx = detector.core.ctx;
var cx = detector.width / 2;
var cy = detector.height / 2;
ctx.clearRect(0, 0, detector.width, detector.width);
var muSplit = 2/12;
for (var k = 3; k >= 1; k--) {
ctx.strokeStyle = detector.colors.mucalDarkLine;
ctx.fillStyle = detector.colors.mucalDark;
ctx.beginPath();
ctx.moveTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.cos(Math.PI * muSplit) * detector.ratio, cy + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.sin(Math.PI * muSplit) * detector.ratio);
for (var i = 1; i <= 13; i++) {
ctx.lineTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.cos(Math.PI * i * muSplit) * detector.ratio, cy + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.sin(Math.PI * i * muSplit) * detector.ratio);
}
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.moveTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.cos(Math.PI * muSplit) * detector.ratio, cy + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.sin(Math.PI * muSplit) * detector.ratio);
for (var i = 1; i <= 13; i++) {
ctx.lineTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.cos(Math.PI * i * muSplit) * detector.ratio, cy + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.sin(Math.PI * i * muSplit) * detector.ratio);
}
ctx.stroke();
ctx.fillStyle = detector.colors.mucalLight;
ctx.fill();
}
ctx.strokeStyle = detector.colors.mucalDarkLine;
ctx.beginPath();
ctx.moveTo(cx + detector.radius.mucal * Math.cos(Math.PI * muSplit) * detector.ratio, cy + detector.radius.mucal * Math.sin(Math.PI * muSplit) * detector.ratio);
for (var i = 1; i <= 13; i++) {
ctx.lineTo(cx + detector.radius.mucal * Math.cos(Math.PI * i * muSplit) * detector.ratio, cy + detector.radius.mucal * Math.sin(Math.PI * i * muSplit) * detector.ratio);
}
ctx.stroke();
ctx.fillStyle = '#FFFFFF';
ctx.fill();
ctx.beginPath();
ctx.strokeStyle = detector.colors.darkRingLine;
ctx.fillStyle = detector.colors.darkRing;
ctx.arc(cx, cy, detector.radius.darkRing2 * detector.ratio, 0, Math.PI * 2, true);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = '#FFFFFF';
ctx.arc(cx, cy, detector.radius.lightRingSpace * detector.ratio, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.strokeStyle = detector.colors.lightRingLine;
ctx.fillStyle = detector.colors.lightRing;
ctx.arc(cx, cy, detector.radius.lightRing * detector.ratio, 0, Math.PI * 2, true);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = '#FFFFFF';
ctx.arc(cx, cy, detector.radius.darkRing1Space * detector.ratio, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.strokeStyle = detector.colors.darkRingLine
ctx.fillStyle = detector.colors.darkRing;
ctx.arc(cx, cy, detector.radius.darkRing1 * detector.ratio, 0, Math.PI * 2, true);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = '#FFFFFF';
ctx.arc(cx, cy, detector.radius.ecal * detector.ratio, 0, Math.PI * 2, true);
ctx.fill();
ctx.strokeStyle = detector.colors.hcalLine;
ctx.fillStyle = detector.colors.hcal;
var calSplit = 20/2;
for (var i = 0; i < 20; i++) {
ctx.beginPath();
ctx.moveTo(cx + detector.radius.ecal * Math.cos(Math.PI * i / calSplit) * detector.ratio, cy + detector.radius.ecal * Math.sin(Math.PI * i / calSplit) * detector.ratio);
ctx.lineTo(cx + detector.radius.hcal * Math.cos(Math.PI * i / calSplit) * detector.ratio, cy + detector.radius.hcal * Math.sin(Math.PI * i / calSplit) * detector.ratio);
ctx.arc(cx, cy, detector.radius.hcal * detector.ratio, Math.PI * i / calSplit, Math.PI * (i+1) / calSplit, false);
ctx.lineTo(cx + detector.radius.ecal * Math.cos(Math.PI * (i+1) / calSplit) * detector.ratio, cy + detector.radius.ecal * Math.sin(Math.PI * (i+1) / calSplit) * detector.ratio);
ctx.lineTo(cx + detector.radius.ecal * Math.cos(Math.PI * i / calSplit) * detector.ratio, cy + detector.radius.ecal * Math.sin(Math.PI * i / calSplit) * detector.ratio);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
ctx.strokeStyle = detector.colors.ecalLine;
ctx.fillStyle = detector.colors.ecal;
var calSplit = 20/2;
for (var i = 0; i < 20; i++) {
ctx.beginPath();
ctx.moveTo(cx + detector.radius.siliconSpace * Math.cos(Math.PI * i / calSplit) * detector.ratio, cy + detector.radius.siliconSpace * Math.sin(Math.PI * i / calSplit) * detector.ratio);
ctx.lineTo(cx + detector.radius.ecal * Math.cos(Math.PI * i / calSplit) * detector.ratio, cy + detector.radius.ecal * Math.sin(Math.PI * i / calSplit) * detector.ratio);
ctx.lineTo(cx + detector.radius.ecal * Math.cos(Math.PI * (i+1) / calSplit) * detector.ratio, cy + detector.radius.ecal * Math.sin(Math.PI * (i+1) / calSplit) * detector.ratio);
ctx.lineTo(cx + detector.radius.siliconSpace * Math.cos(Math.PI * (i+1) / calSplit) * detector.ratio, cy + detector.radius.siliconSpace * Math.sin(Math.PI * (i+1) / calSplit) * detector.ratio);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
ctx.beginPath();
ctx.strokeStyle = detector.colors.siliconRingLine;
ctx.fillStyle = detector.colors.siliconRing;
ctx.arc(cx, cy, detector.radius.silicon * detector.ratio, 0, Math.PI * 2, true);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = detector.colors.siliconRingLine;
ctx.fillStyle = detector.colors.siliconRing;
ctx.arc(cx, cy, detector.radius.siliconInner * detector.ratio, 0, Math.PI * 2, true);
ctx.fill();
ctx.stroke();
},
addEvent: function()
{
var num = Math.max(3, Math.ceil(15 * Math.random()));
for (var i = 0; i < num; i++) {
var index = Math.round(Math.random() * (detector.tracks.length - 1));
var event = new ParticleEvent(detector.tracks[index], num);
detector.events.list.push(event);
}
},
addEventExternal: function(numWorkers)
{
if (!detector.visible) {
return;
}
var num = Math.min(20 * numWorkers / 10, 20);
for (var i = 0; i < num; i++) {
var index = Math.round(Math.random() * (detector.tracks.length - 1));
var event = new ParticleEvent(detector.tracks[index], num, true);
detector.events.list.push(event);
}
},
draw: function(duration)
{
detector.events.ctx.clearRect(0, 0, detector.width, detector.height);
var del = -1;
for (var e in detector.events.list) {
if (detector.events.list[e].alpha > 0) {
detector.events.list[e].draw(duration);
} else {
del = e;
}
}
if (del > 0) {
detector.events.list.splice(0, del);
}
}
};
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
(function() { detector.init(400); $('#detector').width(400).height(400); })();
+161
View File
@@ -0,0 +1,161 @@
/*
Bubblr v1.0 - http://mikeyhogarth.wordpress.com/2012/04/15/bubblr-jquery-bubbles-plugin/
Copyright (c) 2012 Mikey Hogarth
template based on original jquery lightweight plugin biolerplate: @ajpiano, @addyosmani
This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
*/
;(function ( $, window, document, undefined ) {
var pluginName = "bubblr";
var defaults = {
numberOfBubbles: 10,
backgroundColor: "transparent",
bubbleColor: "White",
bubbleOpacity: .7,
bubbleMinSize: 1,
bubbleMaxSize: 2,
bubbleMaxSpeed: 2,
bubbleMinSpeed: 1,
animationSpeed: 10
};
function Bubblr( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this.init();
}
Bubblr.prototype.init = function () {
if(this.element.getContext) {
this.ctx = this.element.getContext("2d");
}
else {
return;
}
$canvas = $(this.element);
this.width = $canvas.width();
this.height = $canvas.height();
$canvas.css("background-color", this.options.backgroundColor)
this.bubbles = new Array();
for(i = 0; i < this.options.numberOfBubbles; i++) {
this.bubbles[i] = this.generateBubble();
}
var self = this;
this.on=false;
for(i in this.bubbles) {
this.drawBubble(this.bubbles[i]);
}
this.timerId = setInterval(function() {
self.animationLoop();
}, this.options.animationSpeed);
// this.clear();
};
Bubblr.prototype.start = function(timespan) {
var self = this;
if (!this.on){
// this.timerId = setInterval(function() {
// self.animationLoop();
// }, this.options.animationSpeed);
if (timespan) this.nextOffID = setTimeout(self.stop.bind(self),timespan);
this.on=true;
} else {
clearInterval(this.nextOffID);
this.nextOff = setTimeout(self.stop.bind(self),timespan);
}
};
Bubblr.prototype.stop = function() {
// this.clear();
// clearInterval(this.timerId);
this.on=false;
this.timerId=undefined;
};
Bubblr.prototype.animationLoop = function() {
this.clear();
for(i in this.bubbles) {
this.update(i, this.bubbles[i]);
this.draw(i, this.bubbles[i]);
}
};
Bubblr.prototype.clear = function () {
this.ctx.globalAlpha = 1;
this.ctx.fillStyle = this.options.backgroundColor;
this.ctx.clearRect(0,0,this.width, this.height);
};
Bubblr.prototype.draw = function (index, bubble) {
this.ctx.globalAlpha = this.options.bubbleOpacity;
this.drawBubble(bubble);
};
Bubblr.prototype.update = function (index, bubble) {
bubble.y = bubble.y - bubble.speed
if(bubble.y < 0 && this.on)
this.bubbles[index] = this.generateBubble(true);
};
Bubblr.prototype.drawBubble = function(bubble) {
this.ctx.fillStyle = this.options.bubbleColor;
this.ctx.beginPath();
this.ctx.arc(bubble.x, bubble.y, bubble.radius, 0, Math.PI*2, true);
this.ctx.closePath();
this.ctx.fill();
};
Bubblr.prototype.generateBubble = function(start_y_at_zero) {
var bubble = new Object();
bubble.x = this.randomize(1,this.width);
if(start_y_at_zero) {
bubble.y = this.height;
}
else {
bubble.y = this.randomize(1,this.height);
}
bubble.radius = this.randomize(this.options.bubbleMinSize, this.options.bubbleMaxSize);
bubble.speed = this.randomize(this.options.bubbleMinSpeed, this.options.bubbleMaxSpeed);
return bubble;
};
Bubblr.prototype.randomize = function(min,max) {
return Math.floor((Math.random()*max)+min);
};
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName,
new Bubblr( this, options ));
}
});
}
})( jQuery, window, document );
+148
View File
@@ -0,0 +1,148 @@
/** Manages the detector animation in the canvas of the detector pane **/
var detector =
{
core:
{
canvas: null,
ctx: null
},
events:
{
canvas: null,
ctx: null,
list: [],
},
visible: true,
width: 400,
height: 400,
ratio: 1,
lastRender: 0,
animate: function(time)
{
// var duration = typeof time !== 'undefined' ? time - detector.lastRender : 16;
// detector.lastRender = time;
//
// requestAnimFrame(detector.animate);
// detector.draw(duration);
},
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');
// 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;
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);
}
// 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');
// TODO refactor flame animation and put it here
// this.flame = $('#detector-flame').flame();
// detector.coreDraw();
detector.animate();
},
/** draw a static core on background **/
// coreDraw: function()
// {
//
// },
addEvent: function()
{
},
addEventExternal: function(numWorkers)
{
},
/** Draw current events **/
draw: function(duration)
{
}
};
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); })();
+8 -1
View File
@@ -1,3 +1,11 @@
/** Define and draw to canvas particle events, used in detector **/
/**
* Define and draw to canvas particle events, used in detector
* @param {Object} type Object with name 'electron'||'jet'||'muon'
* @param {Number} count Number of particles in this event
* @param {Boolean} external Wether even was caused by player or worker
*/
function ParticleEvent(type, count, external)
{
this.work = typeof external !== 'undefined' ? external : false;
@@ -60,4 +68,3 @@ ParticleEvent.prototype.draw = function(duration, init)
this.alpha -= 0.03 / 16 * duration;
}
};
+109
View File
@@ -0,0 +1,109 @@
/* http://codepen.io/jackrugile/pen/Jbnpv */
// TODO refactor this to be a object with inputs and outputs, and to center on
// window resize
var c = document.getElementById('detector-flame'),
ctx = c.getContext('2d'),
cw = c.width = 400,
ch = c.height = 300,
parts = [],
partCount = 200,
partsFull = false,
hueRange = 50,
globalTick = 0,
rand = function(min, max){
return Math.floor( (Math.random() * (max - min + 1) ) + min);
};
var Part = function(){
this.reset();
};
Part.prototype.reset = function(){
this.startRadius = rand(1, 25);
this.radius = this.startRadius;
this.x = cw/2 + (rand(0, 6) - 3);
this.y = 250;
this.vx = 0;
this.vy = 0;
this.hue = rand(globalTick - hueRange, globalTick + hueRange);
this.saturation = rand(50, 100);
this.lightness = rand(20, 70);
this.startAlpha = rand(1, 10) / 100;
this.alpha = this.startAlpha;
this.decayRate = .1;
this.startLife = 7;
this.life = this.startLife;
this.lineWidth = rand(1, 3);
}
Part.prototype.update = function(){
this.vx += (rand(0, 200) - 100) / 1500;
this.vy -= this.life/50;
this.x += this.vx;
this.y += this.vy;
this.alpha = this.startAlpha * (this.life / this.startLife);
this.radius = this.startRadius * (this.life / this.startLife);
this.life -= this.decayRate;
if(
this.x > cw + this.radius ||
this.x < -this.radius ||
this.y > ch + this.radius ||
this.y < -this.radius ||
this.life <= this.decayRate
){
this.reset();
}
};
Part.prototype.render = function(){
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fillStyle = ctx.strokeStyle = 'hsla('+this.hue+', '+this.saturation+'%, '+this.lightness+'%, '+this.alpha+')';
ctx.lineWidth = this.lineWidth;
ctx.fill();
ctx.stroke();
};
var createParts = function(){
if(!partsFull){
if(parts.length > partCount){
partsFull = true;
} else {
parts.push(new Part());
}
}
};
var updateParts = function(){
var i = parts.length;
while(i--){
parts[i].update();
}
};
var renderParts = function(){
var i = parts.length;
while(i--){
parts[i].render();
}
};
var clear = function(){
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'hsla(0, 0%, 0%, .3)';
ctx.fillRect(0, 0, cw, ch);
ctx.globalCompositeOperation = 'lighter';
};
var loop = function(){
window.requestAnimFrame(loop, c);
clear();
createParts();
updateParts();
renderParts();
globalTick++;
};
window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();
loop();
+5 -2
View File
@@ -1,4 +1,7 @@
var Game = (function() {
/**
* Game object load/saves game resources and stores game objects
*/
var Game = (function(Helpers,GameObjects,ObjectStorage) {
'use strict';
var Game = function() {
@@ -58,4 +61,4 @@ var Game = (function() {
};
return {Game : Game};
}());
}(Helpers,GameObjects,ObjectStorage));
+5 -1
View File
@@ -1,3 +1,7 @@
/**
* Game objects such as workers, research, upgrades, and achievements.
*/
var GameObjects = (function() {
'use strict';
var GLOBAL_VISIBILITY_THRESHOLD = 0.5;
@@ -22,7 +26,7 @@ var GameObjects = (function() {
GameObject.apply(this, [{
key : 'lab',
state : {
name : 'Give your lab an awesome name!',
name : 'Click here to give your lab an awesome name!',
detector : 1,
factor : 5,
data : 0,
-137
View File
@@ -1,137 +0,0 @@
function draw_hist(ident, vals) {
// A formatter for counts.
var formatCount = d3.format(",0d");
var margin = {top: 10, right: 30, bottom: 30, left: 30},
width = 400 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([-5, 5])
.range([0, width]);
// Generate a histogram using twenty uniformly-spaced bins.
var data = d3.layout.histogram()
.bins(x.ticks(20))
(vals);
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.y + Math.sqrt(d.y); })])
.range([height, 0]);
correction = y(0);
var xAxis = d3.svg.axis()
.scale(x)
.ticks(3)
.tickFormat(function(d) { return '';})
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.ticks(4)
//.tickFormat(function(d) { return ''; })
.orient("left");
var svg = d3.select(ident).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var bar = svg.selectAll(".bar")
.data(data)
.enter().append("svg:circle")
.attr("stroke", "black")
.attr("fill", function(d, i) { return "black" })
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
.attr("r", function(d, i) { return 1 });
svg.selectAll(".bar")
.data(data)
.enter().append("svg:line")
.attr("x1", 0)
.attr("x2", 0)
.attr("y1", function(d) { return y(Math.sqrt(d.y))-correction; })
.attr("y2", function(d) { return -y(Math.sqrt(d.y))+correction; })
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
.attr("stroke", "black")
.attr("stroke-width", 1)
svg.selectAll(".bar")
.data(data)
.enter().append("svg:line")
.attr("x1", -2)
.attr("x2", 2)
.attr("y1", function(d) { return y(Math.sqrt(d.y))-correction; })
.attr("y2", function(d) { return y(Math.sqrt(d.y))-correction; })
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
.attr("stroke", "black")
.attr("stroke-width", 1)
svg.selectAll(".bar")
.data(data)
.enter().append("svg:line")
.attr("x1", -2)
.attr("x2", 2)
.attr("y1", function(d) { return -y(Math.sqrt(d.y))+correction; })
.attr("y2", function(d) { return -y(Math.sqrt(d.y))+correction; })
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
.attr("stroke", "black")
.attr("stroke-width", 1)
bar.append("rect")
.attr("x", 1)
.attr("width", x(data[0].dx))
.attr("height", function(d) { return height - y(d.y); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height ) + ")")
.call(xAxis);
svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width)
.attr("y", height + 20)
.text("m (GeV)");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0, 0)")
.call(yAxis);
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", -20)
.attr("dy", "-1em")
.attr("dx", "-0.5em")
.attr("transform", "rotate(-90)")
.text("events");
return svg;
}
function Histogram(ident) {
// TODO: Allow for arbitrary numbers of events
this.values = [];
draw_hist(ident, []);
this.add_events = function(num) {
var new_vals = d3.range(num).map(d3.random.normal(0, 1));
this.values = $.merge(this.values, new_vals);
d3.select(ident).select("svg").remove();
draw_hist(ident, this.values);
}
this.clear = function() {
d3.select(ident).select("svg").remove();
this.values = [];
draw_hist(ident, []);
}
}
+24 -22
View File
@@ -8,8 +8,8 @@ var UI = (function () {
* Also introduce FastClick for faster clicking on mobile.
*/
$(function() {
FastClick.attach(document.body);
FastClick.attach(document.body);
var resize = function() {
var h = $(window).height();
var offset = 111;
@@ -66,12 +66,12 @@ var UI = (function () {
}
}
}
$(window).resize(resize);
resize();
});
/** Show a bootstrap modal with dynamic content. */
/** Show a bootstrap modal with dynamic content e.g. background info **/
var showModal = function(title, text, level) {
var $modal = $('#infoBox');
$modal.find('#infoBoxLabel').html(title);
@@ -140,6 +140,7 @@ var UI = (function () {
window.setTimeout(remove(alert), 2000);
}
// display cookie warning
if (typeof $.cookie('cookielaw') === 'undefined') {
var alert = '<div id="cookielaw" class="alert alert-info" role="alert">';
alert += '<button type="button" class="btn btn-primary">OK</button>';
@@ -155,20 +156,21 @@ var UI = (function () {
$('#messages-container').append(alert);
}
if (typeof $.cookie('cern60') === 'undefined') {
var alert = '<div id="cern60" class="alert alert-info" role="alert">';
alert += '<button type="button" class="btn btn-primary">Close</button>';
alert += '<i class="fa fa-area-chart alert-glyph"></i> <span class="alert-text"><a class="alert-link" href="http://home.web.cern.ch/about/updates/2014/12/take-part-cern-60-public-computing-challenge" target="_blank">Join the CERN 60 computing challenge!</a></span>';
alert += '</div>';
alert = $(alert);
alert.find('button').click(function ()
{
$.cookie('cern60', 'closed', { expires: 365 });
$('#cern60').slideUp(300, function() { $('#cern60').remove(); });
})
$('#messages-container').append(alert);
}
// display new user alert
// if (typeof $.cookie('cern60') === 'undefined') {
// var alert = '<div id="cern60" class="alert alert-info" role="alert">';
// alert += '<button type="button" class="btn btn-primary">Close</button>';
// alert += '<i class="fa fa-area-chart alert-glyph"></i> <span class="alert-text"><a class="alert-link" href="http://home.web.cern.ch/about/updates/2014/12/take-part-cern-60-public-computing-challenge" target="_blank">Join the CERN 60 computing challenge!</a></span>';
// alert += '</div>';
// alert = $(alert);
// alert.find('button').click(function ()
// {
// $.cookie('cern60', 'closed', { expires: 365 });
// $('#cern60').slideUp(300, function() { $('#cern60').remove(); });
// })
//
// $('#messages-container').append(alert);
// }
return {
showAchievement: showAchievement,
@@ -197,19 +199,19 @@ var UI = (function () {
document.onfocusin = document.onfocusout = onchange;
// All others:
else
window.onpageshow = window.onpagehide
window.onpageshow = window.onpagehide
= window.onfocus = window.onblur = onchange;
function onchange (evt) {
var v = 'visible', h = 'hidden',
evtMap = {
focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h
evtMap = {
focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h
};
evt = evt || window.event;
if (evt.type in evtMap)
detector.visible = evtMap[evt.type] == 'visible';
else
else
detector.visible = !this[hidden];
}
})();
+1
View File
@@ -0,0 +1 @@
["always makes", "sometimes makes", "never makes", "is", "is made up of","any element","no elements"]
+83
View File
@@ -0,0 +1,83 @@
[
"ᚠ",
"ᚡ",
"ᚢ",
"ᚣ",
"ᚤ",
"ᚥ",
"ᚦ",
"ᚧ",
"ᚨ",
"ᚩ",
"ᚪ",
"ᚫ",
"ᚬ",
"ᚭ",
"ᚮ",
"ᚯ",
"ᚰ",
"ᚱ",
"",
"ᚳ",
"ᚴ",
"ᚵ",
"ᚶ",
"",
"ᚸ",
"ᚹ",
"ᚺ",
"ᚻ",
"ᚼ",
"ᚽ",
"ᚾ",
"ᚿ",
"ᛀ",
"",
"ᛂ",
"ᛃ",
"ᛄ",
"ᛅ",
"ᛆ",
"ᛇ",
"ᛈ",
"ᛉ",
"ᛊ",
"ᛋ",
"",
"ᛍ",
"ᛎ",
"ᛏ",
"ᛐ",
"ᛑ",
"ᛒ",
"ᛓ",
"ᛔ",
"",
"",
"ᛗ",
"ᛘ",
"ᛙ",
"ᛚ",
"ᛛ",
"ᛜ",
"ᛝ",
"ᛞ",
"ᛟ",
"ᛠ",
"ᛡ",
"ᛢ",
"ᛣ",
"ᛤ",
"ᛥ",
"ᛦ",
"ᛧ",
"ᛨ",
"ᛩ",
"ᛪ",
"᛫",
"",
"",
"ᛮ",
"ᛯ",
"ᛰ"
]