feat: WebSocketの諸々

src/hooks/useOrientation.ts

@@ -0,0 +1,49 @@
+import { useEffect, useState, useCallback } from "react";
+
+export interface Orientation {
+  alpha: number;
+  beta: number;
+  gamma: number;
+}
+
+export const useOrientation = () => {
+  const [initialOrientation, setInitialOrientation] =
+    useState<Orientation | null>(null);
+  const [orientationDiff, setOrientationDiff] = useState<Orientation>({
+    alpha: 0,
+    beta: 0,
+    gamma: 0,
+  });
+
+  const handleOrientation = useCallback(
+    (event: DeviceOrientationEvent) => {
+      if (!initialOrientation) {
+        setInitialOrientation({
+          alpha: event.alpha || 0,
+          beta: event.beta || 0,
+          gamma: event.gamma || 0,
+        });
+      } else {
+        setOrientationDiff({
+          alpha: (event.alpha || 0) - initialOrientation.alpha,
+          beta: (event.beta || 0) - initialOrientation.beta,
+          gamma: (event.gamma || 0) - initialOrientation.gamma,
+        });
+      }
+    },
+    [initialOrientation]
+  );
+
+  const reset = useCallback(() => {
+    setInitialOrientation(null);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("deviceorientation", handleOrientation);
+    return () => {
+      window.removeEventListener("deviceorientation", handleOrientation);
+    };
+  }, [handleOrientation]);
+
+  return { orientationDiff, reset };
+};

src/store/useSocketRefStore.ts

@@ -1,5 +1,5 @@
 import { create } from "zustand";
-import { MutableRefObject } from "react";
+import type { MutableRefObject } from "react";
 
 type State = {
   socketRef: MutableRefObject<WebSocket | undefined> | null;

src/type/schema.ts

@@ -0,0 +1,30 @@
+export interface Schema {
+  id: string;
+  interval: number;
+  angle: angle;
+  acceleration: acceleration;
+  distance: distance;
+  message_type: message_type;
+}
+
+interface angle {
+  x: number;
+  y: number;
+}
+
+interface acceleration {
+  x: number;
+  y: number;
+  z: number;
+}
+
+interface distance {
+  x: number;
+  y: number;
+  z: number;
+}
+
+export enum message_type {
+  pointer = "pointer",
+  action = "action",
+}

src/utils/parmission.ts

@@ -0,0 +1,31 @@
+/**
+ * 角度・加速度センサーのパーミッションをリクエストする関数
+ */
+export const requestPermission = async () => {
+  // @ts-expect-error only safari propaty
+  if (typeof DeviceMotionEvent.requestPermission === "function") {
+    try {
+      // @ts-expect-error only safari propaty
+      const permissionState = await DeviceMotionEvent.requestPermission();
+      if (permissionState !== "granted") {
+        console.warn("Device Motion permission denied.");
+      }
+    } catch (error) {
+      console.error("Error requesting Device Motion permission:", error);
+    }
+  }
+
+  // @ts-expect-error only safari propaty
+  if (typeof DeviceOrientationEvent.requestPermission === "function") {
+    try {
+      const permissionState =
+        // @ts-expect-error only safari propaty
+        await DeviceOrientationEvent.requestPermission();
+      if (permissionState !== "granted") {
+        console.warn("Device Orientation permission denied.");
+      }
+    } catch (error) {
+      console.error("Error requesting Device Orientation permission:", error);
+    }
+  }
+};