KJdksj

client/src/assets/base.css

@@ -64,6 +64,7 @@
 
   --color-heading: var(--c-text-light-1);
   --color-text: var(--c-text-light-1);
+  --separator: var(--c-black-mute);
 
   --section-gap: 160px;
 }
@@ -86,6 +87,7 @@
 
     --color-heading: var(--c-text-dark-1);
     --color-text: var(--c-text-dark-2);
+    --separator: var(--c-white-mute);
 
     --color-hover: var()
   }

client/src/assets/main.css

@@ -37,7 +37,35 @@ a {
   @media (prefers-color-scheme: dark) {
     filter: invert(0.7);
   }
-  
+}
+
+.icon-add-margin {
+  width: 16px;
+  height: 16px;
+  margin: 4.25px;
+}
+
+hr {
+  border: 0;
+  height: 1px;
+  width: 30%;
+  overflow: visible;
+  position: relative;
+  margin: 16px auto 16px auto;
+  background-color: var(--separator);
+}
+
+hr:before {
+  content: "";
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background-color: var(--separator);
+  position: absolute;
+  transform: rotate(45deg);
+  top: -2.5px;
+  left: 50%;
+  margin: -1px 0 0 -1px;
 }
 
 label {
@@ -59,7 +87,8 @@ input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {
 }
 
 button {
-  margin-bottom: 10px;
+  margin-top: 5px;
+  margin-bottom: 5px;
   padding: 18px;
   font-size: 15px;
   border-radius: 6px;

client/src/services/Windows.js

@@ -6,6 +6,8 @@ const windows = {
     test: ref([]),
     main_menu: ref([]),
     edit_profile: ref([]),
+    account_settings: ref([]),
+    db_window: ref([])
 };
 
 const reload = ref(0);
@@ -15,12 +17,11 @@ let Windows = () => { return windows };
 
 let currentIndex = 1;
 
-function SetupHandle(id, handle, handleData){
+function SetupHandle(id, handle){
 
     // Update window info with handle info
     
     let win = GetWindowWithId(id);
-    win.handle = handleData;
 
     let currentWindowId = "window-wrapper-" + id;
     let currentWindowHandleId = "window-handle-" + id;

client/src/views/HomeView.vue

@@ -9,10 +9,18 @@ import { CreateWindow } from '@/services/Windows'
 
 onMounted(() => {
   if(GetUser()){
-    CreateWindow({type: "main_menu", id: "main_menu"})
+    CreateWindow({
+      type: "main_menu",
+      id: "main_menu",
+      title: "Dragonroll"
+    })
     return;
   }
-  CreateWindow({type: "login", id: "login"});
+  CreateWindow({
+    type: "login",
+    id: "login",
+    title: "Login"
+  });
 }
 );
 

client/src/views/managers/WindowManager.vue

@@ -10,10 +10,9 @@ import EditProfileWindow from '@/views/windows/EditProfileWindow.vue'
 import AccountSettingsWindow from '../windows/AccountSettingsWindow.vue'
 
 import { Windows, ReloadRef } from '@/services/Windows';
+import DbWindow from '../windows/database/DbWindow.vue'
 
 // Gestionem ventanas
-import useEmitter from '@/services/Emitter';
-
 const reload = ReloadRef();
 const windows = Windows();
 
@@ -23,6 +22,8 @@ const register = windows.register;
 const test = windows.test;
 const main_menu = windows.main_menu;
 const edit_profile = windows.edit_profile;
+const account_settings = windows.account_settings;
+const db_window = windows.db_window;
 
 </script>
 
@@ -34,6 +35,7 @@ const edit_profile = windows.edit_profile;
     <MainMenuWindow v-for="win in main_menu" :key="win.id" :data="win"></MainMenuWindow>
     <EditProfileWindow v-for="win in edit_profile" :key="win.id" :data="win"></EditProfileWindow>
     <AccountSettingsWindow v-for="win in account_settings" :key="win.id" :data="win"></AccountSettingsWindow>
+    <DbWindow v-for="win in db_window" :key="win.id" :data="win"></DbWindow>
   </div>
 </template>
 

client/src/views/others/VersionRender.vue

@@ -4,7 +4,7 @@
 
 
 <template>
-    <p>Dragonroll v0.1</p>
+    <p>Dragonroll v0.1-dev</p>
 </template>
 
 

client/src/views/partials/EditUserPartial.vue

@@ -26,12 +26,30 @@ function retrieveAvatar(){
 function LogOut(){
     LogoutUser();
 
-    ClearWindows({type: "main_menu"});
-    CreateWindow({type: "login", id: "login"});
+    ClearWindows({type: "main_menu", title: "Dragonroll"});
+    CreateWindow({
+        type: "login",
+        id: "login",
+        title: "Login"
+    });
 }
 
 function EditProfile(){
-    CreateWindow({type: "edit_profile", id: "edit_profile"});
+    CreateWindow({
+        type: "edit_profile",
+        id: "edit_profile",
+        title: "Edit Profile",
+        close: true
+    });
+}
+
+function EditSettings(){
+    CreateWindow({
+        type: "account_settings",
+        id: "account_settings",
+        title: "Dragonroll settings",
+        close: true
+    });
 }
 
 onMounted(() => {
@@ -75,7 +93,7 @@ onMounted(() => {
 
             <div class="main-user-actions">
                 <button class="btn-primary button-small" v-on:click.prevent="EditProfile">Edit profile</button>
-                <button class="btn-primary button-small" v-on:click.prevent="EditProfile">Settings</button>
+                <button class="btn-primary button-small" v-on:click.prevent="EditSettings">Settings</button>
                 <button class="btn-primary button-small" v-on:click.prevent="LogOut">Log out</button>
             </div>
         </div>
@@ -90,7 +108,6 @@ onMounted(() => {
 
 .button-small {
     height: 32px;
-    margin-bottom: 0px;
     padding: 10px;
 }
 

client/src/views/partials/WindowHandle.vue

@@ -7,15 +7,23 @@ const props = defineProps(['window']);
 const id = props.window;
 
 const closeButton = ref(null);
+const backButton = ref(null);
 
 const title = ref("");
 const close = ref(false);
+const hasBack = ref(false);
+
+let backFunction;
 
 function setupHandle() {
-    let handleInfo = GetWindowWithId(id).handle;
+    let win = GetWindowWithId(id);
 
-    if(handleInfo.title) title.value = handleInfo.title;
-    if(handleInfo.close) close.value = true;
+    if(win.title) title.value = win.title;
+    if(win.close) close.value = true;
+    if(win.back) {
+        hasBack.value = true;
+        backFunction = win.back;
+    }
 }
 
 function CloseButton(){
@@ -31,7 +39,9 @@ defineExpose({
 <template>
     <div class="window-handle" :id="'window-handle-' + id">
 
-        <div class="left"></div>
+        <div class="left">
+            <img class="icon icon-add-margin" src="icons/iconoir/regular/arrow-left.svg" draggable="false" ref="backButton" v-if="hasBack" v-on:click="backFunction">
+        </div>
         <div class="center">
             <span>{{ title }}</span>
         </div>
@@ -66,9 +76,6 @@ defineExpose({
         font-family: MrEavesRemake;
     }
 
-    img {
-    }
-
     user-select: none;
     justify-content: center;
     width: 100%;

client/src/views/windows/AccountSettingsWindow.vue

@@ -1,23 +1,18 @@
 <script setup>
+import { onMounted, ref } from 'vue';
+import { SetupHandle, SetSize, ResetPosition } from '@/services/Windows';
 
-import VersionRender from '@/views/others/VersionRender.vue'
-import ErrorMessage from '@/views/others/ErrorMessage.vue'
-
-import { onMounted, onUpdated, ref } from 'vue';
-import { SetupHandle, SetSize, SetPosition, ResetPosition } from '@/services/Windows';
+import WindowHandle from '@/views/partials/WindowHandle.vue';
 
 const handle = ref(null);
 
-import Api from '@/services/Api.js'
-
 const props = defineProps(['data']);
 const data = props.data;
 
 let id = data.id;
-let title = data.title;
 
 onMounted(() => {
-    SetupHandle(id, handle, {title: "Example window", close: true});
+    SetupHandle(id, handle);
     SetSize(id, {x: 500, y: 380});
     ResetPosition(id, "center");
 });
@@ -29,6 +24,7 @@ onMounted(() => {
         <WindowHandle :window="id" ref="handle"></WindowHandle>
 
         <!-- Body -->
+        Language: English
 
     </div>
 </template>

client/src/views/windows/EditProfileWindow.vue

@@ -17,7 +17,7 @@ const handle = ref(null);
 let id = data.id;
 
 onMounted(() => {
-    SetupHandle(id, handle, {title: "Edit profile", close: true});
+    SetupHandle(id, handle);
     SetSize(id, {x: 500, y: 380});
     ResetPosition(id, "center");
 });

client/src/views/windows/ExampleWindow.vue

@@ -1,23 +1,17 @@
 <script setup>
-
-import VersionRender from '@/views/others/VersionRender.vue'
-import ErrorMessage from '@/views/others/ErrorMessage.vue'
-
 import { onMounted, onUpdated, ref } from 'vue';
 import { SetupHandle, SetSize, SetPosition, ResetPosition } from '@/services/Windows';
 
-const handle = ref(null);
+import WindowHandle from '@/views/partials/WindowHandle.vue';
 
-import Api from '@/services/Api.js'
+const handle = ref(null);
 
 const props = defineProps(['data']);
 const data = props.data;
 
 let id = data.id;
-let title = data.title;
-
 onMounted(() => {
-    SetupHandle(id, handle, {title: "Example window", close: true});
+    SetupHandle(id, handle);
     SetSize(id, {x: 500, y: 380});
     ResetPosition(id, "center");
 });

client/src/views/windows/LoginWindow.vue

@@ -31,7 +31,7 @@ let success = data.msg;
 onMounted(() => {
   successMessage.value = success;
 
-  SetupHandle(id, handle, {title: "Login"});
+  SetupHandle(id, handle);
   SetSize(id, {x: 700, y: 630});
   ResetPosition(id, "center");
 });
@@ -62,12 +62,20 @@ function login(){
 
 function ShowRegister(){
   ClearWindows({type: "login"});
-  CreateWindow({type: "register", id: "register"});
+  CreateWindow({
+    type: "register",
+    id: "register",
+    title: "Register"
+  });
 }
 
 function ShowMainMenu(){
   ClearWindows({type: "login"});
-  CreateWindow({type: "main_menu", id: "main_menu"});
+  CreateWindow({
+    type: "main_menu",
+    id: "main_menu",
+    title: "Dragonroll"
+  });
 }
 
 </script>

client/src/views/windows/MainMenuWindow.vue

@@ -11,6 +11,7 @@ import { SetupHandle, SetSize, SetPosition, ResetPosition } from '@/services/Win
 import Api from '@/services/Api.js'
 
 import useEmitter from '@/services/Emitter';
+import { ClearWindow, CreateWindow } from '../../services/Windows';
 const emitter = useEmitter();
 const handle = ref(null);
 
@@ -22,11 +23,36 @@ let id = data.id;
 let title = data.title;
 
 onMounted(() => {
-    SetupHandle(id, handle, {title: "Dragonroll"});
-    SetSize(id, {x: 500, y: 450});
+    SetupHandle(id, handle);
+    SetSize(id, {x: 500, y: 600});
     ResetPosition(id, "center", emitter);
 });
 
+function OpenDatabase(){
+    ClearWindow(id);
+    CreateWindow({
+        type: 'db_window',
+        id: 'db_window',
+        title: "Database",
+        back: () => {
+            ClearWindow('db_window');
+            CreateWindow({
+                type: 'main_menu',
+                id: 'main_menu',
+                title: 'Dragonroll'
+            })
+        }
+    });
+}
+
+function OpenJoinCampaign(){
+    ClearWindow(id);
+}
+
+function OpenMyCampaigns(){
+    ClearWindow(id);
+}
+
 </script>
 
 
@@ -39,9 +65,12 @@ onMounted(() => {
         <h1>Main Menu</h1>
 
         <div class="button-container">
-            <button class="btn-primary button-expand">My campaings</button>
-            <button class="btn-primary button-expand">Join existing campaign</button>
-            <button class="btn-primary button-expand">Database</button>
+            <button class="btn-primary button-expand" v-on:click="OpenMyCampaigns">My campaings</button>
+            <button class="btn-primary button-expand" v-on:click="OpenJoinCampaign">Join existing campaign</button>
+            <hr>
+            <button class="btn-primary button-expand" v-on:click="OpenCollection">Your Collection</button>
+            <button class="btn-primary button-expand" v-on:click="OpenLibrary">The Cosmic Library</button>
+            <button class="btn-primary button-expand" v-on:click="OpenLibrary">Book Anvil</button>
         </div>
         <VersionRender></VersionRender>
     </div>

client/src/views/windows/RegisterWindow.vue

@@ -28,7 +28,7 @@ let id = data.id;
 let title = data.title;
 
 onMounted(() => {
-    SetupHandle(id, handle, {title: "Register"});
+    SetupHandle(id, handle);
     SetSize(id, {x: 700, y: 630});
     ResetPosition(id, "center");
 });
@@ -65,7 +65,12 @@ function register(){
 
 function ShowLogin(msg){
     ClearWindows({type: "register"});
-    CreateWindow({type: "login", id: "login", success: msg});
+    CreateWindow({
+        type: "login",
+        id: "login",
+        title: "Login",
+        success: msg
+    });
 }
 
 </script>

client/src/views/windows/database/DbWindow.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { onMounted, onUpdated, ref } from 'vue';
+import { SetupHandle, SetSize, SetPosition, ResetPosition } from '@/services/Windows';
+
+import WindowHandle from '@/views/partials/WindowHandle.vue';
+
+const handle = ref(null);
+
+const props = defineProps(['data']);
+const data = props.data;
+
+let id = data.id;
+onMounted(() => {
+    SetupHandle(id, handle);
+    SetSize(id, {x: 500, y: 380});
+    ResetPosition(id, "center");
+});
+</script>
+
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+
+        <!-- Body -->
+
+    </div>
+</template>
+
+
+<style scoped>
+.window-wrapper {
+    min-width: 700px;
+    min-height: 630px;
+
+    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>