distrust DONE

css/slides.css

@@ -35,6 +35,9 @@ body{
 	height: 60px;
 	background: #222;
 }
+s{
+	text-decoration: line-through;
+}
 
 /*************************/
 /******* SLIDESHOW *******/
@@ -85,6 +88,13 @@ body{
 
 /********* Button ********/
 
+.no-select{
+	-webkit-user-select: none;  /* Chrome all / Safari all */
+	-moz-user-select: none;     /* Firefox all */
+	-ms-user-select: none;      /* IE 10+ */
+	user-select: none; 
+	cursor: default;
+}
 .button{
 	z-index: 0;
 	-webkit-user-select: none;  /* Chrome all / Safari all */
@@ -151,6 +161,8 @@ body{
 }
 .button[size=short] #text{
 	width:105px;
+	font-size: 18px;
+    top: 18px;
 }
 .button[size=short] #hitbox{
 	width:115px;
@@ -251,6 +263,14 @@ body{
 	width:30px; height:30px;
 	background: url(../assets/ui/slider_knob.png);
 	background-size: 100% 100%;
+	cursor: -webkit-grab;
+	cursor: -moz-grab;
+	cursor: grab;
+}
+.slider > .slider_knob:active{
+	cursor: -webkit-grabbing;
+	cursor: -moz-grabbing;
+	cursor: grabbing;
 }
 
 .sandbox_pop{

index.html

@@ -42,6 +42,7 @@
 <script src="js/core/Scratcher.js"></script>
 <script src="js/core/Background.js"></script>
 <script src="js/core/ImageBox.js"></script>
+<script src="js/core/PayoffsUI.js"></script>
 
 <!-- Simulations -->
 <script src="js/sims/Splash.js"></script>
@@ -87,7 +88,7 @@ window.onload = function(){
 
 		// First slide!
 		//slideshow.nextSlide();
-		slideshow.gotoSlide("evolution");
+		slideshow.gotoSlide("distrust");
 
 	});
 

js/core/IncDecNumber.js

@@ -36,7 +36,7 @@ function IncDecNumber(config){
 
 		// Value & UI
 		self.value = value;
-		num.innerHTML = self.value;
+		num.innerHTML = (self.value>0) ? "+"+self.value : self.value;
 
 	};
 	self.setValue(config.value);

js/core/PayoffsUI.js

@@ -0,0 +1,78 @@
+function PayoffsUI(config){
+
+	var self = this;
+	self.id = config.id;
+	self.slideshow = config.slideshow;
+
+	// Create DOM
+	self.dom = document.createElement("div");
+	self.dom.className = "object";
+	var dom = self.dom;
+	_configText(config, dom);
+	if(config.scale){
+		dom.style.transform = "scale("+config.scale+","+config.scale+")";
+	}
+	
+	// Add Image Background
+	var bg = new ImageBox({
+		src: "assets/ui/payoffs_ui.png",
+		x:0, y:0, width:300, height:300
+	});
+	dom.appendChild(bg.dom);
+
+	// Labels
+	dom.appendChild(_makeLabel("label_cooperate", {x:148, y:17, rotation:45, align:"center", color:"#cccccc"}));
+	dom.appendChild(_makeLabel("label_cooperate", {x:52, y:17, rotation:-45, align:"center", color:"#cccccc"}));
+	dom.appendChild(_makeLabel("label_cheat", {x:245, y:90, rotation:45, align:"center", color:"#cccccc"}));
+	dom.appendChild(_makeLabel("label_cheat", {x:6, y:90, rotation:-45, align:"center", color:"#cccccc"}));
+
+	// Inc(rement) De(crement) Numbers
+	// which are symmetrical, and update each other!
+	var numbers = [];
+	var _makeIncDec = function(letter,x,y){
+		(function(letter,x,y){
+
+			var number = new IncDecNumber({
+				x:x, y:y, max:5, min:-5,
+				value: PD.PAYOFFS[letter],
+				onchange: function(value){
+					publish("pd/editPayoffs/"+letter,[value]);
+					publish("payoffs/onchange");
+				}
+			});
+			listen(self, "pd/editPayoffs/"+letter,function(value){
+				number.setValue(value);
+			});
+			number.slideshow = self.slideshow;
+			dom.appendChild(number.dom);
+			numbers.push(number);
+
+		})(letter,x,y);
+	};
+
+	_makeIncDec("R", 191-64, 127-47);
+	_makeIncDec("R", 233-64, 127-47);
+
+	_makeIncDec("T", 121-64, 197-47);
+	_makeIncDec("S", 161-64, 197-47);
+
+	_makeIncDec("S", 263-64, 197-47);
+	_makeIncDec("T", 306-64, 197-47);
+
+	_makeIncDec("P", 192-64, 268-47);
+	_makeIncDec("P", 232-64, 268-47);
+
+	// Add & Remove
+	self.add = function(){ _add(self); };
+	self.remove = function(){
+		unlisten(self);
+		for(var i=0;i<numbers.length;i++) unlisten(numbers[i]);
+		for(var i=0;i<self.slideshow.dom.children.length;i++){
+			if(self.slideshow.dom.children[i]==self.dom){
+				_remove(self);
+				break;
+			}
+		}
+	};
+
+}

js/core/Slideshow.js

@@ -15,8 +15,9 @@ function Slideshow(config){
 	self.reset = function(){
 
 		// On End?
-		if(self.currentSlide && self.currentSlide.onend){
+		if(self.currentSlide){
-			self.currentSlide.onend(self);
+			if(self.currentSlide.onend) self.currentSlide.onend(self);
+			unlisten(_); // hax
 		}
 
 		// CLEAR
@@ -114,7 +115,7 @@ function Slideshow(config){
 	// FORCE go to a certain slide
 	self.gotoSlide = function(id){
 
-		// Go ALL the way to the past
+		// RESET IT ALL.
 		self.reset();
 
 		// Slide & SlideIndex

js/lib/helpers.js

@@ -48,6 +48,8 @@ var _configText = function(config, dom){
 	if(config.w!==undefined) dom.style.width = config.w+"px";
 	if(config.h!==undefined) dom.style.height = config.h+"px";
 
+	if(config.noSelect) dom.classList.add("no-select");
+
 	if(config.rotation!==undefined) dom.style.transform = "rotate("+config.rotation+"deg)";
 	if(config.align!==undefined) dom.style.textAlign = config.align;
 	if(config.color!==undefined) dom.style.color = config.color;

js/sims/Iterated.js

@@ -3,7 +3,6 @@ Loader.addToManifest(Loader.manifest,{
 	iterated_machine: "assets/iterated/iterated_machine.json",
 	iterated_payoffs: "assets/iterated/iterated_payoffs.json",
 	iterated_peep: "assets/iterated/iterated_peep.json"
-	//iterated_scoreboard: "assets/iterated/iterated_scoreboard.json"
 });
 
 function Iterated(config){

js/sims/SandboxUI.js

@@ -14,7 +14,7 @@ function SandboxUI(config){
 	/////////////////////////////////////////
 
 	var playButton = new Button({
-		x:130, y:135, text_id:"label_play",
+		x:130, y:135, text_id:"label_start",
 		onclick: function(){
 			if(slideshow.objects.tournament.isAutoPlaying){
 				publish("tournament/autoplay/stop");
@@ -24,7 +24,7 @@ function SandboxUI(config){
 		}
 	});
 	listen(self, "tournament/autoplay/stop",function(){
-		playButton.setText("label_play");
+		playButton.setText("label_start");
 	});
 	listen(self, "tournament/autoplay/start",function(){
 		playButton.setText("label_stop");
@@ -298,48 +298,16 @@ function SandboxUI(config){
 
 	// Labels
 	page.appendChild(_makeLabel("sandbox_payoffs", {x:0, y:0, w:433}));
-	page.appendChild(_makeLabel("label_cooperate", {x:212, y:64, rotation:45, align:"center", color:"#cccccc"}));
+	
-	page.appendChild(_makeLabel("label_cooperate", {x:116, y:64, rotation:-45, align:"center", color:"#cccccc"}));
+	// PAYOFFS
-	page.appendChild(_makeLabel("label_cheat", {x:309, y:137, rotation:45, align:"center", color:"#cccccc"}));
+	var payoffsUI = new PayoffsUI({x:64, y:47, slideshow:self});
-	page.appendChild(_makeLabel("label_cheat", {x:70, y:137, rotation:-45, align:"center", color:"#cccccc"}));
+	page.appendChild(payoffsUI.dom);
-
-	// Inc(rement) De(crement) Numbers
-	// which are symmetrical, and update each other!
-	var numbers = [];
-	var _makeIncDec = function(letter,x,y){
-		(function(letter,x,y){
-
-			var number = new IncDecNumber({
-				x:x, y:y, max:5, min:-5,
-				value: PD.PAYOFFS_DEFAULT[letter],
-				onchange: function(value){
-					publish("pd/editPayoffs/"+letter,[value]);
-				}
-			});
-			listen(self, "pd/editPayoffs/"+letter,function(value){
-				number.setValue(value);
-			});
-			number.slideshow = self.slideshow;
-			page.appendChild(number.dom);
-			numbers.push(number);
-
-		})(letter,x,y);
-	};
-
-	_makeIncDec("R", 191, 127);
-	_makeIncDec("R", 233, 127);
-
-	_makeIncDec("T", 121, 197);
-	_makeIncDec("S", 161, 197);
-
-	_makeIncDec("S", 263, 197);
-	_makeIncDec("T", 306, 197);
-
-	_makeIncDec("P", 192, 268);
-	_makeIncDec("P", 232, 268);
 
 	// Reset
-	var resetPayoffs = new Button({x:240, y:300, text_id:"sandbox_reset_payoffs", message:"pd/defaultPayoffs"});
+	var resetPayoffs = new Button({
+		x:320, y:300, text_id:"sandbox_reset_payoffs", size:"short",
+		message:"pd/defaultPayoffs"
+	});
 	page.appendChild(resetPayoffs.dom);
 
 	/////////////////////////////////////////
@@ -369,7 +337,7 @@ function SandboxUI(config){
 	var rule_evolution = _makeLabel("sandbox_rules_2", {x:0, y:100, w:433});
 	var slider_evolution = new Slider({
 		x:0, y:165, width:430,
-		min:1, max:12, step:1,
+		min:1, max:10, step:1,
 		message: "rules/evolution"
 	});
 	sliders.push(slider_evolution);
@@ -416,7 +384,8 @@ function SandboxUI(config){
 
 	// Remove...
 	self.remove = function(){
-		for(var i=0;i<numbers.length;i++) unlisten(numbers[i]);
+		payoffsUI.remove();
+		//for(var i=0;i<numbers.length;i++) unlisten(numbers[i]);
 		for(var i=0;i<sliders.length;i++) unlisten(sliders[i]);
 		unlisten(self);
 		_remove(self);

js/slides/4_Slides_Evolution.js

@@ -300,7 +300,7 @@ SLIDES.push({
 
 		// Next
 		self.add({
-			id:"next", type:"Button", x:510, y:415, 
+			id:"next", type:"Button", x:510, y:425, 
 			text_id:"evo_11_btn", size:"long",
 			message: "slideshow/next"
 		});

js/slides/5_Slides_Distrust.js

@@ -4,13 +4,6 @@ SLIDES.push({
 
 		// Tournament
 		Tournament.resetGlobalVariables();
-		Tournament.INITIAL_AGENTS = [
-			{strategy:"tft", count:20},
-			{strategy:"all_d", count:1},
-			{strategy:"all_c", count:1},
-			{strategy:"grudge", count:1},
-			{strategy:"prober", count:1}
-		];
 		self.add({id:"tournament", type:"Tournament", x:-20, y:20});
 
 	},
@@ -22,11 +15,9 @@ SLIDES.push({
 		_.resetTournament = function(){
 			Tournament.resetGlobalVariables();
 			Tournament.INITIAL_AGENTS = [
-				{strategy:"tft", count:20},
+				{strategy:"all_c", count:23},
 				{strategy:"all_d", count:1},
-				{strategy:"all_c", count:1},
+				{strategy:"tft", count:1}
-				{strategy:"grudge", count:1},
-				{strategy:"prober", count:1}
 			];
 			o.tournament.reset();
 		};
@@ -35,7 +26,366 @@ SLIDES.push({
 		// Move tournament
 		o.tournament.dom.style.left = 480;
 
+		// Words to the side
+		self.add({
+			id:"text", type:"TextBox",
+			x:0, y:30, width:450, height:500,
+			text_id:"distrust_1"
+		});
+		_hide(o.text); _fadeIn(o.text, 600);
+
+		/////////////////////////////////////////
+		// BUTTONS for playing //////////////////
+		/////////////////////////////////////////
+
+		var x = 635;
+		var y = 175;
+		var dy = 70;
+		self.add({
+			id:"playButton", type:"Button",
+			x:x, y:y, text_id:"label_start",
+			onclick: function(){
+				if(o.tournament.isAutoPlaying){
+					publish("tournament/autoplay/stop");
+				}else{
+					publish("tournament/autoplay/start");
+				}
+			}
+		});
+		listen(_, "tournament/autoplay/stop",function(){
+			o.playButton.setText("label_start");
+		});
+		listen(_, "tournament/autoplay/start",function(){
+			o.playButton.setText("label_stop");
+		});
+		self.add({
+			id:"stepButton", type:"Button", 
+			x:x, y:y+dy, text_id:"label_step", message:"tournament/step"
+		});
+		self.add({
+			id:"resetButton", type:"Button",
+			x:x, y:y+dy*2, text_id:"label_reset", message:"tournament/reset"
+		});
+		_hide(o.playButton); _fadeIn(o.playButton, 800);
+		_hide(o.stepButton); _fadeIn(o.stepButton, 900);
+		_hide(o.resetButton); _fadeIn(o.resetButton, 1000);
+
+		///////////
+
+		_.misc = {};
+		listen(_.misc, "tournament/step/completed", function(step){
+			if(step=="reproduce"){
+				publish("slideshow/next");
+			}
+		});
+
+
+	},
+	onend: function(self){
+		unlisten(_.misc);
+	}
+});
+
+SLIDES.push({
+	onstart: function(self){
+		
+		var o = self.objects;
+
+		// Words
+		o.text.setTextID("distrust_2");
+		_hide(o.text); _fadeIn(o.text, 100);
+
+		// Slider Label & Slider
+		var x = 0;
+		var y = 350;
+		self.add({
+			id:"roundsLabel", type:"TextBox",
+			x:0, y:y, width:450, size:25, noSelect:true
+		});
+		self.add({
+			id:"roundsSlider", type:"Slider",
+			x:0, y:y+30, width:450,
+			min:1, max:20, step:1,
+			message: "rules/turns"
+		});
+		_.misc = {};
+		var _updateLabel = 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
+			o.roundsLabel.setText("<b>"+words+"</b>");
+		};
+		listen(_.misc, "rules/turns", function(value){
+			_updateLabel(value);
+			o.tournament.reset();
+		});
+		o.roundsSlider.setValue(10);
+		_updateLabel(10);
+		_hide(o.roundsLabel); _fadeIn(o.roundsLabel, 500);
+		_hide(o.roundsSlider); _fadeIn(o.roundsSlider, 500);
+
+		// Continue...
+		listen(_.misc, "tournament/autoplay/start",function(){
+			if(_showContinue) _showContinue();
+		});
+		var _showContinue = function(){
+			_showContinue = null;
+			var x = 125;
+			var y = 430;
+			self.add({
+				id:"continueLabel", type:"TextBox",
+				x:x, y:y+5, width:200, height:50,
+				align:"right", color:"#aaa", size:17,
+				text_id:"distrust_2_end"
+			});
+			self.add({
+				id:"continueButton", type:"Button",
+				x:x+215, y:y, size:"short",
+				text_id:"distrust_2_btn",
+				message: "slideshow/next"
+			});
+			_hide(o.continueLabel); _fadeIn(o.continueLabel, 100);
+			_hide(o.continueButton); _fadeIn(o.continueButton, 100);
+		};
+
+	},
+	onend: function(self){
+		unlisten(_.misc);
+		self.remove("roundsLabel");
+		self.remove("roundsSlider");
+		self.remove("continueLabel");
+		self.remove("continueButton");
+	}
+});
+
+// Explain that...
+SLIDES.push({
+	onstart: function(self){
+
+		var o = self.objects;
+
+		// Words
+		o.text.setTextID("distrust_3");
+		_hide(o.text); _fadeIn(o.text, 100);
+
+		// Worse...
+		self.add({
+			id:"next", type:"Button",
+			x:0, y:450, size:"long",
+			text_id:"distrust_3_btn",
+			message: "slideshow/next"
+		});
+		_hide(o.next); _fadeIn(o.next, 400);
+
+	},
+	onend: function(self){	
+		self.remove("text");
+		self.remove("next");
+	}
+});
+
+// Change PAYOFFS
+SLIDES.push({
+	onstart: function(self){
+
+		var o = self.objects;
+		_.misc = {};
+
+		// Words
+		self.add({
+			id:"text", type:"TextBox",
+			x:0, y:0, width:450, height:500,
+			text_id:"distrust_4"
+		});
+		_hide(o.text); _fadeIn(o.text, 100);
+
+		// PAYOFFS
+		self.add({
+			id:"payoffs", type:"PayoffsUI",
+			x:105, y:73, scale:0.8, slideshow:self
+		});
+		_hide(o.payoffs); _fadeIn(o.payoffs, 300);
+		listen(_.misc, "payoffs/onchange", function(value){
+			o.tournament.reset();
+		});
+
+		// More words
+		self.add({
+			id:"text2", type:"TextBox",
+			x:0, y:320, width:450, height:500,
+			text_id:"distrust_4_2"
+		});
+		_hide(o.text2); _fadeIn(o.text2, 500);
+
+		// Note 1
+		var _showContinue = function(){
+			_showContinue = null;
+			self.add({
+				id:"continueLabel", type:"TextBox",
+				x:0, y:480, width:320, 
+				align:"right", color:"#aaa", size:17,
+				text_id:"distrust_4_note"
+			});
+			self.add({
+				id:"continueButton", type:"Button",
+				x:340, y:471, size:"short",
+				text_id:"distrust_2_btn",
+				message: "slideshow/next"
+			});
+			_hide(o.continueLabel); _fadeIn(o.continueLabel, 100);
+			_hide(o.continueButton); _fadeIn(o.continueButton, 100);
+		};
+		listen(_.misc, "tournament/autoplay/start",function(){
+			if(_showContinue) _showContinue();
+		});
+
+		// Note 2
+		self.add({
+			id:"note2", type:"TextBox",
+			x:583, y:510, width:300, height:50,
+			align:"center", color:"#aaa", size:17,
+			text_id:"distrust_4_note_2"
+		});
+		_hide(o.note2); _fadeIn(o.note2, 500);
+
+		// TOURNAMENT
+		Tournament.resetGlobalVariables();
+		Tournament.INITIAL_AGENTS = [
+			{strategy:"all_c", count:23},
+			{strategy:"all_d", count:1},
+			{strategy:"tft", count:1}
+		];
+		Tournament.NUM_TURNS = 10;
+		o.tournament.reset();
+
+	},
+	onend: function(self){
+		unlisten(_.misc);
+		self.remove("text");
+		self.remove("payoffs");
+		self.remove("text2");
+		self.remove("note2");
+		self.remove("continueLabel");
+		self.remove("continueButton");
+	}
+});
+
+// Explain that...
+SLIDES.push({
+	onstart: function(self){
+
+		var o = self.objects;
+
+		// Words
+		self.add({
+			id:"text", type:"TextBox",
+			x:0, y:30, width:450, height:500,
+			text_id:"distrust_5"
+		});
+		_hide(o.text); _fadeIn(o.text, 100);
+
+		// Worse...
+		self.add({
+			id:"next", type:"Button",
+			x:0, y:410, size:"long",
+			text_id:"distrust_5_btn",
+			message: "slideshow/next"
+		});
+		_hide(o.next); _fadeIn(o.next, 400);
+
+	},
+	onend: function(self){	
+		self.remove("text");
+		self.remove("next");
+	}
+});
+
+// Play with BOTH
+SLIDES.push({
+	onstart: function(self){
+
+		var o = self.objects;
+		_.misc = {};
+
+		// TOURNAMENT
+		Tournament.resetGlobalVariables();
+		Tournament.INITIAL_AGENTS = [
+			{strategy:"all_c", count:23},
+			{strategy:"all_d", count:1},
+			{strategy:"tft", count:1}
+		];
+		PD.PAYOFFS.P = -4;
+		PD.PAYOFFS.S = -1;
+		PD.PAYOFFS.R = 1;
+		PD.PAYOFFS.T = 3;
+		o.tournament.reset();
+
+		// Words
+		self.add({
+			id:"text", type:"TextBox",
+			x:0, y:0, width:450, height:500,
+			text_id:"distrust_6"
+		});
+		_hide(o.text); _fadeIn(o.text, 100);
+		listen(_.misc, "payoffs/onchange", function(value){
+			o.tournament.reset();
+		});
+
+		// SLIDER
+		// HAX - COPY PASTE CODE WHATEVER
+		var x = 0;
+		var y = 95;
+		self.add({
+			id:"roundsLabel", type:"TextBox",
+			x:0, y:y, width:450, size:25, noSelect:true
+		});
+		self.add({
+			id:"roundsSlider", type:"Slider",
+			x:0, y:y+30, width:450,
+			min:1, max:20, step:1,
+			message: "rules/turns"
+		});
+		var _updateLabel = 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
+			o.roundsLabel.setText("<b>"+words+"</b>");
+		};
+		listen(_.misc, "rules/turns", function(value){
+			_updateLabel(value);
+			o.tournament.reset();
+		});
+		o.roundsSlider.setValue(10);
+		_updateLabel(10);
+		_hide(o.roundsLabel); _fadeIn(o.roundsLabel, 300);
+		_hide(o.roundsSlider); _fadeIn(o.roundsSlider, 300);
+
+		// PAYOFFS
+		self.add({
+			id:"payoffs", type:"PayoffsUI",
+			x:105, y:170, scale:0.8, slideshow:self
+		});
+		_hide(o.payoffs); _fadeIn(o.payoffs, 300);
+
+		// Words
+		self.add({
+			id:"text2", type:"TextBox",
+			x:0, y:410, width:450, height:500,
+			text_id:"distrust_6_end"
+		});
+		_hide(o.text2); _fadeIn(o.text2, 500);
+
+		// FINALLY.
+		self.add({
+			id:"next", type:"Button",
+			x:0, y:475, size:"long",
+			text_id:"distrust_6_btn",
+			message: "slideshow/scratch"
+		});
+		_hide(o.next); _fadeIn(o.next, 700);
+
 	},
 	onend: function(self){
+		unlisten(_);
+		unlisten(_.misc);
+		self.clear();
 	}
-});
+});

lang/en.html

@@ -498,79 +498,80 @@ What could lead to...
 <!-- - - - - - - - - - - - - - - - - -->
 
 <p id="distrust_1">
-Before everything goes to heck: let's start with something nice.
+Before everything goes to heck, let's start with something nice!
-A world, mostly populated by nice <span class="tft">Copycats</span>,
+Here's a world filled entirely with <span class="all_c">Always Cooperates</span>,
-with only one each of a
+except for one <span class="all_d">Always Cheat</span> and one <span class="tft">Copycat</span>.
-mean <span class="all_d">Always Cheat</span>,
-naive <span class="all_c">Always Cooperate</span>,
-unforgiving <span class="grudge">Grudger</span>, and
-manipulative <span class="prober">Detective</span>.
 <br><br>
-Use the buttons on the right to <b>start</b> the simulation,
+Use the buttons on the right to <b>start</b> the sim,
-go through it <b>step-by-step</b>, or <b>restart</b> it. &rarr;
+go through it <b>step-by-step</b>, or <b>reset</b> it. &rarr;
 </p>
 
 <p id="distrust_2">
-Under our current rules, <span class="tft">Copycat</span> wins easily.
+As you already know, <span class="tft">Copycat</span> wins handily in the long run,
+under our current rules!
 <br><br>
 But that's under our <i>current</i> rules, which say that
-players play against each other 10 rounds per match.
+players play against each other for <i>10</i> rounds per match.
-What if players had to play 20 rounds? 5 rounds? 3 rounds? 1 round?
+Does <span class="tft">Copycat</span> still win at 7 rounds? 5 rounds? 3? 2? 1?
-Use the slider below to change this rule, <b>start</b> the simulation,
+<br><br>
-and see what happens – then repeat this for as many numbers as you'd like to experiment with:
+<b>Change the number of rounds</b> with the slider below,
+<b>start</b> the sim, and see what happens.
+Feel free to experiment as much as you'd like!
 </p>
 
 <p id="distrust_2_end">
-(when you're done, press:)
+once you're done playing around, click:
+</p>
+<p id="distrust_2_btn">
+continue
 </p>
 
 <p id="distrust_3">
-As you just saw, if you play enough rounds, <span class="tft">Copycat</span> still wins...
+As you saw, when people play below some number of rounds,
-but when people play with each other less and less... suddenly, // HOW MUCH?
+<span class="all_d">ALWAYS CHEAT</span> dominates.
-<span class="all_d">ALWAYS CHEAT</span> dominates once again.
 <br><br>
 In 1985, when Americans were asked how many close friends they had,
 the most common answer was "three". In 2004, the most common answer was <i>"zero"</i>.
-Furthermore, we're also (relatively) less likely to
+We now have fewer friends across class, racial, economic, and political lines,
-get married, volunteer, go to church, join organizations, or participate in local politics.
+because we have fewer friends -- <i>period.</i>
-We're losing our "social capital".
+And as you just discovered for yourself,
-And as you discovered for yourself just now,
 <b>the fewer "repeat interactions" there are, the more distrust will spread.</b>
 <br><br>
-(and no, mass media doesn't count:
+(no, mass media doesn't count:
-it has to be repeat <i>two-way</i> interactions between <i>specific individuals</i>.)
+it must be <i>two-way</i> interactions between <i>specific individuals</i>.)
 </p>
 <p id="distrust_3_btn">
-oh, it gets worse... &rarr;
+and oh, it gets worse... &rarr;
 </p>
 
 <p id="distrust_4">
-There's another way to breed distrust.
+There's <i>another</i> way to breed distrust.
-Here are the "payoffs" for a single round of the trust game:
+Here are the "payoffs" for the trust game:
-</p>
+</p>
-<p id="distrust_4_end">
+<p id="distrust_4_2">
-Note: although the reward for mutual trust (+2) is less than the temptation to exploit (+3),
+Let's start with a mostly-<span class="tft">Copycat</span> world. Normally, they'd win.
-with enough repeat interaction, trust can still win!
+But now, <b>change the "trust" reward from +2 to +1,
-But now, <b>click the arrows above to change the reward from +2 to +1,
+then click start. →</b>
-then click "start".</b>
+Even though +1 is still <i>more</i> than the punishment for mutual distrust (0)...
-Even though +1 is still more than the punishment for mutual distrust (0)...
 what happens?
-<br><br>
-(<i>after</i> you try that, feel free to play around with different "payoff" combinations!
-once you're done experimenting, hit:)
 </p>
 <p id="distrust_4_note">
-(simulating: 5 rounds per match)
+feel free to play around with different payoffs!
+once you're done, click:
+</p>
+<p id="distrust_4_note_2">
+(simulating: 10 rounds per match)
 </p>
 
 <p id="distrust_5">
+The same thing happens: <span class="all_d">Always Cheat</span> dominates.
 So even if the reward for getting a "win-win" is still <i>more</i>
 than the punishment for a "lose-lose"...
 <b>if the reward for mutual trust is <i>too</i> low, distrust evolves.</b>
 <br><br>
 I think, as a culture, we're losing the value of finding "win-wins".
 We're more interested in "win-lose", because viciousness gets views, conflict gets clicks.
-We'd rather live and let die.
+It's live and let <i>die.</i>
 Maybe I'm just overthinking things, maybe I'm just old and shaking my fist at a cloud...
 but don't you feel it? That we've forgotten something?...
 </p>
@@ -579,18 +580,16 @@ but don't you feel it? That we've forgotten something?...
 </p>
 
 <p id="distrust_6">
-Aaaaanyway, you can now play with both the number of rounds <i>and</i> the payoffs!
+Aaaaanyway, now you can change <i>both</i> rules!
-These two things interact with each other a lot.
+(click <b>start</b> to see how, with weird payoffs, the sim
-For example, even though a low +1 reward creates distrust with 5 rounds per match,
+"swings" between <span class="all_d">Cheats</span> &amp; <span class="all_c">Cooperates</span>...)
-trust can still win with <i>10</i> rounds per match! (Click <b>START</b> to simulate this)
 </p>
 <p id="distrust_6_end">
-Once you're done experimenting,
+Once you're done experimenting with this,
-(and there'll be a <i>much</i> bigger "sandbox" to play around with at the end)
+let's look at our final barrier to trust...
-let's take a look at our final, most interesting barrier to trust...
 </p>
 <p id="distrust_6_btn">
-<strikethrough>Misteaks</strikethrough> Mistakes. &rarr;
+<s>Misteaks</s> Mistakes. &rarr;
 </p>
 
 <!-- - - - - - - - - - - - - - - - - -->
@@ -696,7 +695,7 @@ Start off with this distribution of players:
 The payoffs in a one-on-one game are:
 </p>
 <p id="sandbox_reset_payoffs">
-reset payoffs
+set default
 </p>
 
 <!--
@@ -706,21 +705,21 @@ one for the plural version, one for the singular version.
 -->
 
 <p id="sandbox_rules_1">
-Play [N] rounds per one-on-one game
+Play [N] rounds per match:
 </p>
 <p id="sandbox_rules_1_single">
-Play [N] round per one-on-one game
+Play [N] round per match:
 </p>
 
 <p id="sandbox_rules_2">
-After each tournament, eliminate the bottom [N] players &amp; reproduce the top [N] players
+After each tournament, eliminate the bottom [N] players &amp; reproduce the top [N] players:
 </p>
 <p id="sandbox_rules_2_single">
-After each tournament, eliminate the bottom [N] player &amp; reproduce the top [N] player
+After each tournament, eliminate the bottom [N] player &amp; reproduce the top [N] player:
 </p>
 
 <p id="sandbox_rules_3">
-In each round of a one-on-one game, there's a [N]% chance a player makes a mistake
+During each round, there's a [N]% chance a player makes a mistake:
 </p>
 
 <p id="sandbox_end">
@@ -886,6 +885,10 @@ cheat
 play
 </p>
 
+<p id="label_start">
+start
+</p>
+
 <p id="label_stop">
 stop
 </p>