Dropdown todo

client/package.json

@@ -27,9 +27,11 @@
     "three": "^0.164.1",
     "vue": "^3.3.4",
     "vue-draggable": "^2.0.6",
+    "vue-i18n": "^10.0.2",
     "vue-router": "^4.2.4"
   },
   "devDependencies": {
+    "@intlify/unplugin-vue-i18n": "^5.0.0",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vue/cli-service": "^5.0.8",
     "eslint": "^8.49.0",

client/src/locale/en.json

@@ -0,0 +1,3 @@
+{
+    "main-menu": "Main Menu"
+}

client/src/locale/es.json

@@ -0,0 +1,3 @@
+{
+    "main-menu": "Menú Principal"
+}

client/src/main.js

@@ -2,9 +2,13 @@ import './assets/main.css'
 import './assets/prism.css'
 
 import { createApp, defineComponent, reactive } from 'vue'
+import { createI18n } from 'vue-i18n'
 import App from './App.vue'
 import router from './router'
 
+import EN from './locale/en.json'
+import ES from './locale/es.json'
+
 import mitt from 'mitt';
 const emitter = mitt();
 
@@ -18,7 +22,17 @@ app.config.globalProperties.rollWindows = {
     edit_profile: reactive([]),
 };
 
+const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+        en: EN,
+        es: ES,
+    }
+});
+
 app.use(router)
+app.use(i18n);
 
 app.mount('#app')
 

client/src/services/Windows.js

@@ -35,10 +35,10 @@ const defValues = {
         title: "Edit Profile",
         close: () => ClearWindow('edit_profile')
     },
-    'account_settings': {
-        id: 'account_settings',
+    'settings': {
+        id: 'ettings',
         title: "Dragonroll settings",
-        close: () => ClearWindow('account_settings')
+        close: () => ClearWindow('settings')
     },
     'campaign_list': {
         id: 'campaign_list',

client/src/views/managers/WindowManager.vue

@@ -8,7 +8,7 @@ import RegisterWindow from '@/views/windows/RegisterWindow.vue'
 import ExampleWindow from '@/views/windows/ExampleWindow.vue'
 import MainMenuWindow from '@/views/windows/MainMenuWindow.vue'
 import EditProfileWindow from '@/views/windows/EditProfileWindow.vue'
-import AccountSettingsWindow from '../windows/AccountSettingsWindow.vue'
+import SettingsWindow from '../windows/SettingsWindow.vue'
 
 import { Windows, ReloadRef } from '@/services/Windows';
 import CampaignListWindow from '../windows/campaigns/CampaignListWindow.vue'
@@ -43,7 +43,7 @@ let WindowMap = {
   welcome: WelcomeWindow,
   register: RegisterWindow,
   edit_profile: EditProfileWindow,
-  account_settings: AccountSettingsWindow,
+  settings: SettingsWindow,
   campaign_list: CampaignListWindow,
   new_campaign: NewCampaignWindow,
   join_campaign: JoinCampaignWindow,

client/src/views/partials/Dropdown.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { AddContextMenu } from '../../services/ContextMenu';
+const props = defineProps(['options', 'selected']);
+const options = props.options;
+const selected = props.selected;
+const dropdown = ref(null);
+
+onMounted(() => {
+    let context = [];
+    items.value.forEach(name => {
+        context.push({
+            icon: selectedTags.value.includes(name) ? 'icons/iconoir/regular/check.svg' : false,
+            name,
+            action: () => {
+                HideContextMenu();
+                if(!selectedTags.value.includes(name)){
+                    SelectTab(name);
+                } else { RemoveTag(name) }
+            }
+        });
+    });
+    ShowContextMenu(context);
+
+    AddContextMenu(dropdown.value);
+});
+</script>
+
+
+<template>
+    <div class="dropdown" ref="dropdown">
+        <span>Hola</span>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.dropdown {
+    background-color: #181818;
+    padding: 5px;
+}
+</style>

client/src/views/partials/EditUserPartial.vue

@@ -35,7 +35,7 @@ function EditProfile(){
 }
 
 function EditSettings(){
-    CreateChildWindow('main_menu', 'account_settings');
+    CreateChildWindow('main_menu', 'settings');
 }
 
 onMounted(() => {

client/src/views/partials/Tabs.vue

@@ -9,7 +9,6 @@ let selectedTab = ref(props.rows[0].replace(/\s+/g, '-').toLowerCase());
 
 function SelectTab(row){
     selectedTab.value = row;
-    console.log(selectedTab.value);
 }
 </script>
 
@@ -45,6 +44,7 @@ function SelectTab(row){
     display: flex;
     flex-direction: column;
     height: 100%;
+    width: 100%;
 }
 
 .tab-container-outer {

client/src/views/windows/MainMenuWindow.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n() 
 
 import VersionRender from '@/views/others/VersionRender.vue'
 import WindowHandle from '@/views/partials/WindowHandle.vue';
@@ -80,7 +82,7 @@ function OpenBookAnvil(){
 
         <EditUserPartial></EditUserPartial>
 
-        <h1>Main Menu</h1>
+        <h1>{{ $t("main-menu")}}</h1>
 
         <div class="button-container">
             <button class="btn-primary button-expand sound-click" v-on:click="OpenCampaigns" ref="campaignButton">Campaigns</button>

client/src/views/windows/SettingsWindow.vue

@@ -1,8 +1,12 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onBeforeMount, onMounted, ref } from 'vue';
 import { SetupHandle, SetSize, ResetPosition } from '@/services/Windows';
+import { GetUser } from '@/services/User'
 
 import WindowHandle from '@/views/partials/WindowHandle.vue';
+import Tabs from '../partials/Tabs.vue';
+import { I18nD, I18nN } from 'vue-i18n';
+import Dropdown from '../partials/Dropdown.vue';
 
 const handle = ref(null);
 
@@ -11,11 +15,23 @@ const data = props.data;
 
 let id = data.id;
 
+let rows = ref(["Account settings"]);
+
+const langSelector = ref(null);
+
+onBeforeMount(() => {
+    if(GetUser().admin) rows.value.push("Site Administration");
+});
+
 onMounted(() => {
     SetupHandle(id, handle);
     SetSize(id, {width: 500, height: 380});
     ResetPosition(id, "center");
 });
+
+function OnLanguageChange(){
+    I18n.locale = langSelector.value.value;
+}
 </script>
 
 
@@ -24,8 +40,14 @@ onMounted(() => {
         <WindowHandle :window="id" ref="handle"></WindowHandle>
 
         <!-- Body -->
-        Language: English
+        <Tabs :rows="rows">
+            <template #account-settings>
+                Language: <Dropdown :options="languageOptions" :select="OnLanguageChange"></Dropdown>
+            </template>
+            <template #site-administration>
 
+            </template>
+        </Tabs>
     </div>
 </template>
 
@@ -35,6 +57,7 @@ onMounted(() => {
     min-width: 700px;
     min-height: 630px;
 
+    width: 100%;
     display: flex;
     align-items: center;
 }