Whatever

frontend/app/assets/css/main.scss

@@ -106,7 +106,8 @@ textarea {
   background-color: var(--color-background-softer);
   padding: 12px;
   color: var(--color-text);
-  border: none;
+  border-radius: 6px;
+  border: solid 1px var(--color-border);;
 }
 
 input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {

frontend/app/components/partials/CampaignEntry.vue

@@ -0,0 +1,82 @@
+<script setup>
+
+import { onMounted, ref } from 'vue';
+
+import { AddSound } from '../../services/Sound';
+
+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);
+    
+    AddSound(container.value)
+});
+
+function ViewCampaign(){
+    // ConnectToCampaign(data);
+    // DisplayCampaign(data);
+}
+</script>
+
+
+<template>
+    <div class="campaign-entry-container" ref="container">
+        <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>
+            </div>
+
+            <div class="campaign-user-actions">
+                <button class="btn-primary button-small sound-click" v-on:click.prevent="ViewCampaign">{{ $t('general.view')}}</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.button-small {
+    height: 32px;
+    padding: 10px;
+}
+
+.campaign-entry-container {
+    background-color: var(--color-background-softer);
+    width: 100%;
+    user-select: none;
+
+    border-bottom: 1px solid var(--color-border);
+    &:first-child {
+        border-top: 1px solid var(--color-border);
+    }
+}
+
+.main-campaign-entry-container-inner {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+
+    justify-content: center;
+}
+
+.campaign-info {
+    text-align: left;
+    margin-left: 10px;
+}
+
+.campaign-icon {
+    width: 40px;
+    height: 40px;
+}
+
+.campaign-user-actions {
+    margin-left: auto;
+}
+</style>

frontend/app/components/partials/ColorPicker.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+const color = ref("");
+const colorValue = ref(null);
+const colorPicker = ref(null);
+
+const selectedColorCode = ref(null);
+
+onMounted(() => {
+    colorValue.value.addEventListener('click', () => {
+        colorPicker.value.click();
+    })
+    
+    colorPicker.value.addEventListener('input', (event) => {
+        let newColor = event.target.value;
+        colorValue.value.classList.remove('unselected');
+        colorValue.value.style.backgroundColor = newColor;
+        color.value = newColor;
+        selectedColorCode.value.textContent = color.value.toUpperCase();
+    });
+});
+
+let GetColor = () => color;
+
+defineExpose({ GetColor });
+</script>
+
+<template>
+    <input type="color" id="colorPicker" ref="colorPicker">
+    <div class="color-value unselected" ref="colorValue">
+        <span class="selected-color-code" ref="selectedColorCode"></span>
+    </div>
+</template>
+
+<style lang="scss">
+#colorPicker {
+    display: none;
+}
+
+.color-value {
+    width: 100px;
+    text-align: center;
+    font-weight: bold;
+    font-size: 16px;
+    height: 20px;
+    border-radius: 10px;
+
+    &.unselected {
+        background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
+        background-size: 10px 10px;
+        background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
+    }
+    
+}
+
+.selected-color-code {
+    font-size: 12px;
+    width: 100%;
+    height: 100%;
+}
+</style>

frontend/app/components/partials/VersionRender.vue

@@ -17,6 +17,7 @@ const config = useRuntimeConfig()
     bottom: 0;
     left: 0;
     user-select: none;
