From d16e87dec51bde2afe099953256b56e740f69437 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 24 Nov 2023 16:06:52 -0300
Subject: [PATCH] User random mission names with edit icon by default

This will remember users to set the correct mission name.
---
 src/App.vue | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d4770830a..9abeb431e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -66,13 +66,17 @@
             <button class="flex items-center justify-center h-full aspect-square" @click="showMainMenu = true">
               <span class="text-3xl transition-all mdi mdi-menu text-slate-300 hover:text-slate-50" />
             </button>
-            <div class="flex items-center justify-center h-full ml-3 mr-1">
-              <p
-                class="overflow-hidden text-lg font-medium leading-none text-white cursor-pointer select-none max-h-9"
-                @click="showMissionOptionsDialog = true"
-              >
-                {{ store.missionName }}
-              </p>
+            <div
+              class="flex items-center justify-start h-full px-4 ml-3 mr-1 transition-all cursor-pointer hover:bg-slate-200/30 min-w-[20%] select-none"
+              @click="showMissionOptionsDialog = true"
+            >
+              <div class="flex items-center h-full overflow-hidden text-lg font-medium leading-none text-white">
+                <p v-if="store.missionName">{{ store.missionName }}</p>
+                <p v-else>
+                  {{ randomMissionName }}
+                  <FontAwesomeIcon icon="fa-pen-to-square" size="md" class="ml-2 text-slate-200/30" />
+                </p>
+              </div>
             </div>
             <div class="grow" />
             <Alerter class="max-w-sm min-w-fit" />
@@ -136,6 +140,7 @@ import {
 import { useRoute } from 'vue-router'
 
 import ConfigurationMenu from '@/components/ConfigurationMenu.vue'
+import { coolMissionNames } from '@/libs/funny-name/words'
 import { CockpitAction, registerActionCallback, unregisterActionCallback } from '@/libs/joystick/protocols'
 import { useMissionStore } from '@/stores/mission'
 
@@ -170,6 +175,7 @@ const fullScreenToggleIcon = computed(() => (isFullscreen.value ? 'mdi-fullscree
 // Mission identification
 const store = useMissionStore()
 const showMissionOptionsDialog = ref(false)
+const randomMissionName = coolMissionNames.random()
 
 // Clock
 const timeNow = useTimestamp({ interval: 1000 })