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

Commit

Permalink
fix: pnpm checkでの変更
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sea10wood
Sea10wood committed Aug 17, 2024
1 parent 8b586b5 commit e0cfad4
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 158 deletions.
26 changes: 10 additions & 16 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,21 @@
import { useState } from "react";
import { Route, Routes } from "react-router-dom";
import Home from "./pages/home";
import Result from "./pages/result";
import Shooter from "./pages/shooter";
import Yatai from "./pages/yatai";
import { useState } from "react";

const AppRoutes = () => {
const [score, setScore] = useState<number>(0);
const [score, setScore] = useState<number>(0);

return (
<Routes>
<Route path="/" element={<Home />} />
<Route
path="/shooter"
element={<Shooter setScore={setScore} />}
/>
<Route
path="/result"
element={<Result score={score} />}
/>
<Route path="/yatai" element={<Yatai />} />
</Routes>
);
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/shooter" element={<Shooter setScore={setScore} />} />
<Route path="/result" element={<Result score={score} />} />
<Route path="/yatai" element={<Yatai />} />
</Routes>
);
};

export default AppRoutes;
99 changes: 49 additions & 50 deletions src/pages/result/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,61 @@
import { DefaultButton } from "../../components/ui/Button";
import GetImage from "../../components/GetImage";
import { DefaultButton } from "../../components/ui/Button";
import styles from "./index.module.css";

type ResultProps = {
score: number;
score: number;
};

const Result = ({ score }: ResultProps) => {
const images = [
"/drink/bottle0.webp",
"/drink/bottle1.webp",
"/drink/bottle2.webp",
"/drink/bottle3.webp",
];
const images = [
"/drink/bottle0.webp",
"/drink/bottle1.webp",
"/drink/bottle2.webp",
"/drink/bottle3.webp",
];


const image = images[score] ;
const image = images[score];

return (
<div>
<div className={styles["result-text"]}>
<p>結果発表!</p>
</div>
<div className={styles["get-image-container"]}>
<GetImage
images={[image]}
alt={`スコア ${score} に対応するボトル画像`}
width={160}
height={160}
/>
</div>
<div className={styles["background-logo"]}>
<img
src="/logo.webp"
alt="背景にばーちゃるなつまつりのロゴ"
width="350"
height="350"
/>
</div>
<div className={styles["get-text"]}>
<p>${score}本倒した！</p>
</div>
<div className={styles["share-btn"]}>
<a
href="https://twitter.com/intent/tweet?text=Webの射的で遊んだよ.${score}本倒した！%20%23virtualnatsumatsuri"
target="_blank"
rel="noopener noreferrer"
>
<DefaultButton variant="contained" color="black" size="md">
Xで共有する
</DefaultButton>
</a>
</div>
<div className={styles["replay-text"]}>
<p>また遊びにきてや〜</p>
</div>
</div>
);
return (
<div>
<div className={styles["result-text"]}>
<p>結果発表!</p>
</div>
<div className={styles["get-image-container"]}>
<GetImage
images={[image]}
alt={`スコア ${score} に対応するボトル画像`}
width={160}
height={160}
/>
</div>
<div className={styles["background-logo"]}>
<img
src="/logo.webp"
alt="背景にばーちゃるなつまつりのロゴ"
width="350"
height="350"
/>
</div>
<div className={styles["get-text"]}>
<p>${score}本倒した！</p>
</div>
<div className={styles["share-btn"]}>
<a
href="https://twitter.com/intent/tweet?text=Webの射的で遊んだよ.${score}本倒した！%20%23virtualnatsumatsuri"
target="_blank"
rel="noopener noreferrer"
>
<DefaultButton variant="contained" color="black" size="md">
Xで共有する
</DefaultButton>
</a>
</div>
<div className={styles["replay-text"]}>
<p>また遊びにきてや〜</p>
</div>
</div>
);
};

export default Result;
184 changes: 92 additions & 92 deletions src/pages/shooter/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,115 +11,115 @@ import { MessageType } from "../../type/shooting";
import style from "./index.module.css";

type ShooterProps = {
setScore: (score: number) => void;
setScore: (score: number) => void;
};

