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

everything EXCEPT words

Browse source
This commit is contained in:
Nicky Case 2017-07-20 18:16:35 -04:00
parent 539a87366a
commit de0e0e8c95
18 changed files with 253 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
assets/iterated/iterated_peep.json
View file

@ -143,6 +143,46 @@
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":302,"h":402},
"sourceSize": {"w":302,"h":402}
},
"iterated_peep0018":
{
"frame": {"x":10,"y":1246,"w":302,"h":402},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":302,"h":402},
"sourceSize": {"w":302,"h":402}
},
"iterated_peep0019":
{
"frame": {"x":322,"y":1246,"w":302,"h":402},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":302,"h":402},
"sourceSize": {"w":302,"h":402}
},
"iterated_peep0020":
{
"frame": {"x":634,"y":1246,"w":302,"h":402},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":302,"h":402},
"sourceSize": {"w":302,"h":402}
},
"iterated_peep0021":
{
"frame": {"x":946,"y":1246,"w":302,"h":402},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":302,"h":402},
"sourceSize": {"w":302,"h":402}
},
"iterated_peep0022":
{
"frame": {"x":1258,"y":1246,"w":302,"h":402},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":302,"h":402},
"sourceSize": {"w":302,"h":402}
}},
"meta": {
"app": "Adobe Animate",

BIN
assets/iterated/iterated_peep.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 85 KiB

After

Width:  |  Height:  |  Size: 93 KiB

BIN
assets/sounds/bg_music.mp3 Normal file
View file

Binary file not shown.

BIN
assets/sounds/coin_get.mp3 Normal file
View file

Binary file not shown.

BIN
assets/sounds/coin_insert.mp3 Normal file
View file

Binary file not shown.

16
css/slides.css
View file

@ -21,6 +21,18 @@ body{
font-size: 20px;
}
#preloader{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 200px;
height: 50px;
font-size: 30px;
text-align: center;
}
#main{
width: 100%;
height: calc(100% - 60px);
@ -160,8 +172,8 @@ s{
}
.button[size=short] #text{
width:105px;
font-size: 18px;
top: 18px;
/*font-size: 18px;
top: 18px;*/
}
.button[size=short] #hitbox{
width:115px;

17
index.html
View file