+    font-size: 14px;
 }
 span{
     color: rgb(59, 59, 59);

frontend/app/components/windows/CreateCampaignWindow.vue

@@ -1,8 +1,11 @@
 <script setup>
 import { onMounted, ref } from 'vue';
-import { SetupHandle, SetSize, ResetPosition, Top } from '@/services/Windows';
+import { SetupHandle, SetSize, ResetPosition, Top, ClearWindow } from '@/services/Windows';
 
 import WindowHandle from './partials/WindowHandle.vue';
+import ColorPicker from '../partials/ColorPicker.vue';
+import Server from '~/services/Server';
+import { DisplayToast } from '~/services/Toaster';
 
 const handle = ref(null);
 const wrapper = ref(null);
@@ -15,9 +18,25 @@ let id = data.id;
 onMounted(() => {
     Top(wrapper);
     SetupHandle(id, handle);
-    SetSize(id, {width: 500, height: 380});
+    SetSize(id, {width: 500, height: 400});
     ResetPosition(id, "center");
 });
+
+const campaignName = ref("");
+const campaignDescription = ref("");
+const colorPicker = ref(null);
+
+function NewCampaign(){
+    Server().post('/campaign/create', {
+        name: campaignName.value,
+        description: campaignDescription.value,
+        color: colorPicker.value.GetColor(),
+    }).then((response) => {
+        console.log(response.data);
+        DisplayToast('green', $t('campaigns.create.success'), 3000);
+        ClearWindow({id});
+    });
+}
 </script>
 
 
@@ -25,8 +44,28 @@ onMounted(() => {
     <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
         <WindowHandle :window="id" ref="handle"></WindowHandle>
 
-        <!-- Body -->
-        <div ref="test"></div>
+        <div class="body">
+            <!-- Body -->
+            <form v-on:submit.prevent="NewCampaign">
+                <div class="form-field">
+                    <label>{{ $t('campaigns.create.name') }}</label>
+                    <input type="text" :placeholder="$t('campaigns.create.enter')" name="campaignName" v-model="campaignName" autocomplete="off" >
+                </div>
+                <div class="form-field">
+                    <label>{{ $t('campaigns.create.description') }}</label>
+                    <textarea type="text" :placeholder="$t('campaigns.create.description-placeholder')" name="campaignDescription" v-model="campaignDescription" autocomplete="off" ></textarea>
+                </div>
+                <div class="form-field">
+                    <label>{{ $t('campaigns.create.color') }}</label>
+                    <ColorPicker ref="colorPicker"></ColorPicker>
+                </div>
+                <div class="form-actions">
+                    <button class="btn-primary sound-click">
+                        {{ $t("general.create") }}
+                    </button>
+                </div>
+            </form>
+        </div>
 
     </div>
 </template>
@@ -36,7 +75,60 @@ onMounted(() => {
 .window-wrapper {
     display: flex;
     align-items: center;
+    flex-direction: column;
 }
+
+.body {
+    width: 100%;
+}
+
+.window-second-header {
+    width: 100%;
+    h2 {
+        font-family: MrEavesRemake;
+    }
+}
+
+form {
+    margin-top: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.form-field {
+    padding: 2px;
+    display: flex;
+    align-items: left;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+
+    > * {
+        flex-grow: 1;
+    }
+}
+
+label {
+    text-align: left;
+}
+
+textarea {
+    resize: none;
+    height: 200px;
+    font-size: 14px;
+}
+
+.form-actions {
+    display: flex;
+    justify-content: center; /* centers horizontally */
+    margin-top: 10px;
+}
+
+.form-actions button {
+    width: 100%;        /* makes it expand */
+    max-width: 300px;   /* optional: prevents it from being too wide */
+}
+
 </style>
 
 

frontend/app/components/windows/MainMenuWindow.vue

@@ -5,6 +5,8 @@ import { SetupHandle, SetSize, ResetPosition, Top, CreateChildWindow, GetFirstWi
 import WindowHandle from './partials/WindowHandle.vue';
 import VersionRender from '../partials/VersionRender.vue';
 import EditUserPartial from '../partials/EditUserPartial.vue';
+import CampaignEntry from '../partials/CampaignEntry.vue';
+import Server from '~/services/Server';
 
 const handle = ref(null);
 const wrapper = ref(null);
@@ -12,10 +14,20 @@ const wrapper = ref(null);
 const props = defineProps(['data']);
 const data = props.data;
 
+const campaings = ref([]);
+
 let id = data.id;
 
 function CreateCampaignWindow(){
-    CreateChildWindow(GetFirstWindowId('main_menu'), 'create_campaign', {
+    CreateChildWindow(GetFirstWindowId('main_menu'), 'create_campaign');
+}
+
+function RefreshCampaigns(){
+    Server().get('/campaign/list').then((response) => {
+        console.log(response.data);
+        response.data.forEach((camp) => {
+            campaings.value.push(camp.campaign);
+        });
     });
 }
 
@@ -24,6 +36,8 @@ onMounted(() => {
     SetupHandle(id, handle);
     SetSize(id, {width: 580, height: 760});
     ResetPosition(id, "center");
+
+    RefreshCampaigns();
 });
 </script>
 
@@ -37,13 +51,17 @@ onMounted(() => {
         <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>
             </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>
-                <VersionRender></VersionRender>
             </div>
         </div>
     </div>

frontend/i18n/locales/en.json

@@ -8,6 +8,22 @@
         "settings": "Settings",
         "create-campaign": "Create Campaign"
     },
+    "general": {
+        "create": "Create",
+        "save": "Save",
+        "cancel": "Cancel",
+        "delete": "Delete"
+    },
+    "campaigns": {
+        "create": {
+            "name": "Name",
+            "description": "Description",
+            "description-placeholder": "Enter a brief description for your campaign...",
+            "enter": "Enter campaign name here...",
+            "color": "Accent color",
+            "success": "Campaign created successfully!"
+        }
+    },
     "login": {
         "username": "Username or email",
         "username-placeholder": "Enter your username or email here...",