refactor words and language
This commit is contained in:
parent
da3879474d
commit
459c3f1783
18 changed files with 234 additions and 61 deletions
15
TODO.md
15
TODO.md
|
@ -1,14 +1,15 @@
|
||||||
MAJOR SHTUFF
|
MAJOR SHTUFF
|
||||||
|
|
||||||
1. Sandbox with all parameters exposed // exposed... but time to make the UI!
|
1. Create Sandbox
|
||||||
2. Repeated game with all parameters exposed
|
2. Re-create Repeated Game w/ params exposed
|
||||||
3. Splash, with params for cool outro
|
3. Re-create Splash, with cool outro
|
||||||
4. Integrate *everything*. // slides, outro
|
4. Integrate & Write EVERYTHING
|
||||||
5. Credits and rewards
|
5. Final round of playtesting
|
||||||
|
6. Credits, Footnotes, Rewards
|
||||||
|
7. Polish the whole dang thing
|
||||||
|
|
||||||
MINOR SHTUFF
|
MINOR SHTUFF
|
||||||
|
|
||||||
- Word box class less annoying
|
- Word box class less annoying
|
||||||
- Refactoring, ugh
|
- Refactoring, ugh
|
||||||
- Logic: Prober, Pavlov, TF2T, Random? // done
|
- Draw: Pavlov, TF2T, Random
|
||||||
- Slides in different files
|
|
BIN
assets/pavlov.png
Normal file
BIN
assets/pavlov.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.6 KiB |
BIN
assets/random.png
Normal file
BIN
assets/random.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.6 KiB |
BIN
assets/tf2t.png
Normal file
BIN
assets/tf2t.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.2 KiB |
|
@ -44,17 +44,28 @@ body{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/********* Fader *********/
|
||||||
|
|
||||||
.fader{
|
.fader{
|
||||||
-webkit-transition: opacity 0.3s ease-in-out;
|
-webkit-transition: opacity 0.3s ease-in-out;
|
||||||
-mos-transition: opacity 0.3s ease-in-out;
|
-mos-transition: opacity 0.3s ease-in-out;
|
||||||
-ms-transition: opacity 0.3s ease-in-out;
|
-ms-transition: opacity 0.3s ease-in-out;
|
||||||
transition: opacity 0.3s ease-in-out;
|
transition: opacity 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
.wordbox{
|
|
||||||
|
/******** Text Box ********/
|
||||||
|
|
||||||
|
.textbox{
|
||||||
font-family: 'FuturaHandwritten';
|
font-family: 'FuturaHandwritten';
|
||||||
color: #333;
|
color: #333;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
.textbox > div{
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
/********* Button ********/
|
||||||
|
|
||||||
.button{
|
.button{
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
16
index.html
16
index.html
|
@ -16,6 +16,7 @@
|
||||||
|
|
||||||
<!-- Libraries -->
|
<!-- Libraries -->
|
||||||
<script src="js/lib/helpers.js"></script>
|
<script src="js/lib/helpers.js"></script>
|
||||||
|
<script src="js/lib/pegasus.min.js"></script>
|
||||||
<script src="js/lib/minpubsub.src.js"></script>
|
<script src="js/lib/minpubsub.src.js"></script>
|
||||||
<script src="js/lib/q.js"></script>
|
<script src="js/lib/q.js"></script>
|
||||||
<script src="js/lib/pixi.min.js"></script>
|
<script src="js/lib/pixi.min.js"></script>
|
||||||
|
@ -27,34 +28,41 @@
|
||||||
<script src="js/core/Slideshow.js"></script>
|
<script src="js/core/Slideshow.js"></script>
|
||||||
<script src="js/core/SlideSelect.js"></script>
|
<script src="js/core/SlideSelect.js"></script>
|
||||||
<script src="js/core/Button.js"></script>
|
<script src="js/core/Button.js"></script>
|
||||||
<script src="js/core/WordBox.js"></script>
|
<script src="js/core/TextBox.js"></script>
|
||||||
|
<script src="js/core/Words.js"></script>
|
||||||
|
|
||||||
<!-- Simulations -->
|
<!-- Simulations -->
|
||||||
<script src="js/sims/PD.js"></script>
|
<script src="js/sims/PD.js"></script>
|
||||||
<script src="js/sims/SillyPixi.js"></script>
|
<script src="js/sims/SillyPixi.js"></script>
|
||||||
<script src="js/sims/Tournament.js"></script>
|
<script src="js/sims/Tournament.js"></script>
|
||||||
|
|
||||||
|
<!-- Slides -->
|
||||||
|
<script src="js/slides/Slides_Ecology.js"></script>
|
||||||
|
|
||||||
<!-- Main Code -->
|
<!-- Main Code -->
|
||||||
<script src="js/main.js"></script>
|
|
||||||
<script>
|
<script>
|
||||||
var slideshow, slideSelect;
|
var slideshow, slideSelect;
|
||||||
window.onload = function(){
|
window.onload = function(){
|
||||||
|
|
||||||
|
Words.convert("lang/en.html").then(function(){
|
||||||
|
|
||||||
// Slideshow
|
// Slideshow
|
||||||
slideshow = new Slideshow({
|
slideshow = new Slideshow({
|
||||||
dom: $("#slideshow"),
|
dom: $("#slideshow"),
|
||||||
slides: slides
|
slides: SLIDES
|
||||||
});
|
});
|
||||||
|
|
||||||
// Slide Select
|
// Slide Select
|
||||||
slideSelect = new SlideSelect({
|
slideSelect = new SlideSelect({
|
||||||
dom: $("#select"),
|
dom: $("#select"),
|
||||||
slides: slides
|
slides: SLIDES
|
||||||
});
|
});
|
||||||
|
|
||||||
// First slide!
|
// First slide!
|
||||||
slideshow.nextSlide();
|
slideshow.nextSlide();
|
||||||
//slideshow.gotoSlide("intro1");
|
//slideshow.gotoSlide("intro1");
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
|
@ -24,7 +24,7 @@ function Button(config){
|
||||||
// Customize DOM
|
// Customize DOM
|
||||||
button.style.left = config.x+"px";
|
button.style.left = config.x+"px";
|
||||||
button.style.top = config.y+"px";
|
button.style.top = config.y+"px";
|
||||||
text.innerHTML = config.text;
|
text.innerHTML = Words.get(config.text_id);
|
||||||
|
|
||||||
// On hover...
|
// On hover...
|
||||||
hitbox.onmouseover = function(){
|
hitbox.onmouseover = function(){
|
||||||
|
|
|
@ -16,7 +16,7 @@ function SlideSelect(config){
|
||||||
};
|
};
|
||||||
|
|
||||||
// Populate dots
|
// Populate dots
|
||||||
for(var i=0; i<slides.length; i++) self.addDot(slides[i]);
|
for(var i=0; i<self.slides.length; i++) self.addDot(self.slides[i]);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
var SLIDES = [];
|
||||||
|
|
||||||
function Slideshow(config){
|
function Slideshow(config){
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
42
js/core/TextBox.js
Normal file
42
js/core/TextBox.js
Normal file
|
@ -0,0 +1,42 @@
|
||||||
|
function TextBox(config){
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
self.id = config.id;
|
||||||
|
|
||||||
|
// Create DOM
|
||||||
|
self.dom = document.createElement("div");
|
||||||
|
self.dom.className = "object";
|
||||||
|
self.dom.classList.add("fader");
|
||||||
|
self.dom.classList.add("textbox");
|
||||||
|
|
||||||
|
// All the text boxes, yo
|
||||||
|
self.boxes = config.boxes;
|
||||||
|
|
||||||
|
// Create each textbox...
|
||||||
|
for(var i=0; i<self.boxes.length; i++){
|
||||||
|
|
||||||
|
// DOM
|
||||||
|
var textbox = document.createElement("div");
|
||||||
|
self.dom.appendChild(textbox);
|
||||||
|
|
||||||
|
// Customize
|
||||||
|
var box = self.boxes[i];
|
||||||
|
textbox.style.left = box.x+"px";
|
||||||
|
textbox.style.top = box.y+"px";
|
||||||
|
textbox.style.width = box.width+"px";
|
||||||
|
textbox.style.height = box.height+"px";
|
||||||
|
textbox.innerHTML = Words.get(box.text_id);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add...
|
||||||
|
self.add = function(INSTANT){
|
||||||
|
return _addFade(self, INSTANT);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Remove...
|
||||||
|
self.remove = function(INSTANT){
|
||||||
|
return _removeFade(self, INSTANT);
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
|
@ -1,30 +0,0 @@
|
||||||
function WordBox(config){
|
|
||||||
|
|
||||||
var self = this;
|
|
||||||
self.id = config.id;
|
|
||||||
|
|
||||||
// Create DOM
|
|
||||||
var words = document.createElement("div");
|
|
||||||
words.className = "object";
|
|
||||||
words.classList.add("fader");
|
|
||||||
words.classList.add("wordbox");
|
|
||||||
self.dom = words;
|
|
||||||
|
|
||||||
// Customize DOM
|
|
||||||
words.style.left = config.x+"px";
|
|
||||||
words.style.top = config.y+"px";
|
|
||||||
words.style.width = config.width+"px";
|
|
||||||
words.style.height = config.height+"px";
|
|
||||||
words.innerHTML = config.text;
|
|
||||||
|
|
||||||
// Add...
|
|
||||||
self.add = function(INSTANT){
|
|
||||||
return _addFade(self, INSTANT);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Remove...
|
|
||||||
self.remove = function(INSTANT){
|
|
||||||
return _removeFade(self, INSTANT);
|
|
||||||
};
|
|
||||||
|
|
||||||
}
|
|
56
js/core/Words.js
Normal file
56
js/core/Words.js
Normal file
|
@ -0,0 +1,56 @@
|
||||||
|
/**********************
|
||||||
|
|
||||||
|
Convert a word.html to a JSON containing innerHTMLs
|
||||||
|
|
||||||
|
**********************/
|
||||||
|
|
||||||
|
window.Words = {};
|
||||||
|
Words.text = null;
|
||||||
|
|
||||||
|
Words.get = function(id){
|
||||||
|
return Words.text[id];
|
||||||
|
};
|
||||||
|
|
||||||
|
Words.convert = function(filepath){
|
||||||
|
|
||||||
|
// Promise
|
||||||
|
var deferred = Q.defer();
|
||||||
|
|
||||||
|
// Get dat stuff
|
||||||
|
var request = pegasus(filepath);
|
||||||
|
request.then(
|
||||||
|
|
||||||
|
// success handler
|
||||||
|
function(data, xhr) {
|
||||||
|
|
||||||
|
// Convert HTML...
|
||||||
|
var words = document.createElement("div");
|
||||||
|
words.innerHTML = xhr.response;
|
||||||
|
var paragraphs = words.querySelectorAll("p");
|
||||||
|
|
||||||
|
// ...to a JSON
|
||||||
|
Words.text = {}; // new one!
|
||||||
|
for(var i=0;i<paragraphs.length;i++){
|
||||||
|
var p = paragraphs[i];
|
||||||
|
var id = p.id;
|
||||||
|
var html = p.innerHTML;
|
||||||
|
Words.text[id] = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fulfil promise!
|
||||||
|
deferred.resolve(Words.text);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
// error handler (optional)
|
||||||
|
function(data, xhr) {
|
||||||
|
alert("AHHHHHHHHHHHH, PROBLEM LOADING WORDS");
|
||||||
|
console.error(data, xhr.status)
|
||||||
|
}
|
||||||
|
|
||||||
|
);
|
||||||
|
|
||||||
|
// Return Promise
|
||||||
|
return deferred.promise;
|
||||||
|
|
||||||
|
};
|
2
js/lib/pegasus.min.js
vendored
Normal file
2
js/lib/pegasus.min.js
vendored
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
//0.3.5
|
||||||
|
function pegasus(a,b,c){return c=new XMLHttpRequest,c.open("GET",a),a=[],pegasus.timeout&&(c.timeout=pegasus.timeout),c.ontimeout=function(a){b=a},c.onreadystatechange=c.then=function(d,e,f,g){if(d&&d.call&&(a=[,d,e]),b&&a[2]&&a[2](b,c),4==c.readyState&&(f=a[0|c.status/200])){try{g=JSON.parse(c.responseText)}catch(a){g=null}f(g,c)}},c.send(),c}
|
|
@ -1,4 +1,4 @@
|
||||||
var slides = [
|
/*var slides = [
|
||||||
|
|
||||||
// SIM
|
// SIM
|
||||||
{
|
{
|
||||||
|
@ -104,4 +104,4 @@ var slides = [
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
];
|
];*/
|
|
@ -11,7 +11,7 @@ PD.PAYOFFS_DEFAULT = {
|
||||||
|
|
||||||
PD.PAYOFFS = PD.PAYOFFS_DEFAULT;
|
PD.PAYOFFS = PD.PAYOFFS_DEFAULT;
|
||||||
|
|
||||||
PD.NOISE = 0.0;
|
PD.NOISE = 0;
|
||||||
|
|
||||||
PD.getPayoffs = function(move1, move2){
|
PD.getPayoffs = function(move1, move2){
|
||||||
var payoffs = PD.PAYOFFS;
|
var payoffs = PD.PAYOFFS;
|
||||||
|
@ -179,7 +179,7 @@ function Logic_prober(){
|
||||||
self.play = function(){
|
self.play = function(){
|
||||||
if(moves.length>0){
|
if(moves.length>0){
|
||||||
// Testing phase
|
// Testing phase
|
||||||
var move = moves.pop();
|
var move = moves.shift();
|
||||||
return move;
|
return move;
|
||||||
}else{
|
}else{
|
||||||
if(everCheatedMe){
|
if(everCheatedMe){
|
||||||
|
|
|
@ -1,12 +1,22 @@
|
||||||
Tournament.SELECTION = 5;
|
Tournament.SELECTION = 5;
|
||||||
Tournament.NUM_TURNS = 5;
|
Tournament.NUM_TURNS = 20;
|
||||||
|
|
||||||
// CREATE A RING OF AGENTS
|
// CREATE A RING OF AGENTS
|
||||||
Tournament.AGENTS = [
|
/*Tournament.AGENTS = [
|
||||||
{strategy:"all_c", count:15},
|
{strategy:"all_c", count:15},
|
||||||
{strategy:"all_d", count:5},
|
{strategy:"all_d", count:5},
|
||||||
{strategy:"grim", count:0},
|
{strategy:"grim", count:0},
|
||||||
{strategy:"tft", count:5},
|
{strategy:"tft", count:5},
|
||||||
|
];*/
|
||||||
|
Tournament.AGENTS = [
|
||||||
|
{strategy:"all_c", count:15},
|
||||||
|
{strategy:"all_d", count:5},
|
||||||
|
{strategy:"tft", count:5},
|
||||||
|
//{strategy:"grim", count:3},
|
||||||
|
//{strategy:"prober", count:3},
|
||||||
|
//{strategy:"tf2t", count:13},
|
||||||
|
//{strategy:"pavlov", count:13},
|
||||||
|
//{strategy:"random", count:13}
|
||||||
];
|
];
|
||||||
|
|
||||||
function Tournament(config){
|
function Tournament(config){
|
||||||
|
|
39
js/slides/Slides_Ecology.js
Normal file
39
js/slides/Slides_Ecology.js
Normal file
|
@ -0,0 +1,39 @@
|
||||||
|
SLIDES.push({
|
||||||
|
|
||||||
|
id: "sim",
|
||||||
|
add:[
|
||||||
|
|
||||||
|
// The tournament simulation
|
||||||
|
{id:"tournament", type:"Tournament", x:0, y:20},
|
||||||
|
|
||||||
|
// All the words!
|
||||||
|
{
|
||||||
|
id:"textbox", type:"TextBox",
|
||||||
|
boxes:[
|
||||||
|
{ x:500, y:0, width:460, height:50, text_id:"sandbox_1" },
|
||||||
|
{ x:500, y:370, width:460, height:200, text_id:"sandbox_2" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// Buttons
|
||||||
|
{
|
||||||
|
id:"_b1", type:"Button", x:500, y:150, width:140,
|
||||||
|
text_id: "label_play_tournament",
|
||||||
|
message: "tournament/play"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:"_b2", type:"Button", x:500, y:220, width:140,
|
||||||
|
text_id: "label_eliminate_bottom_5",
|
||||||
|
message: "tournament/eliminate",
|
||||||
|
active:false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:"_b3", type:"Button", x:500, y:290, width:140,
|
||||||
|
text_id: "label_reproduce_top_5",
|
||||||
|
message: "tournament/reproduce",
|
||||||
|
active:false
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
});
|
32
lang/en.html
Normal file
32
lang/en.html
Normal file
|
@ -0,0 +1,32 @@
|
||||||
|
|
||||||
|
<!-- SANDBOX! -->
|
||||||
|
|
||||||
|
<p id="label_play_tournament">
|
||||||
|
1) play tournament
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p id="label_eliminate_bottom_5">
|
||||||
|
2) eliminate bottom 5
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p id="label_reproduce_top_5">
|
||||||
|
3) reproduce top 5
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p id="sandbox_1">
|
||||||
|
Let's say there are three kinds of players:
|
||||||
|
<br>
|
||||||
|
<span style='color:#FF75FF;'>Always Cooperate</span>,
|
||||||
|
<span style='color:#52537F;'>Always Cheat</span> &
|
||||||
|
<span style='color:#4089DD;'>Tit For Tat</span>
|
||||||
|
<br><br>
|
||||||
|
"What happens when you let a mixed population play against each other, and evolve over time?
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p id="sandbox_2">
|
||||||
|
Always Cheat dominates at first, but when it runs out of suckers to exploit,
|
||||||
|
its empire collapses – and the fairer Tit For Tat takes over.
|
||||||
|
<br><br>
|
||||||
|
<i>We are not punished for our sins, but by them.</i><br>
|
||||||
|
- Elbert Hubbard
|
||||||
|
</p>
|
Loading…
Reference in a new issue