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; }