@ -6,13 +6,14 @@
<link rel="stylesheet" href="css/balloon.css">
</head>
<body>
<div id="main">
<div id="preloader">loading...</div>
<div style="display:none" id="main">
<div id="slideshow_container">
<div id="slideshow"></div>
<div id="scratcher"></div>
</div>
</div>
<div id="footer">
<div style="display:none" id="footer">
<div id="select"></div>
</div>
</body>
@ -75,6 +76,11 @@ window.onload = function(){
Words.convert("lang/en.html")
]).then(function(){
// CHANGE DOM
document.body.removeChild($("#preloader"));
$("#main").style.display = "block";
$("#footer").style.display = "block";
// Slideshow
slideshow = new Slideshow({
dom: $("#slideshow"),
@ -88,8 +94,12 @@ window.onload = function(){
});
slideSelect.dom.style.display = "none";
subscribe("start/game", function(){
publish("slideshow/next");
slideSelect.dom.style.display = "block";
// [FOR DEBUGGING]
//publish("slideshow/next");
publish("slideshow/scratch", ["noise"]);
});
// LOAD REAL THINGS
@ -105,7 +115,6 @@ window.onload = function(){
// First slide!
slideshow.nextSlide();
//slideshow.gotoSlide("noise");
});

2
js/core/Scratcher.js
View file

@ -62,7 +62,7 @@ Scratcher.scratchAnim = function(dom, scratchIn){
setTimeout(function(){
var sound = scratchIn ? Loader.sounds.scratch_in : Loader.sounds.scratch_out;
sound.volume(0.7).play();
sound.play();
},100);
return deferred.promise;

136
js/sims/Iterated.js
View file

@ -1,8 +1,14 @@
Loader.addToManifest(Loader.manifest,{
iterated_coin: "assets/iterated/iterated_coin.json",
iterated_machine: "assets/iterated/iterated_machine.json",
iterated_payoffs: "assets/iterated/iterated_payoffs.json",
iterated_peep: "assets/iterated/iterated_peep.json"
iterated_peep: "assets/iterated/iterated_peep.json",
// SFX
coin_insert: "assets/sounds/coin_insert.mp3",
coin_get: "assets/sounds/coin_get.mp3",
});
function Iterated(config){
@ -129,12 +135,14 @@ function Iterated(config){
// Make your moves!
var A = yourMove;
if(yourMove=="TRIP") A=PD.CHEAT;
var B = self.opponentLogic.play();
// Get payoffs
var payoffs = PD.getPayoffs(A,B);
// ANIMATE the moves: betrayal or what?
self.playerA.TRIP = (yourMove=="TRIP");
var animPromise1 = self.playerA.playMove(payoffs[0]); // reward, temptation, sucker, punishment, etc...
var animPromise2 = self.playerB.playMove(payoffs[1]);
@ -169,6 +177,11 @@ function Iterated(config){
self.playOneRound(PD.CHEAT);
});
listen(self, "iterated/TRIP", function(){
publish("iterated/round/start");
self.playOneRound("TRIP");
});
listen(self, "iterated/newOpponent", function(id){
self.chooseOpponent(id);
self.playerA.resetFace();
@ -306,8 +319,11 @@ function IteratedPeep(config){
/////// ACTUALLY ANIMATING THE MOVES ////////
/////////////////////////////////////////////
var _isTripping = false;
var _isHopping = false;
var _faceTripped = false;
var _hopTimer = 0;
var _faceTimer = 0;
self.update = function(delta){
// Blinking
@ -317,13 +333,22 @@ function IteratedPeep(config){
if(self.face.currentFrame==1 && Math.random()<0.01) self.face.gotoAndStop(2);
}
// Face Tripped
if(_faceTripped){
_faceTimer += 0.25;
var frame = 18+(Math.floor(_faceTimer)%5);
self.face.gotoAndStop(frame);
}
// Hopping
if(_isHopping){
_hopTimer += delta;
self.animated.y = -Math.abs(Math.sin(_hopTimer*0.4))*6;
}else{
self.animated.y = 0;
_hopTimer = 0;
if(!_isTripping){
if(_isHopping){
_hopTimer += delta;
self.animated.y = -Math.abs(Math.sin(_hopTimer*0.4))*6;
}else{
self.animated.y = 0;
_hopTimer = 0;
}
}
};
@ -351,7 +376,13 @@ function IteratedPeep(config){
Tween_get(self.coin)
.to({x:60, y:-75}, _s(0.1), Ease.circOut)
.wait(_s(0.2))
.call(_animate2);
.call(function(){
if(self.TRIP){
_animate2_alt();
}else{
_animate2();
}
});
};
// Walk towards machine
@ -362,21 +393,57 @@ function IteratedPeep(config){
.call(_animate3);
};
// ALT: Walk... and TRIP.
var _animate2_alt = function(){
_isHopping = true;
Tween_get(self.animated)
.to({x:70/5}, _s(0.1), Ease.linear)
.call(function(){
_isHopping = false;
_isTripping = true;
})
.to({rotation:Math.TAU/4.9, y:-11}, _s(0.05), Ease.quadIn)
.call(function(){
self.eyebrows.visible = false;
_faceTripped = true;
self.coin.visible = false;
g.scale.x = 1.2;
g.scale.y = 1/g.scale.x;
Tween_get(g.scale)
.to({x:1, y:1}, _s(0.5), Ease.elasticOut);
})
.wait(_s(0.1))
.call(_animate3_alt);
};
// Put coin in OR DON'T -- SHOW PAYOFF ON FACE
var _animate3 = function(){
_isHopping = false;
// Rewarded or Suckered: PUT COIN IN
if(self.payoff==PD.PAYOFFS.R || self.payoff==PD.PAYOFFS.S){
Tween_get(self.coin)
.to({x:95, y:-25}, _s(0.3), Ease.circInOut)
.call(function(){
self.restingFace = false;
self.eyebrows.visible = false;
if(self.payoff==PD.PAYOFFS.R) self.face.gotoAndStop(8); // Reward Face!
if(self.payoff==PD.PAYOFFS.S) self.face.gotoAndStop(9); // Sucker Face!
self.coin.visible = false;
// SOUND
if(config.opponent){
setTimeout(function(){
Loader.sounds.coin_insert.stereo(0.9).volume(0.3).play();
},50);
}else{
Loader.sounds.coin_insert.stereo(-0.9).volume(0.3).play();
}
});
}
// Punished or Tempted: DID NOT PUT COIN IN
@ -405,6 +472,13 @@ function IteratedPeep(config){
};
// ALT: Show dizzy face lay down for a while
var _animate3_alt = function(){
Tween_get(self.animated)
.wait(_s(0.9))
.call(_animate4_alt);
};
// Walk back
var _animate4 = function(){
_isHopping = true;
@ -413,20 +487,34 @@ function IteratedPeep(config){
.call(_animate5);
};
// ALT: Get back up
var _animate4_alt = function(){
Tween_get(self.animated)
.to({x:0, y:0, rotation:0}, _s(0.5), Ease.quadInOut)
.call(function(){
_isTripping = false;
_animate5();
});
};
// Face back to "normal", put coin back, get coins (if any) thrown at you
var _animate5 = function(){
_isHopping = false;
// Face back to normal
self.restingFace = true;
if(!self.TRIP){
self.restingFace = true;
}
// Eyebrows, yo
self.eyebrows.visible = true;
if(self.payoff==PD.PAYOFFS.P) self.eyebrows.gotoAndStop(3); // Punishment
if(self.payoff==PD.PAYOFFS.R) self.eyebrows.gotoAndStop(4); // Reward
if(self.payoff==PD.PAYOFFS.S) self.eyebrows.gotoAndStop(5); // Sucker
if(self.payoff==PD.PAYOFFS.T) self.eyebrows.gotoAndStop(6); // Temptation
if(!self.TRIP){
self.eyebrows.visible = true;
if(self.payoff==PD.PAYOFFS.P) self.eyebrows.gotoAndStop(3); // Punishment
if(self.payoff==PD.PAYOFFS.R) self.eyebrows.gotoAndStop(4); // Reward
if(self.payoff==PD.PAYOFFS.S) self.eyebrows.gotoAndStop(5); // Sucker
if(self.payoff==PD.PAYOFFS.T) self.eyebrows.gotoAndStop(6); // Temptation
}
// Put coin away if not already
if(self.coin.visible){
@ -445,11 +533,22 @@ function IteratedPeep(config){
var c = self.payoffCoins[i];
c.x = 155;
c.y = -25;
(function(c){
(function(c,i,payoff){
Tween_get(c)
.wait(_s(i*0.2+0.1))
.call(function(){
c.visible = true;
// COIN GET SOUND
if(self.payoff==PD.PAYOFFS.R && i==2) return; // NOT last coin.
if(config.opponent){
setTimeout(function(){
Loader.sounds.coin_get.stereo(0.9).volume(0.1).play();
},50);
}else{
Loader.sounds.coin_get.stereo(-0.9).volume(0.1).play();
}
})
.to({x:0}, _s(0.3), Ease.linear)
.call(function(){
@ -459,7 +558,7 @@ function IteratedPeep(config){
.wait(_s(i*0.2+0.1))
.to({y:-120}, _s(0.15), Ease.circOut) // y
.to({y:-20}, _s(0.15), Ease.circIn); // y
})(c);
})(c,i,self.payoff);
}
Tween_get(self.animated)
@ -477,6 +576,11 @@ function IteratedPeep(config){
// DONE
var _animateDone = function(){
if(self.TRIP){
self.restingFace = true;
self.face.gotoAndStop(2); // BLINK
}
_faceTripped = false;
self.animationDeferred.resolve();
};

24
js/sims/SandboxUI.js
View file

@ -14,7 +14,7 @@ function SandboxUI(config){
/////////////////////////////////////////
var playButton = new Button({
x:130, y:135, text_id:"label_start",
x:172, y:135, text_id:"label_start", size:"short",
onclick: function(){
if(slideshow.objects.tournament.isAutoPlaying){
publish("tournament/autoplay/stop");
@ -32,11 +32,11 @@ function SandboxUI(config){
dom.appendChild(playButton.dom);
var stepButton = new Button({
x:130, y:135+70, text_id:"label_step", message:"tournament/step"
x:172, y:135+70, text_id:"label_step", message:"tournament/step", size:"short"
});
dom.appendChild(stepButton.dom);
var resetButton = new Button({x:130, y:135+70*2, text_id:"label_reset", message:"tournament/reset"});
var resetButton = new Button({x:172, y:135+70*2, text_id:"label_reset", message:"tournament/reset", size:"short"});
dom.appendChild(resetButton.dom);
/////////////////////////////////////////
@ -165,14 +165,14 @@ function SandboxUI(config){
var xDiff = 220;
var yDiff = 80;
var yOff = 40;
_makePopulationControl( 0, yOff+0, "tft", 5);
_makePopulationControl(xDiff, yOff+0, "all_d", 5);
_makePopulationControl( 0, yOff+yDiff, "all_c", 15);
_makePopulationControl(xDiff, yOff+yDiff, "grudge", 0);
_makePopulationControl( 0, yOff+yDiff*2, "prober", 0);
_makePopulationControl(xDiff, yOff+yDiff*2, "tf2t", 0);
_makePopulationControl( 0, yOff+yDiff*3, "pavlov", 0);
_makePopulationControl(xDiff, yOff+yDiff*3, "random", 0);
_makePopulationControl( 0, yOff+0, "tft", 3);
_makePopulationControl(xDiff, yOff+0, "all_d", 3);
_makePopulationControl( 0, yOff+yDiff, "all_c", 3);
_makePopulationControl(xDiff, yOff+yDiff, "grudge", 3);
_makePopulationControl( 0, yOff+yDiff*2, "prober", 3);
_makePopulationControl(xDiff, yOff+yDiff*2, "tf2t", 3);
_makePopulationControl( 0, yOff+yDiff*3, "pavlov", 3);
_makePopulationControl(xDiff, yOff+yDiff*3, "random", 4);
// Adjust the WHOLE population...
/******************************
@ -267,11 +267,13 @@ function SandboxUI(config){
}
}
// If positive, add one starting from TOP, skipping anchor.
// (UNLESS IT'S ZERO)
if(diff>0){
for(var i=0; i<Tournament.INITIAL_AGENTS.length && diff>0; i++){
// do NOT adjust anchor.
var conf = Tournament.INITIAL_AGENTS[i];
if(conf.strategy==peepID) continue;
if(conf.count==0) continue; // DO NOT ADD IF ZERO
conf.count++; // ADD
diff--; // yay
}

22
js/sims/Tournament.js
View file

@ -4,14 +4,14 @@ Tournament.resetGlobalVariables = function(){
Tournament.NUM_TURNS = 10;
Tournament.INITIAL_AGENTS = [
{strategy:"tft", count:5},
{strategy:"all_d", count:5},
{strategy:"all_c", count:0},
{strategy:"grudge", count:0},
{strategy:"prober", count:0},
{strategy:"tf2t", count:5},
{strategy:"pavlov", count:5},
{strategy:"random", count:5}
{strategy:"tft", count:3},
{strategy:"all_d", count:3},
{strategy:"all_c", count:3},
{strategy:"grudge", count:3},
{strategy:"prober", count:3},
{strategy:"tf2t", count:3},
{strategy:"pavlov", count:3},
{strategy:"random", count:4}
];
Tournament.FLOWER_CONNECTIONS = false;
@ -335,7 +335,7 @@ function Tournament(config){
// ANIMATE
var _playIndex = 0;
var _tweenTimer = 0;
app.ticker.add(function(delta) {
var _tick = function(delta){
// Tick
Tween.tick();
@ -385,6 +385,7 @@ function Tournament(config){
// Middle...
_tweenTimer += self.isAutoPlaying ? 0.15 : 0.05;
if(_tweenTimer>1) _tweenTimer=1;
for(var i=0;i<self.agents.length;i++){
var a = self.agents[i];
a.tweenAngle(_tweenTimer);
@ -402,7 +403,8 @@ function Tournament(config){
}
});
};
app.ticker.add(_tick);
// PLAY A TOURNAMENT
self._startPlay = function(){

14
js/slides/0_Slides_Intro.js
View file

@ -15,6 +15,8 @@ Labels should be in the en.html folder
*********************/
Loader.addToManifest(Loader.manifest,{
// CSS ASSETS
cssAsset0: "assets/ui/button.png",
cssAsset1: "assets/ui/button_short.png",
cssAsset2: "assets/ui/button_long.png",
@ -27,7 +29,11 @@ Loader.addToManifest(Loader.manifest,{
cssAsset9: "assets/iterated/iterated_scoreboard.png",
cssAsset10: "assets/tournament/peep_characters.png",
cssAsset11: "assets/ui/sandbox_hats.png",
cssAsset12: "assets/tournament/score_small.png"
cssAsset12: "assets/tournament/score_small.png",
// Music!
bg_music: "assets/sounds/bg_music.mp3"
});
SLIDES.push({
@ -67,13 +73,15 @@ SLIDES.push({
// PRELOADER
listen(self,"preloader/progress", function(ratio){
console.log(ratio);
_loadingWords(ratio);
});
listen(self,"preloader/done", function(){
o.loading_button.setText("loading_done");
o.loading_button.activate();
o.loading_button.config.message = "start/game";
o.loading_button.config.onclick = function(){
publish("start/game");
Loader.sounds.bg_music.volume(0.8).loop(true).play(); // play music!
};
});
},

9
js/slides/2_Slides_Iterated.js
View file

@ -113,16 +113,17 @@ SLIDES.push({
_hide(o.info);
// ROUNDS
var ROUNDS = [
// [FOR DEBUGGING]
/*var ROUNDS = [
{id:"tft", num:1},
]; // FOR TESTING
/*var ROUNDS = [ // and min & max score...
];*/
var ROUNDS = [ // and min & max score...
{id:"tft", num:5}, // min 3, max 11
{id:"all_d", num:4}, // min -4, max 0
{id:"all_c", num:4}, // min 8, max 12
{id:"grudge", num:5}, // min -1, max 11
{id:"prober", num:7} // min 2, max 15
]; // TOTAL... MIN 8, MAX 49*/
]; // TOTAL... MIN 8, MAX 49
ROUND_INDEX = 0;
ROUND_NUM = 0;

5
js/slides/4_Slides_Evolution.js
View file

@ -110,8 +110,9 @@ SLIDES.push({
var x = 510;
var y = 200;
var nextStep;
// var textStep = 2;
var textStep = 8;
// [FOR DEBUGGING]
var textStep = 2;
// var textStep = 8;
self.add({
id:"step_1", type:"Button", x:x, y:y,
text_id: "label_play_tournament", size:"long",

8
js/slides/5_Slides_Distrust.js
View file

@ -38,11 +38,11 @@ SLIDES.push({
// BUTTONS for playing //////////////////
/////////////////////////////////////////
var x = 635;
var x = 671;
var y = 175;
var dy = 70;
self.add({
id:"playButton", type:"Button",
id:"playButton", type:"Button", size:"short",
x:x, y:y, text_id:"label_start",
onclick: function(){
if(o.tournament.isAutoPlaying){
@ -59,11 +59,11 @@ SLIDES.push({
o.playButton.setText("label_stop");
});
self.add({
id:"stepButton", type:"Button",
id:"stepButton", type:"Button", size:"short",
x:x, y:y+dy, text_id:"label_step", message:"tournament/step"
});
self.add({
id:"resetButton", type:"Button",
id:"resetButton", type:"Button", size:"short",
x:x, y:y+dy*2, text_id:"label_reset", message:"tournament/reset"
});
_hide(o.playButton); _fadeIn(o.playButton, 800);

15
js/slides/6_Slides_Noise.js
View file

@ -1,3 +1,5 @@
// [FOR DEBUGGING]
// One-off with noise
SLIDES.push({
id: "noise",
@ -22,7 +24,7 @@ SLIDES.push({
// STAGES
var STAGES = [
{button:"cooperate", message:"cooperate"},
{button:"cooperate", message:"cheat"},
{button:"cooperate", message:"TRIP"},
{button:"cooperate", message:"cooperate"},
{button:"cheat", message:"cheat"}
];
@ -151,6 +153,7 @@ SLIDES.push({
// Tournament: simpleton wins
SLIDES.push({
//id:"noise",// [FOR DEBUGGING]
onstart: function(self){
var o = self.objects;
@ -218,11 +221,11 @@ SLIDES.push({
// BUTTONS for playing //////////////////
/////////////////////////////////////////
var x = 135;
var x = 172;
var y = 175;
var dy = 70;
self.add({
id:"playButton", type:"Button",
id:"playButton", type:"Button", size:"short",
x:x, y:y, text_id:"label_start",
onclick: function(){
if(o.tournament.isAutoPlaying){
@ -239,11 +242,11 @@ SLIDES.push({
o.playButton.setText("label_stop");
});
self.add({
id:"stepButton", type:"Button",
id:"stepButton", type:"Button", size:"short",
x:x, y:y+dy, text_id:"label_step", message:"tournament/step"
});
self.add({
id:"resetButton", type:"Button",
id:"resetButton", type:"Button", size:"short",
x:x, y:y+dy*2, text_id:"label_reset", message:"tournament/reset"
});
@ -361,8 +364,6 @@ SLIDES.push({
}
});
// TODO: SMALLER SANDBOX-PLAY BUTTONS
SLIDES.push({
onstart: function(self){

6
js/slides/7_Slides_Sandbox.js
View file

@ -13,13 +13,13 @@ SLIDES.push({
// Label & Button for next...
self.add({
id:"label_next", type:"TextBox",
x:14, y:481, width:800, align:"right",
x:40, y:481, width:550, align:"right",
text_id: "sandbox_end"
});
self.add({
id:"button_next", type:"Button",
x:831, y:465, size:"short",
text_id:"label_next",
x:605, y:465, size:"long",
text_id:"sandbox_end_btn",
message: "slideshow/scratch"
});

12
lang/en.html
View file

@ -429,7 +429,7 @@ who <i>are</i> nice, but not naive.
<p id="evo_7">
By simply copying the other player's moves,
<span class="tft">Copycats</span> can play nice with each other,
while <span class="all_d">Always Cheats</span> just cheat themselves.
while <span class="all_d">Always Cheats</span> just cheat themselves!
Not only that, but it also means <span class="tft">Copycat</span>
can give <span class="all_d">Always Cheat</span>
a taste of their own medicine.
@ -497,7 +497,7 @@ However...
</p>
<p id="evo_11">
There are jerks. Look around.
Look around. There are jerks in the world.
<br><br>
If <span class="tft">Copycat</span> is the strategy in this repeated game of trust that's so powerful --
that even soldiers in World War I trenches independently "evolved" a similar strategy, called "live and let live" --
@ -625,7 +625,7 @@ Being "nice" players, both their first moves will be:
And normally, they'd just pay back each others' kindness and sing Kumbaya until the end of time.
</p>
<p id="noise_2_end">
But what if, while trying to reciprocate...
But what if, while trying to reciprocate goodness...
</p>
<p id="noise_3">
@ -649,7 +649,7 @@ The other player, being a <span class="tft">Copycat</span>, <i>had</i> to retali
<p id="noise_5">
Thus, like the Hatfields and McCoys,
these two <span class="tft">Copycats</span> will spiral into an endless cycle of vengeance...
that started over a single mistake, long, long ago.
that started over a single mistake, long ago.
</p>
<p id="noise_5_end">
Tragic. But now, are there <i>other</i> types of players who can...
@ -764,10 +764,10 @@ During each round, there's a [N]% chance a player makes a mistake:
</p>
<p id="sandbox_end">
...once you're done playing around, let's recap
...and once you're done playing around, let's recap:
</p>
<p id="sandbox_end_btn">
what we've learnt &rarr;
what we learnt today &rarr;
</p>