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 #19 from claustra01/shooter_kurk
Browse files Browse the repository at this point in the history
add: ShooterButtonPage、galleryをyataiに変更
claustra01 authored Aug 10, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents 66fbf0b + 87a155b commit babc1be
Showing 7 changed files with 142 additions and 1 deletion.
2 changes: 1 addition & 1 deletion cspell.json
Original file line number Diff line number Diff line change
@@ -2,5 +2,5 @@
"ignorePaths": ["node_modules/**", "*.svg"],
"version": "0.2",
"language": "en",
"words": ["NATSUMATSURI", "YATAI", "Dela", "Yuji", "Syuku", "zustand"]
"words": ["NATSUMATSURI", "yatai", "Dela", "Yuji", "Syuku", "zustand"]
}
File renamed without changes.
3 changes: 3 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import { Route, Routes } from "react-router-dom";
import Home from "./pages/home";
import Shooter from "./pages/shooter";
import Yatai from "./pages/yatai";

const AppRoutes = () => {
return (
<>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/shooter" element={<Shooter />} />
<Route path="/yatai" element={<Yatai />} />
</Routes>
</>
33 changes: 33 additions & 0 deletions src/components/ui/ShooterButton/index.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.box {
width: 250px;
height: 250px;
background: var(--black);
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: var(--white);
font-weight: bold;
font-size: 40px;
border: none;
cursor: pointer;
position: relative;
}

.box img {
position: absolute;
bottom: 20px;
width: 200px;
height: 200px;
opacity: 0.1;
z-index: 1;
}

.box span {
position: relative;
z-index: 10;
}


37 changes: 37 additions & 0 deletions src/components/ui/ShooterButton/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import type { KeyboardEventHandler, MouseEventHandler } from "react";
import styles from "./index.module.css";

interface ShooterButtonProps {
onClick?: MouseEventHandler<HTMLDivElement>;
onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
onKeyPress?: KeyboardEventHandler<HTMLDivElement>;
}

export const ShooterButton = ({
onClick,
onKeyUp,
onKeyDown,
onKeyPress,
}: ShooterButtonProps) => {
return (
<div
className={styles.box}
onClick={onClick}
onKeyUp={onKeyUp}
onKeyDown={onKeyDown}
onKeyPress={onKeyPress}
tabIndex={0}
role="button"
aria-label="Shoot"
>
<img
src="/logo.webp"
alt="ボタンの背景にロゴを表示させる"
width="100"
height="100"
/>
shoot
</div>
);
};
25 changes: 25 additions & 0 deletions src/pages/shooter/index.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.trigger{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
}

.cork {
display: flex;
justify-content: center;
gap: 10px;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
}

.cork img {
width: 72px;
height: 72px;
}
43 changes: 43 additions & 0 deletions src/pages/shooter/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { type KeyboardEventHandler, useState } from "react";
import { ShooterButton } from "../../components/ui/ShooterButton";
import style from "./index.module.css";

function Shooter() {
const initialImages = [
"/2D_material/cork.webp",
"/2D_material/cork.webp",
"/2D_material/cork.webp",
];

const [images, setImages] = useState(initialImages);

const handleClick = () => {
setImages((prevImages) => prevImages.slice(1));
};

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

return (
<div>
<div className={style.trigger}>
<ShooterButton
onClick={handleClick}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyUp}
onKeyPress={handleKeyUp}
/>
</div>
<div className={style.cork}>
{images.map((src) => (
<img key={src} src={src} alt="コルクの残量を表示しています" />
))}
</div>
</div>
);
}

export default Shooter;

0 comments on commit babc1be

Please sign in to comment.