crappy full outline

This commit is contained in:
Nicky Case 2017-07-12 17:24:26 -04:00
parent 3c6704cb63
commit d803fdbba6
10 changed files with 274 additions and 2 deletions

View file

@ -36,6 +36,7 @@
<script src="js/core/IncDecNumber.js"></script>
<script src="js/core/Slider.js"></script>
<script src="js/core/Scratcher.js"></script>
<script src="js/core/Background.js"></script>
<!-- Simulations -->
<script src="js/sims/Splash.js"></script>
@ -49,6 +50,11 @@
<script src="js/slides/1_Slides_OneOff.js"></script>
<script src="js/slides/2_Slides_Iterated.js"></script>
<script src="js/slides/3_Slides_Tournament.js"></script>
<script src="js/slides/4_Slides_Evolution.js"></script>
<script src="js/slides/5_Slides_Noise.js"></script>
<script src="js/slides/6_Slides_Sandbox.js"></script>
<script src="js/slides/7_Slides_Conclusion.js"></script>
<script src="js/slides/8_Slides_Credits.js"></script>
<!--script src="js/slides/Slides_Sandbox.js"></script-->
<!-- Main Code -->

31
js/core/Background.js Normal file
View file

@ -0,0 +1,31 @@
function Background(config){
var self = this;
self.id = config.id;
// Dimensions, yo
var width = $("#main").clientWidth;
var height = $("#main").clientHeight;
var x = -(width-960)/2;
var y = -(height-540)/2;
// DOM
self.dom = document.createElement("div");
self.dom.className = "object";
self.dom.style.left = x+"px";
self.dom.style.top = y+"px";
self.dom.style.width = width+"px";
self.dom.style.height = height+"px";
self.dom.style.background = config.color;
// Add...
self.add = function(INSTANT){
return _addFade(self, INSTANT);
};
// Remove...
self.remove = function(INSTANT){
return _removeFade(self, INSTANT);
};
}

View file

