Skip to content

기타 UI 수정 #47

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

Open
o-bard-o wants to merge 3 commits into
base: main
Choose a base branch
from
Open

기타 UI 수정 #47

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
9335c5c
style: game index 페이지 font-weight 수정
o-bard-o Feb 27, 2023
1b79b49
feat: left right 페이지 0.1s 단위로 타이머 분할
o-bard-o Feb 27, 2023
4bd9bc1
feat: left right 페이지 색상도 함께 변경되도록 수정
o-bard-o Feb 27, 2023
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
9 changes: 2 additions & 7 deletions src/components/LeftRight/HorizontalLine.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,8 @@ const HorizontalLine = () => {
};

const getStopColor = () => {
if (top === 70) return Primary[200];
if (top === 72) return Primary[300];
if (top === 74) return Primary[400];
if (top === 76) return Primary[500];
if (top === 78) return Primary[600];
if (top === 80) return Primary[700];
return Primary[800];
if (top >= 70 && top < 75) return `rgb(${(255*(75-top)+72*(top-70))/5}, ${(255*(75-top)+202*(top-70))/5}, ${(255*(75-top)+228*(top-70))/5})`;
if (top >= 75 && top <= 80) return `rgb(${(72*(80-top)+3*(top-75))/5}, ${(202*(80-top)+4*(top-75))/5}, ${(228*(80-top)+82*(top-75))/5})`;
};

return (
Expand Down
15 changes: 1 addition & 14 deletions src/hooks/useLeftRightTimer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,20 +45,7 @@ const useTimer = ({ ms = 1000, initialTime = 100 }: useTimerProps) => {
clearInterval(timerInterval.current);
setGameStatus("end");
}

if (time >= 100) {
setTop(70);
} else if (time >= 80) {
setTop(72);
} else if (time >= 60) {
setTop(74);
} else if (time >= 40) {
setTop(76);
} else if (time >= 20) {
setTop(78);
} else if (time >= 0) {
setTop(80);
}
setTop(80-(time/10));

if (time > 100) resetTime();
}, [resetTime, setGameStatus, setTop, time, timerInterval]);
Expand Down
6 changes: 3 additions & 3 deletions src/pages/game/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,17 @@ const GameListPage = () => {
/>
<HangHeart />
<Link style={{ zIndex: LAYER.TOP }} to="/game/left-right">
<Heading size={{ base: "2xl", lg: "3xl" }} color="white">
<Heading size={{ base: "2xl", lg: "3xl" }} color="white" fontWeight="100">
left & right
</Heading>
</Link>
<Link style={{ zIndex: LAYER.TOP }} to="/game/one-to-fifty">
<Heading size={{ base: "2xl", lg: "3xl" }} color="white">
<Heading size={{ base: "2xl", lg: "3xl" }} color="white" fontWeight="100">
1 to 50
</Heading>
</Link>
<Link style={{ zIndex: LAYER.TOP }} to="/game/hangman">
<Heading size={{ base: "2xl", lg: "3xl" }} color="white">
<Heading size={{ base: "2xl", lg: "3xl" }} color="white" fontWeight="100">
hangman
</Heading>
</Link>
Expand Down