Skip to content

Commit aa30ed5

Browse files
nkoji21nkoji21
authored
Merge pull request #46 from nka21/feature/36/UI-gameScreen
Feature/36/UI game screen
2 parents 80843fa + 58cc7cc commit aa30ed5

5 files changed

Lines changed: 647 additions & 3 deletions

File tree

‎apps/web/src/App.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@
33
import styles from './App.module.css';
44
// import { ShootingScreen } from './components/game/shooting-screen';
55
// import type { JudgeResult, Theme } from './components/game/types';
6-
import { HomeScreen } from './components/home/HomeScreen';
6+
import { PhotoScreen } from './components/photo/PhotoScreen';
7+
// import { HomeScreen } from './components/home/HomeScreen';
8+
// import { PhotoPreview } from './components/photo/PhotoPreview';
79

810
function App() {
9-
// テスト用のお題データ
11+
// // テスト用のお題データ
1012
// const testTheme: Theme = {
1113
// id: 1,
1214
// difficulty: 'NORMAL',
@@ -31,7 +33,7 @@ function App() {
3133

3234
return (
3335
<div className={styles['phone-container']}>
34-
<HomeScreen />
36+
{/* <HomeScreen /> */}
3537
{/* {showShooting ? (
3638
<ShootingScreen theme={testTheme} onComplete={handleComplete} />
3739
) : (
@@ -48,6 +50,8 @@ function App() {
4850
</button>
4951
</div>
5052
)} */}
53+
<PhotoScreen />
54+
{/* <PhotoPreview /> */}
5155
</div>
5256
);
5357
}

‎apps/web/src/components/photo/PhotoPreview.module.css‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
.screen {
2+
width: 100%;
3+
height: 100%;
4+
border-radius: 36px;
5+
overflow: hidden;
6+
position: relative;
7+
/* display: none; */
8+
}
9+
10+
/* Screen 3.5: Photo Preview Screen */
11+
.preview-screen {
12+
background: linear-gradient(
13+
180deg,
14+
var(--accent-bg) 0%,
15+
var(--soft-pink) 100%
16+
);
17+
}
18+
19+
.content {
20+
height: 100%;
21+
position: relative;
22+
overflow-y: auto;
23+
}
24+
25+
.preview-content {
26+
height: 100%;
27+
display: flex;
28+
flex-direction: column;
29+
padding: 20px;
30+
}
31+
32+
.time-info {
33+
text-align: center;
34+
margin-bottom: 15px;
35+
padding: 12px 20px;
36+
background: var(--primary-bg);
37+
border-radius: 15px;
38+
border: 2px solid var(--warm-brown);
39+
}
40+
41+
.time-remaining {
42+
font-size: 18px;
43+
font-weight: 700;
44+
color: var(--dark-brown);
45+
margin-bottom: 4px;
46+
}
47+
48+
.time-label {
49+
font-size: 12px;
50+
color: var(--text-secondary);
51+
}
52+
53+
.preview-header {
54+
text-align: center;
55+
margin-bottom: 20px;
56+
}
57+
58+
.preview-title {
59+
font-size: 20px;
60+
font-weight: 700;
61+
color: var(--dark-brown);
62+
margin-bottom: 8px;
63+
}
64+
65+
.preview-subtitle {
66+
font-size: 14px;
67+
color: var(--text-secondary);
68+
}
69+
70+
.photo-preview-area {
71+
flex: 1;
72+
background: var(--dark-brown);
73+
border-radius: 20px;
74+
margin-bottom: 30px;
75+
display: flex;
76+
justify-content: center;
77+
align-items: center;
78+
color: var(--light-peach);
79+
font-size: 16px;
80+
font-weight: 500;
81+
text-align: center;
82+
min-height: 300px;
83+
max-height: 400px;
84+
border: 3px solid var(--warm-brown);
85+
box-shadow: 0 8px 25px rgba(139, 69, 19, 0.15);
86+
}
87+
88+
.preview-actions {
89+
display: flex;
90+
flex-direction: column;
91+
gap: 16px;
92+
}
93+
94+
.preview-button {
95+
padding: 18px 30px;
96+
border: none;
97+
border-radius: 25px;
98+
font-size: 16px;
99+
font-weight: 600;
100+
cursor: pointer;
101+
transition: all 0.3s ease;
102+
}
103+
104+
.btn-confirm {
105+
background: var(--warm-brown);
106+
color: white;
107+
box-shadow: 0 6px 20px rgba(212, 165, 116, 0.3);
108+
}
109+
110+
.btn-confirm:hover {
111+
background: var(--medium-brown);
112+
transform: translateY(-2px);
113+
}
114+
115+
.btn-retake {
116+
background: var(--primary-bg);
117+
color: var(--text-primary);
118+
border: 2px solid var(--warm-brown);
119+
box-shadow: 0 4px 15px rgba(139, 69, 19, 0.1);
120+
}
121+
122+
.btn-retake:hover {
123+
background: var(--accent-bg);
124+
transform: translateY(-2px);
125+
}

‎apps/web/src/components/photo/PhotoPreview.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import clsx from 'clsx';
2+
3+
import styles from './PhotoPreview.module.css';
4+
5+
type PhotoPreviewProps = {
6+
onConfirm: () => void;
7+
onRetake: () => void;
8+
timeLeft: number;
9+
};
10+
11+
export const PhotoPreview: React.FC<PhotoPreviewProps> = ({
12+
onConfirm,
13+
onRetake,
14+
timeLeft,
15+
}) => {
16+
return (
17+
<div className={clsx(styles['screen'], styles['preview-screen'])}>
18+
<div className={styles.content}>
19+
<div className={styles['preview-content']}>
20+
{/* 残り時間表示 */}
21+
<div className={styles['time-info']}>
22+
<div className={styles['time-remaining']} id="preview-timer">
23+
{Math.floor(timeLeft / 60)}:
24+
{String(timeLeft % 60).padStart(2, '0')}
25+
</div>
26+
<div className={styles['time-label']}>残り時間</div>
27+
</div>
28+
29+
{/* プレビューヘッダー */}
30+
<div className={styles['preview-header']}>
31+
<h2 className={styles['preview-title']}>撮影完了！</h2>
32+
<p className={styles['preview-subtitle']}>
33+
この写真で決定しますか？
34+
</p>
35+
</div>
36+
37+
{/* 撮影した写真のプレビュー */}
38+
<div className={styles['photo-preview-area']}>
39+
📸 撮影した写真のプレビュー
40+
<br />
41+
(実装時には撮影画像が表示されます)
42+
</div>
43+
44+
{/* アクションボタン */}
45+
<div className={styles['preview-actions']}>
46+
<button
47+
className={clsx(styles['preview-button'], styles['btn-confirm'])}
48+
onClick={onConfirm}
49+
>
50+
この写真で決定！
51+
</button>
52+
<button
53+
className={clsx(styles['preview-button'], styles['btn-retake'])}
54+
onClick={onRetake}
55+
>
56+
撮り直す
57+
</button>
58+
</div>
59+
</div>
60+
</div>
61+
</div>
62+
);
63+
};

0 commit comments

Comments
 (0)