Staging

package.json

@@ -45,11 +45,14 @@
     "@codemirror/lang-python": "^6.1.5",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@highlightjs/vue-plugin": "^2.1.0",
+    "chartjs": "^0.3.24",
     "codemirror": "^6.0.1",
     "electron-store": "^8.2.0",
     "highlight.js": "^11.9.0",
     "highlightjs": "^9.16.2",
+    "three": "^0.163.0",
     "vue-codemirror": "^6.1.1",
+    "vue-draggable": "^2.0.6",
     "vue-draggable-resizable": "^3.0.0",
     "vue-resizable": "^2.1.7",
     "vue-select": "^4.0.0-beta.6",

src/App.vue

@@ -1,26 +1,13 @@
 <template>
   <div class="container__app">
-    <div class="bg-primary-alt flex width-100 pt-3 pb-3 container__top-bar">
-      <div class="flex justify-center items-center pl-3">
-        <img src="/podium.svg" alt="Podium Logo" class="logo"/>
-        <div class="font-bold pl-2">
-          Podium
-        </div>
-      </div>
-      <div class="absolute flex justify-center items-center w-full top-0 pt-2">
-        <div class="heading__active-config">
-          Active Configuration
-        </div>
-        <div class="ml-3 container__configuration-select">
-        <VueSelect :options="['translation-chatbox-app','default']" class="item__configuration-select"></VueSelect>
-        </div>
-      </div>
-    </div>
+    <AppTopbar/>
     <div class="flex flex-1">
       <div class="flex-1">
         <LeftSidebar/>
       </div>
-      <CenterPanel/>
+      <div class="container__middle">
+      <PrimaryCenterView/>
+      </div>
       <div class="container__right-sidebar">
         <MessagesView :messages="messages"/>
         <UsersView :users="users"/>
@@ -32,16 +19,16 @@
 <script>
 
 
-import MessagesView from "./MessagesView.vue";
-import VueSelect from 'vue-select';
-import LeftSidebar from "./LeftSidebar.vue";
-import CenterPanel from "./CenterPanel.vue";
-import UsersView from "./UsersView.vue";
+import MessagesView from "./components/MessagesView.vue";
+import LeftSidebar from "./components/LeftSidebar.vue";
+import CenterPanel from "./components/PrimaryCenterView.vue";
+import UsersView from "./components/UsersView.vue";
 import {mapState} from "vuex";
