A lot of progress

2026-04-28 00:20:15 +02:00
parent b928212608
commit 76bb9fbb30
38 changed files with 382 additions and 460 deletions
--- a/frontend/app/components/layouts/Dropdown.vue
+++ b/frontend/app/components/layouts/Dropdown.vue
@@ -4,17 +4,16 @@ import { AddContextMenu, HideContextMenu } from '@/services/ContextMenu';
 const props = defineProps(['options', 'onselect', 'selected', 'keyFunc']);
 const options = props.options;
 const selectCallback = props.onselect;
+
 const initialSelect = props.selected;
 const dropdown = ref(null);
-
-const selected = ref(initialSelect);
+const selected = ref(null);

 onMounted(() => {
    if(props.keyFunc == undefined) props.keyFunc = (option) => option;
-    else selected.value = props.keyFunc(initialSelect);
-
+    selected.value = props.keyFunc(initialSelect);
+    
    let context = [];
-    if(props.selected == undefined) selected.value = "undefined";
    watch(() => props.selected, () => {
        selected.value = props.keyFunc(props.selected);
    });
--- a/frontend/app/components/partials/CampaignEntry.vue
+++ b/frontend/app/components/partials/CampaignEntry.vue
@@ -8,14 +8,15 @@ const props = defineProps(['data']);
 const data = props.data;

 const title = ref("");
-const last_session = ref("");

 const container = ref(null);

 onMounted(() => {
    title.value = data.name;
-    last_session.value = new Date(data.last_opened).toISOString().slice(0, 10);
-    
+    if (data.color && container.value) {
+        container.value.style.background = `linear-gradient(90deg, ${data.color}, ${data.color}44)`;
+    }
+
    AddSound(container.value)
 });

@@ -31,11 +32,11 @@ function ViewCampaign(){
        <div class="main-campaign-entry-container-inner">
            <img class="campaign-icon" src="/img/def-avatar.jpg" draggable="false">
            <div class="campaign-info">
-                <b>{{ title }}</b><br>Last session: <span>{{ last_session }}</span>
+                <b>{{ title }}</b>
            </div>

            <div class="campaign-user-actions">
-                <button class="btn-primary button-small sound-click" v-on:click.prevent="ViewCampaign">{{ $t('general.view')}}</button>
+                <button class="btn-primary button-small sound-click" v-on:click.prevent="ViewCampaign">{{ $t('general.open')}}</button>
            </div>
        </div>
    </div>
--- a/frontend/app/components/partials/ColorPicker.vue
+++ b/frontend/app/components/partials/ColorPicker.vue
@@ -21,7 +21,7 @@ onMounted(() => {
    });
 });

-let GetColor = () => color;
+let GetColor = () => color.value;

 defineExpose({ GetColor });
 </script>
--- a/frontend/app/components/partials/EditUserPartial.vue
+++ b/frontend/app/components/partials/EditUserPartial.vue
@@ -48,12 +48,6 @@ function LogOut(){
    CreateWindow('login');
 }

-function EditProfile(){
-    CreateChildWindow(GetFirstWindowId('main_menu'), 'edit_profile', {
-        user: GetUser()
-    });
-}
-
 function EditSettings(){
    CreateChildWindow(GetFirstWindowId('main_menu'), 'settings', {
        user: GetUser()
@@ -102,7 +96,6 @@ onMounted(() => {
            </div>

            <div class="main-user-actions">
-                <button class="btn-primary button-small sound-click" v-on:click.prevent="EditProfile">{{ $t("main-menu.edit-profile") }}</button>
                <button class="btn-primary button-small sound-click" v-on:click.prevent="EditSettings">{{ $t("main-menu.settings") }}</button>
                <button class="btn-primary button-small sound-click" v-on:click.prevent="LogOut">{{ $t("main-menu.log-out") }}</button>
            </div>
--- a/frontend/app/components/windows/CreateCampaignWindow.vue
+++ b/frontend/app/components/windows/CreateCampaignWindow.vue
@@ -27,6 +27,8 @@ const campaignDescription = ref("");
 const colorPicker = ref(null);

 function NewCampaign(){
+    const color = colorPicker.value.GetColor();
+    console.log(color);
    Server().post('/campaign/create', {
        name: campaignName.value,
        description: campaignDescription.value,
--- a/frontend/app/components/windows/EditProfileWindow.vue
+++ b/frontend/app/components/windows/EditProfileWindow.vue
@@ -1,91 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { SetupHandle, SetSize, ResetPosition, Top } from '@/services/Windows';
-
-import Server from '@/services/Server'
-import { SetMinSize, SetResizable } from '@/services/Windows';
-import { backendUrl } from '@/services/BackendURL';
-import { GetUser } from '@/services/User';
-
-import WindowHandle from './partials/WindowHandle.vue';
-import BigIconTemplate from './partials/BigIconTemplate.vue';
-import FixedBottomButtons from './partials/FixedBottomButtons.vue';
-
-const props = defineProps(['data']);
-const data = props.data;
-const userIcon = ref("");
-
-const handle = ref(null);
-const wrapper = ref(null);
-const isAdmin = ref(false);
-
-let id = data.id;
-console.log(data);
-
-onMounted(() => {
-    Top(wrapper);
-    SetupHandle(id, handle);
-    SetSize(id, {width: 500, height: 480});
-    ResetPosition(id, "center");
-
-    SetResizable(id, true);
-    SetMinSize(id, {width: 350, height: 280});
-
-    isAdmin.value = GetUser().admin;
-
-    Server().get('/user/retrieve-avatar?username=' + data.user.username).then((response) => {
-        if(response.data.image) userIcon.value = backendUrl + "public/" + response.data.image;
-        else userIcon.value = "public/img/def-avatar.jpg";
-    }).catch((err) => console.log("Internal error"));
-});
-
-function RemoveUser(){
-    alert("Remove")
-}
-</script>
-
-
-<template>
-    <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
-        <WindowHandle :window="id" ref="handle"></WindowHandle>
-
-        <BigIconTemplate :title="data.user.username" :img="userIcon">
-        <div v-if="props.data.editable || isAdmin">
-            
-        </div>
-        <div v-else>
-
-        </div>
-        </BigIconTemplate>
-
-        <FixedBottomButtons v-if="isAdmin" :remove="RemoveUser"></FixedBottomButtons>
-    </div>
-</template>
-
-
-<style scoped>
-.window-wrapper {
-
-    display: flex;
-    align-items: center;
-}
-
-.splash-image {
-    width: 600px;
-    height: 250px;
-}
-
-.form-field {
-    padding: 10px;
-    display: flex;
-    align-items: left;
-    flex-direction: column;
-    justify-content: left;
-    width: 600px;
-}
-
-label {
-    text-align: left;
-}
-
-</style>
--- a/frontend/app/components/windows/MainMenuWindow.vue
+++ b/frontend/app/components/windows/MainMenuWindow.vue
@@ -24,9 +24,9 @@ function CreateCampaignWindow(){

 function RefreshCampaigns(){
    Server().get('/campaign/list').then((response) => {
-        console.log(response.data);
-        response.data.forEach((camp) => {
-            campaings.value.push(camp.campaign);
+        if(response.data.status !== "ok") return;
+        response.data.campaigns.forEach((camp) => {
+            campaings.value.push(camp);
        });
    });
 }
@@ -34,7 +34,7 @@ function RefreshCampaigns(){
 onMounted(() => {
    Top(wrapper);
    SetupHandle(id, handle);
-    SetSize(id, {width: 580, height: 760});
+    SetSize(id, {width: 880, height: 760});
    ResetPosition(id, "center");

    RefreshCampaigns();
@@ -46,21 +46,38 @@ onMounted(() => {
    <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
        <WindowHandle :window="id" ref="handle"></WindowHandle>

-        <EditUserPartial></EditUserPartial>
-        <!-- Body -->
-        <div class="vert-expand">
-            <div class="vert top">
-                <h1>{{ $t("main-menu.main-menu")}}</h1>
-
-                <!-- HERE -->
-                 <div class="campaign-list">
-                    <CampaignEntry v-for="camp in myCampaigns" :key="camp._id" :data="camp"></CampaignEntry>
+        <div class="two-column">
+            <div class="vert-expand secondary">
+                <div class="image-container">
+                    <img alt="Dragonroll logo" src="/img/logo-splash.png" draggable="false" width="100%">
                </div>
+                <div class="patch-notes-container">
+                    <h1>Welcome to dragonroll!</h1>
+                    <h2>Version 0.1</h2>
+                    <p>This is totally under construction. This is a review of how the patch notes will be displayed.</p>
+                    <p>There is also a lot of heavy development here.</p>
+                </div>
+                <VersionRender></VersionRender>
            </div>
-            
-            <div class="vert bot">
-                <div class="button-container">
-                    <button class="btn-primary button-expand sound-click" v-on:click="CreateCampaignWindow" ref="campaignButton">{{ $t("main-menu.create-campaign") }}</button>
+
+            <div class="vert-expand" style="max-width: 450px;">
+                <EditUserPartial></EditUserPartial>
+                <!-- Body -->
+                <div class="vert-expand">
+                    <div class="vert top">
+                        <h1>{{ $t("main-menu.main-menu")}}</h1>
+
+                        <!-- HERE -->
+                        <div class="campaign-list">
+                            <CampaignEntry v-for="camp in campaings" :key="camp._id" :data="camp"></CampaignEntry>
+                        </div>
+                    </div>
+                    
+                    <div class="vert bot">
+                        <div class="button-container">
+                            <button class="btn-primary button-expand sound-click" v-on:click="CreateCampaignWindow" ref="campaignButton">{{ $t("main-menu.create-campaign") }}</button>
+                        </div>
+                    </div>
                </div>
            </div>
        </div>
@@ -72,6 +89,29 @@ onMounted(() => {
 h1 {
    margin-top: 20px;
    font-family: MrEavesRemake;
+    text-align: center;
+}
+
+h2, h3 {
+    font-family: MrEavesRemake;
+}
+
+.patch-notes-container {
+    margin: 10px;
+    padding: 10px;
+    border-radius: 5px;
+    flex-grow: 1;
+}
+
+.two-column {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+}
+
+.secondary {
+    background-color: var(--color-background-soft);
 }

 .expand {
@@ -89,7 +129,8 @@ h1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
-    height: 100%;
+    flex-grow: 1;
+    width: 100%;
 }


@@ -99,8 +140,7 @@ h1 {

 .button-container {
    display: flex;
-    width: 100%;
-    padding: 20px;
+    margin: 20px;

    flex-direction: column;
 }
--- a/frontend/app/components/windows/SettingsWindow.vue
+++ b/frontend/app/components/windows/SettingsWindow.vue
@@ -6,6 +6,7 @@ import Tabs from '../layouts/Tabs.vue';
 import Dropdown from '../layouts/Dropdown.vue';
 import { GetUser, GetUserSetting, SetUserSetting } from '@/services/User';
 import { SetupHandle, SetSize, ResetPosition, Top, ClearWindow, CreateWindow, SetMinSize, SetResizable } from '@/services/Windows';
+import { locales } from '~~/i18n/locales';

 const handle = ref(null);
 const wrapper = ref(null);
@@ -13,11 +14,12 @@ const wrapper = ref(null);
 const props = defineProps(['data']);
 const data = props.data;

-const { locales, setLocale, locale } = useI18n();
+const { locale } = useI18n();
+

 const changeLocale = (lang) => {
    console.log(lang);
-    setLocale(lang.code);
+    locale.value = lang.code;
    SetUserSetting('lang', lang.code);
 }

@@ -28,12 +30,18 @@ const rows = ref([{id: "account-settings", value: "settings.tabs.account-setting
 /* TODO
 const languageOptions = ref(["English", "Spanish", "Catalan"])
 const langSelector = ref(null);
-const currentLanguage = ref("");
 */
+function getLocaleFromCode(code){
+    for(let i = 0; i < locales.length; i++){
+        if(locales[i].code == code) return locales[i];
+    }
+}
+
+const selectedLocale = ref("");
 onBeforeMount(() => {
    GetUserSetting('lang').then(value => {
-        currentLanguage.value = codes[value ?? 'en']
-        console.log(currentLanguage.value)
+        locale.value = value;
+        selectedLocale.value = getLocaleFromCode(value); // Set selected in dropdown
    });
    if(GetUser().admin) rows.value.push({
        id: "site-administration",
@@ -44,11 +52,11 @@ onBeforeMount(() => {
 onMounted(() => {
    Top(wrapper);
    SetupHandle(id, handle);
-    SetSize(id, {width: 400, height: 480});
+    SetSize(id, {width: 600, height: 480});
    ResetPosition(id, "center");

    SetResizable(id, true);
-    SetMinSize(id, {width: 350, height: 280});
+    SetMinSize(id, {width: 450, height: 280});
 });

 function OpenManageAccounts(){
@@ -86,7 +94,7 @@ const getLocaleName = (locale) => {
                <div class="form-container">
                    <div class="form-element">
                        <label>{{ $t('settings.account-settings.language') }}</label>
-                        <Dropdown :options="locales" :keyFunc="getLocaleName" :onselect="changeLocale" :selected="locale"></Dropdown>
+                        <Dropdown :options="locales" :keyFunc="getLocaleName" :onselect="changeLocale" :selected="selectedLocale"></Dropdown>
                    </div>
                </div>
            </template>
--- a/frontend/app/components/windows/partials/WindowHandle.vue
+++ b/frontend/app/components/windows/partials/WindowHandle.vue
@@ -126,6 +126,11 @@ defineExpose({
        justify-content: right;
    }

+    .center {
+        display: flex;
+        align-items: center;
+    }
+
    span {
        font-family: MrEavesRemake;
    }