From d9bbef779571dcc28a10812a5fea49b0d12b5f6f Mon Sep 17 00:00:00 2001
From: aesc-24 <angele20002010@gmail.com>
Date: Thu, 16 Jan 2025 16:56:06 -0500
Subject: [PATCH] added auto-position

---
 pages/scout.vue | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/pages/scout.vue b/pages/scout.vue
index d3fc12b..a504465 100644
--- a/pages/scout.vue
+++ b/pages/scout.vue
@@ -32,6 +32,8 @@ const endgameOptions = [
   'Deep Successful',
 ];
 
+const isAutoPositionOpen = ref(false);
+
 /*
 Used to configure coral buttons
  */
@@ -403,6 +405,23 @@ async function submit() {
                 </div>
               </div>
             </div>
+            <UButton
+              class="ml-1"
+              @click="isAutoPositionOpen = true"
+              label="Reference"
+            />
+            <!-- the popup for the reference image -->
+            <UModal v-model="isAutoPositionOpen">
+              <div class="flex flex-auto">
+                <UButton
+                  class="mr-2 mt-2 right-0 absolute"
+                  @click="isAutoPositionOpen = false"
+                  icon="i-heroicons-x-circle"
+                />
+                <img src="/public/referenceImage2.png" />
+                <!-- next thing to work: shifting the image up for phone users -->
+              </div>
+            </UModal>
           </div>
         </div>
       </div>