@@ -77,6 +76,7 @@ function HomePC() {
射的へ向かう
+
diff --git a/src/pages/result/index.module.css b/src/pages/result/index.module.css
new file mode 100644
index 0000000..ce483cf
--- /dev/null
+++ b/src/pages/result/index.module.css
@@ -0,0 +1,68 @@
+.result-text {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ font-size: 40px;
+}
+
+.background-logo{
+ opacity: 0.6;
+ position: absolute;
+ top: 40%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ justify-content: center;
+ align-items: center;
+
+}
+
+.get-text {
+ position: absolute;
+ top: 60%;
+ left: 50%;
+ transform: translateX(-50%);
+ font-size: 40px;
+ white-space: nowrap;
+}
+
+.share-btn{
+ position: absolute;
+ top: 80%;
+ left: 50%;
+ transform: translateX(-50%);
+ white-space: nowrap;
+}
+
+.replay-text {
+ position: absolute;
+ top: 88%;
+ left: 50%;
+ transform: translateX(-50%);
+ white-space: nowrap;
+ font-family: 'Yuji Syuku', serif, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+ font-style: normal;
+}
+
+@keyframes rotate {
+ from {
+ transform: translate(-50%, -50%) rotate(0deg);
+ }
+ to {
+ transform: translate(-50%, -50%) rotate(360deg);
+ }
+}
+
+.get-image-container {
+ position: absolute;
+ top: 40%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1;
+ animation: rotate 16s linear infinite;
+}
+
diff --git a/src/pages/result/index.tsx b/src/pages/result/index.tsx
new file mode 100644
index 0000000..aa90a4e
--- /dev/null
+++ b/src/pages/result/index.tsx
@@ -0,0 +1,55 @@
+import GetImage from "../../components/GetImage";
+import { DefaultButton } from "../../components/ui/Button";
+import styles from "./index.module.css";
+
+function Result() {
+ const images = [
+ "/drink/bottle0.webp",
+ "/drink/bottle1.webp",
+ "/drink/bottle2.webp",
+ "/drink/bottle3.webp",
+ ];
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Result;
diff --git a/src/pages/yatai/index.tsx b/src/pages/yatai/index.tsx
index 47fa8e2..f43b213 100644
--- a/src/pages/yatai/index.tsx
+++ b/src/pages/yatai/index.tsx
@@ -49,21 +49,52 @@ const YataiStage = memo(() => {
// 的
const Target = (props: ThreeElements["mesh"]) => {
+ const position = props.position as [number, number, number];
+
const args: [number, number, number] = [0.7, 2, 0.7];
const [ref, api] = useBox(() => ({
mass: 1,
- position: props.position as [number, number, number],
+ position: position,
args: args,
}));
- // 弾が当たった時はこれを呼び出す
- const handleHit = () => {
- api.applyImpulse(
- [randFloat(-2, 2), 4, 8],
- [randFloat(-1, 1), randFloat(-1, 1), randFloat(-1, 1)],
- );
+ const socketRef = useSocketRefStore((state) => state.socketRef);
+
+ useEffect(() => {
+ const onMessage = (event: MessageEvent) => {
+ const data = JSON.parse(event.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 [target, setTarget] = useState
(undefined);
+ const shotTarget = (data: ActionSchema) => {
+ setTarget({ x: data.target.x, y: data.target.y });
};
+ useEffect(() => {
+ if (!target) return;
+ if (
+ target.x * 2 > position[0] - args[0] / 2 &&
+ target.x * 2 < position[0] + args[0] / 2 &&
+ target.y * 2 > position[1] - args[1] / 2 - 2 &&
+ target.y * 2 < position[1] + args[1] / 2 - 2
+ ) {
+ api.applyImpulse(
+ [randFloat(-2, 2), 4, 8],
+ [randFloat(-1, 1), randFloat(-1, 1), randFloat(-1, 1)],
+ );
+ }
+ }, [target, position, api]);
+
return (
{
{...props}
castShadow
receiveShadow
- onPointerOver={() => handleHit()}
>
@@ -153,18 +183,15 @@ const TargetOverlay = () => {
// setAim({ x, y });
// };
- const [target, setTarget] = useState(undefined);
+ // 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 });
+ // setTarget({ x, y });
};
- // DEBUG: 後で消す
- console.log(target);
-
return (