Skip to content
This repository has been archived by the owner on Nov 26, 2024. It is now read-only.

Commit

Permalink
Merge pull request #31 from claustra01/feat/target-animation
Browse files Browse the repository at this point in the history
照準のアニメーション
  • Loading branch information
K-Kizuku authored Aug 11, 2024
2 parents 9ceafd9 + 7658524 commit 84a271e
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 24 deletions.
10 changes: 4 additions & 6 deletions src/pages/shooter/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down
17 changes: 16 additions & 1 deletion src/pages/yatai/index.module.css
Original file line number Diff line number Diff line change
@@ -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: 100px;
height: 100px;
}
94 changes: 77 additions & 17 deletions src/pages/yatai/index.tsx
Original file line number Diff line number Diff line change
@@ -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 { memo, useEffect, useState } from "react";
import type {
BufferGeometry,
Material,
Expand All @@ -10,24 +10,14 @@ import type {
} from "three";
import { randFloat } from "three/src/math/MathUtils.js";
import { useSocketRefStore } from "../../store";
import {
type ActionSchema,
MessageType,
type Target,
} from "../../type/shooting";
import styles from "./index.module.css";

function Yatai() {
const socketRef = useSocketRefStore((state) => state.socketRef);

useEffect(() => {
const onMessage = (event: MessageEvent) => {
const data = JSON.parse(event.data);
// サーバーから受け取ったデータを使って処理をする
console.log(data);
};
const currentSocketRef = socketRef?.current;
currentSocketRef?.addEventListener("message", onMessage);
return () => {
currentSocketRef?.removeEventListener("message", onMessage);
};
}, [socketRef]);

const YataiStage = memo(() => {
// 土台
const Foundation = (props: ThreeElements["mesh"]) => {
const args: [number, number, number] = [10, 2, 2];
Expand Down Expand Up @@ -131,6 +121,76 @@ function Yatai() {
</Canvas>
</div>
);
});

const TargetOverlay = () => {
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<Target | undefined>(undefined);
// 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<Target | undefined>(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 });
};

// DEBUG: 後で消す
console.log(target);

return (
<div
className={styles.target}
style={{
left: `${aim?.x}px`,
top: `${aim?.y}px`,
transform: "translate(-50%, -50%)",
}}
>
<img
src="/2D_material/target.webp"
alt="照準の表示"
width="100%"
height="100%"
/>
</div>
);
};

function Yatai() {
return (
<div className={styles.container}>
<YataiStage />
<TargetOverlay />
</div>
);
}

export default Yatai;
28 changes: 28 additions & 0 deletions src/type/shooting.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
export enum MessageType {
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;
message_type: MessageType.Pointer;
target: Target;
}

export interface ActionSchema {
id: string;
message_type: MessageType.Action;
target: Target;
vector: Vector;
}

0 comments on commit 84a271e

Please sign in to comment.