JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<button class="changelanguage" id="english">English</button>
<button class="changelanguage" id="russian">Russian</button>
<button class="changelanguage" id="japanese">Japanese</button><br />

<button id="sendmessage">Send Message</button>

<div id="message"></div>

JavaScript

var language = "english";

//This would be in translations.js
var translations = {
    "You are cool, have a {0}.": {
        russian: "Вы это круто, есть {0}.",
        japanese: "あなたはクールですが、{0}持っている。"
    }
};

//Simulate a couple definitions
var items = {
    spear: {
        name: "Spear"
    },
    otherthing: {
        name: "Other non-translated thing"   
    }
};

function translate(msg) {
    var replace = msg.replace(/{(.*)}/g, "{0}");    
    if (translations[replace] && translations[replace][language]) {
        msg = translations[replace][language];
    }
    return msg;
}

function message(msg) {
    if (language !== "english") {
        msg = translate(msg);
    } else {
        //Strip all {}
        msg = msg.replace(/{(.*)}/g, "\$1"); 
    }
    $("#message").append(msg + "<br />");
}








//jQuery stuff

$(".changelanguage").click(function() {
    language = $(this).attr("id");
    
    //Here is where we would load russian.js, japanese.js, etc. Let's just simulate it - they would just overwrite definitions. Don't put Japanese in here to show untranslated stuff.
    if (language === "russian") {
        items.spear.name = "копье";
    } else {
        items.spear.name = "Spear";
    }
    
    message("Language changed to " + $(this).html() + ".");
});

$("#sendmessage").click(function() {
    message("You are cool, have a {" + items.spear.name + "}.");
});