Merge remote-tracking branch 'tsutoringo/feature-i18n'

package-lock.json

@@ -1698,16 +1698,6 @@
           "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1734,53 +1724,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -1797,16 +1740,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1823,18 +1756,6 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.1.2",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
-          "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
         }
       }
     },
@@ -11843,6 +11764,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-i18n": {
+      "version": "8.24.1",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.24.1.tgz",
+      "integrity": "sha512-iqM+npjvI9SGOAYkw1Od/y4O74gpvn5WOHeb3K125TmDJssvR62tDMMLIasPmKNbePZ1BMZ6d5jOBsrB/cK8Lw=="
+    },
     "vue-loader": {
       "version": "15.9.6",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.6.tgz",
@@ -11864,6 +11790,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.1.2",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
+      "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -22,9 +22,10 @@
   },
   "homepage": "https://bluecolo.red/bluemap",
   "dependencies": {
+    "bluemap": "file:./BlueMapWeb",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
-    "bluemap": "file:./BlueMapWeb"
+    "vue-i18n": "^8.24.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/components/ControlBar/ControlBar.vue

@@ -1,22 +1,22 @@
 <template>
   <div class="control-bar">
-    <MenuButton :close="appState.menu.isOpen" :back="false" @action="appState.menu.reOpenPage()" title="Menu" />
+    <MenuButton :close="appState.menu.isOpen" :back="false" @action="appState.menu.reOpenPage()" :title="$t('menu.title')" />
     <div class="space thin-hide"></div>
-    <SvgButton v-if="appState.maps.length > 0" class="thin-hide" title="Map-List"
+    <SvgButton v-if="appState.maps.length > 0" class="thin-hide" :title="$t('maps.ctrlBar')"
-               @action="appState.menu.openPage('maps', 'Maps')">
+               @action="appState.menu.openPage('maps', $t('maps.title'))">
       <svg viewBox="0 0 30 30">
         <polygon points="26.708,22.841 19.049,25.186 11.311,20.718 3.292,22.841 7.725,5.96 13.475,4.814 19.314,7.409 25.018,6.037 "/>
       </svg>
     </SvgButton>
-    <SvgButton v-if="markers.markerSets.length > 0 || markers.markers.length > 0" class="thin-hide" title="Marker-List"
+    <SvgButton v-if="markers.markerSets.length > 0 || markers.markers.length > 0" class="thin-hide" :title="$t('markers.ctrlBar')"
-               @action="appState.menu.openPage('markers', 'Markers', {markerSet: markers})">
+               @action="appState.menu.openPage('markers', t('markers.title'), {markerSet: markers})">
       <svg viewBox="0 0 30 30">
         <path d="M15,3.563c-4.459,0-8.073,3.615-8.073,8.073c0,6.483,8.196,14.802,8.196,14.802s7.951-8.013,7.951-14.802
 			C23.073,7.177,19.459,3.563,15,3.563z M15,15.734c-2.263,0-4.098-1.835-4.098-4.099c0-2.263,1.835-4.098,4.098-4.098
 			c2.263,0,4.098,1.835,4.098,4.098C19.098,13.899,17.263,15.734,15,15.734z"/>
       </svg>
     </SvgButton>
-    <SvgButton v-if="!playerMarkerSet.fake" class="thin-hide" title="Player-List" @action="openPlayerList">
+    <SvgButton v-if="!playerMarkerSet.fake" class="thin-hide" :title="$t('players.ctrlBar')" @action="openPlayerList">
       <svg viewBox="0 0 30 30">
         <g>
           <path d="M8.95,14.477c0.409-0.77,1.298-1.307,2.164-1.309h0.026c-0.053-0.234-0.087-0.488-0.087-0.755
@@ -43,11 +43,11 @@
       </svg>
     </SvgButton>
     <div class="space thin-hide greedy"></div>
-    <DayNightSwitch class="thin-hide" title="Day/Night" />
+    <DayNightSwitch class="thin-hide" :title="$t('lighting.dayNightSwitch.ctrlBar')" />
     <div class="space thin-hide"></div>
     <ControlsSwitch class="thin-hide"></ControlsSwitch>
     <div class="space thin-hide"></div>
-    <SvgButton class="thin-hide" title="Reset Camera & Position" @action="$bluemap.resetCamera()">
+    <SvgButton class="thin-hide" :title="$t('resetCamera.ctrlBar')" @action="$bluemap.resetCamera()">
       <svg viewBox="0 0 30 30">
         <rect x="7.085" y="4.341" transform="matrix(0.9774 0.2116 -0.2116 0.9774 3.2046 -1.394)" width="2.063" height="19.875"/>
         <path d="M12.528,5.088c0,0,3.416-0.382,4.479-0.031c1.005,0.332,2.375,2.219,3.382,2.545c1.096,0.354,4.607-0.089,4.607-0.089
@@ -56,7 +56,7 @@
       </svg>
     </SvgButton>
     <PositionInput class="pos-input" />
-    <Compass title="Compass / Face North" />
+    <Compass :title="$t('compass.ctrlBar')" />
   </div>
 </template>
 

src/components/ControlBar/ControlsSwitch.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="controls-switch">
-    <SvgButton :active="isPerspectiveView" @action="setPerspectiveView" title="Perspective-View">
+    <SvgButton :active="isPerspectiveView" @action="setPerspectiveView" :title="$t('controls.perspective.ctrlBar')">
       <svg viewBox="0 0 30 30">
         <path d="M19.475,10.574c-0.166-0.021-0.337-0.036-0.51-0.045c-0.174-0.009-0.35-0.013-0.525-0.011
           c-0.176,0.002-0.353,0.01-0.526,0.024c-0.175,0.015-0.347,0.036-0.515,0.063l-13.39,2.189
@@ -13,12 +13,12 @@
           c-0.116-0.051-0.243-0.097-0.381-0.138c-0.137-0.041-0.283-0.078-0.438-0.108C19.803,10.621,19.641,10.595,19.475,10.574"/>
       </svg>
     </SvgButton>
-    <SvgButton :active="isFlatView" @action="setFlatView" title="Orthographic/Flat-View">
+    <SvgButton :active="isFlatView" @action="setFlatView" :title="$t('controls.flatView.ctrlBar')">
       <svg viewBox="0 0 30 30">
         <path d="M22.371,4.158c1.65,0,3,1.35,3,3v15.684c0,1.65-1.35,3-3,3H7.629c-1.65,0-3-1.35-3-3V7.158c0-1.65,1.35-3,3-3H22.371z"/>
       </svg>
     </SvgButton>
-    <SvgButton :active="isFreeFlight" @action="setFreeFlight" title="Free-Flight/Spectator Mode">
+    <SvgButton :active="isFreeFlight" @action="setFreeFlight" :title="$t('controls.freeFlight.ctrlBar')">
       <svg viewBox="0 0 30 30">
         <path d="M21.927,11.253c-0.256-0.487-0.915-0.885-1.465-0.885h-2.004c-0.55,0-0.726-0.356-0.39-0.792c0,0,0.698-0.905,0.698-2.041
           c0-2.08-1.687-3.767-3.767-3.767s-3.767,1.687-3.767,3.767c0,1.136,0.698,2.041,0.698,2.041c0.336,0.436,0.161,0.794-0.389,0.797

src/components/Menu/MainMenu.vue

@@ -6,13 +6,13 @@
             @close="menu.closeAll()">
 
     <div v-if="menu.currentPage().id === 'root'">
-      <SimpleButton @action="menu.openPage('maps', 'Maps')" :submenu="true">Maps</SimpleButton>
+      <SimpleButton @action="menu.openPage('maps', $t('maps.title'))" :submenu="true">{{ $t("maps.title") }}</SimpleButton>
-      <SimpleButton @action="menu.openPage('markers', 'Markers', {markerSet: markers})" :submenu="true">Markers</SimpleButton>
+      <SimpleButton @action="menu.openPage('markers', $t('markers.title'), {markerSet: markers})" :submenu="true">{{ $t("markers.title") }}</SimpleButton>
-      <SimpleButton @action="menu.openPage('settings', 'Settings')" :submenu="true">Settings</SimpleButton>
+      <SimpleButton @action="menu.openPage('settings', $t('settings.title'))" :submenu="true">{{ $t("settings.title") }}</SimpleButton>
       <hr>
-      <SimpleButton @action="goFullscreen">Go Fullscreen</SimpleButton>
+      <SimpleButton @action="goFullscreen">{{ $t("goFullscreen.title") }}</SimpleButton>
-      <SimpleButton @action="$bluemap.resetCamera()">Reset Camera</SimpleButton>
+      <SimpleButton @action="$bluemap.resetCamera()">{{ $t("resetCamera.title") }}</SimpleButton>
-      <SimpleButton @action="$bluemap.updateMap()" title="Clear Tile Cache">Update Map</SimpleButton>
+      <SimpleButton @action="$bluemap.updateMap()" :title="$t('updateMap.description')">{{ $t("updateMap.title") }}</SimpleButton>
     </div>
 
     <div v-if="menu.currentPage().id === 'maps'">

src/components/Menu/SettingsMenu.vue

@@ -1,48 +1,48 @@
 <template>
   <div>
     <Group title="View / Controls">
-      <SimpleButton :active="appState.controls.state === 'perspective'" @action="$bluemap.setPerspectiveView(500, appState.controls.state === 'free' ? 100 : 0)">Perspective</SimpleButton>
+      <SimpleButton :active="appState.controls.state === 'perspective'" @action="$bluemap.setPerspectiveView(500, appState.controls.state === 'free' ? 100 : 0)">{{$t('controls.perspective.title')}}</SimpleButton>
-      <SimpleButton :active="appState.controls.state === 'flat'" @action="$bluemap.setFlatView(500, appState.controls.state === 'free' ? 100 : 0)">Flat</SimpleButton>
+      <SimpleButton :active="appState.controls.state === 'flat'" @action="$bluemap.setFlatView(500, appState.controls.state === 'free' ? 100 : 0)">{{$t('controls.flatView.title')}}</SimpleButton>
-      <SimpleButton :active="appState.controls.state === 'free'" @action="$bluemap.setFreeFlight(500)">Free-Flight</SimpleButton>
+      <SimpleButton :active="appState.controls.state === 'free'" @action="$bluemap.setFreeFlight(500)">{{$t('controls.freeFlight.title')}}</SimpleButton>
     </Group>
 
-    <Group title="Lighting">
+    <Group :title="$t('lighting.title')">
       <Slider :value="mapViewer.uniforms.sunlightStrength.value" :min="0" :max="1" :step="0.01"
               @update="mapViewer.uniforms.sunlightStrength.value = $event">Sunlight</Slider>
       <Slider :value="mapViewer.uniforms.ambientLight.value" :min="0" :max="1" :step="0.01"
               @update="mapViewer.uniforms.ambientLight.value = $event">Ambient-Light</Slider>
     </Group>
 
-    <Group title="Resolution">
+    <Group :title="$t('resolution.title')">
       <SimpleButton v-for="stage of qualityStages" :key="stage.name"
                     :active="mapViewer.superSampling === stage.value"
                     @action="$bluemap.mapViewer.superSampling = stage.value; $bluemap.saveUserSettings();"
       >{{stage.name}}</SimpleButton>
     </Group>
 
-    <Group title="Render-Distance">
+    <Group :title="$t('renderDistance.title')">
       <Slider :value="mapViewer.loadedHiresViewDistance" :min="50" :max="500" :step="10"
-              @update="mapViewer.loadedHiresViewDistance = $event; $bluemap.mapViewer.updateLoadedMapArea()" @lazy="$bluemap.saveUserSettings()">Hires layer</Slider>
+              @update="mapViewer.loadedHiresViewDistance = $event; $bluemap.mapViewer.updateLoadedMapArea()" @lazy="$bluemap.saveUserSettings()">{{ $t("renderDistance.hiresLayer") }}</Slider>
       <Slider :value="mapViewer.loadedLowresViewDistance" :min="500" :max="10000" :step="100"
-              @update="mapViewer.loadedLowresViewDistance = $event; $bluemap.mapViewer.updateLoadedMapArea()" @lazy="$bluemap.saveUserSettings()">Lowres layer</Slider>
+              @update="mapViewer.loadedLowresViewDistance = $event; $bluemap.mapViewer.updateLoadedMapArea()" @lazy="$bluemap.saveUserSettings()">{{ $t("renderDistance.lowersLayer") }}</Slider>
     </Group>
 
-    <Group title="Free-Flight Controls">
+    <Group :title="$t('freeFlightControls.title')">
       <Slider :value="appState.controls.mouseSensitivity" :min="0.1" :max="5" :step="0.05"
-              @update="appState.controls.mouseSensitivity = $event; $bluemap.updateControlsSettings();" @lazy="$bluemap.saveUserSettings()">Mouse-Sensitivity</Slider>
+              @update="appState.controls.mouseSensitivity = $event; $bluemap.updateControlsSettings();" @lazy="$bluemap.saveUserSettings()">{{ $t("freeFlightControls.mouseSensitivity") }}</Slider>
-      <SwitchButton :on="appState.controls.invertMouse" @action="appState.controls.invertMouse = !appState.controls.invertMouse; $bluemap.updateControlsSettings(); $bluemap.saveUserSettings()">Invert Mouse Y</SwitchButton>
+      <SwitchButton :on="appState.controls.invertMouse" @action="appState.controls.invertMouse = !appState.controls.invertMouse; $bluemap.updateControlsSettings(); $bluemap.saveUserSettings()">{{ $t("freeFlightControls.invertMouseY") }}</SwitchButton>
     </Group>
 
-    <Group title="Theme">
+    <Group :title="$t('theme.title')">
       <SimpleButton v-for="theme of themes" :key="theme.name"
                     :active="appState.theme === theme.value"
                     @action="$bluemap.setTheme(theme.value); $bluemap.saveUserSettings();"
       >{{theme.name}}</SimpleButton>
     </Group>
 
-    <SwitchButton :on="appState.debug" @action="switchDebug(); $bluemap.saveUserSettings();">Debug</SwitchButton>
+    <SwitchButton :on="appState.debug" @action="switchDebug(); $bluemap.saveUserSettings();">{{ $t("debug.title") }}</SwitchButton>
 
-    <SimpleButton @action="$bluemap.resetSettings()">Reset All Settings</SimpleButton>
+    <SimpleButton @action="$bluemap.resetSettings()">{{ $t("resetAllSettings.title") }}</SimpleButton>
   </div>
 </template>
 
@@ -51,17 +51,18 @@ import Group from "@/components/Menu/Group";
 import SimpleButton from "@/components/Menu/SimpleButton";
 import Slider from "@/components/Menu/Slider";
 import SwitchButton from "@/components/Menu/SwitchButton";
+import i18n from "../../i18n";
 
 const themes = [
-  {name: "Default (System/Browser)", value: null},
+  {name: i18n.t("theme.default"), value: null},
-  {name: "Dark", value: 'dark'},
+  {name: i18n.t("theme.dark"), value: 'dark'},
-  {name: "Light", value: 'light'},
+  {name: i18n.t("theme.light"), value: 'light'},
 ];
 
 const qualityStages = [
-  {name: "High (SSAA, x2)", value: 2},
+  {name: i18n.t("resolution.high"), value: 2},
-  {name: "Normal (Native, x1)", value: 1},
+  {name: i18n.t("resolution.normal"), value: 1},
-  {name: "Low (Upscaling, x0.5)", value: 0.5},
+  {name: i18n.t("resolution.low"), value: 0.5},
 ];
 
 export default {

src/i18n/en.js

@@ -0,0 +1,85 @@
+export default {
+	menu: {
+		title: "Menu",
+		ctrlBar: "Menu"
+	},
+	maps: {
+		title: "Maps",
+		ctrlBar: "Map-List"
+	},
+	markers: {
+		title: "Markers",
+		ctrlBar: "Marker-List"
+	},
+	settings: {
+		title: "settings"
+	},
+	goFullscreen: {
+		title: "Go Fullscreen"
+	},
+	resetCamera: {
+		title: "Reset Camera",
+		ctrlBar: "Reset Camera & Position"
+	},
+	updateMap: {
+		title: "Update Map",
+		description: "Clear Tile Cache"
+	},
+	lighting: {
+		title: "Lighting",
+		dayNightSwitch: {
+			ctrlBar: "Day/Night"
+		},
+		sunlight: "Sunlight",
+		ambientLight: "Ambient-Light"
+	},
+	resolution: {
+		title: "Resolution",
+		high: "High (SSAA, x2)",
+		normal: "Normal (Native, x1)",
+		low: "Low (Upscaling, x0.5)"
+	},
+	freeFlightControls: {
+		title: "Free-Flight Controls",
+		mouseSensitivity: "Mouse-Sensitivity",
+		invertMouseY: "Invert Mouse Y"
+	},
+	renderDistance: {
+		title: "Render Distance",
+		hiresLayer: "Hires layer",
+		lowersLayer: "Lowres layer"
+	},
+	theme: {
+		title: "Theme",
+		default: "Default (System/Browser)",
+		dark: "Dark",
+		light: "Light"
+	},
+	debug: {
+		title: "Debug"
+	},
+	resetAllSettings: {
+		title: "Reset All Settings"
+	},
+	players: {
+		title: "Players",
+		ctrlBar: "Player-List"
+	},
+	compass: {
+		ctrlBar: "Compass / Face North"
+	},
+	controls: {
+		perspective: {
+			title: "Perspective",
+			ctrlBar: "Perspective-View"
+		},
+		flatView: {
+			title: "Flat",
+			ctrlBar: "Orthographic/Flat-View",
+		},
+		freeFlight: {
+			title: "Free-Flight",
+			ctrlBar: "Free-Flight/Spectator Mode"
+		}
+	}
+};

src/i18n/index.js

@@ -0,0 +1,12 @@
+import VueI18n from 'vue-i18n';
+import en from './en';
+import Vue from 'vue';
+
+Vue.use(VueI18n);
+
+const i18n = new VueI18n({
+	locale: 'en',
+	messages: { en }
+});
+
+export default i18n;

src/js/MainMenu.js

@@ -22,6 +22,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
+import i18n from "../i18n";
+
 export class MainMenu {
 
     static NULL_PAGE = {
@@ -39,7 +41,7 @@ export class MainMenu {
         return this.pageStack[this.pageStack.length - 1];
     }
 
-    openPage(id = "root", title = "Menu", data = {}) {
+    openPage(id = "root", title = i18n.t("menu.title"), data = {}) {
         if (!this.isOpen){
             this.pageStack.splice(0, this.pageStack.length);
             this.isOpen = true;

src/main.js

@@ -26,6 +26,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import {BlueMapApp} from "@/js/BlueMapApp";
+import i18n from './i18n';
 
 // utils
 String.prototype.includesCI = function (val) {
@@ -42,6 +43,7 @@ Object.defineProperty(Vue.prototype, '$bluemap', {
 });
 
 let vue = new Vue({
+  i18n,
   render: h => h(App)
 }).$mount('#app');