[FE-81] 分からなかったときのギブアップボタン

Author: yone-al

frontend/src/Result/Components/ResultOverlay.tsx

@@ -13,6 +13,7 @@ interface Props {
 	readonly isAnimating: boolean;
 	readonly onBookmark: () => void;
 	readonly onClose?: () => void;
+	readonly isGivenUp?: boolean;
 }
 
 export default function ResultOverlay({
@@ -21,6 +22,7 @@ export default function ResultOverlay({
 	isAnimating,
 	onBookmark,
 	onClose,
+	isGivenUp = false,
 }: Props) {
 	const navigate = useNavigate();
 	const [isShareOpen, setIsShareOpen] = useState(false);
@@ -41,7 +43,7 @@ export default function ResultOverlay({
 			type="button"
 			tabIndex={0}
 		>
-			<ThanksConfetti />
+			{!isGivenUp && <ThanksConfetti />}
 
 			<div
 				className="result-card"
@@ -61,7 +63,7 @@ export default function ResultOverlay({
 					<CloseIcon />
 				</IconButton>
 
-				<h1 className="seikai-text">正解</h1>
+				{!isGivenUp && <h1 className="seikai-text">正解</h1>}
 
 				<ResultButtons
 					gameId={gameId}

frontend/src/Result/Styles/Result.css

@@ -22,10 +22,12 @@
 	padding: 36px 20px 24px;
 	width: calc(100vw - 32px);
 	max-width: 400px;
+	min-height: 200px;
 	box-sizing: border-box;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	justify-content: center;
 	gap: 24px;
 	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
 	z-index: 1001;

frontend/src/Solo/Solo.css

@@ -288,3 +288,50 @@
 	white-space: nowrap;
 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
+
+/* --- ギブアップボタン --- */
+.input-with-giveup {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	gap: 8px;
+}
+
+.giveup-button {
+	all: unset;
+	box-sizing: border-box;
+	cursor: pointer;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 2px;
+	padding: 8px 12px;
+	border-radius: 12px;
+	border: 2px solid #e57373;
+	background-color: #fff5f5;
+	color: #d32f2f;
+	font-size: 11px;
+	font-weight: 700;
+	white-space: nowrap;
+	flex-shrink: 0;
+	transition: all 0.2s ease;
+}
+
+.giveup-button:hover {
+	background-color: #ffebee;
+	border-color: #d32f2f;
+	transform: translateY(-1px);
+	box-shadow: 0 2px 8px rgba(211, 47, 47, 0.2);
+}
+
+.giveup-button:active {
+	transform: translateY(0);
+}
+
+@media (max-width: 768px) {
+	.giveup-button {
+		padding: 6px 10px;
+		font-size: 10px;
+	}
+}

frontend/src/Solo/index.tsx

@@ -6,6 +6,7 @@ import ShareModal from "../Result/Components/ShareModal";
 import InputArea from "./Components/InputArea";
 import MessageBubble from "./Components/MessageBubble";
 import Timer from "./Components/Timer";
+import FlagIcon from "@mui/icons-material/Flag";
 import "./Solo.css";
 
 const HINT_ICONS = ["/Image/Kyoto.jpg", "/Image/Osaka.jpg"];
@@ -31,6 +32,7 @@ function Solo() {
 	const [isShareOpen, setIsShareOpen] = useState(false);
 	const [isBookmarked, setIsBookmarked] = useState(false);
 	const [isAnimating, setIsAnimating] = useState(false);
+	const [isGivenUp, setIsGivenUp] = useState(false);
 	const [pendingHints, setPendingHints] = useState<any[]>([]);
 	const [loadingMsgIndex, setLoadingMsgIndex] = useState(0);
 	const loadingMessages = [
@@ -192,6 +194,57 @@ function Solo() {
 		}
 	};
 
+	// 全ヒントが表示されたかどうかを判定する
+	const shownHintCount = messages.filter(
+		(m) =>
+			!m.isUser &&
+			!m.isDivider &&
+			m.hint !== "正解やで！" &&
+			m.hint !== "不正解どす..." &&
+			!m.hint.startsWith("正解は「"),
+	).length;
+	const allHintsShown = hints.length > 0 && shownHintCount >= hints.length;
+
+	// ギブアップ処理：正解を取得してチャットに表示する
+	const handleGiveUp = async () => {
+		if (gameId === null) return;
+
+		try {
+			const res = await fetch(`/api/solo/${gameId}/answer`);
+			const data = await res.json();
+			const correctAnswer = data.answer;
+
+			// 「ギブアップ！」のユーザーメッセージを追加
+			setMessages((prev) => [
+				...prev,
+				{
+					messageId: Date.now(),
+					hint: "ギブアップ！",
+					isUser: true,
+					icon: "😎",
+				},
+			]);
+
+			// 少し間を空けてから正解を表示する
+			setTimeout(() => {
+				setMessages((prev) => [
+					...prev,
+					{
+						messageId: Date.now() + 1,
+						hint: `正解は「${correctAnswer}」やで！`,
+						isUser: false,
+						icon: "/Image/Osaka.jpg",
+					},
+				]);
+				setIsGivenUp(true);
+				setHasAnswered(true);
+				setShowResultOverlay(true);
+			}, 500);
+		} catch (error) {
+			console.error("正解の取得に失敗しました:", error);
+		}
+	};
+
 	const handleTitle = () => navigate("/");
 	const handleRetry = () => window.location.reload();
 	const handleShare = () => setIsShareOpen(true);
@@ -302,6 +355,7 @@ function Solo() {
 					isAnimating={isAnimating}
 					onBookmark={handleBookmark}
 					onClose={handleCloseResult}
+					isGivenUp={isGivenUp}
 				/>
 			)}
 			{isShareOpen && gameId !== null && (
@@ -342,13 +396,21 @@ function Solo() {
 			</div>
 			<div className="solo-footer">
 				{!hasAnswered || showResultOverlay ? (
-					<InputArea
-						value={inputValue}
-						onChange={setInputValue}
-						onSubmit={handleSubmit}
-						placeholder="回答を記入してください"
-						hidden={hasAnswered}
-					/>
+					<div className="input-with-giveup">
+						<InputArea
+							value={inputValue}
+							onChange={setInputValue}
+							onSubmit={handleSubmit}
+							placeholder="回答を記入してください"
+							hidden={hasAnswered}
+						/>
+						{allHintsShown && !hasAnswered && (
+							<button type="button" className="giveup-button" onClick={handleGiveUp}>
+								<FlagIcon fontSize="small" />
+								<span>ギブアップ</span>
+							</button>
+						)}
+					</div>
 				) : (
 					<div className="result-buttons-container">
 						<ResultButtons