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

Commit

Permalink
Merge branch 'result_view' of github.com:claustra01/virtual-natsumats…
Browse files Browse the repository at this point in the history 
…uri-frontend into result_view
  • Loading branch information
@Sea10wood
Sea10wood committed Aug 17, 2024
2 parents 467603d + 8ebd3a1 commit 8b586b5
Showing 1 changed file with 89 additions and 90 deletions.
179 changes: 89 additions & 90 deletions src/pages/shooter/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,117 +10,116 @@ import { message_type } from "../../type/schema";
import { MessageType } from "../../type/shooting";
import style from "./index.module.css";

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

const initialImages = [
"/2D_material/cork.webp",
"/2D_material/cork.webp",
"/2D_material/cork.webp",
];
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 [images, setImages] = useState(initialImages);
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);

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) {
setScore((prevScore) => prevScore + 1);
console.log(score);
}
});
}, [onMessage, uuid, score]);
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()
.then(() => {})
.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();
}
};

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.map((src, i) => (
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
<img key={i} src={src} alt="コルクの残量を表示しています" />
))}
</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;
};

const ModalContent: React.FC<ModalContentProps> = ({ setIsOpen }) => {
const { reset } = useOrientation();
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={() => {
reset();
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 8b586b5

Please sign in to comment.