From 59345d844f581f6b85c27b51a95f3e605a72c6fa Mon Sep 17 00:00:00 2001
From: "riho.takagi" <rihohearts@gmail.com>
Date: Fri, 20 Oct 2023 15:36:06 -0400
Subject: [PATCH] add minimap

---
 src/lib/components/minimap.svelte | 32 +++++++++++++++++++++
 src/routes/index.svelte           | 47 +++++++++++++++++++------------
 2 files changed, 61 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/components/minimap.svelte

diff --git a/src/lib/components/minimap.svelte b/src/lib/components/minimap.svelte
new file mode 100644
index 0000000..8e097d3
--- /dev/null
+++ b/src/lib/components/minimap.svelte
@@ -0,0 +1,32 @@
+<script>
+  let minimap;
+  let mapSource;
+</script>
+
+<style>
+  #minimap {
+    position: relative;
+    width: 200px; 
+    height: 120px; 
+    top: 30px;
+    background: rgba(200, 200, 200, 0.6);
+    overflow: hidden;
+  }
+  .minimap-content {
+    position: relative;
+    transform: scale(0.15);
+  }
+  .minimap-content * {
+    transform: none !important;
+  }
+</style>
+<div id="map" bind:this={mapSource}>
+  <slot></slot>
+</div>
+
+<div bind:this={minimap} id="minimap" >
+    <div class="minimap-content">
+      <slot></slot>
+    </div>
+</div>
+
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index e15be93..80c2d72 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -35,6 +35,7 @@
   import Schedule from "$lib/components/world-layers/schedule/Schedule.svelte"
   // *** PHONE
   import PhoneNavigation from "$lib/components/PhoneNavigation.svelte"
+  import Minimap from "$lib/components/minimap.svelte"
 
   import {
     connectToGameServer,
@@ -95,6 +96,8 @@
   let newRoomIntroduction = false
   let streamRect = {}
   let chatRect = {}
+  let minimap;
+  let mapContentElement;
 
   $: {
     if ($players && $players[$localPlayer.uuid]) {
@@ -307,6 +310,7 @@
     let avatarCookie = Cookies.get("open-eyebeam-avatar")
 
 
+
     if (!nameCookie && !$isAuthenticated) {
       // If the user is not onboarded, branch off...
       uiState.set(STATE.ONBOARDING)
@@ -314,6 +318,7 @@
       // ... otherwise, finalize the set up
       finalSetUp(nameCookie, avatarCookie)
     }
+    
   })
   // check for universal stream
   export let universalStream = writable({})
@@ -343,6 +348,9 @@ $: $streams && selectStream($streams.filter(stream => {return $currentRoom._id =
   />
 {/if}
 
+
+
+
 <!-- GAME WORLD -->
 {#if $currentRoom}
   <div
@@ -352,24 +360,26 @@ $: $streams && selectStream($streams.filter(stream => {return $currentRoom._id =
     aria-hidden={!$activeArticle ? "false" : "true" }
     role="ui"
   >
-    <Room room={$currentRoom} players={players} localPlayer={$localPlayer} activeMouse={$activeMouse}>
-      <!-- PLAYERS -->
-      <Players players={$players} currentRoomId={$currentRoom._id} {avatars} streamRect={streamRect} chatRect={chatRect}/>
-      <!-- OBJECTS -->
-      <Objects objects={get($currentRoom, "objects", [])} />
-      <!-- ZONES -->
-      <Zones zones={get($currentRoom, "zones", [])} />
-      <!-- PORTALS -->
-      <Portals
-        portals={get($currentRoom, "portals", [])}
-        on:room={e => {
-          if (e.detail.roomId) {
-            changeRoom(e.detail.roomId)
-          }
-          roomIntent.set(false)
-        }}
-      />
-    </Room>
+    <Minimap bind:this={minimap} mapSource={mapContentElement} >
+      <Room room={$currentRoom} players={players} localPlayer={$localPlayer} activeMouse={$activeMouse} bind:this={mapContentElement}>
+        <!-- PLAYERS -->
+        <Players players={$players} currentRoomId={$currentRoom._id} {avatars} streamRect={streamRect} chatRect={chatRect}/>
+        <!-- OBJECTS -->
+        <Objects objects={get($currentRoom, "objects", [])} />
+        <!-- ZONES -->
+        <Zones zones={get($currentRoom, "zones", [])} />
+        <!-- PORTALS -->
+        <Portals
+          portals={get($currentRoom, "portals", [])}
+          on:room={e => {
+            if (e.detail.roomId) {
+              changeRoom(e.detail.roomId)
+            }
+            roomIntent.set(false)
+          }}
+        />
+      </Room>
+    </Minimap>
   </div>
 {/if}
 
@@ -429,6 +439,7 @@ $: $streams && selectStream($streams.filter(stream => {return $currentRoom._id =
 {/if}
 </div>
 
+
 <!-- ROOM ENTRY BOX -->
 {#if $roomIntent}
   <RoomEntryBox