refactor all this crap

This commit is contained in:
Nicky Case 2017-07-13 11:07:33 -04:00
parent 0c610b1e14
commit eaef2c71e4
19 changed files with 160 additions and 55 deletions

BIN
assets/ui/button_long.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

BIN
assets/ui/button_short.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View file

@ -40,6 +40,12 @@ body{
/******* SLIDESHOW *******/ /******* SLIDESHOW *******/
/*************************/ /*************************/
#slideshow_container{
width:0; height:0;
position:absolute;
margin:auto;
top:0; left:0; right:0; bottom:0;
}
#slideshow{ #slideshow{
/*background: #bada55;*/ /*background: #bada55;*/
@ -49,8 +55,8 @@ body{
/* Center this thing */ /* Center this thing */
position: absolute; position: absolute;
margin: auto; left:-480px;
top:0; left:0; right:0; bottom:0; top:-270px;
} }
#slideshow .object{ #slideshow .object{
@ -126,7 +132,7 @@ body{
z-index: 100; z-index: 100;
} }
.button[hover=yes] #background{ .button[hover=yes] #background{
background-position: 0px -125px; background-position: 0px -125px !important;
} }
.button[deactivated=yes] #background{ .button[deactivated=yes] #background{
background-position: 0px -250px; background-position: 0px -250px;
@ -137,6 +143,29 @@ body{
.button[deactivated=yes] #hitbox{ .button[deactivated=yes] #hitbox{
display: none; display: none;
} }
.button[size=short] #background{
background: url(../assets/ui/button_short.png);
background-size: 100%;
width:150px; left:-20px;
}
.button[size=short] #text{
width:105px;
}
.button[size=short] #hitbox{
width:115px;
}
.button[size=long] #background{
background: url(../assets/ui/button_long.png);
background-size: 100%;
width:400px;
}
.button[size=long] #text{
width:330px;
top: 11px;
}
.button[size=long] #hitbox{
width:345px;
}
/*************************/ /*************************/

View file

@ -7,8 +7,10 @@
</head> </head>
<body> <body>
<div id="main"> <div id="main">
<div id="slideshow"></div> <div id="slideshow_container">
<div id="scratcher"></div> <div id="slideshow"></div>
<div id="scratcher"></div>
</div>
</div> </div>
<div id="footer"> <div id="footer">
<div id="select"></div> <div id="select"></div>
@ -19,6 +21,7 @@
<!-- Libraries --> <!-- Libraries -->
<script src="js/lib/helpers.js"></script> <script src="js/lib/helpers.js"></script>
<script src="js/lib/pegasus.js"></script> <script src="js/lib/pegasus.js"></script>
<script>var c_ = {};</script>
<script src="js/lib/minpubsub.src.js"></script> <script src="js/lib/minpubsub.src.js"></script>
<script src="js/lib/q.js"></script> <script src="js/lib/q.js"></script>
<script src="js/lib/pixi.min.js"></script> <script src="js/lib/pixi.min.js"></script>

View file

