Merge pull request #17 from claustra01/feature/websocket-base

WebSocketの基盤とか、角度センサーとか色々

.env.sample

@@ -0,0 +1 @@
+VITE_HOST_NAME=

cspell.json

@@ -2,10 +2,5 @@
   "ignorePaths": ["node_modules/**", "*.svg"],
   "version": "0.2",
   "language": "en",
-  "words": [
-    "NATSUMATSURI",
-    "Dela",
-    "Yuji",
-    "Syuku"
-  ]
+  "words": ["NATSUMATSURI", "Dela", "Yuji", "Syuku", "zustand"]
 }

package.json

@@ -15,7 +15,8 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.0"
+    "react-router-dom": "^6.26.0",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",

src/hooks/useOrientation.ts

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useState } 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/index.ts

@@ -0,0 +1,2 @@
+export { useSocketRefStore } from "./useSocketRefStore";
+export { useUUIDStore } from "./useUUIDStore";

src/store/useSocketRefStore.ts

@@ -0,0 +1,15 @@
+import type { MutableRefObject } from "react";
+import { create } from "zustand";
+
+type State = {
+	socketRef: MutableRefObject<WebSocket | undefined> | null;
+};
+
+type Action = {
+	setRef: (ref: MutableRefObject<WebSocket | undefined>) => void;
+};
+
+export const useSocketRefStore = create<State & Action>()((set) => ({
+	socketRef: null,
+	setRef: (ref) => set(() => ({ socketRef: ref })),
+}));

src/store/useUUIDStore.ts

@@ -0,0 +1,23 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { generateUUID } from "../utils/uuid";
+
+type State = {
+	uuid: string;
+};
+
+type Action = {
+	updateUUID: () => void;
+};
+
+export const useUUIDStore = create<State & Action>()(
+	persist(
+		(set) => ({
+			uuid: generateUUID(),
+			updateUUID: () => set(() => ({ uuid: generateUUID() })),
+		}),
+		{
+			name: "user-uuid",
+		},
+	),
+);

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 property
+	if (typeof DeviceMotionEvent.requestPermission === "function") {
+		try {
+			// @ts-expect-error only safari property
+			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 property
+	if (typeof DeviceOrientationEvent.requestPermission === "function") {
+		try {
+			const permissionState =
+				// @ts-expect-error only safari property
+				await DeviceOrientationEvent.requestPermission();
+			if (permissionState !== "granted") {
+				console.warn("Device Orientation permission denied.");
+			}
+		} catch (error) {
+			console.error("Error requesting Device Orientation permission:", error);
+		}
+	}
+};

src/utils/uuid.ts

@@ -0,0 +1,5 @@
+export const generateUUID = (): string => {
+	const timestamp = Date.now().toString(16);
+	const randomHex = Math.floor(Math.random() * 0xffffff).toString(16);
+	return `${timestamp}-${randomHex}`;
+};