josch/ncase.me-trust
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

refactor all this crap

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/ui/button_long.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
assets/ui/button_short.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

35
css/slides.css
View file

@ -40,6 +40,12 @@ body{
/******* SLIDESHOW *******/
/*************************/
#slideshow_container{
width:0; height:0;
position:absolute;
margin:auto;
top:0; left:0; right:0; bottom:0;
}
#slideshow{
/*background: #bada55;*/
@ -49,8 +55,8 @@ body{
/* Center this thing */
position: absolute;
margin: auto;
top:0; left:0; right:0; bottom:0;
left:-480px;
top:-270px;
}
#slideshow .object{
@ -126,7 +132,7 @@ body{
z-index: 100;
}
.button[hover=yes] #background{
background-position: 0px -125px;
background-position: 0px -125px !important;
}
.button[deactivated=yes] #background{
background-position: 0px -250px;
@ -137,6 +143,29 @@ body{
.button[deactivated=yes] #hitbox{
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;
}
/*************************/

7
index.html
View file

@ -7,8 +7,10 @@
</head>
<body>
<div id="main">
<div id="slideshow"></div>
<div id="scratcher"></div>
<div id="slideshow_container">
<div id="slideshow"></div>
<div id="scratcher"></div>
</div>
</div>
<div id="footer">
<div id="select"></div>
@ -19,6 +21,7 @@
<!-- Libraries -->
<script src="js/lib/helpers.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/q.js"></script>
<script src="js/lib/pixi.min.js"></script>

11
js/core/Button.js
View file

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

8
js/core/IncDecNumber.js
View file

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

13
js/core/Scratcher.js
View file

@ -3,11 +3,23 @@
var Scratcher = {};
exports.Scratcher = Scratcher;
Scratcher.isTransitioning = false;
Scratcher.scratch = function(gotoID){
if(Scratcher.isTransitioning) return;
Scratcher.isTransitioning = true;
var dom = $("#scratcher");
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)
.then(function(){
if(gotoID){
@ -21,6 +33,7 @@ Scratcher.scratch = function(gotoID){
})
.then(function(){
dom.style.display = "none";
Scratcher.isTransitioning = false;
});
};

11
js/core/Slider.js
View file

@ -60,7 +60,7 @@ function Slider(config){
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
var _isDragging = false;
@ -101,13 +101,14 @@ function Slider(config){
////////////////////////////////////////
// Add...
self.add = function(INSTANT){
return _add(self, INSTANT);
self.add = function(){
_add(self);
};
// Remove...
self.remove = function(INSTANT){
return _remove(self, INSTANT);
self.remove = function(){
unlisten(self);
_remove(self);
};
}

4
js/core/Slideshow.js
View file

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

34
js/lib/helpers.js
View file

@ -72,6 +72,7 @@ var _makeLabel = function(wordID, config){
if(config.align!==undefined) dom.style.textAlign = config.align;
if(config.color!==undefined) dom.style.color = config.color;
if(config.size!==undefined) dom.style.fontSize = config.size;
if(config.width!==undefined) dom.style.width = config.width;
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:
_makeSprite("bg", {width:960});

15
js/sims/Iterated.js
View file

@ -25,13 +25,13 @@ function Iterated(config){
self.dom.appendChild(app.view);
// 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);
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);
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);
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);
///////////////////////////////////////////////
@ -144,17 +144,17 @@ function Iterated(config){
};
subscribe("iterated/cooperate", function(){
listen(self, "iterated/cooperate", function(){
publish("iterated/round/start");
self.playOneRound(PD.COOPERATE);
});
subscribe("iterated/cheat", function(){
listen(self, "iterated/cheat", function(){
publish("iterated/round/start");
self.playOneRound(PD.CHEAT);
});
subscribe("iterated/newOpponent", function(id){
listen(self, "iterated/newOpponent", function(id){
self.chooseOpponent(id);
self.playerA.resetFace();
self.playerB.resetFace();
@ -173,6 +173,7 @@ function Iterated(config){
// Remove...
self.remove = function(INSTANT){
app.destroy();
unlisten(self);
return _remove(self);
};

28
js/sims/SandboxUI.js
View file

@ -2,6 +2,7 @@ function SandboxUI(config){
var self = this;
self.id = config.id;
self.slideshow = config.slideshow;
// Create DOM
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");
});
subscribe("tournament/autoplay/start",function(){
listen(self, "tournament/autoplay/start",function(){
playButton.setText("label_stop");
});
dom.appendChild(playButton.dom);
@ -103,6 +104,7 @@ function SandboxUI(config){
page.appendChild(_makeLabel("sandbox_population", {x:0, y:0, w:433}));
// Create an icon, label, and slider... that all interact with each other.
var sliders = [];
var _makePopulationControl = function(x, y, peepID, defaultValue){
// DOM
@ -134,7 +136,7 @@ function SandboxUI(config){
popAmount.style.textAlign = "right";
popAmount.style.color = PEEP_METADATA[peepID].color;
popDOM.appendChild(popAmount);
subscribe(message, function(value){
listen(self, message, function(value){
popAmount.innerHTML = value;
});
@ -151,6 +153,8 @@ function SandboxUI(config){
_adjustPopulation(peepID, value);
}
});
sliders.push(popSlider);
popSlider.slideshow = self.slideshow;
popDOM.appendChild(popSlider.dom);
})(peepID);
@ -312,9 +316,10 @@ function SandboxUI(config){
publish("pd/editPayoffs/"+letter,[value]);
}
});
subscribe("pd/editPayoffs/"+letter,function(value){
listen(self, "pd/editPayoffs/"+letter,function(value){
number.setValue(value);
});
number.slideshow = self.slideshow;
page.appendChild(number.dom);
numbers.push(number);
@ -350,7 +355,9 @@ function SandboxUI(config){
min:1, max:50, step:1,
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?
words = words.replace(/\[N\]/g, value+""); // replace [N] with the number value
rule_turns.innerHTML = words;
@ -365,7 +372,9 @@ function SandboxUI(config){
min:1, max:12, step:1,
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?
words = words.replace(/\[N\]/g, value+""); // replace [N] with the number value
rule_evolution.innerHTML = words;
@ -380,7 +389,9 @@ function SandboxUI(config){
min:0.00, max:0.50, step:0.01,
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);
var words = Words.get("sandbox_rules_3");
words = words.replace(/\[N\]/g, value+""); // replace [N] with the number value
@ -405,6 +416,9 @@ function SandboxUI(config){
// Remove...
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);
};

20
js/sims/Tournament.js
View file

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

4
js/slides/0_Slides_Intro.js
View file

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

4
js/slides/1_Slides_OneOff.js
View file

@ -20,14 +20,14 @@ SLIDES.push({
// Buttons
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(){
_.answer = "CHEAT";
publish("slideshow/next");
}
});
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(){
_.answer = "COOPERATE";
publish("slideshow/next");

9
js/slides/2_Slides_Iterated.js
View file

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

4
js/slides/3_Slides_Tournament.js
View file

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

4
js/slides/4_Slides_Evolution.js
View file

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

4
lang/en.html
View file

@ -99,10 +99,10 @@ GRUDGER: "Listen y'all – I start Cooperatin', and I'll keep on Cooperatin'...
<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."
<br><br>
now what if these characters...
now what if these characters were to play...
</p>
<p id="characters_button">
...were to play against each other? &rarr;
...against each other? &rarr;
</p>
<p id="place_your_bets">