@ -8,6 +8,7 @@ function Button(config){
button.className = "object"; button.className = "object";
button.classList.add("fader"); button.classList.add("fader");
button.classList.add("button"); button.classList.add("button");
if(config.size) button.setAttribute("size", config.size);
self.dom = button; self.dom = button;
// BG // BG
@ -28,10 +29,9 @@ function Button(config){
text.style.fontSize = config.fontSize; text.style.fontSize = config.fontSize;
text.style.top = 14+(20-config.fontSize); text.style.top = 14+(20-config.fontSize);
} }
config.upperCase = (config.upperCase===undefined) ? true : config.upperCase;
self.setText = function(text_id){ self.setText = function(text_id){
var words = Words.get(text_id); var words = Words.get(text_id);
if(config.upperCase) words=words.toUpperCase(); if(config.uppercase) words = words.toUpperCase();
text.innerHTML = words; text.innerHTML = words;
}; };
self.setText(config.text_id); self.setText(config.text_id);
@ -67,8 +67,10 @@ function Button(config){
if(!config.active) self.deactivate(); if(!config.active) self.deactivate();
// Listeners! // Listeners!
subscribe(self.id+"/activate", self.activate); if(self.id){
subscribe(self.id+"/deactivate", self.deactivate); listen(self, self.id+"/activate", self.activate);
listen(self, self.id+"/deactivate", self.deactivate);
}
// Add... // Add...
self.add = function(INSTANT){ self.add = function(INSTANT){
@ -77,6 +79,7 @@ function Button(config){
// Remove... // Remove...
self.remove = function(INSTANT){ self.remove = function(INSTANT){
unlisten(self);
return _removeFade(self, INSTANT); return _removeFade(self, INSTANT);
}; };

View file

@ -69,13 +69,13 @@ function IncDecNumber(config){
/////////////////////////////////////// ///////////////////////////////////////
// Add... // Add...
self.add = function(INSTANT){ self.add = function(){
return _addFade(self, INSTANT); _add(self);
}; };
// Remove... // Remove...
self.remove = function(INSTANT){ self.remove = function(){
return _removeFade(self, INSTANT); _remove(self);
}; };
} }

View file

@ -3,11 +3,23 @@
var Scratcher = {}; var Scratcher = {};
exports.Scratcher = Scratcher; exports.Scratcher = Scratcher;
Scratcher.isTransitioning = false;
Scratcher.scratch = function(gotoID){ Scratcher.scratch = function(gotoID){
if(Scratcher.isTransitioning) return;
Scratcher.isTransitioning = true;
var dom = $("#scratcher"); var dom = $("#scratcher");
dom.style.display = "block"; dom.style.display = "block";
var width = $("#main").clientWidth;
var height = $("#main").clientHeight;
dom.style.width = width+"px";
dom.style.height = height+"px";
dom.style.left = -width/2+"px";
dom.style.top = -height/2+"px";
Scratcher.scratchAnim(true) Scratcher.scratchAnim(true)
.then(function(){ .then(function(){
if(gotoID){ if(gotoID){
@ -21,6 +33,7 @@ Scratcher.scratch = function(gotoID){
}) })
.then(function(){ .then(function(){
dom.style.display = "none"; dom.style.display = "none";
Scratcher.isTransitioning = false;
}); });
}; };

View file

@ -60,7 +60,7 @@ function Slider(config){
knob.style.left = param*(config.width-30); knob.style.left = param*(config.width-30);
}; };
if(config.message) subscribe(config.message, self.setValue); if(config.message) listen(self, config.message, self.setValue);
// Mouse events // Mouse events
var _isDragging = false; var _isDragging = false;
@ -101,13 +101,14 @@ function Slider(config){
//////////////////////////////////////// ////////////////////////////////////////
// Add... // Add...
self.add = function(INSTANT){ self.add = function(){
return _add(self, INSTANT); _add(self);
}; };
// Remove... // Remove...
self.remove = function(INSTANT){ self.remove = function(){
return _remove(self, INSTANT); unlisten(self);
_remove(self);
}; };
} }

View file

@ -14,6 +14,9 @@ function Slideshow(config){
// Reset: INITIAL VARIABLES // Reset: INITIAL VARIABLES
self.reset = function(){ self.reset = function(){
// CLEAR
if(self.clear) self.clear();
// On End? // On End?
if(self.currentSlide && self.currentSlide.onend){ if(self.currentSlide && self.currentSlide.onend){
self.currentSlide.onend(self); self.currentSlide.onend(self);
@ -76,6 +79,7 @@ function Slideshow(config){
// Create object // Create object
var Classname = window[objectConfig.type]; var Classname = window[objectConfig.type];
objectConfig.slideshow = self;
var obj = new Classname(objectConfig); var obj = new Classname(objectConfig);
obj.slideshow = self; obj.slideshow = self;

View file

@ -72,6 +72,7 @@ var _makeLabel = function(wordID, config){
if(config.align!==undefined) dom.style.textAlign = config.align; if(config.align!==undefined) dom.style.textAlign = config.align;
if(config.color!==undefined) dom.style.color = config.color; if(config.color!==undefined) dom.style.color = config.color;
if(config.size!==undefined) dom.style.fontSize = config.size; if(config.size!==undefined) dom.style.fontSize = config.size;
if(config.width!==undefined) dom.style.width = config.width;
return dom; return dom;
@ -87,6 +88,39 @@ var _s = function(seconds){
/******* /*******
Hook listeners to an object,
and unsubscribe ALL AT ONCE
*******/
var _listeners = [];
var listen = function(object, message, callback){
var handler = subscribe(message, callback);
_listeners.push({
object: object,
handler: handler
});
};
var unlisten = function(object){
var objectListeners = _listeners.filter(function(l){
return l.object==object;
});
objectListeners.forEach(function(objectListener){
unsubscribe(objectListener.handler); // unsubscribe
_listeners.splice(_listeners.indexOf(objectListener), 1); // but also FORGET it
});
}
var debugListeners = function(){
var count = 0;
for(var sub in c_){
count += c_[sub].length;
}
console.log("there are currently "+count+" listeners!");
};
/*******
Make a Sprite. e.g: Make a Sprite. e.g:
_makeSprite("bg", {width:960}); _makeSprite("bg", {width:960});

View file

@ -25,13 +25,13 @@ function Iterated(config){
self.dom.appendChild(app.view); self.dom.appendChild(app.view);
// LABELS // LABELS
var _l1 = _makeLabel("label_cooperate", {x:349, y:45, rotation:45, align:"center", color:"#333333", size:15}); var _l1 = _makeLabel("label_cooperate", {x:350, y:42, rotation:45, align:"center", color:"#333333", size:15, width:70});
self.dom.appendChild(_l1); self.dom.appendChild(_l1);
var _l2 = _makeLabel("label_cooperate", {x:277, y:45, rotation:-45, align:"center", color:"#333333", size:15}); var _l2 = _makeLabel("label_cooperate", {x:277, y:43, rotation:-45, align:"center", color:"#333333", size:15, width:70});
self.dom.appendChild(_l2); self.dom.appendChild(_l2);
var _l3 = _makeLabel("label_cheat", {x:416, y:96, rotation:45, align:"center", color:"#333333", size:15}); var _l3 = _makeLabel("label_cheat", {x:402, y:94, rotation:45, align:"center", color:"#333333", size:15, width:70});
self.dom.appendChild(_l3); self.dom.appendChild(_l3);
var _l4 = _makeLabel("label_cheat", {x:244, y:95, rotation:-45, align:"center", color:"#333333", size:15}); var _l4 = _makeLabel("label_cheat", {x:229, y:91, rotation:-45, align:"center", color:"#333333", size:15, width:70});
self.dom.appendChild(_l4); self.dom.appendChild(_l4);
/////////////////////////////////////////////// ///////////////////////////////////////////////
@ -144,17 +144,17 @@ function Iterated(config){
}; };
subscribe("iterated/cooperate", function(){ listen(self, "iterated/cooperate", function(){
publish("iterated/round/start"); publish("iterated/round/start");
self.playOneRound(PD.COOPERATE); self.playOneRound(PD.COOPERATE);
}); });
subscribe("iterated/cheat", function(){ listen(self, "iterated/cheat", function(){
publish("iterated/round/start"); publish("iterated/round/start");
self.playOneRound(PD.CHEAT); self.playOneRound(PD.CHEAT);
}); });
subscribe("iterated/newOpponent", function(id){ listen(self, "iterated/newOpponent", function(id){
self.chooseOpponent(id); self.chooseOpponent(id);
self.playerA.resetFace(); self.playerA.resetFace();
self.playerB.resetFace(); self.playerB.resetFace();
@ -173,6 +173,7 @@ function Iterated(config){
// Remove... // Remove...
self.remove = function(INSTANT){ self.remove = function(INSTANT){
app.destroy(); app.destroy();
unlisten(self);
return _remove(self); return _remove(self);
}; };

View file

@ -2,6 +2,7 @@ function SandboxUI(config){
var self = this; var self = this;
self.id = config.id; self.id = config.id;
self.slideshow = config.slideshow;
// Create DOM // Create DOM
self.dom = document.createElement("div"); self.dom = document.createElement("div");
@ -22,10 +23,10 @@ function SandboxUI(config){
} }
} }
}); });
subscribe("tournament/autoplay/stop",function(){ listen(self, "tournament/autoplay/stop",function(){
playButton.setText("label_play"); playButton.setText("label_play");
}); });
subscribe("tournament/autoplay/start",function(){ listen(self, "tournament/autoplay/start",function(){
playButton.setText("label_stop"); playButton.setText("label_stop");
}); });
dom.appendChild(playButton.dom); dom.appendChild(playButton.dom);
@ -103,6 +104,7 @@ function SandboxUI(config){
page.appendChild(_makeLabel("sandbox_population", {x:0, y:0, w:433})); page.appendChild(_makeLabel("sandbox_population", {x:0, y:0, w:433}));
// Create an icon, label, and slider... that all interact with each other. // Create an icon, label, and slider... that all interact with each other.
var sliders = [];
var _makePopulationControl = function(x, y, peepID, defaultValue){ var _makePopulationControl = function(x, y, peepID, defaultValue){
// DOM // DOM
@ -134,7 +136,7 @@ function SandboxUI(config){
popAmount.style.textAlign = "right"; popAmount.style.textAlign = "right";
popAmount.style.color = PEEP_METADATA[peepID].color; popAmount.style.color = PEEP_METADATA[peepID].color;
popDOM.appendChild(popAmount); popDOM.appendChild(popAmount);
subscribe(message, function(value){ listen(self, message, function(value){
popAmount.innerHTML = value; popAmount.innerHTML = value;
}); });
@ -151,6 +153,8 @@ function SandboxUI(config){
_adjustPopulation(peepID, value); _adjustPopulation(peepID, value);
} }
}); });
sliders.push(popSlider);
popSlider.slideshow = self.slideshow;
popDOM.appendChild(popSlider.dom); popDOM.appendChild(popSlider.dom);
})(peepID); })(peepID);
@ -312,9 +316,10 @@ function SandboxUI(config){
publish("pd/editPayoffs/"+letter,[value]); publish("pd/editPayoffs/"+letter,[value]);
} }
}); });
subscribe("pd/editPayoffs/"+letter,function(value){ listen(self, "pd/editPayoffs/"+letter,function(value){
number.setValue(value); number.setValue(value);
}); });
number.slideshow = self.slideshow;
page.appendChild(number.dom); page.appendChild(number.dom);
numbers.push(number); numbers.push(number);
@ -350,7 +355,9 @@ function SandboxUI(config){
min:1, max:50, step:1, min:1, max:50, step:1,
message: "rules/turns" message: "rules/turns"
}); });
subscribe("rules/turns",function(value){ sliders.push(slider_turns);
slider_turns.slideshow = self.slideshow;
listen(self, "rules/turns",function(value){
var words = (value==1) ? Words.get("sandbox_rules_1_single") : Words.get("sandbox_rules_1"); // plural? var words = (value==1) ? Words.get("sandbox_rules_1_single") : Words.get("sandbox_rules_1"); // plural?
words = words.replace(/\[N\]/g, value+""); // replace [N] with the number value words = words.replace(/\[N\]/g, value+""); // replace [N] with the number value
rule_turns.innerHTML = words; rule_turns.innerHTML = words;
@ -365,7 +372,9 @@ function SandboxUI(config){
min:1, max:12, step:1, min:1, max:12, step:1,
message: "rules/evolution" message: "rules/evolution"
}); });
subscribe("rules/evolution",function(value){ sliders.push(slider_evolution);
slider_evolution.slideshow = self.slideshow;
listen(self, "rules/evolution",function(value){
var words = (value==1) ? Words.get("sandbox_rules_2_single") : Words.get("sandbox_rules_2"); // plural? var words = (value==1) ? Words.get("sandbox_rules_2_single") : Words.get("sandbox_rules_2"); // plural?
words = words.replace(/\[N\]/g, value+""); // replace [N] with the number value words = words.replace(/\[N\]/g, value+""); // replace [N] with the number value
rule_evolution.innerHTML = words; rule_evolution.innerHTML = words;
@ -380,7 +389,9 @@ function SandboxUI(config){
min:0.00, max:0.50, step:0.01, min:0.00, max:0.50, step:0.01,
message: "rules/noise" message: "rules/noise"
}); });
subscribe("rules/noise",function(value){ sliders.push(slider_noise);
slider_noise.slideshow = self.slideshow;
listen(self, "rules/noise",function(value){
value = Math.round(value*100); value = Math.round(value*100);
var words = Words.get("sandbox_rules_3"); var words = Words.get("sandbox_rules_3");
words = words.replace(/\[N\]/g, value+""); // replace [N] with the number value words = words.replace(/\[N\]/g, value+""); // replace [N] with the number value
@ -405,6 +416,9 @@ function SandboxUI(config){
// Remove... // Remove...
self.remove = function(INSTANT){ self.remove = function(INSTANT){
for(var i=0;i<numbers.length;i++) unlisten(numbers[i]);
for(var i=0;i<sliders.length;i++) unlisten(sliders[i]);
unlisten(self);
return _remove(self); return _remove(self);
}; };

View file

@ -165,7 +165,7 @@ function Tournament(config){
}; };
subscribe("tournament/reset", self.reset); listen(self, "tournament/reset", self.reset);
self.reset(); self.reset();
@ -278,9 +278,9 @@ function Tournament(config){
var _stopAutoPlay = function(){ var _stopAutoPlay = function(){
self.isAutoPlaying = false; self.isAutoPlaying = false;
}; };
subscribe("tournament/autoplay/start", _startAutoPlay); listen(self, "tournament/autoplay/start", _startAutoPlay);
subscribe("tournament/autoplay/stop", _stopAutoPlay); listen(self, "tournament/autoplay/stop", _stopAutoPlay);
subscribe("tournament/step", function(){ listen(self, "tournament/step", function(){
publish("tournament/autoplay/stop"); publish("tournament/autoplay/stop");
_nextStep(); _nextStep();
}); });
@ -358,17 +358,17 @@ function Tournament(config){
self.STAGE=STAGE_PLAY; self.STAGE=STAGE_PLAY;
// self.deactivateAllButtons(); // self.deactivateAllButtons();
}; };
subscribe("tournament/play", self._startPlay); listen(self, "tournament/play", self._startPlay);
self._startEliminate = function(){ self._startEliminate = function(){
self.STAGE=STAGE_ELIMINATE; self.STAGE=STAGE_ELIMINATE;
// self.deactivateAllButtons(); // self.deactivateAllButtons();
}; };
subscribe("tournament/eliminate", self._startEliminate); listen(self, "tournament/eliminate", self._startEliminate);
self._startReproduce = function(){ self._startReproduce = function(){
self.STAGE=STAGE_REPRODUCE; self.STAGE=STAGE_REPRODUCE;
// self.deactivateAllButtons(); // self.deactivateAllButtons();
}; };
subscribe("tournament/reproduce", self._startReproduce); listen(self, "tournament/reproduce", self._startReproduce);
// Add... // Add...
self.add = function(INSTANT){ self.add = function(INSTANT){
@ -379,6 +379,8 @@ function Tournament(config){
// TODO: KILL ALL LISTENERS, TOO. // TODO: KILL ALL LISTENERS, TOO.
// TODO: Don't screw up when paused or looking at new tab // TODO: Don't screw up when paused or looking at new tab
self.remove = function(INSTANT){ self.remove = function(INSTANT){
for(var i=0; i<self.agents.length; i++) unlisten(self.agents[i]);
unlisten(self);
app.destroy(); app.destroy();
return _remove(self); return _remove(self);
}; };
@ -514,7 +516,7 @@ function TournamentAgent(config){
}; };
self.updateScore(); self.updateScore();
scoreText.visible = false; scoreText.visible = false;
var _handle = subscribe("tournament/reproduce",function(){ listen(self, "tournament/reproduce",function(){
scoreText.visible = false; scoreText.visible = false;
}); });
@ -580,7 +582,7 @@ function TournamentAgent(config){
self.tournament.actuallyRemoveAgent(self); self.tournament.actuallyRemoveAgent(self);
// Unsub // Unsub
unsubscribe(_handle); unlisten(self);
}; };

View file

@ -30,8 +30,8 @@ SLIDES.push({
// Button // Button
self.add({ self.add({
id:"intro_button", type:"Button", x:385, y:466, id:"intro_button", type:"Button", x:304, y:466, size:"long",
text_id:"intro_button", fontSize:16, upperCase:false, text_id:"intro_button",
message:"slideshow/scratch" message:"slideshow/scratch"
}); });

View file

@ -20,14 +20,14 @@ SLIDES.push({
// Buttons // Buttons
self.add({ self.add({
id:"btnCheat", type:"Button", x:275, y:463, text_id:"label_cheat", id:"btnCheat", type:"Button", x:275, y:463, text_id:"label_cheat", uppercase:true,
onclick:function(){ onclick:function(){
_.answer = "CHEAT"; _.answer = "CHEAT";
publish("slideshow/next"); publish("slideshow/next");
} }
}); });
self.add({ self.add({
id:"btnCooperate", type:"Button", x:495, y:460, text_id:"label_cooperate", id:"btnCooperate", type:"Button", x:495, y:460, text_id:"label_cooperate", uppercase:true,
onclick:function(){ onclick:function(){
_.answer = "COOPERATE"; _.answer = "COOPERATE";
publish("slideshow/next"); publish("slideshow/next");

View file

@ -24,22 +24,22 @@ SLIDES.push({
ROUND_NUM = 0; ROUND_NUM = 0;
self.add({ self.add({
id:"buttonCheat", type:"Button", x:275, y:403, id:"buttonCheat", type:"Button", x:275, y:403, uppercase:true,
text_id:"label_cheat", text_id:"label_cheat",
message:"iterated/cheat" message:"iterated/cheat"
}); });
self.add({ self.add({
id:"buttonCooperate", type:"Button", x:495, y:400, id:"buttonCooperate", type:"Button", x:495, y:400, uppercase:true,
text_id:"label_cooperate", text_id:"label_cooperate",
message:"iterated/cooperate" message:"iterated/cooperate"
}); });
_.listenerRoundStart = subscribe("iterated/round/start", function(){ listen(self, "iterated/round/start", function(){
publish("buttonCheat/deactivate"); publish("buttonCheat/deactivate");
publish("buttonCooperate/deactivate"); publish("buttonCooperate/deactivate");
}); });
_.listenerRoundEnd = subscribe("iterated/round/end", function(){ listen(self, "iterated/round/end", function(){
publish("buttonCheat/activate"); publish("buttonCheat/activate");
publish("buttonCooperate/activate"); publish("buttonCooperate/activate");
@ -64,6 +64,7 @@ SLIDES.push({
}, },
onend: function(self){ onend: function(self){
unlisten(self);
self.clear(); self.clear();
} }

View file

@ -14,8 +14,8 @@ SLIDES.push({
// Button // Button
self.add({ self.add({
id:"button", type:"Button", x:385, y:466, id:"button", type:"Button", size:"long", x:385, y:466,
text_id:"characters_button", fontSize:16, upperCase:false, text_id:"characters_button",
message:"slideshow/scratch" message:"slideshow/scratch"
}); });

View file

@ -45,7 +45,7 @@ SLIDES.push({
// Button // Button
self.add({ self.add({
id:"button_step", type:"Button", id:"button_step", type:"Button",
x:510, y:300, x:510, y:300, size:"short",
text_id:"button_step", text_id:"button_step",
message: "tournament/step" message: "tournament/step"
}); });
@ -53,7 +53,7 @@ SLIDES.push({
// Button // Button
self.add({ self.add({
id:"button_next", type:"Button", id:"button_next", type:"Button",
x:510, y:400, x:510, y:400, size:"short",
text_id:"label_next", text_id:"label_next",
onclick:function(){ onclick:function(){
_.answer = "tft"; _.answer = "tft";

View file

@ -99,10 +99,10 @@ GRUDGER: "Listen y'all I start Cooperatin', and I'll keep on Cooperatin'...
<br><br> <br><br>
DETECTIVE: "First: I analyze you. I start: Cooperate, Cheat, Cooperate, Cooperate. Then: if you retaliated with a Cheat, I switch to playing Copycat. But: if you never fight back, I switch to Always Cheat. My dear Watson: elementary." DETECTIVE: "First: I analyze you. I start: Cooperate, Cheat, Cooperate, Cooperate. Then: if you retaliated with a Cheat, I switch to playing Copycat. But: if you never fight back, I switch to Always Cheat. My dear Watson: elementary."
<br><br> <br><br>
now what if these characters... now what if these characters were to play...
</p> </p>
<p id="characters_button"> <p id="characters_button">
...were to play against each other? &rarr; ...against each other? &rarr;
</p> </p>
<p id="place_your_bets"> <p id="place_your_bets">