mirror of
https://github.com/BlueMap-Minecraft/BlueMapVue.git
synced 2025-01-21 05:31:21 +01:00
Support i18n
This commit is contained in:
tsutoringo
parent
d30da04c76
commit
c341d48daa
@ -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"
|
||||
@action="appState.menu.openPage('maps', 'Maps')">
|
||||
<SvgButton v-if="appState.maps.length > 0" class="thin-hide" :title="$t('maps.ctrlBar')"
|
||||
@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"
|
||||
@action="appState.menu.openPage('markers', 'Markers', {markerSet: markers})">
|
||||
<SvgButton v-if="markers.markerSets.length > 0 || markers.markers.length > 0" class="thin-hide" :title="$t('markers.ctrlBar')"
|
||||
@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>
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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('markers', 'Markers', {markerSet: markers})" :submenu="true">Markers</SimpleButton>
|
||||
<SimpleButton @action="menu.openPage('settings', 'Settings')" :submenu="true">Settings</SimpleButton>
|
||||
<SimpleButton @action="menu.openPage('maps', $t('maps.title'))" :submenu="true">{{ $t("maps.title") }}</SimpleButton>
|
||||
<SimpleButton @action="menu.openPage('markers', $t('markers.title'), {markerSet: markers})" :submenu="true">{{ $t("markers.title") }}</SimpleButton>
|
||||
<SimpleButton @action="menu.openPage('settings', $t('settings.title'))" :submenu="true">{{ $t("settings.title") }}</SimpleButton>
|
||||
<hr>
|
||||
<SimpleButton @action="goFullscreen">Go Fullscreen</SimpleButton>
|
||||
<SimpleButton @action="$bluemap.resetCamera()">Reset Camera</SimpleButton>
|
||||
<SimpleButton @action="$bluemap.updateMap()" title="Clear Tile Cache">Update Map</SimpleButton>
|
||||
<SimpleButton @action="goFullscreen">{{ $t("goFullscreen.title") }}</SimpleButton>
|
||||
<SimpleButton @action="$bluemap.resetCamera()">{{ $t("resetCamera.title") }}</SimpleButton>
|
||||
<SimpleButton @action="$bluemap.updateMap()" :title="$t('updateMap.description')">{{ $t("updateMap.title") }}</SimpleButton>
|
||||
</div>
|
||||
|
||||
<div v-if="menu.currentPage().id === 'maps'">
|
||||
|
||||
@ -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 === 'flat'" @action="$bluemap.setFlatView(500, appState.controls.state === 'free' ? 100 : 0)">Flat</SimpleButton>
|
||||
<SimpleButton :active="appState.controls.state === 'free'" @action="$bluemap.setFreeFlight(500)">Free-Flight</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)">{{$t('controls.flatView.title')}}</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>
|
||||
<SwitchButton :on="appState.controls.invertMouse" @action="appState.controls.invertMouse = !appState.controls.invertMouse; $bluemap.updateControlsSettings(); $bluemap.saveUserSettings()">Invert Mouse Y</SwitchButton>
|
||||
@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()">{{ $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: "Dark", value: 'dark'},
|
||||
{name: "Light", value: 'light'},
|
||||
{name: i18n.t("theme.default"), value: null},
|
||||
{name: i18n.t("theme.dark"), value: 'dark'},
|
||||
{name: i18n.t("theme.light"), value: 'light'},
|
||||
];
|
||||
|
||||
const qualityStages = [
|
||||
{name: "High (SSAA, x2)", value: 2},
|
||||
{name: "Normal (Native, x1)", value: 1},
|
||||
{name: "Low (Upscaling, x0.5)", value: 0.5},
|
||||
{name: i18n.t("resolution.high"), value: 2},
|
||||
{name: i18n.t("resolution.normal"), value: 1},
|
||||
{name: i18n.t("resolution.low"), value: 0.5},
|
||||
];
|
||||
|
||||
export default {
|
||||
|
||||
85
src/i18n/en.js
Normal file
85
src/i18n/en.js
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
};
|
||||
12
src/i18n/index.js
Normal file
12
src/i18n/index.js
Normal file
@ -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;
|
||||
@ -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;
|
||||
|
||||
@ -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');
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user