preloader done
This commit is contained in:
parent
f95474d2c2
commit
539a87366a
9 changed files with 159 additions and 11 deletions
|
@ -14,8 +14,7 @@ body{
|
|||
margin:0;
|
||||
overflow: hidden;
|
||||
|
||||
background: #fff; /*url('paper@2x.png');
|
||||
background-size: 100px 100px;*/
|
||||
background: #fff;
|
||||
|
||||
font-family: 'FuturaHandwritten';
|
||||
color: #333;
|
||||
|
|
25
index.html
25
index.html
|
@ -9,7 +9,7 @@
|
|||
<div id="main">
|
||||
<div id="slideshow_container">
|
||||
<div id="slideshow"></div>
|
||||
<div id="scratcher" class="scratcher"></div>
|
||||
<div id="scratcher"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
|
@ -69,8 +69,9 @@
|
|||
var slideshow, slideSelect;
|
||||
window.onload = function(){
|
||||
|
||||
// PRELOADER
|
||||
Q.all([
|
||||
Loader.loadAssets(Loader.manifest),
|
||||
Loader.loadAssets(Loader.manifestPreload),
|
||||
Words.convert("lang/en.html")
|
||||
]).then(function(){
|
||||
|
||||
|
@ -85,10 +86,26 @@ window.onload = function(){
|
|||
dom: $("#select"),
|
||||
slides: SLIDES
|
||||
});
|
||||
slideSelect.dom.style.display = "none";
|
||||
subscribe("start/game", function(){
|
||||
publish("slideshow/next");
|
||||
slideSelect.dom.style.display = "block";
|
||||
});
|
||||
|
||||
// LOAD REAL THINGS
|
||||
Loader.loadAssets(
|
||||
Loader.manifest,
|
||||
function(){
|
||||
publish("preloader/done");
|
||||
},
|
||||
function(ratio){
|
||||
publish("preloader/progress", [ratio]);
|
||||
}
|
||||
);
|
||||
|
||||
// First slide!
|
||||
//slideshow.nextSlide();
|
||||
slideshow.gotoSlide("noise");
|
||||
slideshow.nextSlide();
|
||||
//slideshow.gotoSlide("noise");
|
||||
|
||||
});
|
||||
|
||||
|
|
|
@ -28,6 +28,9 @@ function Button(config){
|
|||
self.setText = function(text_id){
|
||||
var words = Words.get(text_id);
|
||||
if(config.uppercase) words = words.toUpperCase();
|
||||
self.setText2(words);
|
||||
};
|
||||
self.setText2 = function(words){
|
||||
text.innerHTML = words;
|
||||
};
|
||||
self.setText(config.text_id);
|
||||
|
|
|
@ -17,6 +17,7 @@ Scratcher.scratch = function(gotoID){
|
|||
|
||||
var dom = $("#scratcher");
|
||||
dom.style.display = "block";
|
||||
dom.className = "scratcher";
|
||||
|
||||
var width = $("#main").clientWidth;
|
||||
var height = $("#main").clientHeight;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
Loader.addToManifest(Loader.manifest,{
|
||||
Loader.addToManifest(Loader.manifestPreload,{
|
||||
splash_peep: "assets/splash/splash_peep.json",
|
||||
connection: "assets/splash/connection.json"
|
||||
});
|
||||
|
|
|
@ -13,14 +13,89 @@ X. Credits
|
|||
Labels should be in the en.html folder
|
||||
|
||||
*********************/
|
||||
|
||||
Loader.addToManifest(Loader.manifest,{
|
||||
cssAsset0: "assets/ui/button.png",
|
||||
cssAsset1: "assets/ui/button_short.png",
|
||||
cssAsset2: "assets/ui/button_long.png",
|
||||
cssAsset3: "assets/ui/sandbox_tabs.png",
|
||||
cssAsset4: "assets/ui/sandbox_incdec.png",
|
||||
cssAsset5: "assets/ui/slider_bg.png",
|
||||
cssAsset6: "assets/ui/slider_knob.png",
|
||||
cssAsset7: "assets/ui/sandbox_hats.png",
|
||||
cssAsset8: "assets/ui/scratch.png",
|
||||
cssAsset9: "assets/iterated/iterated_scoreboard.png",
|
||||
cssAsset10: "assets/tournament/peep_characters.png",
|
||||
cssAsset11: "assets/ui/sandbox_hats.png",
|
||||
cssAsset12: "assets/tournament/score_small.png"
|
||||
});
|
||||
|
||||
SLIDES.push({
|
||||
|
||||
id: "intro",
|
||||
//id: "preloader",
|
||||
onstart: function(self){
|
||||
|
||||
var o = self.objects;
|
||||
|
||||
// Splash in background
|
||||
self.add({ id:"splash", type:"Splash" });
|
||||
|
||||
// TITLE TEXT
|
||||
self.add({
|
||||
id:"title", type:"TextBox",
|
||||
x:130, y:80, width:700,
|
||||
size:100, lineHeight:0.9, align:"center",
|
||||
text_id:"title"
|
||||
});
|
||||
self.add({
|
||||
id:"subtitle", type:"TextBox",
|
||||
x:297, y:344, width:360,
|
||||
align:"center", color:"#aaa", size:15,
|
||||
text_id:"subtitle"
|
||||
});
|
||||
|
||||
// Button
|
||||
self.add({
|
||||
id:"loading_button", type:"Button", x:382, y:410,
|
||||
text_id:"loading",
|
||||
active:false
|
||||
});
|
||||
var _loadingWords = function(ratio){
|
||||
ratio = Math.round(ratio*100);
|
||||
o.loading_button.setText2(Words.get("loading")+" "+ratio+"%");
|
||||
};
|
||||
|
||||
// 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";
|
||||
});
|
||||
|
||||
},
|
||||
onend: function(self){
|
||||
unlisten(self);
|
||||
self.remove("title");
|
||||
self.remove("subtitle");
|
||||
self.remove("loading_button");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
SLIDES.push({
|
||||
id: "intro",
|
||||
onjump: function(self){
|
||||
// Splash in background
|
||||
self.add({ id:"splash", type:"Splash" });
|
||||
},
|
||||
onstart: function(self){
|
||||
|
||||
var o = self.objects;
|
||||
|
||||
// Circular Wordbox
|
||||
self.add({
|
||||
id:"intro_text", type:"TextBox",
|
||||
|
@ -35,6 +110,9 @@ SLIDES.push({
|
|||
message:"slideshow/scratch"
|
||||
});
|
||||
|
||||
_hide(o.intro_text); _fadeIn(o.intro_text, 200);
|
||||
_hide(o.intro_button); _fadeIn(o.intro_button, 700);
|
||||
|
||||
},
|
||||
onend: function(self){
|
||||
self.clear();
|
||||
|
|
|
@ -151,7 +151,6 @@ SLIDES.push({
|
|||
|
||||
// Tournament: simpleton wins
|
||||
SLIDES.push({
|
||||
id: "noise",
|
||||
onstart: function(self){
|
||||
|
||||
var o = self.objects;
|
||||
|
|
|
@ -1,5 +1,13 @@
|
|||
SLIDES.push({
|
||||
id: "conclusion",
|
||||
onstart: function(self){
|
||||
},
|
||||
onend: function(self){
|
||||
self.clear();
|
||||
}
|
||||
});
|
||||
|
||||
SLIDES.push({
|
||||
onstart: function(self){
|
||||
|
||||
// Splash in background
|
||||
|
@ -19,6 +27,29 @@ SLIDES.push({
|
|||
message:"slideshow/scratch"
|
||||
});
|
||||
|
||||
},
|
||||
onend: function(self){
|
||||
self.remove("button");
|
||||
}
|
||||
});
|
||||
|
||||
SLIDES.push({
|
||||
onstart: function(self){
|
||||
|
||||
var o = self.objects;
|
||||
|
||||
// Text
|
||||
o.text.setTextID("conclusion_2");
|
||||
|
||||
// Button
|
||||
self.add({
|
||||
id:"button", type:"Button", x:385, y:466,
|
||||
text_id:"conclusion_button", fontSize:16, upperCase:false,
|
||||
message:"slideshow/scratch"
|
||||
});
|
||||
|
||||
// Fade In & Out
|
||||
|
||||
},
|
||||
onend: function(self){
|
||||
self.clear();
|
||||
|
|
24
lang/en.html
24
lang/en.html
|
@ -1,3 +1,23 @@
|
|||
<!-- - - - - - - - - - - - - - - - - -->
|
||||
<!-- - - - - - TITLE! - - - - - - - - -->
|
||||
<!-- - - - - - - - - - - - - - - - - -->
|
||||
|
||||
<p id="title">
|
||||
<span style="font-size:0.75em">THE</span><br>
|
||||
EVOLUTION<br>
|
||||
<span style="font-size:0.75em">OF TRUST</span>
|
||||
</p>
|
||||
<p id="subtitle">
|
||||
playing time: 30 min • by nicky case, july 2017
|
||||
</p>
|
||||
|
||||
<p id="loading">
|
||||
loading...
|
||||
</p>
|
||||
<p id="loading_done">
|
||||
PLAY →
|
||||
</p>
|
||||
|
||||
<!-- - - - - - - - - - - - - - - - - -->
|
||||
<!-- - - - - - INTRO! - - - - - - - - -->
|
||||
<!-- - - - - - - - - - - - - - - - - -->
|
||||
|
@ -23,8 +43,8 @@ we're less trusting than ever. Fewer and fewer people say they trust their<br>
|
|||
governments, their media, or even <i>each other</i>. So here's our puzzle:
|
||||
<br><br>
|
||||
|
||||
<b>Why, even in good times, do friends become enemies?<br>
|
||||
And why, even in bad times, do enemies become friends?</b>
|
||||
<b>Why & when do friends become enemies?<br>
|
||||
or: Why & when do enemies become friends?</b>
|
||||
<br><br>
|
||||
|
||||
I think game theory can help explain our epidemic of distrust –<br>
|
||||
|
|
Loading…
Reference in a new issue