translatable
This commit is contained in:
Nicky Case
parent
bec3f354c7
commit
e378f2dcc8
|
|
@ -317,6 +317,23 @@ b, strong{
|
|||
#sound[mute=yes] > #sound_off{
|
||||
display: block;
|
||||
}
|
||||
#translations{
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: calc(50% - 400px);
|
||||
width: 800px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
#translations a{
|
||||
color: #ff4040;
|
||||
}
|
||||
#translations a:hover{
|
||||
color: #ff6060;
|
||||
}
|
||||
#navigation{
|
||||
|
||||
display: none;
|
||||
|
|
|
|||
15
index.html
15
index.html
|
|
@ -127,6 +127,7 @@ MY "WHY" FOR MAKING THIS:
|
|||
<span id="nav_bubble"></span>
|
||||
|
||||
</div>
|
||||
<div id="translations"></div>
|
||||
<div id="social"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -831,6 +832,17 @@ MY "WHY" FOR MAKING THIS:
|
|||
<words id="sim_stop">
|
||||
reset & re-draw
|
||||
</words>
|
||||
<words id="translations_exist">
|
||||
Fan-made translations:
|
||||
</words>
|
||||
<words id="translations_do_not_exist">
|
||||
<!-- There's no need to translate this line since, you know, -->
|
||||
<!-- it'll only show up if no translations exist -->
|
||||
What the, no fan-made translations exist yet?!
|
||||
</words>
|
||||
<words id="translations_add">
|
||||
(add your own!)
|
||||
</words>
|
||||
|
||||
<!-- - - - - - - -->
|
||||
<!-- BONUS BOXES -->
|
||||
|
|
@ -1063,7 +1075,7 @@ MY "WHY" FOR MAKING THIS:
|
|||
</b> 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,
|
||||
this interactive shows how discrimination and/or diversity can arise from the bottom up.
|
||||
this interactive shows how discrimination and diversity can arise from the bottom up.
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -1542,6 +1554,7 @@ MY "WHY" FOR MAKING THIS:
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,8 @@ subscribe("START", function(){
|
|||
SOUNDS.bg_music.loop(true);
|
||||
SOUNDS.bg_music.play();
|
||||
|
||||
// Show Navigation
|
||||
// Hide translations, show navigation
|
||||
$("#translations").style.display = "none";
|
||||
$("#navigation").style.display = "block";
|
||||
|
||||
// Show Skip Button
|
||||
|
|
|
|||
|
|
@ -20,12 +20,14 @@ subscribe("key/down/escape", function(){
|
|||
});
|
||||
|
||||
window.Modal = {
|
||||
currentlyShowing: "",
|
||||
show: function(large){
|
||||
$("#modal_container").setAttribute("show","yes");
|
||||
$("#modal").setAttribute("size", large ? "large" : "small");
|
||||
$("#modal_content_container").scrollTop = 0; // scroll to top
|
||||
},
|
||||
hide: function(){
|
||||
Modal.currentlyShowing = "";
|
||||
publish("sound/button");
|
||||
$("#modal_container").removeAttribute("show");
|
||||
},
|
||||
|
|
@ -49,8 +51,45 @@ $("#modal_close").onclick = Modal.hide;
|
|||
|
||||
// Show big collected modals
|
||||
subscribe("modal/bonus", function(){
|
||||
Modal.showAll("bonus");
|
||||
if(Modal.currentlyShowing == "bonus"){
|
||||
Modal.hide();
|
||||
}else{
|
||||
Modal.currentlyShowing = "bonus";
|
||||
Modal.showAll("bonus");
|
||||
}
|
||||
});
|
||||
subscribe("modal/references", function(){
|
||||
Modal.showAll("reference");
|
||||
});
|
||||
if(Modal.currentlyShowing == "reference"){
|
||||
Modal.hide();
|
||||
}else{
|
||||
Modal.currentlyShowing = "reference";
|
||||
Modal.showAll("reference");
|
||||
}
|
||||
});
|
||||
|
||||
// Translations
|
||||
subscribe("modal/translations", function(){
|
||||
|
||||
if(Modal.currentlyShowing == "translations"){
|
||||
Modal.hide();
|
||||
}else{
|
||||
Modal.currentlyShowing = "translations";
|
||||
|
||||
// Translation HTML
|
||||
var html = "";
|
||||
if(window.TRANSLATIONS.length>0){
|
||||
html += getWords("translations_exist");
|
||||
}else{
|
||||
html += getWords("translations_do_not_exist");
|
||||
}
|
||||
html += " <a target='_blank' href='"+window.ADD_YOUR_OWN_LINK+"'>"+getWords("translations_add")+"</a>";
|
||||
html += "<br>";
|
||||
html += _createLinks(" · ");
|
||||
$("#modal_content").innerHTML = html;
|
||||
|
||||
// Show in large box
|
||||
Modal.show(false);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -21,9 +21,11 @@ subscribe("prepreload", function(){
|
|||
var pre_preloader = $("#pre_preloader");
|
||||
pre_preloader.parentNode.removeChild(pre_preloader);
|
||||
|
||||
//slideshow.gotoChapter("Preloader");
|
||||
slideshow.gotoChapter("Preloader");
|
||||
/*
|
||||
slideshow.gotoChapter("Credits");
|
||||
$("#navigation").style.display = "block";
|
||||
*/
|
||||
|
||||
publish("preload");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
window.TRANSLATIONS = [];
|
||||
window.ADD_YOUR_OWN_LINK = "http://derp";
|
||||
|
||||
var r = new XMLHttpRequest();
|
||||
r.open("GET", "translations.txt", true);
|
||||
r.onreadystatechange = function () {
|
||||
|
||||
if(r.readyState != 4 || r.status != 200) return;
|
||||
|
||||
// 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
|
||||
});
|
||||
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
|
||||
TRANSLATIONS.push({
|
||||
code: code,
|
||||
lang: lang
|
||||
});
|
||||
}
|
||||
TRANSLATIONS = TRANSLATIONS.sort(function(a,b){
|
||||
return a.lang>b.lang;
|
||||
});
|
||||
|
||||
// Show translations (if any)
|
||||
if(TRANSLATIONS.length>0){
|
||||
var html = "";
|
||||
html += getWords("translations_exist").toLowerCase();
|
||||
html += " <a target='_blank' href='"+window.ADD_YOUR_OWN_LINK+"'>"+getWords("translations_add")+"</a>";
|
||||
html += " | ";
|
||||
html += _createLinks(" · ");
|
||||
$("#translations").innerHTML = html;
|
||||
}
|
||||
|
||||
};
|
||||
r.send();
|
||||
|
||||
function _createLinks(separator){
|
||||
var html = "";
|
||||
for(var i=0; i<TRANSLATIONS.length; i++){
|
||||
var t = TRANSLATIONS[i];
|
||||
if(i>0) html+=separator;
|
||||
html += "<a href='"+t.code+".html' style='text-decoration:none'>";
|
||||
html += t.lang;
|
||||
html += "</a>";
|
||||
}
|
||||
return html;
|
||||
}
|
||||
|
|
@ -1,7 +1,27 @@
|
|||
// Once you've finished your translation,
|
||||
// the website needs to "know" it exists!
|
||||
// This text file is how the website "knows".
|
||||
//
|
||||
// herp derp
|
||||
// herp derp derp
|
||||
// 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:
|
||||
// en: English
|
||||
// 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
|
||||
// uses the two-letter code, like "en.html", "de.html", "zh.html"
|
||||
//
|
||||
// Thank you again so much! :)
|
||||
|
||||
en: English
|
||||
/////////////////////////////
|
||||
// AVAILABLE TRANSLATIONS: //
|
||||
/////////////////////////////
|
||||
|
||||
en: English
|
||||
|
|
|
|||
Loading…
Reference in New Issue