Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions css/slides.css
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ body{

background: #fff;

font-family: 'FuturaHandwritten';
font-family: 'FuturaHandwritten', "Microsoft YaHei", "PingFang SC", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
color: #333;
font-size: 20px;

Expand Down Expand Up @@ -202,7 +202,7 @@ s{
}
.button #text{

font-family: 'FuturaHandwritten';
font-family: 'FuturaHandwritten', "Microsoft YaHei", "PingFang SC", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
color: #000;
font-size: 24px;

Expand Down Expand Up @@ -450,6 +450,10 @@ s{
.character #peep[char=tf2t]{ background-position: -525px 0; }
.character #peep[char=pavlov]{ background-position: -630px 0; }
.character #peep[char=random]{ background-position: -735px 0; }
.character #peep[char=joss]{ background-position: 0 0; } /* Uses same sprite as TFT */
.character #peep[char=tester]{ background-position: -420px 0; } /* Uses same sprite as Prober */
.character #peep[char=alternator]{ background-position: -735px 0; } /* Uses same sprite as Random */
.character #peep[char=majority]{ background-position: 0 0; } /* Uses same sprite as TFT */

.tft{ color:#4089DD; }
.all_d{ color:#52537F; }
Expand All @@ -459,6 +463,10 @@ s{
.tf2t{ color:#88A8CE; }
.pavlov{ color:#86C448; }
.random{ color:#FF5E5E; }
.joss{ color:#F9D836; }
.tester{ color:#7F2E2E; }
.alternator{ color:#FF99CC; }
.majority{ color:#8D9E26; }

.icon{
width:25px; height:25px;
Expand All @@ -482,6 +490,10 @@ s{
.tf2t .icon{ background-position: -125px 0; }
.pavlov .icon{ background-position: -150px 0; }
.random .icon{ background-position: -175px 0; }
.joss .icon{ background-position: 0 0; } /* Uses same icon as TFT */
.tester .icon{ background-position: -100px 0; } /* Uses same icon as Prober */
.alternator .icon{ background-position: -175px 0; } /* Uses same icon as Random */
.majority .icon{ background-position: 0 0; } /* Uses same icon as TFT */

/*************************/
/******* MISC STUFF *******/
Expand Down
129 changes: 74 additions & 55 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,40 +27,41 @@
<head>

<!-- TO TRANSLATE: "title", "description" -->
<title>The Evolution of Trust</title>
<meta name="description" content="an interactive guide to the game theory of why &amp; how we trust each other"/>
<title>信任的进化</title>
<meta name="description" content="一个合作博弈论的互动讲解手册——为什么达成信任,以及我们怎样达成信任"/>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" type="image/png" href="favicon.png">

<!-- TO TRANSLATE: "name", "description" -->
<meta itemprop="name" content="The Evolution of Trust">
<meta itemprop="description" content="an interactive guide to the game theory of why &amp; how we trust each other">
<meta itemprop="image" content="http://ncase.me/trust/social/thumbnail.png">
<meta itemprop="name" content="信任的进化">
<meta itemprop="description" content="一个合作博弈论的互动讲解手册——为什么达成信任,以及我们怎样达成信任">
<meta itemprop="image" content="social/thumbnail.png">

<!-- TO TRANSLATE: "name", "description" -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ncasenmare">
<meta name="twitter:title" content="The Evolution of Trust">
<meta name="twitter:description" content="an interactive guide to the game theory of why &amp; how we trust each other">
<meta name="twitter:title" content="信任的进化">
<meta name="twitter:description" content="一个合作博弈论的互动讲解手册——为什么达成信任,以及我们怎样达成信任">
<meta name="twitter:creator" content="@ncasenmare">
<meta name="twitter:image" content="http://ncase.me/trust/social/thumbnail.png">
<meta name="twitter:image" content="social/thumbnail.png">

<!-- TO TRANSLATE: "name", "description" -->
<meta property="og:title" content="The Evolution of Trust">
<meta property="og:title" content="信任的进化">
<meta property="og:type" content="website">
<meta property="og:url" content="http://ncase.me/trust/">
<meta property="og:image" content="http://ncase.me/trust/social/thumbnail.png">
<meta property="og:description" content="an interactive guide to the game theory of why &amp; how we trust each other">
<meta property="og:image" content="social/thumbnail.png">
<meta property="og:description" content="一个合作博弈论的互动讲解手册——为什么达成信任,以及我们怎样达成信任">

<!-- Styles -->
<link rel="stylesheet" href="css/slides.css?v11">
<link rel="stylesheet" href="css/balloon.css?v11">

</head>
<body>
<div id="preloader">loading...</div> <!-- TRANSLATE THIS -->
<div id="preloader">载入中...</div> <!-- TRANSLATE THIS -->
<div style="display:none" id="main">
<div id="slideshow_container">
<div id="slideshow"></div>
Expand All @@ -70,58 +71,41 @@
<div style="display:none" id="footer">
<div id="sound" sound="on" class="no-select">
<div id="sound_icon"></div>
<div id="sound_on">ON</div> <!-- TRANSLATE THIS -->
<div id="sound_off">OFF</div> <!-- TRANSLATE THIS -->
<div id="sound_on">声音开</div> <!-- TRANSLATE THIS -->
<div id="sound_off">声音关</div> <!-- TRANSLATE THIS -->
</div>
<div id="select"></div>

<!-- TRANSLATE "title" & "text". Make sure it's less than 112 characters, for Twitter's sake -->
<!-- Also, change "link" to whatever the link for the translated version will be! -->
<sharing title="The Evolution of Trust"
text="People no longer trust each other. Why? And how can we fix it? An interactive guide to the game theory of trust:"
<sharing title="信任的进化"
text="人们不再彼此相互信任,为什么?我们该怎么改变这种情况?一个合作博弈论的互动讲解手册:"
link="http://ncase.me/trust/"></sharing>

<!-- List of translations thus far! -->
<div id="translations">
fan-translations:
<a href="https://github.com/ncase/trust#how-to-translate-this-thang" target="_blank">(add one!)</a>&nbsp;
<a href="https://ccamara.github.io/trust/">Español de España</a>&nbsp;
<a href="https://maeriens.github.io/trust/">Español Latino</a>&nbsp;
<a href="https://ayowel.github.io/trust/">Français</a>&nbsp;
<a href="https://chairulakmal.github.io/trust/">Bahasa Indonesia</a>&nbsp;
<a href="https://jkoelling.github.io/trust/">Deutsch</a>&nbsp;
<a href="https://lvdt.github.io/trust/">Italiano</a>&nbsp;
<a href="http://trust.alicedarner.se/">Svenska</a>&nbsp;
<a href="https://rayraz.github.io/trust/">Nederlands</a>&nbsp;
<a href="https://mok0.github.io/trust/">dansk</a>&nbsp;
<a href="https://januscahill.github.io/trust/">Esperanto</a>&nbsp;
<a href="https://notdotteam.github.io/trust/">Русский</a>&nbsp;
<a href="https://brunolemos.github.io/trust/">Português do Brasil</a>&nbsp;
<a href="https://osaatcioglu.github.io/trust/">Türkçe</a>&nbsp;
<a href="https://sin.github.io/trust/">Polski</a>&nbsp;
<a href="http://ncase.me/trust-hu/">Magyar</a>&nbsp;
<a href="https://tiwalaph.github.io/TiwalaPH/">Filipino</a>&nbsp;
<a href="https://matejko124.github.io/trust/">Slovenski jezik</a>&nbsp;
<a href="http://www.varljiv.org/evolucija-povjerenja/index.html">hrvatski</a>&nbsp;
<a href="http://ncase.me/trust-et/">eesti</a>&nbsp;
<a href="https://nextghost.github.io/trust/">Česky</a>&nbsp;
<a href="https://reversedfate.github.io/trust/">latviešu valoda</a>&nbsp;
<a href="https://1luap.github.io/trust/">suomi</a>&nbsp;
<a href="https://fbricart.github.io/trust/">Català</a>&nbsp;
<a href="https://enfactorial.github.io/trust/">Română</a>&nbsp;
<a href="https://kreshnik.github.io/trust/">Shqip</a>&nbsp;
<a href="https://kamee.gitlab.io/trust/">Հայերեն</a>&nbsp;
<a href="https://stosto2.github.io/trust/">македонски јазик</a>&nbsp;
<a href="https://lightspot21.github.io/trust/">ελληνικά</a>&nbsp;
<a href="https://yaroslav-f.github.io/trust/">Українська</a>&nbsp;
<a href="http://ncase.me/trust-bg/">български език</a>&nbsp;
<a href="https://nghiatt90.github.io/trust-vn/">Tiếng Việt</a>&nbsp;
<a href="https://osori.github.io/trust-ko/">한국어</a>&nbsp;
<a href="https://htlife.github.io/trust_jp/">日本語</a>&nbsp;
<a href="https://sekai.co/trust/">中文(简体)</a>&nbsp;
<a href="https://audreyt.github.io/trust-zh-TW/">中文(臺灣)</a> &nbsp;
<a href="http://myhtmlcopy.epizy.com/trust/">ไทย</a> &nbsp;
<a href="https://hamed.github.io/trust/">فارسی</a>&nbsp;
社群翻译:
<a href="https://github.com/ncase/trust#how-to-translate-this-thang" target="_blank">(欢迎贡献!)</a> |
<a href="https://ccamara.github.io/trust/">Español de España</a> |
<a href="https://maeriens.github.io/trust/">Español Latino</a> |
<a href="https://ayowel.github.io/trust/">Français</a> |
<a href="https://jkoelling.github.io/trust/">Deutsch</a> |
<a href="https://lvdt.github.io/trust/">Italiano</a> |
<a href="https://notdotteam.github.io/trust/">Русский</a> |
<a href="https://brunolemos.github.io/trust/">Português do Brasil</a> |
<a href="https://osaatcioglu.github.io/trust/">Türkçe</a> |
<a href="https://sin.github.io/trust/">Polski</a> |
<a href="http://ncase.me/trust-hu/">Magyar</a> |
<a href="https://fbricart.github.io/trust/">Català</a> |
<a href="https://enfactorial.github.io/trust/">Română</a> |
<a href="https://lightspot21.github.io/trust/">ελληνικά</a> |
<a href="http://ncase.me/trust-bg/">български език</a> |
<a href="https://nghiatt90.github.io/trust-vn/">Tiếng Việt</a> |
<a href="https://osori.github.io/trust-ko/">한국어</a> |
<a href="https://htlife.github.io/trust_jp/">日本語</a> |
<a href="https://dccxi.com/trust/">中文(简体)</a> |
<a href="https://audreyt.github.io/trust-zh-TW/">中文(臺灣)</a> |
<a href="https://hamed.github.io/trust/">فارسی</a> |
<a href="https://mudaraljundi.github.io/trust/">العربية</a>
</div>

Expand Down Expand Up @@ -177,3 +161,38 @@

<!-- Main Code -->
<script src="js/main.js?v11"></script>

<!-- Mobile Resizing -->
<script>
(function(){
var container = document.getElementById("slideshow_container");
var slideshow = document.getElementById("slideshow");

function resize(){
var width = window.innerWidth;
var height = window.innerHeight;
var targetWidth = 960;
var targetHeight = 540;

var scale = Math.min(width/targetWidth, height/targetHeight);

// If on mobile, maybe we want to use more width?
// But keeping aspect ratio is important for the game logic/visuals.

container.style.transform = "scale("+scale+")";
container.style.transformOrigin = "center center";

// Center it
// The container is absolute centered in css, but scale might mess it up if not careful.
// CSS: #slideshow_container { width:0; height:0; ... top:0; left:0; right:0; bottom:0; margin:auto; }
// Since width/height are 0, scaling it should just scale the contents from the center.
// Let's double check logic.
// The slideshow inside is: width:960px; height:540px; position: absolute; left:-480px; top:-270px;
// So the center of #slideshow is at (0,0) of #slideshow_container.
// Scaling #slideshow_container should work perfectly.
}

window.addEventListener("resize", resize);
resize();
})();
</script>
85 changes: 84 additions & 1 deletion js/sims/PD.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@ var PEEP_METADATA = {
prober: {frame:4, color:"#f6b24c"},
tf2t: {frame:5, color:"#88A8CE"},
pavlov: {frame:6, color:"#86C448"},
random: {frame:7, color:"#FF5E5E"}
random: {frame:7, color:"#FF5E5E"},
joss: {frame:0, color:"#F9D836"},
tester: {frame:4, color:"#7F2E2E"},
alternator: {frame:7, color:"#FF99CC"},
majority: {frame:0, color:"#8D9E26"}
};

var PD = {};
Expand Down Expand Up @@ -136,6 +140,70 @@ function Logic_tft(){
};
}

// TESTER: Defect first. If opponent retaliates, play TFT.
// If opponent cooperates, assume they are exploitable and keep defecting.
function Logic_tester(){
var self = this;
var otherMove = PD.COOPERATE;
var isFirstTurn = true;
var everRetaliated = false;

self.play = function(){
if(isFirstTurn){
return PD.CHEAT;
}
if(everRetaliated){
return otherMove; // TFT logic
}else{
return PD.CHEAT; // Keep cheating
}
};
self.remember = function(own, other){
if(isFirstTurn){
isFirstTurn = false;
// If I cheated (I did) and they cheated back, they retaliated.
// Wait, the logic says "If opponent ever defects".
// Since I cheated first, if they cheat, it's retaliation.
if(other==PD.CHEAT) everRetaliated = true;
} else {
if(other==PD.CHEAT) everRetaliated = true;
}
otherMove = other;
};
}

// ALTERNATOR: Cooperate, Cheat, Cooperate, Cheat...
function Logic_alternator(){
var self = this;
var myLastMove = PD.CHEAT; // So first move is Cooperate (flip)
self.play = function(){
return (myLastMove==PD.COOPERATE ? PD.CHEAT : PD.COOPERATE);
};
self.remember = function(own, other){
myLastMove = own;
};
}

// MAJORITY: Cooperate if opponent has cooperated >= 50% of time.
function Logic_majority(){
var self = this;
var coopCount = 0;
var totalCount = 0;

self.play = function(){
if(totalCount==0) return PD.COOPERATE; // Start Nice
if(coopCount >= totalCount/2){
return PD.COOPERATE;
}else{
return PD.CHEAT;
}
};
self.remember = function(own, other){
totalCount++;
if(other==PD.COOPERATE) coopCount++;
};
}

function Logic_tf2t(){
var self = this;
var howManyTimesCheated = 0;
Expand Down Expand Up @@ -243,3 +311,18 @@ function Logic_prober(){
};

}

// JOSS: Like TFT, but 10% chance to Cheat when it should Cooperate.
// Always Cheats if opponent Cheated.
function Logic_joss(){
var self = this;
var otherMove = PD.COOPERATE;
self.play = function(){
if(otherMove==PD.CHEAT) return PD.CHEAT;
// If opponent cooperated, usually cooperate, but 10% cheat
return (Math.random()<0.10 ? PD.CHEAT : PD.COOPERATE);
};
self.remember = function(own, other){
otherMove = other;
};
}
6 changes: 5 additions & 1 deletion js/sims/SandboxUI.js
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,11 @@ function SandboxUI(config){
_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);
_makePopulationControl(xDiff, yOff+yDiff*3, "random", 3);
_makePopulationControl( 0, yOff+yDiff*4, "joss", 1);
_makePopulationControl(xDiff, yOff+yDiff*4, "tester", 1);
_makePopulationControl( 0, yOff+yDiff*5, "alternator", 1);
_makePopulationControl(xDiff, yOff+yDiff*5, "majority", 1);

// Adjust the WHOLE population...
/******************************
Expand Down
Loading