This commit is contained in:
Martin Doucha 2018-05-23 17:25:51 +02:00
commit 1106f64ba5
26 changed files with 18367 additions and 40 deletions

View File

@ -26,6 +26,7 @@ and was possible thanks to these open source/Creative Commons resources:
* [Howler.js](https://howlerjs.com/) for the audio
* [MinPubSub](https://github.com/daniellmb/MinPubSub) for publish/subscribe
* [iNoBounce](https://github.com/lazd/iNoBounce/) for making iOS stop acting like a such a jerk
**Font:** [Patrick Hand](https://fonts.google.com/specimen/Patrick+Hand) by Patrick Wagesreiter
@ -38,7 +39,18 @@ If so, maybe you can collaborate!
And if no one else is, PLEASE CREATE A NEW ISSUE in this repo
so that others know you're working on it!]**
Translations done so far: (none)
**Translations done so far:**
[Português](http://ncase.me/crowds/pt.html)
[Italiano](http://ncase.me/crowds/it.html)
[Français](http://ncase.me/crowds/fr.html)
[Español (Castellano)](http://ncase.me/crowds/es.html)
[Русский](http://ncase.me/crowds/ru.html)
[Українська](http://ncase.me/crowds/uk.html)
[Vietnamese](http://ncase.me/crowds/vi.html)
[简体中文](http://ncase.me/crowds/zh-CN.html)
[繁體中文](http://ncase.me/crowds/zh-TW.html)
[日本語](http://ncase.me/crowds/ja.html)
[Español (Mexicano)](http://ncase.me/crowds/es-MX.html)
**Step 1)** Clone this repo!
@ -54,7 +66,7 @@ Also, please feel free to credit yourself as a translator :)
**Step 5)** Add one line to the end of `translations.txt` so that the game "knows" your translation exists.
(more specific instructions will be inside that file)
**Step 6)** Send a Pull Request so I can make your translation go live!
**Step 6)** Send a **Pull Request** so I can make your translation go live!
**Step 7)** 🎉 fweeeee

View File

@ -41,6 +41,7 @@ a:hover{
width: 100%;
height: calc(100% - 60px);
cursor: none;
overflow: hidden; /* modal's being awful */
}
#container[sim_is_running]{
background: #eee;
@ -378,13 +379,13 @@ a:hover{
}
#translations{
position: absolute;
top: 14px;
top: 12px;
left: calc(50% - 400px);
width: 800px;
text-align: center;
color: #fff;
font-size: 16px;
line-height: 16px;
line-height: 17px;
letter-spacing: 0.5px;
}
#navigation{

Binary file not shown.

1703
es-MX.html Normal file

File diff suppressed because it is too large Load Diff

1666
es.html Normal file

File diff suppressed because it is too large Load Diff

1650
fr.html Normal file

File diff suppressed because it is too large Load Diff

View File

@ -35,17 +35,29 @@ Good luck, and thanks again!
-->
<!DOCTYPE html>
<html>
<html lang="en"> <!-- lang="(TRANSLATE: set your language code here, same as the page name!) e.g: es, es-ES, pt-BR, ja, it, fr-CA, de, ..." -->
<head>
<!-- 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="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta charset="utf-8">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="alternate" href="http://ncase.me/crowds/" hreflang="en">
<link rel="alternate" href="http://ncase.me/crowds/es.html" hreflang="es-ES">
<link rel="alternate" href="http://ncase.me/crowds/fr.html" hreflang="fr">
<link rel="alternate" href="http://ncase.me/crowds/it.html" hreflang="it">
<link rel="alternate" href="http://ncase.me/crowds/ja.html" hreflang="ja">
<link rel="alternate" href="http://ncase.me/crowds/pt.html" hreflang="pt">
<link rel="alternate" href="http://ncase.me/crowds/ru.html" hreflang="ru">
<link rel="alternate" href="http://ncase.me/crowds/uk.html" hreflang="uk">
<link rel="alternate" href="http://ncase.me/crowds/vi.html" hreflang="vi">
<link rel="alternate" href="http://ncase.me/crowds/zh-CN.html" hreflang="zh-CN">
<link rel="alternate" href="http://ncase.me/crowds/zh-TW.html" hreflang="zh-TW">
<!-- 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)" -->
@ -65,7 +77,7 @@ Good luck, and thanks again!
<meta property="og:image" content="http://ncase.me/crowds/social/thumb.png">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/index.css?v=3">
<link rel="stylesheet" type="text/css" href="css/index.css?v=6">
</head>
<body>
@ -214,6 +226,7 @@ Good luck, and thanks again!
<!-- - - - - -->
<script src="js/lib/helpers.js"></script>
<script src="js/lib/inobounce.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>
@ -227,9 +240,9 @@ Good luck, and thanks again!
<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/Modal.js?v=5"></script>
<script src="js/slideshow/Preloader.js"></script>
<script src="js/slideshow/Translations.js?v=2"></script>
<script src="js/slideshow/Translations.js?v=5"></script>
<script src="js/sim/Peep.js?v=2"></script>
<script src="js/sim/Connection.js"></script>
@ -285,7 +298,7 @@ it should automatically highlight what the text is (usually in white).
<!-- 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> -->
<!-- by nicky case • translated by [your name] • <a href='.'>original in English</a> -->
</div>
</words>
@ -400,7 +413,7 @@ Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
Now, social connections are for more than just making pretty pictures.
People <i>look to</i> their social connections to understand their world.
For example, people look to their peers to
find out <b>what % of their friends</b> (not counting themselves) are,
find out <b>what % of their friends (not counting themselves)</b> are,
say, binge-drinkers. <icon name="yellow"></icon>
</words>
@ -606,7 +619,7 @@ Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
<b>NOTE:</b> Volunteering is just <i>one</i> of many complex contagions!
Others include: voter turnout, lifestyle habits,
challenging your beliefs,
taking time to understand a issue deeply &mdash; anything
taking time to understand an issue deeply &mdash; anything
that needs more than one "exposure".
Complex contagions aren't <i>necessarily</i> wise,
but being wise is a complex contagion.
@ -993,13 +1006,13 @@ Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
lots of love and thanks to</span>
<div style="font-size: 3em; line-height: 1.0em;">
MY PATREON SUPPORTERS</div>
<a onclick='publish("reference/show", ["supporters"]);'>
see names &amp; drawings of supporters</a> ·
<a onclick='publish("reference/show", ["playtesters"]);'>
see playtesters</a>
<br>
<a target="_blank" href="https://www.patreon.com/ncase" style="text-decoration:none">
help me make more like this! &lt;3</a>
<br>
<a onclick='publish("reference/show", ["supporters"]);'>
see my supporters</a> ·
<a onclick='publish("reference/show", ["playtesters"]);'>
see my playtesters</a>
<br><br>
@ -1043,6 +1056,11 @@ Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
<words id="translations_add">
(add your own!)
</words>
<words id="translations_original">
<!-- No need to translate this, because, I assume, -->
<!-- if someone wants to play the game in English, they can read English -->
(original in English)
</words>
<!-- - - - - - - -->
<!-- BONUS BOXES -->
@ -1085,7 +1103,7 @@ Sorry, not done yet! These Bonus Boxes need you to TRANSLATE, too:
But... I don't think "make everyone as independent as possible" is the full answer.
Even geniuses, who we mischaracterize as the most independent thinkers,
are deeply influenced by others. As Sir Isaac Newton said,
<i>“If I have seen further, it is by standing on the sholders of Giants.”</i>
<i>“If I have seen further, it is by standing on the shoulders of Giants.”</i>
<br><br>
@ -1376,10 +1394,17 @@ Final thing! These references also need you to TRANSLATE:
<br><br>
<a target="_blank" href="http://www.jstor.org/stable/10.1086/521848?seq=1#page_scan_tab_contents">
“Complex Contagions and the Weakness of Long Ties”</a> by Centola &amp; Macy (2007)
coined the phrase "complex contagion", and
showed the important differences between that and "simple contagion".
<br><br>
<a target="_blank" href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0180802">
“Evidence for complex contagion models of social contagion from observational data”</a>
by Sprague &amp; House (2017)
shows that complex contagions do, in fact, exist. (at least, in the social media data they looked at)
empirically showed that complex contagions do, in fact, exist. (at least, in the social media data they looked at)
<br><br>
@ -1623,12 +1648,13 @@ Final thing! These references also need you to TRANSLATE:
</reference>
<reference id="supporters" hidden=yes large=yes>
<div>
To
<a target="_blank" href="https://www.patreon.com/ncase">my supporters on Patreon</a>:
I'm deeply grateful.
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!
Dear Patreon supporters:
Your generosity <i>literally</i> feeds me and pays my rent.
You give me the freedom to make these weird educational games,
so, from the bottom of my heart, thank you. &lt;3
<br>
<a target="_blank" href="https://www.patreon.com/ncase" style="text-decoration:none">
(want to support me in making more stuff like this? check out my Patreon!)</a>
</div>
</reference>
<reference id="playtesters" hidden=yes large=yes>
@ -1679,4 +1705,4 @@ Thank you so, so much for doing this again, wow.
Finally, go to "translations.txt" and follow the instructions there,
in order to let this game "know" your translation exists.
-->
-->

1688
it.html Normal file

File diff suppressed because it is too large Load Diff

1631
ja.html Normal file

File diff suppressed because it is too large Load Diff

View File

@ -233,6 +233,7 @@ SLIDES.push(
{
remove:[
{type:"box", id:"complex_cascade"},
{type:"box", id:"complex_cascade_feel_free"},
{type:"box", id:"end"}
],
move:[

View File

@ -44,7 +44,12 @@ function cloneObject(obj){
// Get words
function getWords(wordsID){
return $("words#"+wordsID).innerHTML.trim();
var dom = $("words#"+wordsID);
if(dom){
return dom.innerHTML.trim();
}else{
return "";
}
}
// Remove from array

131
js/lib/inobounce.js Normal file
View File

@ -0,0 +1,131 @@
/*! iNoBounce - v0.1.6
* https://github.com/lazd/iNoBounce/
* Copyright (c) 2013 Larry Davis <lazdnet@gmail.com>; Licensed BSD */
(function(global) {
// Stores the Y position where the touch started
var startY = 0;
// Store enabled status
var enabled = false;
var supportsPassiveOption = false;
try {
var opts = Object.defineProperty({}, 'passive', {
get: function() {
supportsPassiveOption = true;
}
});
window.addEventListener('test', null, opts);
} catch (e) {}
var handleTouchmove = function(evt) {
// Get the element that was scrolled upon
var el = evt.target;
// Check all parent elements for scrollability
while (el !== document.body && el !== document) {
// Get some style properties
var style = window.getComputedStyle(el);
if (!style) {
// If we've encountered an element we can't compute the style for, get out
break;
}
// Ignore range input element
if (el.nodeName === 'INPUT' && el.getAttribute('type') === 'range') {
return;
}
var scrolling = style.getPropertyValue('-webkit-overflow-scrolling');
var overflowY = style.getPropertyValue('overflow-y');
var height = parseInt(style.getPropertyValue('height'), 10);
// Determine if the element should scroll
var isScrollable = scrolling === 'touch' && (overflowY === 'auto' || overflowY === 'scroll');
var canScroll = el.scrollHeight > el.offsetHeight;
if (isScrollable && canScroll) {
// Get the current Y position of the touch
var curY = evt.touches ? evt.touches[0].screenY : evt.screenY;
// Determine if the user is trying to scroll past the top or bottom
// In this case, the window will bounce, so we have to prevent scrolling completely
var isAtTop = (startY <= curY && el.scrollTop === 0);
var isAtBottom = (startY >= curY && el.scrollHeight - el.scrollTop === height);
// Stop a bounce bug when at the bottom or top of the scrollable element
if (isAtTop || isAtBottom) {
evt.preventDefault();
}
// No need to continue up the DOM, we've done our job
return;
}
// Test the next parent
el = el.parentNode;
}
// Stop the bouncing -- no parents are scrollable
evt.preventDefault();
};
var handleTouchstart = function(evt) {
// Store the first Y position of the touch
startY = evt.touches ? evt.touches[0].screenY : evt.screenY;
};
var enable = function() {
// Listen to a couple key touch events
window.addEventListener('touchstart', handleTouchstart, supportsPassiveOption ? { passive : false } : false);
window.addEventListener('touchmove', handleTouchmove, supportsPassiveOption ? { passive : false } : false);
enabled = true;
};
var disable = function() {
// Stop listening
window.removeEventListener('touchstart', handleTouchstart, false);
window.removeEventListener('touchmove', handleTouchmove, false);
enabled = false;
};
var isEnabled = function() {
return enabled;
};
// Enable by default if the browser supports -webkit-overflow-scrolling
// Test this by setting the property with JavaScript on an element that exists in the DOM
// Then, see if the property is reflected in the computed style
var testDiv = document.createElement('div');
document.documentElement.appendChild(testDiv);
testDiv.style.WebkitOverflowScrolling = 'touch';
var scrollSupport = 'getComputedStyle' in window && window.getComputedStyle(testDiv)['-webkit-overflow-scrolling'] === 'touch';
document.documentElement.removeChild(testDiv);
if (scrollSupport) {
enable();
}
// A module to support enabling/disabling iNoBounce
var iNoBounce = {
enable: enable,
disable: disable,
isEnabled: isEnabled
};
if (typeof module !== 'undefined' && module.exports) {
// Node.js Support
module.exports = iNoBounce;
}
if (typeof global.define === 'function') {
// AMD Support
(function(define) {
define('iNoBounce', [], function() { return iNoBounce; });
}(global.define));
}
else {
// Browser support
global.iNoBounce = iNoBounce;
}
}(this));

View File

@ -54,6 +54,7 @@ subscribe("prepreload/done", function(){
subscribe("START", function(){
// Music
SOUNDS.bg_music.stop();
SOUNDS.bg_music.volume(0.5);
SOUNDS.bg_music.loop(true);
SOUNDS.bg_music.play();
@ -74,4 +75,4 @@ subscribe("START", function(){
// Introduction
slideshow.next();
});
});

View File

@ -106,8 +106,10 @@ subscribe("modal/translations", function(){
html += getWords("translations_do_not_exist");
}
html += " <a target='_blank' href='"+window.ADD_YOUR_OWN_LINK+"'>"+getWords("translations_add")+"</a>";
html += "<br>";
html += " <a href='.'>"+getWords("translations_original")+"</a>";
html += "<div style='height:12px'></div>";
html += _createLinks(" · ");
$("#modal_content").innerHTML = html;
// Show in large box

View File

@ -2,23 +2,28 @@ window.TRANSLATIONS = [];
window.ADD_YOUR_OWN_LINK = "https://github.com/ncase/crowds#how-to-translate-this-thing";
var r = new XMLHttpRequest();
r.open("GET", "translations.txt", true);
var DEFAULT_LANG_CODE = 'en';
r.open("GET", "translations.txt?cache="+Math.round(1000*Math.random()), true); // force cache refresh
r.onreadystatechange = function () {
if(r.readyState != 4 || r.status != 200) return;
// Get current language code from path
var currentCode = location.pathname.split('/').slice(-1)[0].replace('.html', '') || DEFAULT_LANG_CODE;
// Parse available translations
// Only lines of the form "nn: name"
var response = r.responseText;
var lines = response.split("\n");
var available = lines.filter(function(line){
return (/^\w\w\:?\s+(.+)/).test(line); // ww: wwwwww
return (/^[a-z]{2}(?:-[A-Z]{2})?\:?\s+(.+)/).test(line); // ww: wwwwww
});
for(var i=0; i<available.length; i++){
var a = available[i];
var code = a.match(/\w\w/)[0];
var lang = a.match(/^\w\w\:?\s+(.+)/)[1];
if(code=="en") continue; // English is just an example
var code = a.match(/[a-z]{2}(?:-[A-Z]{2})?/)[0];
var lang = a.match(/^[a-z]{2}(?:-[A-Z]{2})?\:?\s+(.+)/)[1];
if(code === currentCode) continue; // Hide current language tab
TRANSLATIONS.push({
code: code,
lang: lang
@ -35,6 +40,7 @@ r.onreadystatechange = function () {
html += " <a target='_blank' href='"+window.ADD_YOUR_OWN_LINK+"'>"+getWords("translations_add")+"</a>";
html += " | ";
html += _createLinks(" · ");
$("#translations").innerHTML = html;
}
@ -42,13 +48,20 @@ r.onreadystatechange = function () {
r.send();
function _createLinks(separator){
var html = "";
for(var i=0; i<TRANSLATIONS.length; i++){
var t = TRANSLATIONS[i];
// Refer to root if the language is default (en)
var href = (t.code === DEFAULT_LANG_CODE) ? '.' : (t.code+".html");
if(i>0) html+=separator;
html += "<a href='"+t.code+".html' style='text-decoration:none'>";
html += "<a href='"+href+"' style='text-decoration:none'>";
html += t.lang;
html += "</a>";
}
// Hardcoding the external Arabic translation, oh well
html += " · <a href='http://alexanderclay.github.io/crowds' style='text-decoration:none'>العربية</a>";
return html;
}
}

1694
pt.html Normal file

File diff suppressed because it is too large Load Diff

1444
ru.html Normal file

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.3 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 80 KiB

After

Width:  |  Height:  |  Size: 72 KiB

View File

@ -1,10 +1,10 @@
// Once you've finished your translation,
// the website needs to "know" it exists!
// This text file is how the website "knows".
//
//
// First, look up the language you're translating to on this page:
// https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
//
//
// Then, at the bottom of this file, enter on a new line:
// [two-letter code]: [native name of language]
// For example:
@ -12,7 +12,7 @@
// de: Deutsch
// zh: 中文
// ar: العربية
//
//
// (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
@ -27,4 +27,15 @@
// AVAILABLE TRANSLATIONS: //
/////////////////////////////
en: English
en: English
pt: Português
it: Italiano
fr: Français
es: Español (Castellano)
ru: Русский
uk: Українська
vi: Vietnamese
zh-CN: 简体中文
zh-TW: 繁體中文
ja: 日本語
es-MX: Español (Mexicano)

1728
uk.html Normal file

File diff suppressed because it is too large Load Diff

1691
vi.html Normal file

File diff suppressed because it is too large Load Diff

1581
zh-CN.html Normal file

File diff suppressed because it is too large Load Diff

1648
zh-TW.html Normal file

File diff suppressed because it is too large Load Diff