+import AppTopbar from "./components/AppTopbar.vue";
 
 export default {
   name: 'App',
-  components: {UsersView, CenterPanel, LeftSidebar, MessagesView, VueSelect},
+  components: {CenterPanel, AppTopbar, UsersView, PrimaryCenterView, LeftSidebar, MessagesView},
   async mounted() {
     window.addEventListener('resize', this.handleResize);
     await this.$store.dispatch('getMessages');
@@ -88,26 +75,6 @@ select:hover {
   border-color: var(--primary-dark)
 }
 
-.container__configuration-select {
-  width: 400px;
-  max-width: 33vw;
-}
-
-.item__configuration-select {
-  font-size: 0.9rem;
-}
-
-.container__top-bar {
-  position: relative;
-  width: 100%;
-  z-index: 1000;
-}
-
-.heading__active-config {
-  font-size: 0.95em;
-  font-weight: 500;
-}
-
 .container__app {
   display: flex;
   flex-direction: column;

src/components/AppTopbar.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="bg-primary-alt flex width-100 pt-3 pb-3 container__top-bar">
+    <div class="flex justify-center items-center pl-3">
+      <img src="/podium.svg" alt="Podium Logo" class="logo"/>
+      <div class="font-bold pl-2">
+        Podium
+      </div>
+    </div>
+    <div class="absolute flex justify-center items-center w-full top-0 pt-2">
+      <div class="heading__active-config">
+        Active Configuration
+      </div>
+      <div class="ml-3 container__configuration-select">
+        <VueSelect :options="['translation-chatbox-app','default']" class="item__configuration-select"></VueSelect>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import VueSelect from 'vue-select'
+
+export default {
+  name: 'AppTopbar',
+  components: {VueSelect}
+}
+</script>
+<style>
+
+select {
+  border-radius: 8px;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  width: 400px;
+  max-width: 33vw;
+  height: 35px;
+  background-color: var(--primary-xtra-dark);
+  color: #ffffff;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+select:hover {
+  border-color: var(--primary-dark)
+}
+
+.container__configuration-select {
+  width: 400px;
+  max-width: 33vw;
+}
+
+.item__configuration-select {
+  font-size: 0.9rem;
+}
+
+.container__top-bar {
+  position: relative;
+  width: 100%;
+  z-index: 1000;
+}
+
+.heading__active-config {
+  font-size: 0.95em;
+  font-weight: 500;
+}
+
+</style>

src/ConfigurationTab.vue → src/components/ConfigurationTab.vue

@@ -15,7 +15,7 @@
         <div class="output__port-name">
           Output Port
         </div>
-        <input type="number" class="input__output-port"/>
+        <input type="number" class="input__output-port" v-model="outputPort"/>
       </div>
       <div class="item__consume-mode">
         <v-checkbox label="Consume Mode"></v-checkbox>
@@ -40,6 +40,8 @@ const dataSources = ref([
   { name: 'AQUASINE', type: 'youtube', connected: false, startingScore: 100 },
 ]);
 
+const outputPort = ref(8765);
+
 </script>
 <style scoped>
 .container__configuration-details {
@@ -98,14 +100,14 @@ input[type=number]::-webkit-outer-spin-button {
   font-size: 0.85em;
 }
 
-.item__consume-mode .v-checkbox {
+.item__consume-mode >>> .v-checkbox {
   font-size: 0.95rem;
   margin-top: -0.5rem;
   margin-bottom: -2rem;
   margin-left: -0.5rem;
 }
 
-.item__consume-mode .v-label {
+.item__consume-mode >>> .v-label {
   font-size: 0.85rem;
   color: var(--text) !important;
   opacity: 1;

src/MessagesView.vue → src/components/MessagesView.vue

@@ -5,15 +5,16 @@
         <div>
           Messages
         </div>
-        <v-icon icon="mdi-arrow-down-bold" class="ml-3" @click="toggleLock" :class="{'icon-disable': locked}"/>
+        <v-icon icon="mdi-pause" class="ml-3" @click="toggleLock" :class="{'icon-disable': locked}"/>
         <v-icon :icon="hidden ? 'mdi-eye' : 'mdi-eye-off'" class="ml-3" @click="toggleHidden"/>
+        <v-icon :icon="sortIcon" class="ml-3" @click="cycleSortType"/>
       </div>
       <div>
         Score
       </div>
     </div>
     <div class="overflow-y-scroll container__messages">
-      <div v-for="message in messages" class="bg3 item__message flex" v-if="!hidden">
+      <div v-for="message in sortedMessages" class="bg3 item__message flex" v-if="!hidden">
         <div class="flex w-full">
           <div class="p-2 container__message-item flex flex-col">
             <div v-if="!hidden">
@@ -74,6 +75,7 @@ export default {
     return {
       locked: false,
       hidden: false,
+      sortType: 'time',
     }
   },
   methods: {
@@ -86,6 +88,45 @@ export default {
     formatScore(score) {
       // 3 decimal places
       return score.toFixed(3);
+    },
+    cycleSortType() {
+      switch (this.sortType) {
+        case 'time':
+          this.sortType = 'score';
+          break;
+        case 'score':
+          this.sortType = 'score-desc';
+          break;
+        case 'score-desc':
+          this.sortType = 'time';
+          break;
+        default:
+          this.sortType = 'time';
+      }
+    }
+  },
+  computed: {
+    sortIcon() {
+      switch (this.sortType) {
+        case 'time':
+          return 'mdi-clock';
+        case 'score':
+          return 'mdi-sort-numeric-ascending';
+        case 'score-desc':
+          return 'mdi-sort-numeric-descending';
+      }
+      return 'mdi-help';
+    },
+    sortedMessages() {
+      switch (this.sortType) {
+        case 'time':
+          return this.messages;
+        case 'score':
+          return this.messages.slice().sort((a, b) => a.weight - b.weight);
+        case 'score-desc':
+          return this.messages.slice().sort((a, b) => b.weight - a.weight);
+      }
+      return this.messages;
     }
   }
 }

src/components/PresentationModeCenterView.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>