const Shooter = ({ setScore }: ShooterProps) => {
const [isOpen, setIsOpen] = useState(true);
const [score, setLocalScore] = useState<number>(0);
const { orientationDiff } = useOrientation();
const { sendData } = useSocketSender();
const { onMessage } = useSocketReceiver();
const uuid = useUUIDStore((state) => state.uuid);
const [isOpen, setIsOpen] = useState(true);
const [score, setLocalScore] = useState<number>(0);
const { orientationDiff } = useOrientation();
const { sendData } = useSocketSender();
const { onMessage } = useSocketReceiver();
const uuid = useUUIDStore((state) => state.uuid);

const initialImages = [
"/2D_material/cork.webp",
"/2D_material/cork.webp",
"/2D_material/cork.webp",
];
const [images, setImages] = useState(initialImages);
const initialImages = [
"/2D_material/cork.webp",
"/2D_material/cork.webp",
"/2D_material/cork.webp",
];
const [images, setImages] = useState(initialImages);

useEffect(() => {
let intervalId: number | null = null;
useEffect(() => {
let intervalId: number | null = null;

intervalId = window.setInterval(() => {
sendData(message_type.status, uuid, orientationDiff);
}, 100);
intervalId = window.setInterval(() => {
sendData(message_type.status, uuid, orientationDiff);
}, 100);

return () => {
if (intervalId !== null) {
clearInterval(intervalId);
}
};
}, [uuid, orientationDiff, sendData]);
return () => {
if (intervalId !== null) {
clearInterval(intervalId);
}
};
}, [uuid, orientationDiff, sendData]);

useEffect(() => {
onMessage((data) => {
if (data.message_type === MessageType.Hit && data.id === uuid) {
setLocalScore((prevScore) => prevScore + 1);
setScore(score);
}
});
}, [onMessage, uuid, score, setScore]);
useEffect(() => {
onMessage((data) => {
if (data.message_type === MessageType.Hit && data.id === uuid) {
setLocalScore((prevScore) => prevScore + 1);
setScore(score);
}
});
}, [onMessage, uuid, score, setScore]);

const handleClick = () => {
const audio = new Audio("/sound/cork_sound.mp3");
audio.play().catch((error) => {
console.error("オーディオの音が出なかった", error);
});
sendData(message_type.action, uuid, orientationDiff);
setImages((prevImages) => prevImages.slice(1));
};
const handleClick = () => {
const audio = new Audio("/sound/cork_sound.mp3");
audio.play().catch((error) => {
console.error("オーディオの音が出なかった", error);
});
sendData(message_type.action, uuid, orientationDiff);
setImages((prevImages) => prevImages.slice(1));
};

const handleKeyUp: KeyboardEventHandler<HTMLDivElement> = (event) => {
if (event.key === "Enter" || event.key === " ") {
handleClick();
}
};
const handleKeyUp: KeyboardEventHandler<HTMLDivElement> = (event) => {
if (event.key === "Enter" || event.key === " ") {
handleClick();
}
};

return (
<div>
<Modal open={isOpen} onClose={() => setIsOpen(false)}>
<ModalContent setIsOpen={setIsOpen} />
</Modal>
<div className={style.trigger}>
<ShooterButton onClick={handleClick} onKeyUp={handleKeyUp} />
</div>
<div className={style.cork}>
{images.length > 0 ? (
images.map((src) => (
<img key={src} src={src} alt="コルクの残量を表示しています" />
))
) : (
<p>コルクがなくなりました!</p>
)}
</div>
</div>
);
return (
<div>
<Modal open={isOpen} onClose={() => setIsOpen(false)}>
<ModalContent setIsOpen={setIsOpen} />
</Modal>
<div className={style.trigger}>
<ShooterButton onClick={handleClick} onKeyUp={handleKeyUp} />
</div>
<div className={style.cork}>
{images.length > 0 ? (
images.map((src) => (
<img key={src} src={src} alt="コルクの残量を表示しています" />
))
) : (
<p>コルクがなくなりました!</p>
)}
</div>
</div>
);
};

type ModalContentProps = {
setIsOpen: (isOpen: boolean) => void;
setIsOpen: (isOpen: boolean) => void;
};

const ModalContent: React.FC<ModalContentProps> = ({ setIsOpen }) => {
return (
<div className={style["modal-wrapper"]}>
<img
src="/2D_material/modal.webp"
alt="スマホを画面に向かって垂直におく図"
width="100"
height="100"
/>
<div className={style["modal-row"]}>
<p className={style["modal-description"]}>
スマホを画面に向かって
<br />
垂直に机の上に置いてね
</p>
</div>
<div className={style["modal-selection-wrapper"]}>
<DefaultButton
variant="outlined"
color="red"
size="md"
onClick={() => setIsOpen(false)}
>
置いたよ！
</DefaultButton>
</div>
</div>
);
return (
<div className={style["modal-wrapper"]}>
<img
src="/2D_material/modal.webp"
alt="スマホを画面に向かって垂直におく図"
width="100"
height="100"
/>
<div className={style["modal-row"]}>
<p className={style["modal-description"]}>
スマホを画面に向かって
<br />
垂直に机の上に置いてね
</p>
</div>
<div className={style["modal-selection-wrapper"]}>
<DefaultButton
variant="outlined"
color="red"
size="md"
onClick={() => setIsOpen(false)}
>
置いたよ！
</DefaultButton>
</div>
</div>
);
};

export default Shooter;

0 comments on commit e0cfad4

Please sign in to comment.