allow updationg of scene phase through director console

talemate_frontend/src/components/DirectorConsole.vue

@@ -2,16 +2,24 @@
 
     <!-- current phase -->
     <v-list-subheader>
-        Current Phase <v-chip v-if="intent.name" size="x-small" label color="primary" class="ml-2">{{ intent.name }}</v-chip>
+        Current Phase
     </v-list-subheader>
     <v-card>
         <v-card-text>
-            <div v-if="intent.name">
+            <v-select :items="sceneTypes" v-model="intent.phase.scene_type" label="Scene Type" class="text-caption" density="compact" @update:model-value="updateSceneIntent()"></v-select>
-                <p class="text-muted text-caption">{{ intent.intent }}</p>
+            <v-textarea 
-            </div>
+                density="compact" 
-            <div v-else class="text-muted text-caption">
+                v-model="intent.phase.intent" 
-                No scene phase set
+                class="text-caption" 
-            </div>
+                hide-details 
+                rows="4" 
+                max-rows="15" 
+                auto-grow
+                :color="dirty['intent.phase.intent'] ? 'dirty' : ''"
+                @update:model-value="dirty['intent.phase.intent'] = true"
+                @blur="updateSceneIntent()"
+                ></v-textarea>
+                
         </v-card-text>
         <v-card-actions>
             <v-btn @click="openWorldStateManager('scene','director')" color="primary">Manage</v-btn>
@@ -48,6 +56,10 @@ export default {
     },
     props: {
         scene: Object,
+        open: {
+            type: Boolean,
+            default: false,
+        }
     },
     inject: [
         'openWorldStateManager',
@@ -55,28 +67,72 @@ export default {
         'registerMessageHandler',
         'unregisterMessageHandler',
     ],
+    watch: {
+        open(newVal) {
+            if(newVal) {
+                this.getSceneIntent();
+            }
+        },
+    },
     computed: {
-        intent() {
+        sceneTypes() {
-            if(!this.scene || !this.scene.data || !this.scene.data.intent) {
+            if(!this.intent || !this.intent.scene_types) {
-                return {        
+                return [];
-                    name: null,
-                    intent: null,
             }
+
+            const types = [];
+            for(const key in this.intent.scene_types) {
+                types.push({
+                    value: this.intent.scene_types[key].id,
+                    title: this.intent.scene_types[key].name,
+                });
             }
-            return this.scene.data.intent;
+
+            return types;
         }
     },
     data() {
         return {
             messages: [],
             max_messages: 20,
+            dirty: {},
+            intent: {
+                intent: null,
+                phase: {
+                    intent: null,
+                    scene_type: null,
+                },
+                scene_types: {},
+                start: 0,
+            },
         }
     },
     methods: {
         clearMessages() {
             this.messages = [];
         },
+        updateSceneIntent() {
+            if(!this.intent || !this.intent.intent) {
+                return;
+            }
+            this.getWebsocket().send(JSON.stringify({
+                type: 'world_state_manager',
+                action: 'set_scene_intent',
+                ...this.intent,
+            }));
+        },
+        getSceneIntent() {
+            this.getWebsocket().send(JSON.stringify({
+                type: 'world_state_manager',
+                action: 'get_scene_intent',
+            }));
+        },
         handleMessage(message) {
+
+            if (message.action === 'get_scene_intent') {
+                this.intent = message.data;
+            }
+
             if(message.type != "director") {
                 return;
             }
@@ -86,7 +142,7 @@ export default {
                 return;
             }
 
-            this.messages.push(message);
+            this.messages.unshift(message);
             
             // Keep messages within the max limit
             while(this.messages.length > this.max_messages) {

talemate_frontend/src/components/TalemateApp.vue

@@ -129,10 +129,10 @@
       </v-navigation-drawer>
 
       <!-- director console navigation drawer -->
-      <v-navigation-drawer v-model="directorConsoleDrawer" app location="right" width="400" disable-resize-watcher>
+      <v-navigation-drawer v-model="directorConsoleDrawer" app location="right" :width="directorConsoleWidth" disable-resize-watcher>
         <v-list>
           <v-list-subheader class="text-uppercase"><v-icon>mdi-bullhorn</v-icon> Director Console</v-list-subheader>
-          <DirectorConsole :scene="scene" v-if="sceneActive" />
+          <DirectorConsole :scene="scene" v-if="sceneActive" :open="directorConsoleDrawer" />
         </v-list>
       </v-navigation-drawer>
 
@@ -496,6 +496,17 @@ export default {
 
       return false;
 
+    },
+    directorConsoleWidth() {
+      // based on the screen width, set the width of the director console
+      const screenWidth = window.innerWidth;
+      if(screenWidth <= 1920) {
+        return 400;
+      } else if(screenWidth <= 2560) {
+        return 600;
+      } else {
+        return 800;
+      }
     }
   },
   mounted() {

talemate_frontend/src/components/WorldStateManagerSceneOutline.vue

@@ -1,6 +1,6 @@
 <template>
     <v-row>
-        <v-col cols="12" ms="12" xl="8" xxl="5">
+        <v-col cols="12" ms="12" xl="8" xxl="6">
             <v-form class="mt-4">
                 <v-row>
                     <v-col cols="12" md="8" lg="6" xl="6">