preloader done

This commit is contained in:
Nicky Case 2017-07-20 14:45:11 -04:00
parent f95474d2c2
commit 539a87366a
9 changed files with 159 additions and 11 deletions

View file

@ -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;

View file

@ -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");
});

View file

@ -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);

View file

@ -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;

View file

@ -1,4 +1,4 @@
Loader.addToManifest(Loader.manifest,{
Loader.addToManifest(Loader.manifestPreload,{
splash_peep: "assets/splash/splash_peep.json",
connection: "assets/splash/connection.json"
});

View file

@ -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();

View file

@ -151,7 +151,6 @@ SLIDES.push({
// Tournament: simpleton wins
SLIDES.push({
id: "noise",
onstart: function(self){
var o = self.objects;

View file

@ -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();

View file

@ -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 &#8226; by nicky case, july 2017
</p>
<p id="loading">
loading...
</p>
<p id="loading_done">
PLAY &rarr;
</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 &amp; when do friends become enemies?<br>
or: Why &amp; when do enemies become friends?</b>
<br><br>
I think game theory can help explain our epidemic of distrust <br>