I18n support and Japanese translations

.gitignore

@@ -1,5 +1,5 @@
 www/*.html
-www/*/*.html
+www/**/*.html
 www/css/*.css
 www/js/index.js
 www/assets/challenges/descriptors

TRANSLATION.md

@@ -0,0 +1,50 @@
+# Translation
+
+Translation files are found in the following directories:
+- `lib/challenges/locales`: translation of the challenges
+- `locales`: translation of the views
+- `content/docs.json`: translation of the documentation
+
+## i18n not released yet
+
+Kano OS is not fully i18n-aware and locales are not installed for end users, yet. You can translate this application, but as of now, users will still see the default English message strings.
+
+## Build
+
+Translations are part of the normal build process: when you type `npm run build`, the translated challenges and docs will be copied in the `www` directory; and the view templates will be localized by mapping the resources _for each language_.  So it means that all resources (views, challenges and docs translations) are prepared in advance.
+
+## Runtime
+
+At runtime, the proper translation will be picked based on the browser language. 
+
+## How to add a new translation
+
+You need to add the new language in 4 places:
+
+1. Create `lib/challenges/locales/<locale>` and copy the whole `worlds` directory and `index.json` 
+   These are the translations of the challenges, the main content of Make-Art.
+
+2. Create `locales/<locale>` and copy the content of `locales/en`
+   These are the translations of the views
+
+3. Directly edit `content/docs.json` and add your language to the map (at the top level)
+
+4. Add your language to `SUPPORTED_LOCALES` array in `lib/i18n.js`
+
+## How to make sure your code is i18n-aware
+
+For the challenges, if you create a new challenge in English, there is nothing special to do, it can be translated to other languages by copying the .json file to the other locales directories.
+
+For the views (jade templates), you need to enclose all your strings in `${{` and `}}$` as this is the convention used by gulp-html-i18n plugin to find and replace the messages in the view templates.  Then, you need to add the new string to the corresponding .json file in the (top-level) `locales` directory.  Let's say you want to add a string "Happy Birthday" to the challenge.jade template; you would write it as follows in the challenge.jade: `${{ challenge.hapy_birthday }}$`.  Then, you would add an entry to the challenge.json map, like:
+```
+{
+    ...
+    "happy_birthday": "Happy Birthday"
+}
+```
+
+Finally, for the documentation, if you add / modify text in `content/docs.json` the translations will need to be added for other languages, in the same file.
+
+## To-Do
+
+Tool to make it easier to add new languages.

content/docs.json

@@ -1,4 +1,4 @@
-[
+{ "en": [
     {
         "label"    : "Shapes",
         "icon"     : "shapes",
@@ -263,6 +263,274 @@
                 "defaults": [ "black", 50 ]
             }
 
+        ]
+    }
+], "ja" : [
+    {
+        "label"    : "形",
+        "icon"     : "shapes",
+        "commands" : [
+            {
+                "call"        : "circle",
+                "unlockedAt"  : 1,
+                "description" : "円形を描く",
+                "args"        : [
+                    [ "radius", "number", "円形の大きさ（半径）", true ]
+                ],
+                "defaults": [ 100 ]
+            },
+            {
+                "call"        : "ellipse",
+                "unlockedAt"  : 999,
+                "description" : "楕円を描く",
+                "args"        : [
+                    [ "radius-x", "number", "楕円の横幅", true ],
+                    [ "radius-y", "number", "楕円の高さ", true ]
+                ],
+                "defaults": [ 50, 100 ]
+            },
+            {
+                "call"        : "square",
+                "unlockedAt"  : 2,
+                "description" : "四角を描く",
+                "args"        : [
+                    [ "size", "number", "四角の大きさ", true ]
+                ],
+                "defaults": [ 200 ]
+            },
+            {
+                "call"        : "rectangle",
+                "unlockedAt"  : 999,
+                "description" : "長方形を描く",
+                "args"        : [
+                    [ "width", "number", "長方形の幅", true ],
+                    [ "height", "number", "長方形の高さ", true ]
+                ],
+                "defaults": [ 100, 200 ]
+            },
+            {
+                "call"        : "arc",
+                "unlockedAt"  : 999,
+                "description" : "円形の一部を描く",
+                "args"        : [
+                    [ "radius", "number", "大きさ（半径）", true ],
+                    [ "start", "number", "開始点（０〜２）", true ],
+                    [ "end", "number", "最後の点（０〜２）", true ],
+                    [ "close", "bool", "形を閉じるかどうか", false ]
+                ],
+                "defaults": [ 100, 1, 2, true ]
+            },
+            {
+                "call"        : "polygon",
+                "unlockedAt"  : 999,
+                "description" : "多辺形を描く",
+                "args"        : [
+                    [ "x1", "number", "ー点目のX値", true ],
+                    [ "y1", "number", "ー点目のY値", true ],
+                    [ "...", "", "他の点の位置", true ],
+                    [ "close", "bool", "パスを真ん中に閉じるかどうか", false ]
+                ],
+                "defaults": [ 0, 0, 100, 0, 100, 100 ]
+            }
+        ]
+    },
+    {
+        "label"    : "線",
+        "icon"     : "lines",
+        "commands" : [
+            {
+                "call"        : "line",
+                "unlockedAt"  : 3,
+                "description" : "ある大きさの線を描く",
+                "args"        : [
+                    [ "x", "number", "水平距離", true ],
+                    [ "y", "number", "垂直距離", false ]
+                ],
+                "defaults": [ 100, 50 ]
+            },
+            {
+                "call"        : "lineTo",
+                "unlockedAt"  : 999,
+                "description" : "ある点までに線を描く",
+                "args"        : [
+                    [ "x", "number", "水平の目的点", true ],
+                    [ "y", "number", "垂直の目的点", true ]
+                ],
+                "defaults": [ 0, 0 ]
+            }
+        ]
+    },
+    {
+        "label"    : "位置",
+        "icon"     : "position",
+        "commands" : [
+            {
+                "call"        : "move",
+                "unlockedAt"  : 6,
+                "description" : "カーソルをある距離に動かす",
+                "args"        : [
+                    [ "x", "number", "水平距離", true ],
+                    [ "y", "number", "垂直距離", false ]
+                ],
+                "defaults": [ 100, 50 ]
+            },
+            {
+                "call"        : "moveTo",
+                "unlockedAt"  : 999,
+                "description" : "カーソルをある位置までに動かす",
+                "args"        : [
+                    [ "x", "number", "水平目的点", true ],
+                    [ "y", "number", "垂直目的点", true ]
+                ],
+                "defaults": [ "center", "center" ]
+            }
+        ]
+    },
+    {
+        "label"    : "テキスト",
+        "icon"     : "text",
+        "commands" : [
+            {
+                "call"        : "text",
+                "unlockedAt"  : 999,
+                "description" : "文字を書く",
+                "args"        : [
+                    [ "message", "string", "メッセージ", true ]
+                ],
+                "defaults": [ "何か言って！" ]
+            },
+            {
+                "call"        : "font",
+                "unlockedAt"  : 999,
+                "description" : "フォントや大きさを設定",
+                "args"        : [
+                    [ "font", "string", "フォントファミリー名", false ],
+                    [ "size", "number", "ピクセルでのフォントの大きさ", false ]
+                ],
+                "defaults": [ "Bariol", 30 ]
+            },
+            {
+                "call"        : "bold",
+                "unlockedAt"  : 999,
+                "description" : "太字を有効(true)または無効(false)",
+                "args"        : [
+                    [ "state", "bool", "太字の状態(デフォルトはtrue)", false ]
+                ],
+                "defaults": [ true ]
+            },
+            {
+                "call"        : "italic",
+                "unlockedAt"  : 999,
+                "description" : "車体を有効(true)または無効(false)",
+                "args"        : [
+                    [ "state", "bool", "車体の状態(デフォルトはtrue)", false ]
+                ],
+                "defaults": [ true ]
+            }
+        ]
+    },
+    {
+        "label"    : "一般",
+        "icon"     : "general",
+        "commands" : [
+            {
+                "call"        : "for",
+                "unlockedAt"  : 9,
+                "description" : "コードを繰り返す",
+                "args"        : [
+                    [ "i in [x..y]", "number", "i変数の最初と最後の値", true ]
+                ],
+                "example"     : "for i in [1..5]\n    circle i",
+                "defaults": null
+            },
+            {
+                "call"        : "random",
+                "unlockedAt"  : 9,
+                "description" : "ある範囲内でランダムな数字を生成する",
+                "args"        : [
+                    [ "min", "number", "最低値", true ],
+                    [ "max", "number", "最高地", true ],
+                    [ "float", "bool", "trueにすると少数が得られる", false ]
+                ],
+                "example"     : "random 5, 10",
+                "defaults": [ 5, 10 ]
+            }
+        ]
+    },
+    {
+        "label"    : "色",
+        "icon"     : "colors",
+        "commands" : [
+            {
+                "call"        : "background",
+                "unlockedAt"  : 999,
+                "description" : "背景の色を設定する",
+                "args"        : [
+                    [ "color", "string", "設定したい背景の色", true ]
+                ],
+                "defaults": [ "blue" ]
+            },
+            {
+                "call"        : "color",
+                "unlockedAt"  : 4,
+                "description" : "鉛筆の色を変える",
+                "args"        : [
+                    [ "color", "string", "設定したい鉛筆の色", true ]
+                ],
+                "defaults": [ "red" ]
+            },
+            {
+                "call"        : "stroke",
+                "unlockedAt"  : 5,
+                "description" : "筆の太さと色を変える",
+                "args"        : [
+                    [ "color", "string", "設定したい色。例えば'red', 'blue'..", false ],
+                    [ "size", "number", "鉛筆の太さ", false ]
+                ],
+                "defaults": [ 10, "purple" ]
+            },
+            {
+                "call"        : "setBrightness",
+                "unlockedAt"  : 999,
+                "description" : "色の明るさを設定する",
+                "args"        : [
+                    [ "color", "string", "色", true ],
+                    [ "amount", "number", "設定したい明るさ(-100〜100)", false ]
+                ],
+                "defaults": [ "yellow", 30 ]
+            },
+            {
+                "call"        : "setSaturation",
+                "unlockedAt"  : 999,
+                "description" : "色の飽和を設定する",
+                "args"        : [
+                    [ "color", "string", "色", true ],
+                    [ "amount", "number", "設定したい飽和(-100〜100)", false ]
+                ],
+                "defaults": [ "grey", 30 ]
+            },
+            {
+                "call"        : "rotate",
+                "unlockedAt"  : 999,
+                "description" : "色相を回転させる（変更する）",
+                "args"        : [
+                    [ "color", "string", "変えたい色", true ],
+                    [ "amount", "number", "回転の角度(-360〜360)", true ]
+                ],
+                "defaults": [ "red", 100 ]
+            },
+            {
+                "call"        : "setTransparency",
+                "unlockedAt"  : 999,
+                "description" : "色の透明度を設定する",
+                "args"        : [
+                    [ "color", "string", "色", true ],
+                    [ "amount", "number", "引き算する不透明度(-100〜100)", true ]
+                ],
+                "defaults": [ "black", 50 ]
+            }
+
         ]
     }
 ]
+}