@ -43,6 +43,7 @@ function SlideSelectDot(slide){
// Listen to when the slide changes
subscribe("slideshow/slideChange", function(id){
if(!id) return; // nah
if(id==slide.id){
self.dom.setAttribute("selected","yes");
}else{

View file

@ -5,6 +5,20 @@ SLIDES.push({
onstart: function(self){
// Text
self.add({
id:"text", type:"TextBox",
x:160, y:10, width:640, height:500, align:"center", size:19,
text_id:"characters"
});
// Button
self.add({
id:"button", type:"Button", x:385, y:466,
text_id:"characters_button", fontSize:16, upperCase:false,
message:"slideshow/scratch"
});
},
onend: function(self){
self.clear();
@ -16,6 +30,38 @@ SLIDES.push({
SLIDES.push({
onstart: function(self){
// Tournament
Tournament.INITIAL_AGENTS = [
{strategy:"tft", count:1},
{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});
// Words to the side
self.add({
id:"text", type:"TextBox",
x:510, y:30, width:450, height:500,
text_id:"place_your_bets"
});
// Button
self.add({
id:"button", type:"Button",
x:510, y:400,
text_id:"label_tft",
onclick:function(){
_.answer = "tft";
publish("slideshow/next");
}
});
},
onend: function(self){
self.remove("text");
self.remove("button");
}
});
@ -23,6 +69,20 @@ SLIDES.push({
SLIDES.push({
onstart: function(self){
// Button
self.add({
id:"button", type:"Button",
x:510, y:400,
text_id:"next_match",
onclick:function(){
_.answer = "tft";
publish("slideshow/next");
}
});
},
onend: function(self){
self.remove("button");
}
});
@ -30,5 +90,22 @@ SLIDES.push({
SLIDES.push({
onstart: function(self){
// Words to the side
self.add({
id:"text", type:"TextBox",
x:510, y:30, width:450, height:500,
text_id:"tournament_winner"
});
// Button
self.add({
id:"button", type:"Button", x:385, y:466,
text_id:"tournament_teaser", fontSize:16, upperCase:false,
message:"slideshow/scratch"
});
},
onend: function(self){
self.clear();
}
});

View file

@ -0,0 +1,24 @@
// Evolution Intro
SLIDES.push({
id: "evolution",
onstart: function(self){
// Words to the side
self.add({
id:"text", type:"TextBox",
x:510, y:30, width:450, height:500,
text_id:"evolution_intro"
});
// Button
self.add({
id:"button", type:"Button", x:385, y:466,
text_id:"evolution_intro_button", fontSize:16, upperCase:false,
message:"slideshow/scratch"
});
},
onend: function(self){
self.clear();
}
});

View file

@ -0,0 +1,5 @@
SLIDES.push({
id: "noise",
onstart: function(self){
}
});

View file

@ -1,7 +1,10 @@
SLIDES.push({
id: "sandbox",
add:[
onstart: function(self){
}
/*add:[
// The tournament simulation
{id:"tournament", type:"Tournament", x:-20, y:-20},
@ -9,6 +12,6 @@ SLIDES.push({
// Screw it, just ALL of the Sandbox UI
{id:"sandbox", type:"SandboxUI"}
]
]*/
});

View file

@ -0,0 +1,26 @@
SLIDES.push({
id: "conclusion",
onstart: function(self){
// Splash in background
self.add({ id:"splash", type:"Splash" });
// Circular Wordbox
self.add({
id:"text", type:"TextBox",
x:160, y:10, width:640, height:500, align:"center", size:19,
text_id:"conclusion"
});
// Button
self.add({
id:"button", type:"Button", x:385, y:466,
text_id:"conclusion_button", fontSize:16, upperCase:false,
message:"slideshow/scratch"
});
},
onend: function(self){
self.clear();
}
});

View file

@ -0,0 +1,6 @@
SLIDES.push({
id: "credits",
onstart: function(self){
self.add({ id:"bg", type:"Background", color:"#222" });
}
});

View file

@ -79,6 +79,75 @@ blah blah blah blah. But what if...
...we play more than once? &rarr;
</p>
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - ITERATED - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - TOURNAMENT! - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
<p id="characters">
COPYCAT: I start with Cooperate, and then, I just copy whatever move you did last time. Meow
<br><br>
ALWAYS CHEAT: i hate you
<br><br>
ALWAYS COOPERATE: I love you! &lt;3
<br><br>
GRUDGER: "Listen y'all I start Cooperatin', and I'll keep on Cooperatin'... but if you ever Cheat me once, pardner, I AIN'T EVER FORGIVIN' YOU."
<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...
</p>
<p id="characters_button">
...were to play against each other? &rarr;
</p>
<p id="place_your_bets">
It's tournament time!
These five characters will now play against each other 10 paired games, 10 rounds per game.
<br><br>
Place your bets: who do you think will get the highest *total* score?
</p>
<p id="next_match">
next match
</p>
<p id="tournament_winner">
COPYCAT! (Note: this play-style is also known in game theory as "Tit For Tat")
<br><br>
Congrats, you placed your bet on the right horse.
<br><br>
Sorry, //////.
<br><br>
Now, here's the strange thing: Copycat can _never_ beat another player in the trust game (because it never tries to take advantage of others), it can only ever do _as well as_ the other player. And yet overall, Copycat wins! This, despite being simpler than Detective, nicer than Always Cheat, and more forgiving than Grudger. It almost seems to imply that the Golden Rule is not just a moral truth, but a *mathematical* truth:
<br><br>
*Do unto others as you would have them do unto you.* ~Copycat
<br><br>
And *that's* why "peace" broke out in the trenches of World War I. Each side was playing a deadly game of trust with each other, but because the nature of trench warfare means they have to face the same group of soldiers over and over again, that allowed a Copycat-like strategy the unspoken law of "live and let live" to evolve.
</p>
<p id="tournament_teaser">
...but does Copycat *always* win? &rarr;
</p>
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - EVOLUTION! - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
<p id="evolution_intro">
</p>
<p id="evolution_intro_button">
</p>
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - NOISE! - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - SANDBOX! - - - - - - - -->
@ -120,6 +189,30 @@ In each round of a one-on-one game, there's a [N]% chance a player makes a mista
</p>
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - CONCLUSION! - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
<p id="conclusion">
blah blah blah blah
blah blah blah blah
blah blah blah blah<br>
blah blah blah blah
blah blah blah blah
blah blah blah blah<br>
blah blah blah blah
blah blah blah blah
</p>
<p id="conclusion_button">
&lt;3
</p>
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - CREDITS! - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - THE PLAYERS - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->