From eb693c025d81c84cd5cc145fc0b1a6a4eeeec3bd Mon Sep 17 00:00:00 2001
From: Wade Penistone <wadespackages@yahoo.com>
Date: Sat, 25 Nov 2023 21:19:39 +0000
Subject: [PATCH] AR/VR Button abstractions

---
 playground/src/pages/basics/XR.vue |  4 ++--
 src/components/ARButton.vue        |  8 +++-----
 src/components/VRButton.vue        | 10 ++++++----
 src/components/XRButton.vue        |  9 +++------
 src/components/index.ts            |  4 +++-
 5 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/playground/src/pages/basics/XR.vue b/playground/src/pages/basics/XR.vue
index 5c1411a..954c109 100644
--- a/playground/src/pages/basics/XR.vue
+++ b/playground/src/pages/basics/XR.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
   import { TresCanvas } from '@tresjs/core'
-  import { XRButton } from '@tresjs/xr'
+  import { VRButton } from '@tresjs/xr'
 </script>
 
 <template>
   <div>
-    <XRButton mode="VR">Immersive Experience</XRButton>
+    <VRButton>Immersive Experience</VRButton>
     <TresCanvas window-size>
       <TresMesh>
         <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
diff --git a/src/components/ARButton.vue b/src/components/ARButton.vue
index 6446504..c9e92cd 100644
--- a/src/components/ARButton.vue
+++ b/src/components/ARButton.vue
@@ -1,11 +1,9 @@
 <template>
-    <XrButton>
-        Ar
-    </XrButton>
+    <XRButton mode="AR" :style="buttonStyles"></XRButton>
 </template>
 
-<script setup>
+<script setup lang="ts">
     import XRButton from './XRButton.vue'
 
-    // import buttonStyles from './buttonStyles'
+    import { buttonStyles } from './buttonStyles'
 </script>
\ No newline at end of file
diff --git a/src/components/VRButton.vue b/src/components/VRButton.vue
index d2a2804..40ab550 100644
--- a/src/components/VRButton.vue
+++ b/src/components/VRButton.vue
@@ -1,9 +1,11 @@
 <template>
-    <XrButton>
-        Vr
-    </XrButton>
+    <XRButton mode="VR" v-bind="{sessionInit}" :style="buttonStyles"></XRButton>
 </template>
 
-<script setup>
+<script setup lang="ts">
     import XRButton from './XRButton.vue'
+
+    import { buttonStyles } from './buttonStyles'
+
+    const sessionInit = { optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers'] }
 </script>
\ No newline at end of file
diff --git a/src/components/XRButton.vue b/src/components/XRButton.vue
index 5522bf0..ba3675a 100644
--- a/src/components/XRButton.vue
+++ b/src/components/XRButton.vue
@@ -1,16 +1,13 @@
 <template>
-    <div>
-        <button @click="handleButtonClick" :style="buttonStyles">
-            {{ label }}
-        </button>
-    </div>
+    <button @click="handleButtonClick">
+        {{ label }}
+    </button>
 </template>
 
 <script setup lang="ts">
     import { computed, ref, onMounted } from 'vue'
     import type { Ref } from 'vue'
     import create from 'vue-zustand'
-    import { buttonStyles } from './buttonStyles'
 
     /**
      * Filters to unique entries of an array.
diff --git a/src/components/index.ts b/src/components/index.ts
index 98a4ab8..ee214f6 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,5 +1,7 @@
+import ARButton from './ARButton.vue'
+import VRButton from './VRButton.vue'
 import XRButton from './XRButton.vue'
 
 export {
-    XRButton
+    ARButton, VRButton, XRButton
 }
\ No newline at end of file