Feature/exit button 20260427

app/src/components/EscapeMenu.vue

@@ -0,0 +1,42 @@
+<template>
+  <Teleport to="body">
+    <div 
+      v-if="model.isOpen" 
+      class="modal modal-open !z-[9999] bg-black/40 backdrop-blur-sm"
+      @keydown.esc="close"
+    >
+      <form method="dialog" class="modal-backdrop" @click="close">
+        <button>close</button>
+      </form>
+
+      <div class="modal-box bg-base-100/10 backdrop-blur-xl border border-base-200/50 max-w-lg">
+        <h3 class="text-2xl font-bold text-base-content mb-6 text-white">VR Menu</h3>
+
+        <div class="space-y-4">
+            <button @click="props.model.onResume" class="w-full btn btn-primary btn-wide">Återuppta</button>
+            <button @click="props.model.onLeave" class="w-full btn btn-neutral btn-wide">Lämna VR miljö</button>
+        </div>
+
+        <div class="mt-8 pt-6 border-t border-base-200/50 text-sm text-base-content/70 text-center text-white">
+          <p><kbd class="kbd kbd-sm">Esc</kbd> to close</p>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+interface EscapeMenuModel {
+  isOpen: boolean
+  onResume: () => void
+  onLeave: () => void
+}
+
+const props = defineProps<{
+  model: EscapeMenuModel
+}>()
+
+function close() {
+  props.model.onResume()
+}
+</script>

app/src/components/lobby/VrAFrame.vue

@@ -50,8 +50,8 @@
     :nipple-controls="`enabled: ${isTouchDevice};mode: static; rotationSensitivity: 2.0; bottomMargin: 70px; sideMargin: 30px;`">
     <!-- <a-sphere radius="0.3" /> -->
     <a-entity camera id="camera" ref="cameraTag"
-      look-controls="touchEnabled: true; reverseMouseDrag: false; reverseTouchDrag: true; pointerLockEnabled: true;"
-      wasd-controls="acceleration:35;"
+      :look-controls="`touchEnabled: true; enabled: ${!props.isMenuOpen}; reverseMouseDrag: false; reverseTouchDrag: true; pointerLockEnabled: true;`"
+      :wasd-controls="`acceleration:35; enabled: ${!props.isMenuOpen};`"
       :simple-navmesh-constraint="`navmesh: .navmesh; fall: 0.3; height: ${defaultHeightOverGround};`"
       emit-move="interval: 20;" :position="`0 ${defaultHeightOverGround} 0`">
       <a-entity ref="cameraAttacher" :position="cameraAttacherPosString">
@@ -185,6 +185,7 @@ import { usePointerLock } from '@vueuse/core';
 import { overlayGUILeft, overlayGUIRight, leftHandVRGui, rightHandVRGui, cameraAttacher } from '@/composables/teleportTargets';
 import AvatarHand from '@/components/entities/AvatarHand.vue';
 import PlacedObject from '@/components/entities/PlacedObject.vue';
+import { is } from 'date-fns/locale';
 const { currentCursorIntersection, triggerCursorClick, isCursorOnNavmesh, currentRaycastSelectorString, pointerOnHover } = useCurrentCursorIntersection();
 const { lock, unlock, element } = usePointerLock();
 
@@ -220,6 +221,7 @@ const props = defineProps({
   // navmeshUrl: {type: String, default: ''},
   // showNavMesh: { type: Boolean, default: false },
   // modelScale: {type: Number, default: 1},
+  isMenuOpen: { type: Boolean, default: false },
 });
 
 const worldModelLoaded = ref(false);

app/src/views/user/VrSpaceSceneView.vue

@@ -2,19 +2,30 @@
   <div>
     <div class="min-h-screen z-0">
       <div class="pointer-events-none *:pointer-events-auto absolute z-50" ref="domOutlet" id="aframe-dom-outlet">
+        <!-- Menu -->
+        <EscapeMenu 
+          :model="{
+            isOpen: isMenuOpen,
+            onResume: () => closeMenu(),
+            onLeave: () => {
+              closeMenu();
+              router.push('/')}
+          }" 
+        />
       </div>
       <UIOverlay />
       <WaitForAframe>
         <template v-if="vrSpaceStore.currentVrSpace && mediasoupInitialized">
           <a-scene :background="`color: ${skyColor}`" renderer="logarithmicDepthBuffer: false" scene-cleanup
-            ref="aframeScene" cursor="fuse:false; rayOrigin:mouse;"
+            ref="aframeScene" cursor="fuse:false; rayOrigin:mouse; enabled: !isMenuOpen"
             :raycaster="`objects: ${currentRaycastSelectorString}; mouseCursorStyleEnabled: ${pointerOnHover}`"
             raycaster-update @raycast-update="setCursorIntersection($event.detail)">
             <a-assets>
               <a-asset-item id="icon-font"
                 src="https://fonts.gstatic.com/s/materialicons/v70/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff" />
             </a-assets>
-            <VrAFrame>
+            <VrAFrame
+            :isMenuOpen="isMenuOpen">
               <a-entity ref="vrCursor">
                 <a-ring :visible="currentCursorMode === 'teleport'" transparent opacity="0.3" position="0 0 0.01"
                   radius-inner="0.13" radius-outer="0.17" material="shader: flat;" rotation="0 0 0" color="white" />
@@ -58,6 +69,7 @@
 <script setup lang="ts">
 import { aFrameSceneProvideKey } from '@/modules/injectionKeys';
 import VrAFrame from '../../components/lobby/VrAFrame.vue';
+import EscapeMenu from '../../components/EscapeMenu.vue';
 import { useVrSpaceStore } from '@/stores/vrSpaceStore';
 import type { VrSpaceId } from 'schemas';
 import { onBeforeMount, provide, ref, watch, getCurrentInstance, onBeforeUnmount, computed, nextTick, onMounted, onUpdated, reactive } from 'vue';
@@ -105,6 +117,33 @@ watch(() => vrSpaceStore.screenShares, (newScreenShares) => {
   console.log('screenshares changed', newScreenShares);
 })
 
+const isMenuOpen = ref(false);
+
+function toggleMenu() {
+  isMenuOpen.value = !isMenuOpen.value;
+}
+
+function closeMenu() {
+  isMenuOpen.value = false;
+}
+
+function onGlobalKeyDown(e: KeyboardEvent) {
+  if (e.key !== 'Escape') return;
+
+  e.preventDefault();
+  e.stopPropagation();
+
+  toggleMenu();
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', onGlobalKeyDown, true);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', onGlobalKeyDown, true);
+});
+
 // Emoji stuff
 function setEmojiSelf(coords: Tuple, active: boolean) {
   // Send things to server