From 2a0631cf3257742379d0e99aa89dbee66acdc55e Mon Sep 17 00:00:00 2001 From: claustra01 Date: Sun, 11 Aug 2024 09:36:49 +0900 Subject: [PATCH 01/13] add: shooting schema --- src/type/shooting.ts | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/type/shooting.ts diff --git a/src/type/shooting.ts b/src/type/shooting.ts new file mode 100644 index 0000000..bba0cd9 --- /dev/null +++ b/src/type/shooting.ts @@ -0,0 +1,28 @@ +export enum EventType { + Pointer = "pointer", + Action = "action", +} + +export interface Target { + x: number; + y: number; +} + +export interface Vector { + x: number; + y: number; + z: number; +} + +export interface PointerSchema { + id: string; + event_type: EventType.Pointer; + target: Target; +} + +export interface ActionSchema { + id: string; + event_type: EventType.Action; + target: Target; + vector: Vector; +} From b0279646dab2381173a34d3a74df9793af451221 Mon Sep 17 00:00:00 2001 From: claustra01 Date: Sun, 11 Aug 2024 09:37:05 +0900 Subject: [PATCH 02/13] add: temporary handler --- src/pages/yatai/index.tsx | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/src/pages/yatai/index.tsx b/src/pages/yatai/index.tsx index 5dfdd9f..0de62b1 100644 --- a/src/pages/yatai/index.tsx +++ b/src/pages/yatai/index.tsx @@ -1,6 +1,6 @@ import { Physics, useBox } from "@react-three/cannon"; import { Canvas, type ThreeElements, useThree } from "@react-three/fiber"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import type { BufferGeometry, Material, @@ -10,6 +10,7 @@ import type { } from "three"; import { randFloat } from "three/src/math/MathUtils.js"; import { useSocketRefStore } from "../../store"; +import type { ActionSchema, PointerSchema, Target } from "../../type/shooting"; import styles from "./index.module.css"; function Yatai() { @@ -18,8 +19,13 @@ function Yatai() { useEffect(() => { const onMessage = (event: MessageEvent) => { const data = JSON.parse(event.data); - // サーバーから受け取ったデータを使って処理をする - console.log(data); + // サーバーから受け取ったデータを使った処理 + if (data.event_type === "pointer") { + aimTarget(data); + } + if (data.event_type === "action") { + shotTarget(data); + } }; const currentSocketRef = socketRef?.current; currentSocketRef?.addEventListener("message", onMessage); @@ -28,6 +34,17 @@ function Yatai() { }; }, [socketRef]); + // TODO: これらは一人用,いつかマルチプレイヤー対応する + const [aim, setAim] = useState(undefined); + const aimTarget = (data: PointerSchema) => { + setAim(data.target); + }; + + const [target, setTarget] = useState(undefined); + const shotTarget = (data: ActionSchema) => { + setTarget(data.target); + } + // 土台 const Foundation = (props: ThreeElements["mesh"]) => { const args: [number, number, number] = [10, 2, 2]; From 258dbdf60da66d3f5f6f2c3a01d98c378dd3094b Mon Sep 17 00:00:00 2001 From: claustra01 Date: Sun, 11 Aug 2024 09:47:38 +0900 Subject: [PATCH 03/13] add: aim target render layer --- src/pages/yatai/index.module.css | 17 +++++++- src/pages/yatai/index.tsx | 69 ++++++++++++++++++++------------ 2 files changed, 59 insertions(+), 27 deletions(-) diff --git a/src/pages/yatai/index.module.css b/src/pages/yatai/index.module.css index 2fd022c..92e0fed 100644 --- a/src/pages/yatai/index.module.css +++ b/src/pages/yatai/index.module.css @@ -1,7 +1,22 @@ -.canvas { +.container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.canvas { + width: 100%; + height: 100%; +} + +.target { + position: absolute; + z-index: 1; + width: 50px; + height: 50px; } diff --git a/src/pages/yatai/index.tsx b/src/pages/yatai/index.tsx index 0de62b1..688c34a 100644 --- a/src/pages/yatai/index.tsx +++ b/src/pages/yatai/index.tsx @@ -43,7 +43,7 @@ function Yatai() { const [target, setTarget] = useState(undefined); const shotTarget = (data: ActionSchema) => { setTarget(data.target); - } + }; // 土台 const Foundation = (props: ThreeElements["mesh"]) => { @@ -121,31 +121,48 @@ function Yatai() { }; return ( -
- - - {/* 全体ライト */} - - {/* スポットライト */} - - - - - - - - - +
+
+ + + {/* 全体ライト */} + + {/* スポットライト */} + + + + + + + + + +
+
+ 照準の表示 +
); } From 35adec00c9a8f868f72573a5e6931e3e8fc26977 Mon Sep 17 00:00:00 2001 From: claustra01 Date: Sun, 11 Aug 2024 11:19:32 +0900 Subject: [PATCH 04/13] update calculate target aim --- src/pages/yatai/index.tsx | 10 ++++++---- src/type/shooting.ts | 6 +++--- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/pages/yatai/index.tsx b/src/pages/yatai/index.tsx index 688c34a..82b029e 100644 --- a/src/pages/yatai/index.tsx +++ b/src/pages/yatai/index.tsx @@ -10,7 +10,7 @@ import type { } from "three"; import { randFloat } from "three/src/math/MathUtils.js"; import { useSocketRefStore } from "../../store"; -import type { ActionSchema, PointerSchema, Target } from "../../type/shooting"; +import { MessageType, type ActionSchema, type PointerSchema, type Target } from "../../type/shooting"; import styles from "./index.module.css"; function Yatai() { @@ -20,10 +20,10 @@ function Yatai() { const onMessage = (event: MessageEvent) => { const data = JSON.parse(event.data); // サーバーから受け取ったデータを使った処理 - if (data.event_type === "pointer") { + if (data.message_type === MessageType.Pointer) { aimTarget(data); } - if (data.event_type === "action") { + if (data.message_type === MessageType.Action) { shotTarget(data); } }; @@ -37,7 +37,9 @@ function Yatai() { // TODO: これらは一人用,いつかマルチプレイヤー対応する const [aim, setAim] = useState(undefined); const aimTarget = (data: PointerSchema) => { - setAim(data.target); + let x = window.innerWidth / 2 * data.target.x - window.innerWidth / 2; + let y = window.innerHeight / 2 * data.target.y - window.innerHeight / 2; + setAim({ x, y }); }; const [target, setTarget] = useState(undefined); diff --git a/src/type/shooting.ts b/src/type/shooting.ts index bba0cd9..f9d3a67 100644 --- a/src/type/shooting.ts +++ b/src/type/shooting.ts @@ -1,4 +1,4 @@ -export enum EventType { +export enum MessageType { Pointer = "pointer", Action = "action", } @@ -16,13 +16,13 @@ export interface Vector { export interface PointerSchema { id: string; - event_type: EventType.Pointer; + message_type: MessageType.Pointer; target: Target; } export interface ActionSchema { id: string; - event_type: EventType.Action; + message_type: MessageType.Action; target: Target; vector: Vector; } From a5d1d7ea149d319d830b794a8c5ec082c837647b Mon Sep 17 00:00:00 2001 From: claustra01 Date: Sun, 11 Aug 2024 11:25:31 +0900 Subject: [PATCH 05/13] fix: format --- src/pages/yatai/index.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/pages/yatai/index.tsx b/src/pages/yatai/index.tsx index 82b029e..b5a5c98 100644 --- a/src/pages/yatai/index.tsx +++ b/src/pages/yatai/index.tsx @@ -10,7 +10,12 @@ import type { } from "three"; import { randFloat } from "three/src/math/MathUtils.js"; import { useSocketRefStore } from "../../store"; -import { MessageType, type ActionSchema, type PointerSchema, type Target } from "../../type/shooting"; +import { + type ActionSchema, + MessageType, + type PointerSchema, + type Target, +} from "../../type/shooting"; import styles from "./index.module.css"; function Yatai() { @@ -37,8 +42,8 @@ function Yatai() { // TODO: これらは一人用,いつかマルチプレイヤー対応する const [aim, setAim] = useState(undefined); const aimTarget = (data: PointerSchema) => { - let x = window.innerWidth / 2 * data.target.x - window.innerWidth / 2; - let y = window.innerHeight / 2 * data.target.y - window.innerHeight / 2; + const x = (window.innerWidth / 2) * data.target.x - window.innerWidth / 2; + const y = (window.innerHeight / 2) * data.target.y - window.innerHeight / 2; setAim({ x, y }); }; From 1fe8ccc20f90cf82f3d5b07a41e856a4edea9547 Mon Sep 17 00:00:00 2001 From: claustra01 Date: Sun, 11 Aug 2024 11:26:39 +0900 Subject: [PATCH 06/13] chore: comment out about target --- src/pages/yatai/index.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/pages/yatai/index.tsx b/src/pages/yatai/index.tsx index b5a5c98..96eb9e4 100644 --- a/src/pages/yatai/index.tsx +++ b/src/pages/yatai/index.tsx @@ -11,7 +11,6 @@ import type { import { randFloat } from "three/src/math/MathUtils.js"; import { useSocketRefStore } from "../../store"; import { - type ActionSchema, MessageType, type PointerSchema, type Target, @@ -29,7 +28,7 @@ function Yatai() { aimTarget(data); } if (data.message_type === MessageType.Action) { - shotTarget(data); + // shotTarget(data); } }; const currentSocketRef = socketRef?.current; @@ -47,10 +46,10 @@ function Yatai() { setAim({ x, y }); }; - const [target, setTarget] = useState(undefined); - const shotTarget = (data: ActionSchema) => { - setTarget(data.target); - }; + // const [target, setTarget] = useState(undefined); + // const shotTarget = (data: ActionSchema) => { + // setTarget(data.target); + // }; // 土台 const Foundation = (props: ThreeElements["mesh"]) => { From 329351f6d7c2c7ebe84d9010637d4897378facdc Mon Sep 17 00:00:00 2001 From: claustra01 Date: Sun, 11 Aug 2024 12:25:31 +0900 Subject: [PATCH 07/13] update: threejs component use memo --- src/pages/yatai/index.tsx | 133 ++++++++++++++++++++------------------ 1 file changed, 71 insertions(+), 62 deletions(-) diff --git a/src/pages/yatai/index.tsx b/src/pages/yatai/index.tsx index 96eb9e4..cdc38aa 100644 --- a/src/pages/yatai/index.tsx +++ b/src/pages/yatai/index.tsx @@ -16,41 +16,10 @@ import { type Target, } from "../../type/shooting"; import styles from "./index.module.css"; +import React from "react"; -function Yatai() { - const socketRef = useSocketRefStore((state) => state.socketRef); - - useEffect(() => { - const onMessage = (event: MessageEvent) => { - const data = JSON.parse(event.data); - // サーバーから受け取ったデータを使った処理 - if (data.message_type === MessageType.Pointer) { - aimTarget(data); - } - if (data.message_type === MessageType.Action) { - // shotTarget(data); - } - }; - const currentSocketRef = socketRef?.current; - currentSocketRef?.addEventListener("message", onMessage); - return () => { - currentSocketRef?.removeEventListener("message", onMessage); - }; - }, [socketRef]); - - // TODO: これらは一人用,いつかマルチプレイヤー対応する - const [aim, setAim] = useState(undefined); - const aimTarget = (data: PointerSchema) => { - const x = (window.innerWidth / 2) * data.target.x - window.innerWidth / 2; - const y = (window.innerHeight / 2) * data.target.y - window.innerHeight / 2; - setAim({ x, y }); - }; - - // const [target, setTarget] = useState(undefined); - // const shotTarget = (data: ActionSchema) => { - // setTarget(data.target); - // }; +const YataiStage = React.memo(() => { // 土台 const Foundation = (props: ThreeElements["mesh"]) => { const args: [number, number, number] = [10, 2, 2]; @@ -126,47 +95,87 @@ function Yatai() { return null; }; + return ( +
+ + + {/* 全体ライト */} + + {/* スポットライト */} + + + + + + + + + +
+ ); +}); + + +function Yatai() { + const socketRef = useSocketRefStore((state) => state.socketRef); + + useEffect(() => { + const onMessage = (event: MessageEvent) => { + const data = JSON.parse(event.data); + // サーバーから受け取ったデータを使った処理 + if (data.message_type === MessageType.Pointer) { + aimTarget(data); + } + if (data.message_type === MessageType.Action) { + // shotTarget(data); + } + }; + const currentSocketRef = socketRef?.current; + currentSocketRef?.addEventListener("message", onMessage); + return () => { + currentSocketRef?.removeEventListener("message", onMessage); + }; + }, [socketRef]); + + // TODO: これらは一人用,いつかマルチプレイヤー対応する + const [aim, setAim] = useState(undefined); + const aimTarget = (data: PointerSchema) => { + const x = (window.innerWidth / 2) * data.target.x + window.innerWidth / 2; + const y = (window.innerHeight / 2) * data.target.y + window.innerHeight / 2; + setAim({ x, y }); + }; + + // const [target, setTarget] = useState(undefined); + // const shotTarget = (data: ActionSchema) => { + // setTarget(data.target); + // }; + return (
-
- - - {/* 全体ライト */} - - {/* スポットライト */} - - - - - - - - - -
+
照準の表示
From b22e2ae68ff9add6fffe4f9533fc1a5cf9d34664 Mon Sep 17 00:00:00 2001 From: claustra01 Date: Sun, 11 Aug 2024 12:26:19 +0900 Subject: [PATCH 08/13] fix: lint --- src/pages/yatai/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/yatai/index.tsx b/src/pages/yatai/index.tsx index cdc38aa..e201cd4 100644 --- a/src/pages/yatai/index.tsx +++ b/src/pages/yatai/index.tsx @@ -1,6 +1,7 @@ import { Physics, useBox } from "@react-three/cannon"; import { Canvas, type ThreeElements, useThree } from "@react-three/fiber"; import { useEffect, useState } from "react"; +import React from "react"; import type { BufferGeometry, Material, @@ -16,8 +17,6 @@ import { type Target, } from "../../type/shooting"; import styles from "./index.module.css"; -import React from "react"; - const YataiStage = React.memo(() => { // 土台 @@ -125,7 +124,6 @@ const YataiStage = React.memo(() => { ); }); - function Yatai() { const socketRef = useSocketRefStore((state) => state.socketRef); From f3e50e7353e6b3f655a4815d03fb6348ce0e0953 Mon Sep 17 00:00:00 2001 From: claustra01 Date: Sun, 11 Aug 2024 12:45:55 +0900 Subject: [PATCH 09/13] test --- src/pages/shooter/index.tsx | 10 ++++------ src/pages/yatai/index.tsx | 38 +++++++++++++++++++++---------------- 2 files changed, 26 insertions(+), 22 deletions(-) diff --git a/src/pages/shooter/index.tsx b/src/pages/shooter/index.tsx index ad9a43a..99fc0de 100644 --- a/src/pages/shooter/index.tsx +++ b/src/pages/shooter/index.tsx @@ -57,18 +57,16 @@ const Shooter = () => { useEffect(() => { let intervalId: number | null = null; - if (!isOpen) { - intervalId = window.setInterval(() => { - sendData(message_type.status); - }, 100); - } + intervalId = window.setInterval(() => { + sendData(message_type.status); + }, 100); return () => { if (intervalId !== null) { clearInterval(intervalId); } }; - }, [isOpen, sendData]); + }, [sendData]); const handleClick = () => { const audio = new Audio("/sound/cork_sound.mp3"); diff --git a/src/pages/yatai/index.tsx b/src/pages/yatai/index.tsx index e201cd4..d5572d3 100644 --- a/src/pages/yatai/index.tsx +++ b/src/pages/yatai/index.tsx @@ -124,7 +124,7 @@ const YataiStage = React.memo(() => { ); }); -function Yatai() { +const TargetOverlay = () => { const socketRef = useSocketRefStore((state) => state.socketRef); useEffect(() => { @@ -158,24 +158,30 @@ function Yatai() { // setTarget(data.target); // }; + return ( +
+ 照準の表示 +
+ ); +}; + +function Yatai() { return (
-
- 照準の表示 -
+
); } From 78ddd52ca6152451746745197e346a6fc4db3374 Mon Sep 17 00:00:00 2001 From: claustra01 Date: Sun, 11 Aug 2024 13:26:32 +0900 Subject: [PATCH 10/13] update: target overlay size --- src/pages/yatai/index.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/yatai/index.module.css b/src/pages/yatai/index.module.css index 92e0fed..660bbcf 100644 --- a/src/pages/yatai/index.module.css +++ b/src/pages/yatai/index.module.css @@ -17,6 +17,6 @@ .target { position: absolute; z-index: 1; - width: 50px; - height: 50px; + width: 100px; + height: 100px; } From 58cb529587c38396492a87fba6b7ff3ee26421ee Mon Sep 17 00:00:00 2001 From: claustra01 Date: Sun, 11 Aug 2024 14:06:46 +0900 Subject: [PATCH 11/13] =?UTF-8?q?wip:=20aim=E3=81=A8target=E3=82=92?= =?UTF-8?q?=E7=84=A1=E7=90=86=E3=82=84=E3=82=8A=E8=9E=8D=E5=90=88=E3=81=99?= =?UTF-8?q?=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/yatai/index.tsx | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/src/pages/yatai/index.tsx b/src/pages/yatai/index.tsx index d5572d3..3258ece 100644 --- a/src/pages/yatai/index.tsx +++ b/src/pages/yatai/index.tsx @@ -12,8 +12,8 @@ import type { import { randFloat } from "three/src/math/MathUtils.js"; import { useSocketRefStore } from "../../store"; import { + ActionSchema, MessageType, - type PointerSchema, type Target, } from "../../type/shooting"; import styles from "./index.module.css"; @@ -132,10 +132,10 @@ const TargetOverlay = () => { const data = JSON.parse(event.data); // サーバーから受け取ったデータを使った処理 if (data.message_type === MessageType.Pointer) { - aimTarget(data); + // aimTarget(data); } if (data.message_type === MessageType.Action) { - // shotTarget(data); + shotTarget(data); } }; const currentSocketRef = socketRef?.current; @@ -147,16 +147,24 @@ const TargetOverlay = () => { // TODO: これらは一人用,いつかマルチプレイヤー対応する const [aim, setAim] = useState(undefined); - const aimTarget = (data: PointerSchema) => { - const x = (window.innerWidth / 2) * data.target.x + window.innerWidth / 2; - const y = (window.innerHeight / 2) * data.target.y + window.innerHeight / 2; + // TODO: エイム照準の実装 + // const aimTarget = (data: PointerSchema) => { + // const x = window.innerWidth * data.target.x + window.innerWidth / 2; + // const y = window.innerHeight * data.target.y + window.innerHeight / 2; + // setAim({ x, y }); + // }; + + const [target, setTarget] = useState(undefined); + const shotTarget = (data: ActionSchema) => { + const x = window.innerWidth / 2 + data.target.x * 300; + const y = window.innerHeight / 2 + data.target.y * 300; + // TODO: エイム実装ができたらここのsetAimは削除する setAim({ x, y }); + setTarget({ x, y }); }; - // const [target, setTarget] = useState(undefined); - // const shotTarget = (data: ActionSchema) => { - // setTarget(data.target); - // }; + // DEBUG: 後で消す + console.log(target); return (
Date: Sun, 11 Aug 2024 14:07:27 +0900 Subject: [PATCH 12/13] fix: lint --- src/pages/yatai/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/yatai/index.tsx b/src/pages/yatai/index.tsx index 3258ece..5bdd320 100644 --- a/src/pages/yatai/index.tsx +++ b/src/pages/yatai/index.tsx @@ -12,7 +12,7 @@ import type { import { randFloat } from "three/src/math/MathUtils.js"; import { useSocketRefStore } from "../../store"; import { - ActionSchema, + type ActionSchema, MessageType, type Target, } from "../../type/shooting"; From 76585249befa97ce8c0f2804c7bfaa3e5b23b95e Mon Sep 17 00:00:00 2001 From: claustra01 Date: Sun, 11 Aug 2024 14:09:59 +0900 Subject: [PATCH 13/13] chore: reduce import --- src/pages/yatai/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/yatai/index.tsx b/src/pages/yatai/index.tsx index 5bdd320..47fa8e2 100644 --- a/src/pages/yatai/index.tsx +++ b/src/pages/yatai/index.tsx @@ -1,7 +1,6 @@ import { Physics, useBox } from "@react-three/cannon"; import { Canvas, type ThreeElements, useThree } from "@react-three/fiber"; -import { useEffect, useState } from "react"; -import React from "react"; +import { memo, useEffect, useState } from "react"; import type { BufferGeometry, Material, @@ -18,7 +17,7 @@ import { } from "../../type/shooting"; import styles from "./index.module.css"; -const YataiStage = React.memo(() => { +const YataiStage = memo(() => { // 土台 const Foundation = (props: ThreeElements["mesh"]) => { const args: [number, number, number] = [10, 2, 2];