NotDotTeam/crowds
NotDotTeam
/
crowds
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

SO CLOSE

This commit is contained in:
Nicky Case 2018-04-26 10:15:00 -04:00
parent 40748d3585
commit 110d0a0e1f
25 changed files with 272 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
css/index.css
View File

@ -4,7 +4,6 @@
font-style: normal;
font-weight: 400;
src: url(PatrickHand-Regular.ttf) format('truetype');
/*unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;*/
}
/* HTML & BODY */
@ -17,7 +16,7 @@ html, body{
body{
margin:0;
font-family: "PatrickHand";
font-family: "PatrickHand", Helvetica, Arial;
font-size: 23px;
line-height: 1.5em;
@ -294,18 +293,25 @@ a:hover{
user-select: none;
}
#sound{
position: absolute;
left:0; top:0;
color: #fff;
width: 150px;
font-size: 30px;
height: 60px;
}
#sound[mute=yes]{
opacity: 0.5;
}
#sound_icon{
background: url(../sprites/ui/sound.png);
background-size: auto 100%;
width: 60px; height: 60px;
position: absolute;
}
#sound_on, #sound_off{
position: absolute;
left:60px;
left:65px;
padding: 15px 0;
display: block;
line-height: 28px;
@ -313,10 +319,12 @@ a:hover{
letter-spacing: 2px;
}
#sound[mute=no] > #sound_icon{
background: rgba(255,255,255,0.5);
/*background: rgba(255,255,255,0.5);*/
background-position: 0px 0px;
}
#sound[mute=yes] > #sound_icon{
background: rgba(255,255,255,0.25);
/*background: rgba(255,255,255,0.25);*/
background-position: -60px 0px;
}
#sound[mute=no] > #sound_on{
display: block;
@ -324,6 +332,32 @@ a:hover{
#sound[mute=yes] > #sound_off{
display: block;
}
#sharing{
position: absolute;
right:10px; top:0;
width: 150px;
overflow: hidden;
}
#sharing > a{
float: left;
display: block;
width: 50px;
height: 60px;
background: url(../sprites/ui/sharing.png);
background-size: auto 100%;
}
#sharing #fb{
background-position: 0px 0px;
}
#sharing #tw{
background-position: -50px 0px;
}
#sharing #em{
background-position: -100px 0px;
}
#share_desc{
display: none;
}
#translations{
position: absolute;
top: 14px;
@ -423,6 +457,15 @@ a:hover{
}
/* PENCIL */
#pencil_container{
position: absolute;
top:0; left:0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
cursor: none;
}
#pencil{
position: absolute;
width:100px;

250
index.html
View File

