From 5e99a3195f0d40ba69ec23290014283bddd4432d Mon Sep 17 00:00:00 2001
From: verekia <522007+verekia@users.noreply.github.com>
Date: Thu, 4 Apr 2024 17:49:48 +0700
Subject: [PATCH] feat(vue): add joystick support

---
 README.md                                     |  4 +-
 examples/react/src/App.tsx                    |  2 +-
 .../react/src/components/MobileJoystick.tsx   | 10 +--
 examples/vue/src/App.vue                      | 23 +++++-
 .../vue/src/components/MobileJoystick.vue     | 56 ++++++++++++++
 packages/vue/src/JoystickArea.vue.ts          | 76 +++++++++++++++++++
 packages/vue/src/index.ts                     |  1 +
 7 files changed, 159 insertions(+), 13 deletions(-)
 create mode 100644 examples/vue/src/components/MobileJoystick.vue
 create mode 100644 packages/vue/src/JoystickArea.vue.ts

diff --git a/README.md b/README.md
index 39d5558..d61c391 100644
--- a/README.md
+++ b/README.md
@@ -353,7 +353,7 @@ useAnimationFrame(
 
 ## Virtual joysticks
 
-⚠️ React and vanilla-only for now ⚠️
+⚠️ Svelte not supported yet ⚠️
 
 Mana Potion includes **🗿 non-reactive** and **headless** virtual joysticks for mobile controls. Each virtual joystick is associated with a single `<JoystickArea />`. You can create your own Joystick objects with `createJoystick()` or use one of the two default ones that are already available on the joysticks store. The default ones are called `movement` and `rotation` joysticks.
 
@@ -374,6 +374,8 @@ const MobileUI = () => (
 )
 ```
 
+With vanilla JS, use `mountJoystickArea` instead.
+
 In follow mode, the joystick will follow the user's finger, which is good for player movement.
 
 Here are the properties that will be updated on your joystick object:
diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
index 634eb05..630e7d2 100644
--- a/examples/react/src/App.tsx
+++ b/examples/react/src/App.tsx
@@ -260,7 +260,7 @@ const UI = ({
               <div className="absolute left-[58px] top-[75px] max-w-36 text-center mobile:hidden">
                 Switch to 👆 mobile mode in devtools
               </div>
-              <MobileJoystick className="mt-3" mode={joystickMode} />
+              <MobileJoystick mode={joystickMode} />
               <div className="mt-3 flex items-center justify-center gap-3">
                 Mode{' '}
                 <button
diff --git a/examples/react/src/components/MobileJoystick.tsx b/examples/react/src/components/MobileJoystick.tsx
index da06b48..2f51058 100644
--- a/examples/react/src/components/MobileJoystick.tsx
+++ b/examples/react/src/components/MobileJoystick.tsx
@@ -2,13 +2,7 @@ import { useRef } from 'react'
 
 import { getJoysticks, Joystick, JoystickArea } from '@manapotion/r3f'
 
-const MobileJoystick = ({
-  className = '',
-  mode = 'follow',
-}: {
-  className?: string
-  mode?: 'follow' | 'origin'
-}) => {
+const MobileJoystick = ({ mode = 'follow' }: { mode?: 'follow' | 'origin' }) => {
   const joystickCurrentRef = useRef<HTMLDivElement>(null)
   const joystickOriginRef = useRef<HTMLDivElement>(null)
   const joystickFollowRef = useRef<HTMLDivElement>(null)
@@ -39,7 +33,7 @@ const MobileJoystick = ({
       joystick={getJoysticks().movement}
       mode={mode}
       containerProps={{
-        className: `relative z-10 h-48 w-64 rounded-md border border-slate-500 ${className}`,
+        className: `relative z-10 h-48 w-64 rounded-md border border-slate-500 mt-3`,
       }}
       onStart={handleStart}
       onMove={handleMove}
diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
index 4952373..87d3470 100644
--- a/examples/vue/src/App.vue
+++ b/examples/vue/src/App.vue
@@ -27,6 +27,7 @@ import LockedLabel from './components/labels/LockedLabel.vue'
 import LockMouseButton from './components/labels/LockMouseButton.vue'
 import MiddleMouseButtonLabel from './components/labels/MiddleMouseButtonLabel.vue'
 import RightMouseButtonLabel from './components/labels/RightMouseButtonLabel.vue'
+import MobileJoystick from './components/MobileJoystick.vue'
 import TwitterIcon from './components/TwitterIcon.vue'
 
 const animationFrameEl = ref<HTMLSpanElement>()
@@ -46,6 +47,8 @@ useAnimationFrame(
   },
   { throttle: 100 },
 )
+
+const joystickMode = ref<'follow' | 'origin'>('follow')
 </script>
 
 <template>
@@ -132,13 +135,13 @@ useAnimationFrame(
           <template #label>
             <IsPortraitLabel />
           </template>
-          <template #extra><span className="text-sm">Ratio-based</span></template>
+          <template #extra><span class="text-sm">Ratio-based</span></template>
         </Item>
         <Item name="isLandscape">
           <template #label>
             <IsLandscapeLabel />
           </template>
-          <template #extra><span className="text-sm">Ratio-based</span></template>
+          <template #extra><span class="text-sm">Ratio-based</span></template>
         </Item>
 
         <Item :name="'width,height'" :is-reactive="false">
@@ -212,7 +215,21 @@ useAnimationFrame(
       </section>
       <section>
         <h2 class="section-heading">🕹️ Virtual joysticks</h2>
-        <div>Vue support coming soon.</div>
+        <div class="relative w-max">
+          <div class="absolute left-[58px] top-[75px] max-w-36 text-center mobile:hidden">
+            Switch to 👆 mobile mode in devtools
+          </div>
+          <MobileJoystick :mode="joystickMode" />
+          <div class="mt-3 flex items-center justify-center gap-3">
+            Mode
+            <button
+              class="btn capitalize"
+              @click="() => (joystickMode = joystickMode === 'follow' ? 'origin' : 'follow')"
+            >
+              {{ joystickMode === 'follow' ? 'Follow' : 'Origin' }}
+            </button>
+          </div>
+        </div>
       </section>
       <section>
         <h2 class="section-heading">🔄 Animation loops</h2>
diff --git a/examples/vue/src/components/MobileJoystick.vue b/examples/vue/src/components/MobileJoystick.vue
new file mode 100644
index 0000000..080418c
--- /dev/null
+++ b/examples/vue/src/components/MobileJoystick.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { getJoysticks, Joystick, JoystickArea } from '@manapotion/vue'
+
+const props = defineProps<{ mode: 'follow' | 'origin' }>()
+
+const joystickCurrent = ref<HTMLDivElement | null>(null)
+const joystickOrigin = ref<HTMLDivElement | null>(null)
+const joystickFollow = ref<HTMLDivElement | null>(null)
+
+const handleStart = (joystick: Joystick) => {
+  joystickCurrent.value!.style.transform = `translate(${joystick.current.x}px, ${-joystick.current.y!}px)`
+  joystickOrigin.value!.style.transform = `translate(${joystick.origin.x}px, ${-joystick.origin.y!}px)`
+  joystickFollow.value!.style.transform = `translate(${joystick.follow.x}px, ${-joystick.follow.y!}px)`
+  joystickCurrent.value!.style.opacity = '1'
+  props.mode === 'follow' && (joystickFollow.value!.style.opacity = '1')
+  joystickOrigin.value!.style.opacity = '1'
+}
+
+const handleEnd = () => {
+  joystickCurrent.value!.style.opacity = '0'
+  joystickFollow.value!.style.opacity = '0'
+  joystickOrigin.value!.style.opacity = '0'
+}
+
+const handleMove = (joystick: Joystick) => {
+  joystickCurrent.value!.style.transform = `translate(${joystick.current.x}px, ${-joystick.current.y!}px)`
+  joystickOrigin.value!.style.transform = `translate(${joystick.origin.x}px, ${-joystick.origin.y!}px)`
+  joystickFollow.value!.style.transform = `translate(${joystick.follow.x}px, ${-joystick.follow.y!}px)`
+}
+</script>
+
+<template>
+  <JoystickArea
+    :joystick="getJoysticks().movement"
+    :mode="props.mode"
+    :container-props="{ class: `relative z-10 h-48 w-64 rounded-md border border-slate-500 ` }"
+    @start="handleStart"
+    @move="handleMove"
+    @end="handleEnd"
+  >
+    <div
+      ref="joystickCurrent"
+      class="pointer-events-none absolute -bottom-6 -left-6 size-12 rounded-full bg-red-500 opacity-0 transition-opacity"
+    />
+    <div
+      ref="joystickOrigin"
+      class="pointer-events-none absolute -bottom-6 -left-6 size-12 rounded-full bg-blue-500 opacity-0 transition-opacity"
+    />
+    <div
+      ref="joystickFollow"
+      class="pointer-events-none absolute -bottom-6 -left-6 size-12 rounded-full bg-green-500 opacity-0 transition-opacity"
+    />
+  </JoystickArea>
+</template>
diff --git a/packages/vue/src/JoystickArea.vue.ts b/packages/vue/src/JoystickArea.vue.ts
new file mode 100644
index 0000000..21441ec
--- /dev/null
+++ b/packages/vue/src/JoystickArea.vue.ts
@@ -0,0 +1,76 @@
+import { defineComponent, h, onMounted, onUnmounted, ref, watch } from 'vue'
+
+import { Joystick, mountJoystickArea } from '@manapotion/core'
+
+export const JoystickArea = defineComponent({
+  name: 'JoystickArea',
+  props: {
+    mode: {
+      type: String as () => 'follow' | 'origin',
+      default: 'follow',
+    },
+    joystick: {
+      type: Object as () => Joystick,
+      required: true,
+    },
+    // eslint-disable-next-line vue/require-default-prop
+    maxFollowDistance: { type: Number },
+    // eslint-disable-next-line vue/require-default-prop
+    maxOriginDistance: { type: Number },
+    // eslint-disable-next-line vue/require-default-prop
+    onEnd: { type: Function },
+    // eslint-disable-next-line vue/require-default-prop
+    onMove: { type: Function },
+    // eslint-disable-next-line vue/require-default-prop
+    onStart: { type: Function },
+    // eslint-disable-next-line vue/require-default-prop
+    containerProps: { type: Object },
+  },
+  setup(props, { slots, attrs }) {
+    const localRef = ref<HTMLDivElement | null>(null)
+
+    onMounted(() => {
+      let unsub = mountJoystickArea({
+        mode: props.mode,
+        joystick: props.joystick,
+        maxFollowDistance: props.maxFollowDistance,
+        maxOriginDistance: props.maxOriginDistance,
+        onEnd: props.onEnd as (joystick: Joystick) => void,
+        onMove: props.onMove as (joystick: Joystick) => void,
+        onStart: props.onStart as (joystick: Joystick) => void,
+        element: localRef.value!,
+      })
+      // TODO: watch for changes in other props? joystick, maxFollowDistance, maxOriginDistance
+      watch(
+        () => props.mode,
+        newMode => {
+          unsub()
+          unsub = mountJoystickArea({
+            mode: newMode,
+            joystick: props.joystick,
+            maxFollowDistance: props.maxFollowDistance,
+            maxOriginDistance: props.maxOriginDistance,
+            onEnd: props.onEnd as (joystick: Joystick) => void,
+            onMove: props.onMove as (joystick: Joystick) => void,
+            onStart: props.onStart as (joystick: Joystick) => void,
+            element: localRef.value!,
+          })
+        },
+      )
+      onUnmounted(() => {
+        unsub()
+      })
+    })
+
+    return () =>
+      h(
+        'div',
+        {
+          ...props.containerProps,
+          ref: localRef,
+          ...attrs,
+        },
+        slots.default ? slots.default() : [],
+      )
+  },
+})
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 3ab7697..d93c928 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -1,6 +1,7 @@
 export * from './Listeners.vue'
 export * from './vue-store'
 export * from './vue-loops'
+export * from './JoystickArea.vue'
 
 export * from './listeners/DeviceTypeListener.vue'
 export * from './listeners/KeyboardListener.vue'