refactor words and language

TODO.md

@@ -1,14 +1,15 @@
 MAJOR SHTUFF
 
-1. Sandbox with all parameters exposed // exposed... but time to make the UI!
-2. Repeated game with all parameters exposed
-3. Splash, with params for cool outro
-4. Integrate *everything*. // slides, outro
-5. Credits and rewards
+1. Create Sandbox
+2. Re-create Repeated Game w/ params exposed
+3. Re-create Splash, with cool outro
+4. Integrate & Write EVERYTHING
+5. Final round of playtesting
+6. Credits, Footnotes, Rewards
+7. Polish the whole dang thing
 
 MINOR SHTUFF
 
 - Word box class less annoying
 - Refactoring, ugh
-- Logic: Prober, Pavlov, TF2T, Random? // done
-- Slides in different files
+- Draw: Pavlov, TF2T, Random

css/slides.css

@@ -44,17 +44,28 @@ body{
 	position: absolute;
 }
 
+/********* Fader *********/
+
 .fader{
 	-webkit-transition: opacity 0.3s ease-in-out;
 	-mos-transition: opacity 0.3s ease-in-out;
 	-ms-transition: opacity 0.3s ease-in-out;
 	transition: opacity 0.3s ease-in-out;
 }
-.wordbox{
+
+/******** Text Box ********/
+
+.textbox{
 	font-family: 'FuturaHandwritten';
 	color: #333;
 	font-size: 20px;
 }
+.textbox > div{
+	position: absolute;
+}
+
+/********* Button ********/
+
 .button{
 	z-index: 0;
 }

index.html

@@ -16,6 +16,7 @@
 
 <!-- Libraries -->
 <script src="js/lib/helpers.js"></script>
+<script src="js/lib/pegasus.min.js"></script>
 <script src="js/lib/minpubsub.src.js"></script>
 <script src="js/lib/q.js"></script>
 <script src="js/lib/pixi.min.js"></script>
@@ -27,34 +28,41 @@
 <script src="js/core/Slideshow.js"></script>
 <script src="js/core/SlideSelect.js"></script>
 <script src="js/core/Button.js"></script>
-<script src="js/core/WordBox.js"></script>
+<script src="js/core/TextBox.js"></script>
+<script src="js/core/Words.js"></script>
 
 <!-- Simulations -->
 <script src="js/sims/PD.js"></script>
 <script src="js/sims/SillyPixi.js"></script>
 <script src="js/sims/Tournament.js"></script>
 
+<!-- Slides -->
+<script src="js/slides/Slides_Ecology.js"></script>
+
 <!-- Main Code -->
-<script src="js/main.js"></script>
 <script>
 var slideshow, slideSelect;
 window.onload = function(){
 
+	Words.convert("lang/en.html").then(function(){
+
 		// Slideshow
 		slideshow = new Slideshow({
 			dom: $("#slideshow"),
-		slides: slides
+			slides: SLIDES
 		});
 
 		// Slide Select
 		slideSelect = new SlideSelect({
 			dom: $("#select"),
-		slides: slides
+			slides: SLIDES
 		});
 
 		// First slide!
 		slideshow.nextSlide();
 		//slideshow.gotoSlide("intro1");
 
+	});
+
 };
 </script>

js/core/Button.js

@@ -24,7 +24,7 @@ function Button(config){
 	// Customize DOM
 	button.style.left = config.x+"px";
 	button.style.top = config.y+"px";
-	text.innerHTML = config.text;
+	text.innerHTML = Words.get(config.text_id);
 
 	// On hover...
 	hitbox.onmouseover = function(){

js/core/SlideSelect.js

@@ -16,7 +16,7 @@ function SlideSelect(config){
 	};
 
 	// Populate dots
-	for(var i=0; i<slides.length; i++) self.addDot(slides[i]);
+	for(var i=0; i<self.slides.length; i++) self.addDot(self.slides[i]);
 
 }
 

js/core/Slideshow.js

@@ -1,3 +1,5 @@
+var SLIDES = [];
+
 function Slideshow(config){
 
 	var self = this;

js/core/TextBox.js

@@ -0,0 +1,42 @@
+function TextBox(config){
+
+	var self = this;
+	self.id = config.id;
+
+	// Create DOM
+	self.dom = document.createElement("div");
+	self.dom.className = "object";
+	self.dom.classList.add("fader");
+	self.dom.classList.add("textbox");
+
+	// All the text boxes, yo
+	self.boxes = config.boxes;
+
+	// Create each textbox...
+	for(var i=0; i<self.boxes.length; i++){
+
+		// DOM
+		var textbox = document.createElement("div");
+		self.dom.appendChild(textbox);
+
+		// Customize
+		var box = self.boxes[i];
+		textbox.style.left = box.x+"px";
+		textbox.style.top = box.y+"px";
+		textbox.style.width = box.width+"px";
+		textbox.style.height = box.height+"px";
+		textbox.innerHTML = Words.get(box.text_id);
+
+	}
+
+	// Add...
+	self.add = function(INSTANT){
+		return _addFade(self, INSTANT);
+	};
+
+	// Remove...
+	self.remove = function(INSTANT){
+		return _removeFade(self, INSTANT);
+	};
+
+}

js/core/WordBox.js

@@ -1,30 +0,0 @@
-function WordBox(config){
-
-	var self = this;
-	self.id = config.id;
-
-	// Create DOM
-	var words = document.createElement("div");
-	words.className = "object";
-	words.classList.add("fader");
-	words.classList.add("wordbox");
-	self.dom = words;
-
-	// Customize DOM
-	words.style.left = config.x+"px";
-	words.style.top = config.y+"px";
-	words.style.width = config.width+"px";
-	words.style.height = config.height+"px";
-	words.innerHTML = config.text;
-
-	// Add...
-	self.add = function(INSTANT){
-		return _addFade(self, INSTANT);
-	};
-
-	// Remove...
-	self.remove = function(INSTANT){
-		return _removeFade(self, INSTANT);
-	};
-
-}

js/core/Words.js

@@ -0,0 +1,56 @@
+/**********************
+
+Convert a word.html to a JSON containing innerHTMLs
+
+**********************/
+
+window.Words = {};
+Words.text = null;
+
+Words.get = function(id){
+	return Words.text[id];
+};
+
+Words.convert = function(filepath){
+
+	// Promise
+	var deferred = Q.defer();
+
+	// Get dat stuff
+	var request = pegasus(filepath);
+	request.then(
+		
+		// success handler
+		function(data, xhr) {
+
+			// Convert HTML...
+			var words = document.createElement("div");
+			words.innerHTML = xhr.response;
+			var paragraphs = words.querySelectorAll("p");
+
+			// ...to a JSON
+			Words.text = {}; // new one!
+			for(var i=0;i<paragraphs.length;i++){
+				var p = paragraphs[i];
+				var id = p.id;
+				var html = p.innerHTML;
+				Words.text[id] = html;
+			}
+
+			// Fulfil promise!
+			deferred.resolve(Words.text);
+
+		},
+
+		// error handler (optional)
+		function(data, xhr) {
+			alert("AHHHHHHHHHHHH, PROBLEM LOADING WORDS");
+			console.error(data, xhr.status)
+		}
+
+	);
+
+	// Return Promise
+	return deferred.promise;
+
+};

js/lib/pegasus.min.js

@@ -0,0 +1,2 @@
+//0.3.5
+function pegasus(a,b,c){return c=new XMLHttpRequest,c.open("GET",a),a=[],pegasus.timeout&&(c.timeout=pegasus.timeout),c.ontimeout=function(a){b=a},c.onreadystatechange=c.then=function(d,e,f,g){if(d&&d.call&&(a=[,d,e]),b&&a[2]&&a[2](b,c),4==c.readyState&&(f=a[0|c.status/200])){try{g=JSON.parse(c.responseText)}catch(a){g=null}f(g,c)}},c.send(),c}

js/main.js

@@ -1,4 +1,4 @@
-var slides = [
+/*var slides = [
 
 // SIM
 {
@@ -104,4 +104,4 @@ var slides = [
 	]
 }
 
-];
+];*/

js/sims/PD.js

@@ -11,7 +11,7 @@ PD.PAYOFFS_DEFAULT = {
 
 PD.PAYOFFS = PD.PAYOFFS_DEFAULT;
 
-PD.NOISE = 0.0;
+PD.NOISE = 0;
 
 PD.getPayoffs = function(move1, move2){
 	var payoffs = PD.PAYOFFS;
@@ -179,7 +179,7 @@ function Logic_prober(){
 	self.play = function(){
 		if(moves.length>0){
 			// Testing phase
-			var move = moves.pop();
+			var move = moves.shift();
 			return move;
 		}else{
 			if(everCheatedMe){

js/sims/Tournament.js

@@ -1,12 +1,22 @@
 Tournament.SELECTION = 5;
-Tournament.NUM_TURNS = 5;
+Tournament.NUM_TURNS = 20;
 
 // CREATE A RING OF AGENTS
-Tournament.AGENTS = [
+/*Tournament.AGENTS = [
 	{strategy:"all_c", count:15},
 	{strategy:"all_d", count:5},
 	{strategy:"grim", count:0},
 	{strategy:"tft", count:5},
+];*/
+Tournament.AGENTS = [
+	{strategy:"all_c", count:15},
+	{strategy:"all_d", count:5},
+	{strategy:"tft", count:5},
+	//{strategy:"grim", count:3},
+	//{strategy:"prober", count:3},
+	//{strategy:"tf2t", count:13},
+	//{strategy:"pavlov", count:13},
+	//{strategy:"random", count:13}
 ];
 
 function Tournament(config){

js/slides/Slides_Ecology.js

@@ -0,0 +1,39 @@
+SLIDES.push({
+
+	id: "sim",
+	add:[
+
+		// The tournament simulation
+		{id:"tournament", type:"Tournament", x:0, y:20},
+
+		// All the words!
+		{
+			id:"textbox", type:"TextBox",
+			boxes:[
+				{ x:500, y:0, width:460, height:50, text_id:"sandbox_1" },
+				{ x:500, y:370, width:460, height:200, text_id:"sandbox_2" }
+			]
+		},
+
+		// Buttons
+		{
+			id:"_b1", type:"Button", x:500, y:150, width:140,
+			text_id: "label_play_tournament",
+			message: "tournament/play"
+		},
+		{
+			id:"_b2", type:"Button", x:500, y:220, width:140,
+			text_id: "label_eliminate_bottom_5",
+			message: "tournament/eliminate",
+			active:false
+		},
+		{
+			id:"_b3", type:"Button", x:500, y:290, width:140,
+			text_id: "label_reproduce_top_5",
+			message: "tournament/reproduce",
+			active:false
+		}
+
+	]
+
+});

lang/en.html

@@ -0,0 +1,32 @@
+
+<!-- SANDBOX! -->
+
+<p id="label_play_tournament">
+1) play tournament
+</p>
+
+<p id="label_eliminate_bottom_5">
+2) eliminate bottom 5
+</p>
+
+<p id="label_reproduce_top_5">
+3) reproduce top 5
+</p>
+
+<p id="sandbox_1">
+Let's say there are three kinds of players:
+<br>
+<span style='color:#FF75FF;'>Always Cooperate</span>,
+<span style='color:#52537F;'>Always Cheat</span> &amp;
+<span style='color:#4089DD;'>Tit For Tat</span>
+<br><br>
+"What happens when you let a mixed population play against each other, and evolve over time?
+</p>
+
+<p id="sandbox_2">
+Always Cheat dominates at first, but when it runs out of suckers to exploit, 
+its empire collapses – and the fairer Tit For Tat takes over.
+<br><br>
+<i>We are not punished for our sins, but by them.</i><br>
+- Elbert Hubbard
+</p>