Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/73 feat 독도 퍼즐 연동 및 UI 마무리 #80

Merged
merged 3 commits into from
Nov 28, 2024
Merged

Feature/73 feat 독도 퍼즐 연동 및 UI 마무리 #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
10afe84
Design: Stage4 room1 UI 수정
Keun04 Nov 26, 2024
f781b91
Refactor: 클리어 된 스테이지 시도 시 경고 배너
Keun04 Nov 26, 2024
51432d6
Design: 점 제거
Keun04 Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions client/src/pages/Stage3Page.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,9 @@

.ResultBanner {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
top: 11vh;
left: 50vw;
transform: translateX(-50%);
Expand Down
36 changes: 24 additions & 12 deletions client/src/pages/Stage4Room1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './Stage4Room1.module.css';
import Inventory from '../components/Inventory.js';
Expand All @@ -14,6 +14,7 @@ import Table from 'assets/stage4/Table.png';
function Stage4Room1() {
const navigate = useNavigate();
const { missionClear, getHearts, hearts } = useUser();
const [banner, setBanner] = useState('');

useEffect(() => {
getHearts(4);
Expand Down Expand Up @@ -56,22 +57,28 @@ function Stage4Room1() {
}
} catch (error) {
console.log('드래그 앤 드랍 미션 오류', error);
setBanner('이미 클리어 된 스테이지입니다.');
setTimeout(() => setBanner(''), 1000);
}
};

return (
<div className={styles.Stage4Bg}>
<div className={styles.TopBar}>김춘삼을 죽일 수 있는 총을 선택하라</div>
<Inventory />

{/* 하트 표시 */}
{hearts > 0 && (
<div className={styles.TopBarBg}>
<div className={styles.TopBar}>김춘삼을 죽일 수 있는 총을 선택하라</div>
{/* 하트 표시 */}
<div className={styles.Heart}>
{Array.from({ length: hearts }, (_, i) => (
<img key={i} src={Heart} alt="Heart" />
))}
{hearts > 0 && (
<>
{Array.from({ length: hearts }, (_, i) => (
<img key={i} src={Heart} alt="Heart" />
))}
</>
)}
</div>
)}
</div>
<Inventory />
<div className={styles.Stage4Floor} />

{/* 김춘삼 이미지 (드롭 영역) */}
<div
Expand All @@ -81,14 +88,19 @@ function Stage4Room1() {
>
<img className={styles.KimChunsam} src={KimChunsam} alt="KimChunsam" />
</div>

<img className={styles.Table} src={Table} alt="Table" />
{/* 총 이미지들 (드래그 가능) */}
<div className={styles.Guns}>
<img draggable="true" onDragStart={handleDragStart('correctGun')} src={Gun_Black} alt="Gun_Black" />
<img draggable="true" onDragStart={handleDragStart('wrongGun1')} src={Gun_Gray} alt="Gun_Gray" />
<img draggable="true" onDragStart={handleDragStart('wrongGun2')} src={Gun_White} alt="Gun_White" />
</div>
<img className={styles.Table} src={Table} alt="Table" />

{banner && (
<div className={styles.Banner}>
<p>{banner}</p>
</div>
)}
</div>
);
}
Expand Down
104 changes: 72 additions & 32 deletions client/src/pages/Stage4Room1.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,55 +5,74 @@
background-color: #fee7d7;
}

.TopBar {
.TopBarBg {
position: fixed;
width: 60vw;
height: 10vh;
top: 3vh;
left: 2vw;
top: 0;
background-color: #c1a693;
font-family: 'MapoAgape', sans-serif;
font-size: 4vh;
text-align: center;
border-radius: 1vw; /* 둥근 모서리 */
padding: 1.5vw;
box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}

.KimChunsamWrapper {
position: fixed;
top: 19vh;
left: 26vw;
z-index: -1;
height: fit-content;
width: 100vw;
padding: 3vh 2vw;
padding-bottom: 0;
z-index: 1000;
display: flex;
pointer-events: auto;
gap: 4vw;
align-items: center;
}

.KimChunsam {
height: 63vh;
object-fit: contain; /* 이미지 비율 유지 */
.TopBar {
width: 60vw;
height: 9vh;
display: flex;
align-items: center;
background-image: url('../assets/ToolBar2.png');
background-repeat: no-repeat;
background-size: 100% 100%;
font-family: 'Noto Sans';
font-size: 2vw;
font-weight: 600;
color: #fff;
padding: 1.5vw 3vw;
}

.Heart {
position: fixed;
height: 10vh;
top: 3vh;
left: 67vw;
width: 15vw;
height: 9vh;
display: flex;
gap: 1vw;
background-color: #c1a693;
border-radius: 1vw; /* 둥근 모서리 */
padding: 1vw;
background-image: url('../assets/ToolBar1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 1.2vw 2.5vw 1vw 2vw;
align-items: center; /* 세로 중앙 정렬 */
justify-content: center; /* 가로 중앙 정렬 */
box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}

.Heart img {
height: 5vh;
object-fit: contain; /* 이미지 비율 유지 */
}

.Stage4Floor {
position: fixed;
bottom: 0;
background-color: #846b66;
width: 100vw;
height: 13vh;
}

.KimChunsamWrapper {
position: fixed;
top: 19vh;
left: 26vw;
z-index: -1;
display: flex;
pointer-events: auto;
}

.KimChunsam {
height: 63vh;
object-fit: contain; /* 이미지 비율 유지 */
}

.Guns {
position: fixed;
top: 73vh;
Expand All @@ -78,5 +97,26 @@
top: 80vh;
left: 8vw;
height: 28vh;
z-index: -1;
}

.Banner {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
top: 30vh;
left: 50vw;
transform: translate(-50%, -50%);
background-color: #c1a693;
color: white;
font: Noto Sans KR;
font-size: 1.5vw;
font-weight: bold;
z-index: 100;
border-radius: 1vw;
text-align: center;
width: 30vw;
height: 9vh;
box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.2);
transition: border 0.3s ease;
}
34 changes: 24 additions & 10 deletions client/src/pages/Stage4Room2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import dokdoPuzzle4 from '../assets/dokdoPuzzle4.png';
function Stage4Room2() {
const { addItem } = useInventory2();
const [items, setItems] = useState([]);
const [banner, setBanner] = useState('');
const { user, fetchUser } = useUser();
const navigate = useNavigate();

Expand Down Expand Up @@ -87,6 +88,8 @@ function Stage4Room2() {
}
} catch (error) {
console.log('드래그 앤 드랍 미션 오류', error);
setBanner('이미 클리어 된 스테이지입니다.');
setTimeout(() => setBanner(''), 1000);
}
};

Expand All @@ -98,8 +101,21 @@ function Stage4Room2() {

return (
<div className={styles.Stage4Bg}>
<div className={styles.TopBar}>박환영을 죽일 수 있는 독이 든 음식을 선택하라</div>
<div className={styles.TopBarBg}>
<div className={styles.TopBar}>박환영을 죽일 수 있는 독이 든 음식을 선택하라</div>
{/* 하트 표시 */}
<div className={styles.Heart}>
{hearts > 0 && (
<>
{Array.from({ length: hearts }, (_, i) => (
<img key={i} src={Heart} alt="Heart" />
))}
</>
)}
</div>
</div>
<Inventory />
<div className={styles.Stage4Floor} />

{/* 독도 퍼즐 조각 이미지 */}
{isDokdoPuzzleVisible && (
Expand All @@ -111,13 +127,6 @@ function Stage4Room2() {
/>
)}

{/* 하트 표시 */}
<div className={styles.Heart}>
{Array.from({ length: hearts }, (_, i) => (
<img key={i} src={Heart} alt="Heart" />
))}
</div>

{/* 박완영 이미지 (드롭 영역) */}
<div
className={styles.ParkHwanyoungWrapper}
Expand All @@ -131,14 +140,19 @@ function Stage4Room2() {
onDragStart={(e) => e.preventDefault()}
/>
</div>

<img className={styles.Table} src={Table} alt="Table" />
{/* 음식 이미지들 (드래그 가능) */}
<div className={styles.Food}>
<img draggable="true" onDragStart={handleDragStart('correctfood')} src={Bibimbap} alt="Bibimbap" />
<img draggable="true" onDragStart={handleDragStart('wrongfood1')} src={Hallabong} alt="Hallabong" />
<img draggable="true" onDragStart={handleDragStart('wrongfood2')} src={Eomuk} alt="Eomuk" />
</div>
<img className={styles.Table} src={Table} alt="Table" />

{banner && (
<div className={styles.Banner}>
<p>{banner}</p>
</div>
)}
</div>
);
}
Expand Down
Loading