JSFiddle - React, Tailwind, and code Playground

by Kiwoong Jang

HTML

<div ng-app="ngApp" ng-controller="AppController">
    <p>{{"views.ALL" | localize}}</p>
    <p>{{"views.ALLGAMES" | localize}}</p>
    <p>{{"views.POPULARGAMES" | localize}}</p>
    <p>{{"search.RESULT" | localize:resultCount}}</p>
    <p>{{localizedText}}</p>
    
    <ng-custom-directive />
</div>

JavaScript

var languages = {
    eng: {
        views: {
            ALL: "All",
            ALLGAMES: "ALL GAMES",
            GAMENAME: "GAME NAME",
            JACKPOT: "JACKPOT",
            MAXSTAKE: "MAX STAKE",
            MINSTAKE: "MIN STAKE",
            REELS: "REELS",
            DECKS: "DECKS",
            PLAYNOW: "PLAY NOW",
            POPULARGAMES: "POPULAR GAMES",
            RECENTGAMES: "RECENT GAMES",
            TOP3: "TOP 3"
        },
        search: {
            GAMENAME: "GAME NAME",
            JACKPOT: "JACKPOT",
            RESULT: "Your search returned {{}} results"
        },
        wrapper: {
            REALPLAY: "REAL PLAY",
            LEARNMORE: "Learn more about playing"
        },
        dialog: {
            PLAYNOW: "PLAY NOW",
            REALPLAY: "REAL PLAY",
            PRACTICEPLAY: "PRACTICE PLAY",
            RETRY: "RETRY",
            CLOSE: "CLOSE",
            ERROR: "The server connection has failed.<br />Please try it again."
        },
        etc: {
            ALL: "All",
            ABC: "ABC",
            123: "123"
        }
    }
};


angular.module("ngApp", [])
.controller("AppController", function($scope, $filter) {
    $scope.title = "title,title";
    $scope.resultCount = 10;
    
    $scope.localizedText = $filter("localize")("views.ALL");
})
.directive("ngCustomDirective", function($document, $compile, $filter) {
    return {
        restrict: "E",
        replace: true,
        link: function(scope, element, attrs) {
            var dialog = $compile("<p>ERROR: " + $filter("localize")("dialog.ERROR") + "</p>")(scope);
            
            $document.find("body").append(dialog);
        }
    };
})
.filter("localize", function() {
    var translations = languages["eng"];
    
    return function(string, args) {
        var keys = (function(str) {
            var s = str.split(".");
            return {
                category: s[0],
                string: s[1]
            }
        })(string);
       ...