@ -3,10 +3,34 @@
THE WISDOM AND/OR MADNESS OF CROWDS
by Nicky Case | apr 2018
MY "WHY" FOR MAKING THIS:
+ to build a foundation for further curiosity about networks, group dynamics
+ to practice teaching with problem-solving, a pre-req for skills
+ to instill transcendent sense of "fundamentally people", of Humanity's Brain <3
- - - - - - - - - - -
FAN TRANSLATION GUIDE:
https://github.com/ncase/crowds#how-to-translate-this-thing
Hello fan-translaters! Thank you so, so much for your help.
I hope you know what you've gotten yourself into.
There's about 4000 WORDS to translate, including
the Bonus Boxes and References.
To make things easier (or less painful, anyway) I've marked
what needs to be translated and how with big "TRANSLATE" comments.
Ctrl+F for "TRANSLATE" in uppercase to see what needs to be translated!
BUT BEFORE YOU TRANSLATE ANYTHING, DO THIS:
1) Look up the two-letter code of the language you're translating to:
https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
2) *COPY* index.html, and rename it [two-letter-code].html
For example: de.html, ar.html, zh.html, etc...
3) Translate *THAT* page. Do NOT modify the original index.html!
And once you're done, go to "translations.txt", and follow the
instructions there to let this game "know" your translation exists.
Good luck, and thanks again!
<3,
~ Nicky Case
-->
@ -14,34 +38,31 @@ MY "WHY" FOR MAKING THIS:
<html>
<head>
<!-- TO TRANSLATE: "title", "description" -->
<title>The Wisdom and/or Madness of Crowds</title>
<meta name="description" content="an interactive guide to human networks"/>
<!-- Meta Info -->
<title>The Wisdom and/or Madness of Crowds</title> <!-- <title>(TRANSLATE this part only)</title> -->
<meta name="description" content="an interactive guide to human networks"/> <!-- content="(TRANSLATE this part only)" -->
<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=960, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--960, max-->
<link rel="icon" type="image/png" href="favicon.png">
<!-- TO TRANSLATE: "name", "description" -->
<meta itemprop="name" content="The Wisdom and/or Madness of Crowds">
<meta itemprop="description" content="an interactive guide to human networks">
<!-- Sharing -->
<meta itemprop="name" content="The Wisdom and/or Madness of Crowds"> <!-- content="(TRANSLATE this part only)" -->
<meta itemprop="description" content="an interactive guide to human networks"> <!-- content="(TRANSLATE this part only)" -->
<meta itemprop="image" content="http://ncase.me/crowds/social/thumbnail.png">
<!-- TO TRANSLATE: "name", "description" -->
<meta name="twitter:title" content="The Wisdom and/or Madness of Crowds"> <!-- content="(TRANSLATE this part only)" -->
<meta name="twitter:description" content="an interactive guide to human networks"> <!-- content="(TRANSLATE this part only)" -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ncasenmare">
<meta name="twitter:title" content="The Wisdom and/or Madness of Crowds">
<meta name="twitter:description" content="an interactive guide to human networks">
<meta name="twitter:creator" content="@ncasenmare">
<meta name="twitter:image" content="http://ncase.me/crowds/social/thumbnail.png">
<!-- TO TRANSLATE: "name", "description" -->
<meta property="og:title" content="The Wisdom and/or Madness of Crowds">
<meta property="og:title" content="The Wisdom and/or Madness of Crowds"> <!-- content="(TRANSLATE this part only)" -->
<meta property="og:description" content="an interactive guide to human networks"> <!-- content="(TRANSLATE this part only)" -->
<meta property="og:type" content="website">
<meta property="og:url" content="http://ncase.me/crowds/">
<meta property="og:image" content="http://ncase.me/crowds/social/thumbnail.png">
<meta property="og:description" content="an interactive guide to human networks">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/index.css">
@ -66,7 +87,7 @@ MY "WHY" FOR MAKING THIS:
<canvas id="scratch" width="711" height="400"></canvas>
<!-- Skip -->
<div id="skip">skip &gt;</div>
<div id="skip">skip &gt;</div> <!-- TRANSLATE -->
<!-- Modal -->
<div id="modal_container">
@ -85,12 +106,25 @@ MY "WHY" FOR MAKING THIS:
<div id="navigation_container">
<div id="sound" mute="no">
<div id="sound_icon"></div>
<span id="sound_on">ON</span>
<span id="sound_off">OFF</span>
<span id="sound_on">ON</span> <!-- TRANSLATE -->
<span id="sound_off">OFF</span> <!-- TRANSLATE -->
</div>
<div id="sharing">
<a id="fb" target="_blank" href="TODO"></a>
<a id="tw" target="_blank" href="TODO"></a>
<a id="em" target="_blank" href="TODO"></a>
<span id="share_title">
The Wisdom and/or Madness of Crowds <!-- TRANSLATE -->
</span>
<span id="share_desc">
<!-- TRANSLATOR: keep this on ONE LINE or the social sharing will break! -->
Why do some groups of people act smart, dumb, kind, cruel? An interactive guide to human networks: <!-- TRANSLATE -->
</span>
</div>
<div id="navigation">
<!-- The chapters -->
<!-- TRANSLATE all the Chapter names! -->
<div chapter="Introduction">
<span>0</span>
<span>0. Introduction</span>
@ -109,7 +143,7 @@ MY "WHY" FOR MAKING THIS:
</div>
<div chapter="BB">
<span>4</span>
<span>4. Bonding &amp; Bridging</span>
<span>4. Bonding &amp; Bridging</span> <!-- note: &amp; is html for the "and" sign -->
</div>
<div chapter="SmallWorld">
<span>5</span>
@ -134,11 +168,11 @@ MY "WHY" FOR MAKING THIS:
<!-- Bonus Notes & References -->
<div modal="bonus">
<span>?</span>
<span>Bonus Boxes!</span>
<span>Bonus Boxes!</span> <!-- TRANSLATE -->
</div>
<div modal="references">
<span style="margin-top: 7px; font-size: 35px;">*</span>
<span>Links &amp; References</span>
<span>Links &amp; References</span> <!-- TRANSLATE -->
</div>
<div modal="translations">
<span style="margin-top:5px; position:relative;"><span style="
@ -151,7 +185,7 @@ MY "WHY" FOR MAKING THIS:
top: -1px;
left: 16px;
">あ</span></span>
<span>Translations</span>
<span>Translations</span> <!-- TRANSLATE -->
</div>
<!-- The hover bubble -->
@ -163,20 +197,72 @@ MY "WHY" FOR MAKING THIS:
</div>
<!-- The Pencil -->
<canvas id="pencil"></canvas>
<div id="pencil_container">
<canvas id="pencil"></canvas>
</div>
<!-- Preloader -->
<div id="pre_preloader">
<div>loading...</div>
<div>loading...</div> <!-- TRANSLATE -->
</div>
</body>
</html>
<!-- - - - - -->
<!-- SCRIPTS -->
<!-- - - - - -->
<script src="js/lib/helpers.js"></script>
<script src="js/lib/minpubsub.src.js"></script>
<script src="js/lib/howler.min.js"></script>
<script src="js/lib/Key.js"></script>
<script src="js/lib/Mouse.js"></script>
<script src="js/lib/Sprite.js"></script>
<script src="js/slideshow/Slideshow.js"></script>
<script src="js/slideshow/Pencil.js"></script>
<script src="js/slideshow/Boxes.js"></script>
<script src="js/slideshow/Scratch.js"></script>
<script src="js/slideshow/Navigation.js"></script>
<script src="js/slideshow/SimUI.js"></script>
<script src="js/slideshow/SandboxUI.js"></script>
<script src="js/slideshow/Modal.js"></script>
<script src="js/slideshow/Preloader.js"></script>
<script src="js/slideshow/Translations.js"></script>
<script src="js/sim/Peep.js"></script>
<script src="js/sim/Connection.js"></script>
<script src="js/sim/ConnectorCutter.js"></script>
<script src="js/sim/Simulations.js"></script>
<script src="js/chapters/A_Preloader.js"></script>
<script src="js/chapters/B_Introduction.js"></script>
<script src="js/chapters/C_Networks.js"></script>
<script src="js/chapters/D_Simple_Contagion.js"></script>
<script src="js/chapters/E_Complex_Contagion.js"></script>
<script src="js/chapters/F_Bonding_And_Bridging.js"></script>
<script src="js/chapters/G_Small_World.js"></script>
<script src="js/chapters/H_Conclusion.js"></script>
<script src="js/chapters/I_Credits.js"></script>
<script src="js/chapters/J_Sandbox.js"></script>
<script src="js/main.js"></script>
<!-- - - - - - - - - - - - -->
<!-- THE SLIDESHOW'S WORDS -->
<!-- - - - - - - - - - - - -->
<!--
This is the bulk of what you need to TRANSLATE!
Translate just the text that's within the <tag></tags>
If you're using a code editor (like Sublime Text https://www.sublimetext.com/),
it should automatically highlight what the text is (usually in white).
-->
<span style="display:none">
<!-- Preloader -->
@ -192,11 +278,14 @@ MY "WHY" FOR MAKING THIS:
<br>
<span style="position: relative;top: -11px;">of</span>
<br>
<span style="font-size: 100px;line-height: 80px;position: relative;top: -15px;">CROWDS</span>
<span style="font-size: 100px;line-height: 80px;position: relative;top: -15px; display:block;">CROWDS</span>
</div>
<div style="color:#999">
<!-- TRANSLATE note: comment out the line below... -->
playing time: 30 min • by nicky case, april 2018
<!-- ...and UN-comment + TRANSLATE this line! -->
<!-- by nicky case • translated by [your name] • <a href='/'>original in English</a> -->
</div>
</words>
@ -210,10 +299,20 @@ MY "WHY" FOR MAKING THIS:
</words>
<words id="preloader_play">
let's play! &rarr;
let's play! &rarr;
</words>
<!-- Introduction -->
<!--
TRANSLATE note: to make the text stay in a circle, I added lots of <br> breaks.
You may have to re-arrange the <br>'s in order to do your translation.
It shouldn't look too bad if they're slightly off, though!
Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
And &rarr; &larr; &darr; &uarr; are pointy arrows.
-->
<words id="intro">
@ -458,7 +557,7 @@ MY "WHY" FOR MAKING THIS:
</words>
<words id="complex_complex_2">
<span style="line-height:1.3em">
<span style="line-height:1.3em; display:block;">
Unlike our earlier "fake news" <icon red></icon> contagion,
this contagion <icon yellow></icon> does <i>not</i> spread to everyone!
@ -756,7 +855,7 @@ MY "WHY" FOR MAKING THIS:
position: absolute;
font-size: 88px;
top: 20px;
line-height: 100px;
line-height: 100px; display:block;
">
Contagions &amp; Connections
</div>
@ -811,7 +910,7 @@ MY "WHY" FOR MAKING THIS:
</words>
<words id="conclusion_2">
<span style="line-height:1.4em;">
<span style="line-height:1.4em; display:block;">
<div style="height:0.5em"></div>
@ -892,7 +991,7 @@ MY "WHY" FOR MAKING THIS:
Fan-made translations:
</words>
<words id="translations_do_not_exist">
<!-- There's no need to translate this line since, you know, -->
<!-- There's no need to TRANSLATE this line since, well, -->
<!-- it'll only show up if no translations exist -->
What the, no fan-made translations exist yet?!
</words>
@ -904,6 +1003,11 @@ MY "WHY" FOR MAKING THIS:
<!-- BONUS BOXES -->
<!-- - - - - - - -->
<!--
Sorry, not done yet! These Bonus Boxes need you to TRANSLATE, too:
(And then afterwards, the final thing, translate the References)
-->
<bonus id="books">
<h3>
@ -912,7 +1016,7 @@ MY "WHY" FOR MAKING THIS:
<div>
<img src="sdas" width="200" height="300" style="float:left; margin-right:1em"/>
<img src="sprites/bonus/surowieki.jpg" width="200" height="300" style="float:left; margin-right:1em"/>
First off, I'm not dissing
<a target="_blank" href="https://en.wikipedia.org/wiki/The_Wisdom_of_Crowds">
@ -968,7 +1072,7 @@ MY "WHY" FOR MAKING THIS:
<div style="clear:both"></div>
<br>
<img src="sdas" width="150" height="150" style="float:left; margin-right:1em"/>
<img src="sprites/bonus/connection1.png" width="250" height="150" style="float:left; margin-right:1em"/>
<b>Directional connections.</b> Alice is the boss of Bob, but Bob is not the boss of Alice.
Carol is the parent of Dave, but Dave is not the parent of Carol.
Therefore, "boss" &amp; "parent" are <i>directional</i> relationships:
@ -979,7 +1083,7 @@ MY "WHY" FOR MAKING THIS:
<div style="clear:both"></div>
<br>
<img src="sdas" width="150" height="150" style="float:left; margin-right:1em"/>
<img src="sprites/bonus/connection2.png" width="250" height="150" style="float:left; margin-right:1em"/>
<b>Weighted connections.</b> Elinor and Frankie are "friends", but not that close.
George and Harry are super-duper Best Friends Forever.
Even though there's a friendship connection in both cases, the second one is a stronger:
@ -990,7 +1094,7 @@ MY "WHY" FOR MAKING THIS:
<div style="clear:both"></div>
<br>
<img src="sdas" width="150" height="150" style="float:left; margin-right:1em"/>
<img src="sprites/bonus/map.png" width="200" height="200" style="float:left; margin-right:1em"/>
Just remember: all the simulations in this game are wrong. The same way any map is "wrong".
You see the map on the left? Buildings aren't actually gray featureless blocks!
Words don't float above the city! However, maps are useful not <i>despite</i> being simplified,
@ -1015,14 +1119,14 @@ MY "WHY" FOR MAKING THIS:
<div style="clear:both"></div>
<br>
<img src="sdas" width="150" height="150" style="float:left; margin-right:1em"/>
<img src="sprites/bonus/contagion1.png" width="250" height="150" style="float:left; margin-right:1em"/>
<b>Contagions with Randomness</b>. Instead of "if your friend is infected, you'll get infected",
you could simulate "if your friend is infected, you'll get infected <i>with an X% chance</i>".
<div style="clear:both"></div>
<br>
<img src="sdas" width="150" height="150" style="float:left; margin-right:1em"/>
<img src="sprites/bonus/contagion2.png" width="250" height="150" style="float:left; margin-right:1em"/>
<b>People have different contagion thresholds.</b>
In this simulation, I'm pretending everyone has the same threshold for binge-drinking (50%) or
volunteering (25%) or misinformation (0%). That's not true in real life, of course,
@ -1031,7 +1135,7 @@ MY "WHY" FOR MAKING THIS:
<div style="clear:both"></div>
<br>
<img src="sdas" width="150" height="150" style="float:left; margin-right:1em"/>
<img src="sprites/bonus/contagion3.png" width="250" height="150" style="float:left; margin-right:1em"/>
<b>An ecology of contagions.</b> This is actually cutting-edge research,
and I'm not entirely sure how one would do this.
In my simulations, only one contagion is spreading at a time.
@ -1044,7 +1148,7 @@ MY "WHY" FOR MAKING THIS:
<div style="clear:both"></div>
<br>
<img src="sdas" width="150" height="150" style="float:left; margin-right:1em"/>
<img src="sprites/bonus/contagion4.png" width="250" height="150" style="float:left; margin-right:1em"/>
<b>Contagions that mutate and evolve.</b>
Ideas don't pass perfectly from one person to another the way a virus genome does.
Like a game of Telephone, the message gets mutated with each re-telling.
@ -1060,7 +1164,7 @@ MY "WHY" FOR MAKING THIS:
<bonus id="further_reading">
<h3>
Further Reading
Further Reading &amp; Playing
</h3>
<div>
@ -1071,7 +1175,7 @@ MY "WHY" FOR MAKING THIS:
<br><br>
<img src="sdas" width="200" height="200" style="float:left; margin-right:1em"/>
<img src="sprites/bonus/connected.png" width="200" height="200" style="float:left; margin-right:1em"/>
<b>Book:</b>
<a target="_blank" href="http://www.connectedthebook.com/">
Connected</a>
@ -1087,7 +1191,7 @@ MY "WHY" FOR MAKING THIS:
<div style="clear:both"></div>
<br>
<img src="sdas" width="200" height="200" style="float:left; margin-right:1em"/>
<img src="sprites/bonus/swn.png" width="200" height="200" style="float:left; margin-right:1em"/>
<b>Interactive:</b>
<a target="_blank" href="http://worrydream.com/ScientificCommunicationAsSequentialArt/">
Collective Dynamics of Small World Networks</a>,
@ -1105,8 +1209,8 @@ MY "WHY" FOR MAKING THIS:
<br><br>
<img src="sdas" width="200" height="200" style="float:left; margin-right:1em"/>
<a target="_blank" href="https://mrpandey.github.io/d3graphTheory/">
<img src="sprites/bonus/trust.png" width="200" height="200" style="float:left; margin-right:1em"/>
<a target="_blank" href="http://ncase.me/trust/">
The Evolution of Trust</a> by Nicky Case (2017).
This is a game about the game theory of how cooperation arises (or not).
You first play a game of trust,
@ -1116,8 +1220,8 @@ MY "WHY" FOR MAKING THIS:
<div style="clear:both"></div>
<br>
<img src="sdas" width="200" height="200" style="float:left; margin-right:1em"/>
<a target="_blank" href="https://mrpandey.github.io/d3graphTheory/">
<img src="sprites/bonus/polygons.png" width="200" height="200" style="float:left; margin-right:1em"/>
<a target="_blank" href="http://ncase.me/polygons/">
Parable of the Polygons</a> by Vi Hart and Nicky Case (2014).
A story about how harmless choices can create a harmful world.
Based off a Nobel Prize-winning game theorist's work,
@ -1131,6 +1235,10 @@ MY "WHY" FOR MAKING THIS:
<!-- REFERENCES -->
<!-- - - - - - - -->
<!--
Final thing! These references also need you to TRANSLATE:
-->
<reference id="drunk">
<h3>
@ -1583,8 +1691,6 @@ MY "WHY" FOR MAKING THIS:
Your generosity <i>literally</i> feeds me and pays my rent,
and grants me the creative freedom to make these weird math/social-science games.
From the bottom of my heart, thank you!
<br><br>
<iframe src="supporters" width="730" height="330" style="border:none; margin:0 auto; display:block"></iframe>
</div>
</reference>
<reference id="playtesters" hidden=yes large=yes>
@ -1596,7 +1702,7 @@ MY "WHY" FOR MAKING THIS:
<br><br>
<b>The Prototype:</b>
<br>
Maria P ·
Maria ·
Monica Srivastava
<br><br>
@ -1604,7 +1710,7 @@ MY "WHY" FOR MAKING THIS:
<br>
Glen Chiacchieri ·
Kalli Repzeti ·
Mali ·
Mali Akmanalp ·
Toph Tucker
<br><br>
@ -1626,43 +1732,13 @@ MY "WHY" FOR MAKING THIS:
</span>
<!-- - - - - -->
<!-- SCRIPTS -->
<!-- - - - - -->
<!--
<script src="js/lib/helpers.js"></script>
<script src="js/lib/minpubsub.src.js"></script>
<script src="js/lib/howler.min.js"></script>
<script src="js/lib/Key.js"></script>
<script src="js/lib/Mouse.js"></script>
<script src="js/lib/Sprite.js"></script>
And that's it! That's the last of what needed to a TRANSLATE
<script src="js/slideshow/Slideshow.js"></script>
<script src="js/slideshow/Pencil.js"></script>
<script src="js/slideshow/Boxes.js"></script>
<script src="js/slideshow/Scratch.js"></script>
<script src="js/slideshow/Navigation.js"></script>
<script src="js/slideshow/SimUI.js"></script>
<script src="js/slideshow/SandboxUI.js"></script>
<script src="js/slideshow/Modal.js"></script>
<script src="js/slideshow/Preloader.js"></script>
<script src="js/slideshow/Translations.js"></script>
Thank you so, so much for doing this again, wow.
<script src="js/sim/Peep.js"></script>
<script src="js/sim/Connection.js"></script>
<script src="js/sim/ConnectorCutter.js"></script>
<script src="js/sim/Simulations.js"></script>
<script src="js/chapters/A_Preloader.js"></script>
<script src="js/chapters/B_Introduction.js"></script>
<script src="js/chapters/C_Networks.js"></script>
<script src="js/chapters/D_Simple_Contagion.js"></script>
<script src="js/chapters/E_Complex_Contagion.js"></script>
<script src="js/chapters/F_Bonding_And_Bridging.js"></script>
<script src="js/chapters/G_Small_World.js"></script>
<script src="js/chapters/H_Conclusion.js"></script>
<script src="js/chapters/I_Credits.js"></script>
<script src="js/chapters/J_Sandbox.js"></script>
<script src="js/main.js"></script>
Finally, go to "translations.txt" and follow the instructions there,
in order to let this game "know" your translation exists.
-->

