distrust DONE

This commit is contained in:
Nicky Case 2017-07-18 14:39:53 -04:00
parent b2b46a5590
commit b44b7fcfe9
13 changed files with 538 additions and 115 deletions

BIN
assets/ui/payoffs_ui.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 25 KiB

View file

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

View file

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

View file

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

78
js/core/PayoffsUI.js Normal file
View file

@ -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;
}
}
};
}

View file

@ -15,8 +15,9 @@ function Slideshow(config){
self.reset = function(){ self.reset = function(){
// On End? // 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 // CLEAR
@ -114,7 +115,7 @@ function Slideshow(config){
// FORCE go to a certain slide // FORCE go to a certain slide
self.gotoSlide = function(id){ self.gotoSlide = function(id){
// Go ALL the way to the past // RESET IT ALL.
self.reset(); self.reset();
// Slide & SlideIndex // Slide & SlideIndex

View file

@ -48,6 +48,8 @@ var _configText = function(config, dom){
if(config.w!==undefined) dom.style.width = config.w+"px"; if(config.w!==undefined) dom.style.width = config.w+"px";
if(config.h!==undefined) dom.style.height = config.h+"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.rotation!==undefined) dom.style.transform = "rotate("+config.rotation+"deg)";
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;

View file

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

View file

@ -14,7 +14,7 @@ function SandboxUI(config){
///////////////////////////////////////// /////////////////////////////////////////
var playButton = new Button({ var playButton = new Button({
x:130, y:135, text_id:"label_play", x:130, y:135, text_id:"label_start",
onclick: function(){ onclick: function(){
if(slideshow.objects.tournament.isAutoPlaying){ if(slideshow.objects.tournament.isAutoPlaying){
publish("tournament/autoplay/stop"); publish("tournament/autoplay/stop");
@ -24,7 +24,7 @@ function SandboxUI(config){
} }
}); });
listen(self, "tournament/autoplay/stop",function(){ listen(self, "tournament/autoplay/stop",function(){
playButton.setText("label_play"); playButton.setText("label_start");
}); });
listen(self, "tournament/autoplay/start",function(){ listen(self, "tournament/autoplay/start",function(){
playButton.setText("label_stop"); playButton.setText("label_stop");
@ -298,48 +298,16 @@ function SandboxUI(config){
// Labels // Labels
page.appendChild(_makeLabel("sandbox_payoffs", {x:0, y:0, w:433})); 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"}));
page.appendChild(_makeLabel("label_cheat", {x:309, y:137, rotation:45, align:"center", color:"#cccccc"}));
page.appendChild(_makeLabel("label_cheat", {x:70, y:137, rotation:-45, align:"center", color:"#cccccc"}));
// Inc(rement) De(crement) Numbers // PAYOFFS
// which are symmetrical, and update each other! var payoffsUI = new PayoffsUI({x:64, y:47, slideshow:self});
var numbers = []; page.appendChild(payoffsUI.dom);
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 // 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); 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 rule_evolution = _makeLabel("sandbox_rules_2", {x:0, y:100, w:433});
var slider_evolution = new Slider({ var slider_evolution = new Slider({
x:0, y:165, width:430, x:0, y:165, width:430,
min:1, max:12, step:1, min:1, max:10, step:1,
message: "rules/evolution" message: "rules/evolution"
}); });
sliders.push(slider_evolution); sliders.push(slider_evolution);
@ -416,7 +384,8 @@ function SandboxUI(config){
// Remove... // Remove...
self.remove = function(){ 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]); for(var i=0;i<sliders.length;i++) unlisten(sliders[i]);
unlisten(self); unlisten(self);
_remove(self); _remove(self);

View file

@ -300,7 +300,7 @@ SLIDES.push({
// Next // Next
self.add({ 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", text_id:"evo_11_btn", size:"long",
message: "slideshow/next" message: "slideshow/next"
}); });

View file

@ -4,13 +4,6 @@ SLIDES.push({
// Tournament // Tournament
Tournament.resetGlobalVariables(); 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}); self.add({id:"tournament", type:"Tournament", x:-20, y:20});
}, },
@ -22,11 +15,9 @@ SLIDES.push({
_.resetTournament = function(){ _.resetTournament = function(){
Tournament.resetGlobalVariables(); Tournament.resetGlobalVariables();
Tournament.INITIAL_AGENTS = [ Tournament.INITIAL_AGENTS = [
{strategy:"tft", count:20}, {strategy:"all_c", count:23},
{strategy:"all_d", count:1}, {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(); o.tournament.reset();
}; };
@ -35,7 +26,366 @@ SLIDES.push({
// Move tournament // Move tournament
o.tournament.dom.style.left = 480; 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){ 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();
} }
}); });

View file

@ -498,79 +498,80 @@ What could lead to...
<!-- - - - - - - - - - - - - - - - - --> <!-- - - - - - - - - - - - - - - - - -->
<p id="distrust_1"> <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> <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>
<p id="distrust_2"> <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> <br><br>
But that's under our <i>current</i> rules, which say that 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>
<p id="distrust_2_end"> <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>
<p id="distrust_3"> <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> <br><br>
In 1985, when Americans were asked how many close friends they had, 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>. 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> <b>the fewer "repeat interactions" there are, the more distrust will spread.</b>
<br><br> <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>
<p id="distrust_3_btn"> <p id="distrust_3_btn">
oh, it gets worse... &rarr; and oh, it gets worse... &rarr;
</p> </p>
<p id="distrust_4"> <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? 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>
<p id="distrust_4_note"> <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>
<p id="distrust_5"> <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> So even if the reward for getting a "win-win" is still <i>more</i>
than the punishment for a "lose-lose"... than the punishment for a "lose-lose"...
<b>if the reward for mutual trust is <i>too</i> low, distrust evolves.</b> <b>if the reward for mutual trust is <i>too</i> low, distrust evolves.</b>
<br><br> <br><br>
I think, as a culture, we're losing the value of finding "win-wins". 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'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... 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?... but don't you feel it? That we've forgotten something?...
</p> </p>
@ -579,18 +580,16 @@ but don't you feel it? That we've forgotten something?...
</p> </p>
<p id="distrust_6"> <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>
<p id="distrust_6_end"> <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>
<p id="distrust_6_btn"> <p id="distrust_6_btn">
<strikethrough>Misteaks</strikethrough> Mistakes. &rarr; <s>Misteaks</s> Mistakes. &rarr;
</p> </p>
<!-- - - - - - - - - - - - - - - - - --> <!-- - - - - - - - - - - - - - - - - -->
@ -696,7 +695,7 @@ Start off with this distribution of players:
The payoffs in a one-on-one game are: The payoffs in a one-on-one game are:
</p> </p>
<p id="sandbox_reset_payoffs"> <p id="sandbox_reset_payoffs">
reset payoffs set default
</p> </p>
<!-- <!--
@ -706,21 +705,21 @@ one for the plural version, one for the singular version.
--> -->
<p id="sandbox_rules_1"> <p id="sandbox_rules_1">
Play [N] rounds per one-on-one game Play [N] rounds per match:
</p> </p>
<p id="sandbox_rules_1_single"> <p id="sandbox_rules_1_single">
Play [N] round per one-on-one game Play [N] round per match:
</p> </p>
<p id="sandbox_rules_2"> <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>
<p id="sandbox_rules_2_single"> <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>
<p id="sandbox_rules_3"> <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>
<p id="sandbox_end"> <p id="sandbox_end">
@ -886,6 +885,10 @@ cheat
play play
</p> </p>
<p id="label_start">
start
</p>
<p id="label_stop"> <p id="label_stop">
stop stop
</p> </p>