diff --git a/package-lock.json b/package-lock.json index c02f6b5..a596725 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,13 @@ { "name": "zeroone", - "version": "0.1.0", + "version": "0.1.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "zeroone", - "version": "0.1.0", + "version": "0.1.1", + "hasInstallScript": true, "dependencies": { "@radix-icons/vue": "^1.0.0", "@radix-ui/react-icons": "^1.3.0", @@ -23,6 +24,7 @@ "tailwindcss-animate": "^1.0.7", "vee-validate": "^4.12.4", "vue": "^3.3.11", + "vue-i18n": "^9.9.0", "zod": "^3.22.4" }, "devDependencies": { @@ -692,6 +694,47 @@ "@hapi/hoek": "^8.3.0" } }, + "node_modules/@intlify/core-base": { + "version": "9.9.0", + "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.9.0.tgz", + "integrity": "sha512-C7UXPymDIOlMGSNjAhNLtKgzITc/8BjINK5gNKXg8GiWCTwL6n3MWr55czksxn8RM5wTMz0qcLOFT+adtaVQaA==", + "dependencies": { + "@intlify/message-compiler": "9.9.0", + "@intlify/shared": "9.9.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + } + }, + "node_modules/@intlify/message-compiler": { + "version": "9.9.0", + "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.9.0.tgz", + "integrity": "sha512-yDU/jdUm9KuhEzYfS+wuyja209yXgdl1XFhMlKtXEgSFTxz4COZQCRXXbbH8JrAjMsaJ7bdoPSLsKlY6mXG2iA==", + "dependencies": { + "@intlify/shared": "9.9.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + } + }, + "node_modules/@intlify/shared": { + "version": "9.9.0", + "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.9.0.tgz", + "integrity": "sha512-1ECUyAHRrzOJbOizyGufYP2yukqGrWXtkmTu4PcswVnWbkcjzk3YQGmJ0bLkM7JZ0ZYAaohLGdYvBYnTOGYJ9g==", + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -12118,6 +12161,25 @@ "url": "https://github.com/sponsors/nklayman" } }, + "node_modules/vue-i18n": { + "version": "9.9.0", + "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.9.0.tgz", + "integrity": "sha512-xQ5SxszUAqK5n84N+uUyHH/PiQl9xZ24FOxyAaNonmOQgXeN+rD9z/6DStOpOxNFQn4Cgcquot05gZc+CdOujA==", + "dependencies": { + "@intlify/core-base": "9.9.0", + "@intlify/shared": "9.9.0", + "@vue/devtools-api": "^6.5.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + }, + "peerDependencies": { + "vue": "^3.0.0" + } + }, "node_modules/watchpack": { "version": "1.7.5", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz", diff --git a/package.json b/package.json index a9e8ecf..0e37aaa 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "tailwindcss-animate": "^1.0.7", "vee-validate": "^4.12.4", "vue": "^3.3.11", + "vue-i18n": "^9.9.0", "zod": "^3.22.4" }, "devDependencies": { diff --git a/src/App.vue b/src/App.vue index ee051c9..cee4671 100644 --- a/src/App.vue +++ b/src/App.vue @@ -60,19 +60,20 @@ const state = reactive({ count: 12 });
- Device + + - Disconnect ⌘D + {{$t('navbar.device.disconnect')}} ⌘D - About Device + {{ $t('navbar.device.about') }} - Preferences + {{ $t('navbar.device.preferences') }} - Export JSON⌘E - Export JSON⌘E + {{ $t('navbar.device.export') }}⌘E + {{ $t('navbar.device.import') }}⌘I - Quit⌘Q + {{ $t('navbar.device.quit') }}⌘Q diff --git a/src/lang/en.js b/src/lang/en.js new file mode 100644 index 0000000..a6d3e40 --- /dev/null +++ b/src/lang/en.js @@ -0,0 +1,15 @@ +// 'en' Locale +export default { + navbar: { + device: { + title: 'Device', + connect: 'Connect', + disconnect: 'Disconnect', + about: 'About Device', + preferences: 'Preferences', + export: 'Export JSON', + import: 'Import JSON', + quit: 'Quit' + } + }, +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index 17a111d..80cab27 100644 --- a/src/main.js +++ b/src/main.js @@ -1,10 +1,22 @@ import './assets/main.css' -import { createApp } from 'vue' +import {createApp} from 'vue' +import {createI18n} from 'vue-i18n' + +import en from './lang/en.js' + import App from './App.vue' -createApp(App).mount('#app') +const i18n = createI18n({ + locale: 'en', + fallbackLocale: 'en', + messages: {en} +}) +const app = createApp(App) + +app.use(i18n) +app.mount('#app') var startPos = 0; var totalPos = 360; @@ -12,25 +24,25 @@ var currentPos = 156; var minRange = 0; var maxRange = 40; -document.addEventListener("DOMContentLoaded", function(){ +document.addEventListener("DOMContentLoaded", function () { //.... // Quick Preview GUI indicator Render -var scale = document.getElementById("scale"); + var scale = document.getElementById("scale"); + + Number.prototype.map = function (in_min, in_max, out_min, out_max) { + return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; + } + var guiCurrentPos = Math.round(currentPos.map(startPos, totalPos, minRange, maxRange)); + + for (var i = 0; i < 40; i = i + 1) { + scale.innerHTML += "
"; + if (i - 1 < guiCurrentPos) { + scale.getElementsByTagName("div")[i].classList.add("active"); + if (i == guiCurrentPos) { + scale.getElementsByTagName("div")[guiCurrentPos].classList.add("current"); + } + } -Number.prototype.map = function (in_min, in_max, out_min, out_max) { - return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; -} -var guiCurrentPos = Math.round(currentPos.map(startPos, totalPos, minRange, maxRange)); - -for(var i = 0; i < 40; i=i+1){ - scale.innerHTML += "
"; - if (i - 1 < guiCurrentPos) { - scale.getElementsByTagName("div")[i].classList.add("active"); - if (i == guiCurrentPos) { - scale.getElementsByTagName("div")[guiCurrentPos].classList.add("current"); } - } - -} }); \ No newline at end of file