2
js/chapters/E_Complex_Contagion.js
View File

@ -388,7 +388,7 @@ SLIDES.push(
// NASA Image
{
type:"box",
img:"sprites/nasa.png", x:0, y:0, w:400, h:250
img:"sprites/nasa.png", x:0, y:0, w:425, h:450
},
// Text

2
js/chapters/J_Sandbox.js
View File

@ -27,7 +27,7 @@ SLIDES.push(
// Simulation UI
{
type:"box",
x:35, y:365,
x:35, y:375,
sim_ui:"red"
},

10
js/lib/Mouse.js
View File

@ -38,18 +38,18 @@ function _touchWrapper(callback){
var _event = {};
_event.clientX = event.changedTouches[0].clientX;
_event.clientY = event.changedTouches[0].clientY;
event.preventDefault();
//event.preventDefault();
callback(_event);
};
}
// ALSO DON'T SCROLL WHEN TOUCH
/*document.addEventListener("touchstart", function(e){
document.body.addEventListener("touchstart", function(e){
e.preventDefault();
},false);
document.addEventListener("touchmove", function(e){
},false); // do NOT capture.
document.body.addEventListener("touchmove", function(e){
e.preventDefault();
},false);*/
},false); // do NOT capture.
// INIT
Mouse.init = function(target){

13
js/main.js
View File

@ -40,9 +40,16 @@ subscribe("prepreload/done", function(){
window.requestAnimationFrame(update);
// Go to THE SPLASH
//slideshow.gotoChapter("Preloader");
slideshow.gotoChapter("Credits");
$("#navigation").style.display = "block";
slideshow.gotoChapter("Preloader");
//slideshow.gotoChapter("Credits");
//$("#navigation").style.display = "block";
// HACK - MOBILE IS HORRIBLE
$all("a").forEach(function(a){
a.ontouchstart = function(event){
event.stopPropagation();
}; // so you CAN click links
});
});

18
js/slideshow/Modal.js
View File

@ -10,6 +10,7 @@ subscribe("bonus/show", function(bonus_id){
});
// SHOW REFERENCES
var SHOWING_SUPPORTERS = false;
subscribe("reference/show", function(ref_id){
publish("sound/button");
@ -18,6 +19,13 @@ subscribe("reference/show", function(ref_id){
$("#modal_content").innerHTML = footnote;
var noteLength = $("#modal_content").innerText.length; // innerTEXT, so no links
// HACK: IF IT'S PATREON PEOPLE, *NOW* SHOW IFRAME
if(!SHOWING_SUPPORTERS && ref_id=="supporters"){
SHOWING_SUPPORTERS = true; // ONCE
$("#modal_content").innerHTML = footnote+'<br><br>'+
'<iframe src="supporters" width="730" height="330" style="border:none; margin:0 auto; display:block"></iframe>';
}
if($("reference#"+ref_id).getAttribute("large")){
Modal.show(true); // force large
}else{
@ -109,3 +117,13 @@ subscribe("modal/translations", function(){
}
});
// MOBILE URGGHHHH
$("#modal_content_container").ontouchstart = function(event){
event.stopPropagation();
};
$("#modal_content_container").ontouchmove = function(event){
event.stopPropagation();
};

16
js/slideshow/Navigation.js
View File

@ -109,4 +109,18 @@ function Navigation(){
};
_stopPropButton($("#sound"));
}
}
/****************************
SOCIAL SHARING
****************************/
var shareURL = encodeURIComponent( window.location.href );
var shareTitle = encodeURIComponent( $("#share_title").innerText.trim() );
var shareDesc = encodeURIComponent( $("#share_desc").innerText.trim() );
$("#fb").href = "https://www.facebook.com/sharer/sharer.php?u="+shareURL+"&t="+shareDesc+" "+shareURL;
$("#tw").href = "https://twitter.com/intent/tweet?source="+shareURL+"&text="+shareDesc+" "+shareURL;
$("#em").href = "mailto:?subject="+shareTitle+"&body="+shareDesc+" "+shareURL;

6
js/slideshow/SandboxUI.js
View File

@ -18,6 +18,12 @@ function SandboxUI(container){
contagionInput.oninput = function(){
_updateContagion();
};
contagionInput.ontouchstart = function(event){
event.stopPropagation(); // AHHHH MOBILE
};
contagionInput.ontouchmove = function(event){
event.stopPropagation(); // AHHHH MOBILE
};
var _labelContagion0 = getWords("sandbox_contagion");
var _labelContagion1 = getWords("sandbox_contagion_simple");
var _labelContagion2 = getWords("sandbox_contagion_complex");

BIN
sprites/bonus/connected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 360 KiB

BIN
sprites/bonus/connection1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
sprites/bonus/connection2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
sprites/bonus/contagion1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
sprites/bonus/contagion2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
sprites/bonus/contagion3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
sprites/bonus/contagion4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
sprites/bonus/map.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 466 KiB

BIN
sprites/bonus/polygons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
sprites/bonus/surowieki.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 KiB

BIN
sprites/bonus/swn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
sprites/bonus/trust.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

BIN
sprites/nasa.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 442 KiB

BIN
sprites/ui/sharing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
sprites/ui/sound.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

7
translations.txt
View File

@ -16,12 +16,15 @@
// (Note: if you paste the native name of a right-to-left language here,
// it might show up as reversed here, but it'll show correctly on the website)
// Also, make sure the .html file of your translation
// uses the two-letter code, like "en.html", "de.html", "zh.html"
// uses the two-letter code, like "de.html", "ar.html", "zh.html"
//
// Thank you again so much! :)
// Once you're done, send a Pull Request to the GitHub repo
// so I can add your translation. Instructions are here:
// https://github.com/ncase/crowds#how-to-translate-this-thing
/////////////////////////////
// AVAILABLE TRANSLATIONS: //
/////////////////////////////
en: English
en: English