Whatever

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);