From 694a86f3fefbe443ab4a58713a35abdc37d006e4 Mon Sep 17 00:00:00 2001 From: JJongBin Date: Fri, 9 Dec 2022 18:46:00 +0900 Subject: [PATCH 01/21] =?UTF-8?q?[asset]=20=EB=8B=AB=EA=B8=B0=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20asset?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/icon/close.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 frontend/src/assets/icon/close.svg diff --git a/frontend/src/assets/icon/close.svg b/frontend/src/assets/icon/close.svg new file mode 100644 index 0000000..330e579 --- /dev/null +++ b/frontend/src/assets/icon/close.svg @@ -0,0 +1,3 @@ + + + From 57f7b93b72ec4d30ead387c04012e7c344ae6bb1 Mon Sep 17 00:00:00 2001 From: JJongBin Date: Fri, 9 Dec 2022 18:46:53 +0900 Subject: [PATCH 02/21] =?UTF-8?q?[feat]=20#76=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EB=8B=AB=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/SleepyBoard/index.tsx | 4 ++++ .../SleepyBoard/sleepyboard.styled.ts | 22 +++++++++++++++++++ 2 files changed, 26 insertions(+) diff --git a/frontend/src/component/SleepyBoard/index.tsx b/frontend/src/component/SleepyBoard/index.tsx index f1fc1f1..c81f165 100644 --- a/frontend/src/component/SleepyBoard/index.tsx +++ b/frontend/src/component/SleepyBoard/index.tsx @@ -24,6 +24,10 @@ const SleepyBoard = () => { {isShowModal && ( <>
+ {tab === 'board' ? : }
diff --git a/frontend/src/component/SleepyBoard/sleepyboard.styled.ts b/frontend/src/component/SleepyBoard/sleepyboard.styled.ts index 1725a92..91c5b06 100644 --- a/frontend/src/component/SleepyBoard/sleepyboard.styled.ts +++ b/frontend/src/component/SleepyBoard/sleepyboard.styled.ts @@ -3,6 +3,7 @@ import tree from '../../assets/tree.svg'; import trophy from '../../assets/trophy.svg'; import like from '../../assets/icon/like.svg'; import unlike from '../../assets/icon/unlike.svg'; +import close from '../../assets/icon/close.svg'; import { flexCenter } from '../../styles/mixin.styled'; import theme from '../../styles/theme'; @@ -314,3 +315,24 @@ export const infoMsg = css` text-align: center; padding: 20px; `; + +export const closeBtn = css` + position: absolute; + top: 20px; + right: 20px; + width: 20px; + height: 20px; + opacity: 0.7; + padding: 5px; + + ::after { + content: ''; + display: block; + width: 20px; + height: 20px; + background-image: url(${close}); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + } +`; From 3c85eca69c427b2c3cd96a44f9bb88c2462f7b54 Mon Sep 17 00:00:00 2001 From: JJongBin Date: Sat, 10 Dec 2022 23:36:58 +0900 Subject: [PATCH 03/21] =?UTF-8?q?[feat]=20#179=20=EC=95=88=EB=82=B4=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=AA=A8=EB=8B=AC=EC=B0=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/Info/Help.tsx | 45 +++++++++ frontend/src/component/Info/help.styled.ts | 79 +++++++++++++++ frontend/src/component/Info/index.tsx | 2 + frontend/src/component/Info/info.styled.ts | 110 ++++++++++++++++++++- 4 files changed, 233 insertions(+), 3 deletions(-) create mode 100644 frontend/src/component/Info/Help.tsx create mode 100644 frontend/src/component/Info/help.styled.ts diff --git a/frontend/src/component/Info/Help.tsx b/frontend/src/component/Info/Help.tsx new file mode 100644 index 0000000..2061c04 --- /dev/null +++ b/frontend/src/component/Info/Help.tsx @@ -0,0 +1,45 @@ +import { useState } from 'react'; +import help from '../../assets/icon/help.svg'; +import keyboardArrow from '../../assets/icon/keyboardArrow.svg'; +import keyboardSpace from '../../assets/icon/keyboardSpace.svg'; +import keyboardShift from '../../assets/icon/keyboardShift.svg'; +import keyboardA from '../../assets/icon/keyboardA.svg'; +import keyboardR from '../../assets/icon/keyboardR.svg'; +import * as style from './info.styled'; + +const Help = () => { + const [isShowModal, setIsShowModal] = useState(false); + const [animation, setAnimation] = useState('show'); + + const handleModal = () => { + if (isShowModal) { + setAnimation('close'); + setTimeout(() => setIsShowModal(false), 300); + } else { + setAnimation('show'); + setIsShowModal(true); + } + }; + + return ( + <> + {isShowModal && ( + <> +
+ +

๐Ÿ“‹ Notice

+
+ + )} + + + ); +}; + +export default Help; diff --git a/frontend/src/component/Info/help.styled.ts b/frontend/src/component/Info/help.styled.ts new file mode 100644 index 0000000..0dc7c91 --- /dev/null +++ b/frontend/src/component/Info/help.styled.ts @@ -0,0 +1,79 @@ +import { css } from '@emotion/react'; +import help from '../../assets/icon/help.svg'; +import help2 from '../../assets/icon/help2.svg'; +import close from '../../assets/icon/close.svg'; + +export const helpBtn = css` + width: 60px; + height: 60px; + + position: absolute; + bottom: 55px; + right: 60px; + background-image: url(${help2}); + background-repeat: no-repeat; + background-position: center; +`; + +export const modal = (animation: string) => css` + display: flex; + justify-content: center; + align-items: center; + flex-flow: column; + + width: 60%; + min-width: 600px; + max-width: 800px; + height: 60%; + min-height: 400px; + max-height: 600px; + padding: 20px; + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -60%); + border-radius: 0 20px 20px 20px; + background-color: rgba(255, 255, 255, 0.9); + + animation: ${animation} 0.3s ease-in-out; + + @keyframes show { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + @keyframes close { + from { + opacity: 1; + } + to { + opacity: 0; + } + } +`; + +export const closeBtn = css` + position: absolute; + top: 20px; + right: 20px; + width: 20px; + height: 20px; + opacity: 0.7; + padding: 5px; + + ::after { + content: ''; + display: block; + width: 20px; + height: 20px; + background-image: url(${close}); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + } +`; diff --git a/frontend/src/component/Info/index.tsx b/frontend/src/component/Info/index.tsx index 1067bc1..8edd851 100644 --- a/frontend/src/component/Info/index.tsx +++ b/frontend/src/component/Info/index.tsx @@ -1,10 +1,12 @@ import * as style from './info.styled'; +import Help from './Help'; import Users from './Users'; import Walk from './Walk'; const Info = () => { return (
    +
diff --git a/frontend/src/component/Info/info.styled.ts b/frontend/src/component/Info/info.styled.ts index bff60d6..d1c28ec 100644 --- a/frontend/src/component/Info/info.styled.ts +++ b/frontend/src/component/Info/info.styled.ts @@ -1,5 +1,6 @@ import { css } from '@emotion/react'; import theme from '../../styles/theme'; +import close from '../../assets/icon/close.svg'; export const infoBox = css` display: flex; @@ -10,7 +11,7 @@ export const infoBox = css` export const info = (content: string) => css` display: flex; - justify-content: space-between; + justify-content: space-around; align-items: center; font-size: 14px; color: ${theme.white}; @@ -22,13 +23,116 @@ export const info = (content: string) => css` ::after { content: ''; - display: block; + display: 'block'; width: 20px; height: 15px; - margin-left: 5px; background-image: url(${content}); background-position: center; background-repeat: no-repeat; background-size: contain; } `; + +export const modal = (animation: string) => css` + display: flex; + justify-content: center; + align-items: center; + flex-flow: column; + + width: 60%; + min-width: 600px; + max-width: 800px; + height: 60%; + min-height: 400px; + max-height: 600px; + padding: 20px; + + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -60%); + border-radius: 20px; + background-color: rgba(255, 255, 255, 0.9); + + animation: ${animation} 0.3s ease-in-out; + + @keyframes show { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + @keyframes close { + from { + opacity: 1; + } + to { + opacity: 0; + } + } +`; + +export const closeBtn = css` + position: absolute; + top: 15px; + right: 15px; + width: 20px; + height: 20px; + opacity: 0.7; + padding: 5px; + + ::after { + content: ''; + display: block; + width: 20px; + height: 20px; + background-image: url(${close}); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + } +`; + +export const header = css` + font-weight: 700; + font-size: 30px; + line-height: 30px; + padding: 20px; + margin-bottom: 10px; +`; + +export const description = css` + display: flex; + flex-grow: 1; + + width: 100%; +`; + +export const keyboard = css` + display: flex; + justify-content: space-around; + width: 100%; + height: 250px; + + ul { + display: flex; + height: 100%; + flex-flow: column; + justify-content: space-between; + height: 100%; + padding: 0 20px; + + img { + justify-items: center; + margin-top: 5px; + } + + p { + font-size: 14px; + padding: 10px 0; + } + } +`; From 30a627a67856c086db159cfb151c8a6c00689af6 Mon Sep 17 00:00:00 2001 From: JJongBin Date: Sun, 11 Dec 2022 00:56:54 +0900 Subject: [PATCH 04/21] =?UTF-8?q?[asset]=20=ED=82=A4=EB=B3=B4=EB=93=9C=20?= =?UTF-8?q?=EC=84=A4=EB=AA=85=20asset=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/icon/help.svg | 3 +++ frontend/src/assets/icon/keyboardA.svg | 5 +++++ frontend/src/assets/icon/keyboardArrow.svg | 14 ++++++++++++++ frontend/src/assets/icon/keyboardR.svg | 5 +++++ frontend/src/assets/icon/keyboardShift.svg | 5 +++++ frontend/src/assets/icon/keyboardSpace.svg | 5 +++++ 6 files changed, 37 insertions(+) create mode 100644 frontend/src/assets/icon/help.svg create mode 100644 frontend/src/assets/icon/keyboardA.svg create mode 100644 frontend/src/assets/icon/keyboardArrow.svg create mode 100644 frontend/src/assets/icon/keyboardR.svg create mode 100644 frontend/src/assets/icon/keyboardShift.svg create mode 100644 frontend/src/assets/icon/keyboardSpace.svg diff --git a/frontend/src/assets/icon/help.svg b/frontend/src/assets/icon/help.svg new file mode 100644 index 0000000..fe02260 --- /dev/null +++ b/frontend/src/assets/icon/help.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icon/keyboardA.svg b/frontend/src/assets/icon/keyboardA.svg new file mode 100644 index 0000000..d216176 --- /dev/null +++ b/frontend/src/assets/icon/keyboardA.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/assets/icon/keyboardArrow.svg b/frontend/src/assets/icon/keyboardArrow.svg new file mode 100644 index 0000000..8c3816f --- /dev/null +++ b/frontend/src/assets/icon/keyboardArrow.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/frontend/src/assets/icon/keyboardR.svg b/frontend/src/assets/icon/keyboardR.svg new file mode 100644 index 0000000..c40bbf0 --- /dev/null +++ b/frontend/src/assets/icon/keyboardR.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/assets/icon/keyboardShift.svg b/frontend/src/assets/icon/keyboardShift.svg new file mode 100644 index 0000000..559eea6 --- /dev/null +++ b/frontend/src/assets/icon/keyboardShift.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/assets/icon/keyboardSpace.svg b/frontend/src/assets/icon/keyboardSpace.svg new file mode 100644 index 0000000..4e5e337 --- /dev/null +++ b/frontend/src/assets/icon/keyboardSpace.svg @@ -0,0 +1,5 @@ + + + + + From 4441e6a15ed24fb9ed278b36829092399c1ac09e Mon Sep 17 00:00:00 2001 From: JJongBin Date: Sun, 11 Dec 2022 00:57:29 +0900 Subject: [PATCH 05/21] =?UTF-8?q?[feat]=20#179=20=EA=B0=81=20=EC=84=A4?= =?UTF-8?q?=EB=AA=85=20=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20=ED=82=A4=EB=B3=B4?= =?UTF-8?q?=EB=93=9C=20=EC=84=A4=EB=AA=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/Info/Help.tsx | 10 ++--- .../Info/HelpDescription/KeyBoardInfo.tsx | 45 +++++++++++++++++++ .../Info/HelpDescription/common.styled.ts | 18 ++++++++ .../HelpDescription/keyBoardInfo.styled.ts | 34 ++++++++++++++ frontend/src/component/Info/info.styled.ts | 39 +++++----------- 5 files changed, 112 insertions(+), 34 deletions(-) create mode 100644 frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx create mode 100644 frontend/src/component/Info/HelpDescription/common.styled.ts create mode 100644 frontend/src/component/Info/HelpDescription/keyBoardInfo.styled.ts diff --git a/frontend/src/component/Info/Help.tsx b/frontend/src/component/Info/Help.tsx index 2061c04..b5c789b 100644 --- a/frontend/src/component/Info/Help.tsx +++ b/frontend/src/component/Info/Help.tsx @@ -1,10 +1,7 @@ import { useState } from 'react'; import help from '../../assets/icon/help.svg'; -import keyboardArrow from '../../assets/icon/keyboardArrow.svg'; -import keyboardSpace from '../../assets/icon/keyboardSpace.svg'; -import keyboardShift from '../../assets/icon/keyboardShift.svg'; -import keyboardA from '../../assets/icon/keyboardA.svg'; -import keyboardR from '../../assets/icon/keyboardR.svg'; +import KeyBoardInfo from './HelpDescription/keyBoardInfo'; + import * as style from './info.styled'; const Help = () => { @@ -31,6 +28,9 @@ const Help = () => { css={style.closeBtn} onClick={handleModal}>

๐Ÿ“‹ Notice

+
+ +
)} diff --git a/frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx b/frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx new file mode 100644 index 0000000..5212374 --- /dev/null +++ b/frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx @@ -0,0 +1,45 @@ +import * as style from './keyBoardInfo.styled'; +import * as commonStyle from './common.styled'; +import keyboardArrow from '../../../assets/icon/keyboardArrow.svg'; +import keyboardSpace from '../../../assets/icon/keyboardSpace.svg'; +import keyboardShift from '../../../assets/icon/keyboardShift.svg'; +import keyboardA from '../../../assets/icon/keyboardA.svg'; +import keyboardR from '../../../assets/icon/keyboardR.svg'; + +const keyBoardInfo = () => { + return ( +
+

- ๊ธฐ๋ณธํ‚ค ์กฐ์ž‘๋ฒ•

+
+
+
    +
  • + +

    ํ™”์‚ดํ‘œ ๋ฐฉํ–ฅํ‚ค๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    +
    • +
  • + +

    spaceํ‚ค๋กœ ์ ํ”„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    +
    • +
+
    +
  • + +

    Aํ‚ค๋กœ ๊ณต๊ฒฉ ๋ชจ์…˜์„ ์ทจํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    +
    • +
  • + +

    Rํ‚ค๋กœ ๊ตฌ๋ฅด๊ธฐ๋ฅผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    +
    • +
  • + +

    shiftํ‚ค๋กœ ๋‹ฌ๋ฆฌ๊ธฐ๋ฅผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    +
    • +
+
+
+
+ ); +}; + +export default keyBoardInfo; diff --git a/frontend/src/component/Info/HelpDescription/common.styled.ts b/frontend/src/component/Info/HelpDescription/common.styled.ts new file mode 100644 index 0000000..3e42d6f --- /dev/null +++ b/frontend/src/component/Info/HelpDescription/common.styled.ts @@ -0,0 +1,18 @@ +import { css } from '@emotion/react'; +import theme from '../../../styles/theme'; + +export const infoContainer = css` + width: 100%; + padding: 20px; + margin-bottom: 10px; + + background-color: ${theme.white05}; + box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1); + border-radius: 20px; +`; + +export const header = css` + font-size: 18px; + font-weight: 700; + padding-bottom: 15px; +`; diff --git a/frontend/src/component/Info/HelpDescription/keyBoardInfo.styled.ts b/frontend/src/component/Info/HelpDescription/keyBoardInfo.styled.ts new file mode 100644 index 0000000..7f032b8 --- /dev/null +++ b/frontend/src/component/Info/HelpDescription/keyBoardInfo.styled.ts @@ -0,0 +1,34 @@ +import { css } from '@emotion/react'; + +export const description = css` + display: flex; + flex-grow: 1; + + width: 100%; +`; + +export const keyboard = css` + display: flex; + justify-content: space-around; + width: 100%; + height: 250px; + + ul { + display: flex; + height: 100%; + flex-flow: column; + justify-content: space-between; + height: 100%; + padding: 0 20px; + + img { + justify-items: center; + margin-top: 5px; + } + + p { + font-size: 14px; + padding: 10px 0; + } + } +`; diff --git a/frontend/src/component/Info/info.styled.ts b/frontend/src/component/Info/info.styled.ts index d1c28ec..61b9633 100644 --- a/frontend/src/component/Info/info.styled.ts +++ b/frontend/src/component/Info/info.styled.ts @@ -54,6 +54,11 @@ export const modal = (animation: string) => css` border-radius: 20px; background-color: rgba(255, 255, 255, 0.9); + overflow: auto; + ::-webkit-scrollbar { + display: none; + } + animation: ${animation} 0.3s ease-in-out; @keyframes show { @@ -102,37 +107,13 @@ export const header = css` line-height: 30px; padding: 20px; margin-bottom: 10px; + text-align: center; `; -export const description = css` - display: flex; - flex-grow: 1; - - width: 100%; -`; - -export const keyboard = css` - display: flex; - justify-content: space-around; - width: 100%; - height: 250px; - - ul { - display: flex; - height: 100%; - flex-flow: column; - justify-content: space-between; - height: 100%; - padding: 0 20px; - - img { - justify-items: center; - margin-top: 5px; - } +export const content = css` + overflow: auto; - p { - font-size: 14px; - padding: 10px 0; - } + ::-webkit-scrollbar { + display: none; } `; From 629609acb11d11260155162a03d8a4b1be5656fa Mon Sep 17 00:00:00 2001 From: JJongBin Date: Sun, 11 Dec 2022 01:20:13 +0900 Subject: [PATCH 06/21] =?UTF-8?q?[fix]=20#179=20=ED=82=A4=EB=B3=B4?= =?UTF-8?q?=EB=93=9C=20=EC=84=A4=EB=AA=85=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=ED=83=9C=EA=B7=B8=20=EB=B0=8F=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Info/HelpDescription/KeyBoardInfo.tsx | 50 +++++++++---------- .../HelpDescription/keyBoardInfo.styled.ts | 7 --- 2 files changed, 24 insertions(+), 33 deletions(-) diff --git a/frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx b/frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx index 5212374..1b8d67a 100644 --- a/frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx +++ b/frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx @@ -11,32 +11,30 @@ const keyBoardInfo = () => {

- ๊ธฐ๋ณธํ‚ค ์กฐ์ž‘๋ฒ•

-
-
    -
  • - -

    ํ™”์‚ดํ‘œ ๋ฐฉํ–ฅํ‚ค๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    -
    • -
  • - -

    spaceํ‚ค๋กœ ์ ํ”„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    -
    • -
-
    -
  • - -

    Aํ‚ค๋กœ ๊ณต๊ฒฉ ๋ชจ์…˜์„ ์ทจํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    -
    • -
  • - -

    Rํ‚ค๋กœ ๊ตฌ๋ฅด๊ธฐ๋ฅผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    -
    • -
  • - -

    shiftํ‚ค๋กœ ๋‹ฌ๋ฆฌ๊ธฐ๋ฅผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    -
    • -
-
+
    +
  • + +

    ํ™”์‚ดํ‘œ ๋ฐฉํ–ฅํ‚ค๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    +
    • +
  • + +

    spaceํ‚ค๋กœ ์ ํ”„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    +
    • +
+
    +
  • + +

    Aํ‚ค๋กœ ๊ณต๊ฒฉ ๋ชจ์…˜์„ ์ทจํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    +
    • +
  • + +

    Rํ‚ค๋กœ ๊ตฌ๋ฅด๊ธฐ๋ฅผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    +
    • +
  • + +

    shiftํ‚ค๋กœ ๋‹ฌ๋ฆฌ๊ธฐ๋ฅผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    +
    • +
); diff --git a/frontend/src/component/Info/HelpDescription/keyBoardInfo.styled.ts b/frontend/src/component/Info/HelpDescription/keyBoardInfo.styled.ts index 7f032b8..c8900ba 100644 --- a/frontend/src/component/Info/HelpDescription/keyBoardInfo.styled.ts +++ b/frontend/src/component/Info/HelpDescription/keyBoardInfo.styled.ts @@ -1,13 +1,6 @@ import { css } from '@emotion/react'; export const description = css` - display: flex; - flex-grow: 1; - - width: 100%; -`; - -export const keyboard = css` display: flex; justify-content: space-around; width: 100%; From 145fa886526c3c7b685d8da06ecd0c7b6c75131c Mon Sep 17 00:00:00 2001 From: JJongBin Date: Sun, 11 Dec 2022 01:28:53 +0900 Subject: [PATCH 07/21] =?UTF-8?q?[fix]=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=20alt=20=EA=B8=B0=EC=9E=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/Info/HelpDescription/KeyBoardInfo.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx b/frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx index 1b8d67a..04c8f5f 100644 --- a/frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx +++ b/frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx @@ -13,25 +13,25 @@ const keyBoardInfo = () => {
  • - + ๋ฐฉํ–ฅํ‚ค ์ด๋ฏธ์ง€

    ํ™”์‚ดํ‘œ ๋ฐฉํ–ฅํ‚ค๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • - + spaceํ‚ค ์ด๋ฏธ์ง€

    spaceํ‚ค๋กœ ์ ํ”„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • - + Aํ‚ค ์ด๋ฏธ์ง€

    Aํ‚ค๋กœ ๊ณต๊ฒฉ ๋ชจ์…˜์„ ์ทจํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • - + Rํ‚ค ์ด๋ฏธ์ง€

    Rํ‚ค๋กœ ๊ตฌ๋ฅด๊ธฐ๋ฅผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • - + shiftํ‚ค ์ด๋ฏธ์ง€

    shiftํ‚ค๋กœ ๋‹ฌ๋ฆฌ๊ธฐ๋ฅผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

From a193a553098ef27af00d373c387954580b4e1453 Mon Sep 17 00:00:00 2001 From: JJongBin Date: Sun, 11 Dec 2022 03:21:08 +0900 Subject: [PATCH 08/21] =?UTF-8?q?[asset]=20#179=20=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EB=93=9C=EB=B0=94=20=EA=B4=80=EB=A0=A8=20asset=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/info-chat.png | Bin 0 -> 46817 bytes frontend/src/assets/info-friends.png | Bin 0 -> 45479 bytes frontend/src/assets/info-mypage.png | Bin 0 -> 62920 bytes frontend/src/assets/info-setting.png | Bin 0 -> 58679 bytes frontend/src/assets/sidebarImg.png | Bin 0 -> 307643 bytes 5 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 frontend/src/assets/info-chat.png create mode 100644 frontend/src/assets/info-friends.png create mode 100644 frontend/src/assets/info-mypage.png create mode 100644 frontend/src/assets/info-setting.png create mode 100644 frontend/src/assets/sidebarImg.png diff --git a/frontend/src/assets/info-chat.png b/frontend/src/assets/info-chat.png new file mode 100644 index 0000000000000000000000000000000000000000..6147a1f8332c2307e4de812d3014c1ea73e32deb GIT binary patch literal 46817 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
diff --git a/frontend/src/component/Info/HelpDescription/WalkAndUserInfo.tsx b/frontend/src/component/Info/HelpDescription/WalkAndUserInfo.tsx new file mode 100644 index 0000000..d87e42f --- /dev/null +++ b/frontend/src/component/Info/HelpDescription/WalkAndUserInfo.tsx @@ -0,0 +1,25 @@ +import * as style from './boardAndRankInfo.styled'; +import * as commonStyle from './common.styled'; +import walkAndUserImg from '../../../assets/info-walkAndUser.png'; + +const WalkAndUserInfo = () => { + return ( +
+

- ๊ฑธ์Œ์ˆ˜ & ์ ‘์†์œ ์ €

+
+ ๊ฑธ์Œ์ˆ˜์™€ ์ ‘์†์œ ์ € ์ด๋ฏธ์ง€ +

+ ์˜ค๋ฅธ์ชฝ ํ•˜๋‹จ์— ์ž์‹ ์˜ ๊ฑธ์Œ์ˆ˜์™€{' '} + ์ ‘์†์œ ์ €๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. +

+

๋ฐฉํ–ฅํ‚ค๋กœ ์ด๋™ํ–ˆ์„๋•Œ ๊ฑธ์Œ์ˆ˜๊ฐ€ ์ฆ๊ฐ€ํ•˜๋ฉฐ ๋žญํ‚น์— ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค.

+
+
+ ); +}; + +export default WalkAndUserInfo; diff --git a/frontend/src/component/Info/HelpDescription/boardAndRankInfo.styled.ts b/frontend/src/component/Info/HelpDescription/boardAndRankInfo.styled.ts index 8b77ac8..5af223d 100644 --- a/frontend/src/component/Info/HelpDescription/boardAndRankInfo.styled.ts +++ b/frontend/src/component/Info/HelpDescription/boardAndRankInfo.styled.ts @@ -8,15 +8,5 @@ export const description = css` padding: 15px; font-size: 14px; text-align: center; - - /* strong { - color: ${theme.deepGreen}; - font-weight: 700; - } - - span { - color: ${theme.red}; - font-weight: 700; - } */ } `; diff --git a/frontend/src/component/Info/HelpDescription/walkAndUserInfo.styled.ts b/frontend/src/component/Info/HelpDescription/walkAndUserInfo.styled.ts new file mode 100644 index 0000000..546e8b3 --- /dev/null +++ b/frontend/src/component/Info/HelpDescription/walkAndUserInfo.styled.ts @@ -0,0 +1,11 @@ +import { css } from '@emotion/react'; + +export const description = css` + width: 100%; + + & > p { + padding: 15px; + font-size: 14px; + text-align: center; + } +`; From fb7ab817ab1271d798960c668b519fbd84c4e507 Mon Sep 17 00:00:00 2001 From: JJongBin Date: Sun, 11 Dec 2022 13:35:57 +0900 Subject: [PATCH 14/21] =?UTF-8?q?[asset]=20=EC=B2=B4=ED=81=AC=EB=B0=95?= =?UTF-8?q?=EC=8A=A4=20asset=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/icon/checkBox.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 frontend/src/assets/icon/checkBox.svg diff --git a/frontend/src/assets/icon/checkBox.svg b/frontend/src/assets/icon/checkBox.svg new file mode 100644 index 0000000..f1680bd --- /dev/null +++ b/frontend/src/assets/icon/checkBox.svg @@ -0,0 +1,3 @@ + + + From caa27afd772257aeb104166451e56ab67ae73a62 Mon Sep 17 00:00:00 2001 From: JJongBin Date: Sun, 11 Dec 2022 13:36:28 +0900 Subject: [PATCH 15/21] =?UTF-8?q?[feat]=20#179=20=EA=B2=8C=EC=9E=84=20?= =?UTF-8?q?=EC=A0=91=EC=86=8D=EC=8B=9C=20=EB=8F=84=EC=9B=80=EB=A7=90=20?= =?UTF-8?q?=EC=97=B4=EA=B8=B0=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/Info/Help.tsx | 22 +++++- .../HelpDescription/sidebarInfo.styled.ts | 4 - frontend/src/component/Info/help.styled.ts | 79 ------------------- frontend/src/component/Info/info.styled.ts | 24 ++++++ 4 files changed, 45 insertions(+), 84 deletions(-) delete mode 100644 frontend/src/component/Info/help.styled.ts diff --git a/frontend/src/component/Info/Help.tsx b/frontend/src/component/Info/Help.tsx index bea43b1..77aee39 100644 --- a/frontend/src/component/Info/Help.tsx +++ b/frontend/src/component/Info/Help.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import help from '../../assets/icon/help.svg'; import BoardAndRankInfo from './HelpDescription/BoardAndRankInfo'; import KeyBoardInfo from './HelpDescription/keyBoardInfo'; @@ -10,17 +10,30 @@ import * as style from './info.styled'; const Help = () => { const [isShowModal, setIsShowModal] = useState(false); const [animation, setAnimation] = useState('show'); + const [setOpen, isSetOpen] = useState(true); + + const setOpenModal = () => { + isSetOpen(!setOpen); + }; const handleModal = () => { if (isShowModal) { setAnimation('close'); setTimeout(() => setIsShowModal(false), 300); + + const setValue = setOpen ? 'open' : 'close'; + localStorage.setItem('openHelp', setValue); } else { setAnimation('show'); setIsShowModal(true); } }; + useEffect(() => { + const openHelp = localStorage.getItem('openHelp'); + if (openHelp === 'open') setIsShowModal(true); + }, []); + return ( <> {isShowModal && ( @@ -37,6 +50,13 @@ const Help = () => { +
+
+

์ ‘์†์‹œ ๋„์›€๋ง ์ผœ๊ธฐ

+ +
+

์šฐ์ธก ํ•˜๋‹จ์˜ ๋ฌผ์Œํ‘œ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ด์„œ ๋„์›€๋ง์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

+
)} diff --git a/frontend/src/component/Info/HelpDescription/sidebarInfo.styled.ts b/frontend/src/component/Info/HelpDescription/sidebarInfo.styled.ts index 5609499..cf82cf2 100644 --- a/frontend/src/component/Info/HelpDescription/sidebarInfo.styled.ts +++ b/frontend/src/component/Info/HelpDescription/sidebarInfo.styled.ts @@ -52,9 +52,5 @@ export const subDescription = css` width: 100%; padding-bottom: 15px; font-size: 14px; - - /* span { - color: ${theme.red}; - } */ } `; diff --git a/frontend/src/component/Info/help.styled.ts b/frontend/src/component/Info/help.styled.ts deleted file mode 100644 index 0dc7c91..0000000 --- a/frontend/src/component/Info/help.styled.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { css } from '@emotion/react'; -import help from '../../assets/icon/help.svg'; -import help2 from '../../assets/icon/help2.svg'; -import close from '../../assets/icon/close.svg'; - -export const helpBtn = css` - width: 60px; - height: 60px; - - position: absolute; - bottom: 55px; - right: 60px; - background-image: url(${help2}); - background-repeat: no-repeat; - background-position: center; -`; - -export const modal = (animation: string) => css` - display: flex; - justify-content: center; - align-items: center; - flex-flow: column; - - width: 60%; - min-width: 600px; - max-width: 800px; - height: 60%; - min-height: 400px; - max-height: 600px; - padding: 20px; - - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -60%); - border-radius: 0 20px 20px 20px; - background-color: rgba(255, 255, 255, 0.9); - - animation: ${animation} 0.3s ease-in-out; - - @keyframes show { - from { - opacity: 0; - } - to { - opacity: 1; - } - } - - @keyframes close { - from { - opacity: 1; - } - to { - opacity: 0; - } - } -`; - -export const closeBtn = css` - position: absolute; - top: 20px; - right: 20px; - width: 20px; - height: 20px; - opacity: 0.7; - padding: 5px; - - ::after { - content: ''; - display: block; - width: 20px; - height: 20px; - background-image: url(${close}); - background-position: center; - background-repeat: no-repeat; - background-size: contain; - } -`; diff --git a/frontend/src/component/Info/info.styled.ts b/frontend/src/component/Info/info.styled.ts index 43cc4b9..6af9537 100644 --- a/frontend/src/component/Info/info.styled.ts +++ b/frontend/src/component/Info/info.styled.ts @@ -1,6 +1,8 @@ import { css } from '@emotion/react'; import theme from '../../styles/theme'; import close from '../../assets/icon/close.svg'; +import checkBox from '../../assets/icon/checkBox.svg'; +import { flexCenter } from '../../styles/mixin.styled'; export const infoBox = css` display: flex; @@ -118,3 +120,25 @@ export const content = css` display: none; } `; + +export const helpSettingWrapper = css` + font-size: 14px; + padding-top: 20px; + text-align: center; +`; + +export const helpSetting = (isCheck: boolean) => css` + ${flexCenter} + padding-bottom: 10px; + + button { + margin-left: 10px; + width: 14px; + height: 14px; + background-image: url(${checkBox}); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + opacity: ${isCheck ? 1 : 0.3}; + } +`; From e301c4dc14140a8175f3cbf5fe089dc921feba14 Mon Sep 17 00:00:00 2001 From: JJongBin Date: Sun, 11 Dec 2022 13:43:16 +0900 Subject: [PATCH 16/21] =?UTF-8?q?[design]=20#179=20=EB=8F=84=EC=9B=80?= =?UTF-8?q?=EB=A7=90=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/Info/Help.tsx | 2 +- frontend/src/component/Info/info.styled.ts | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/component/Info/Help.tsx b/frontend/src/component/Info/Help.tsx index 77aee39..1878c8d 100644 --- a/frontend/src/component/Info/Help.tsx +++ b/frontend/src/component/Info/Help.tsx @@ -51,11 +51,11 @@ const Help = () => {
+

์šฐ์ธก ํ•˜๋‹จ์˜ ๋ฌผ์Œํ‘œ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ด์„œ ๋„์›€๋ง์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ ‘์†์‹œ ๋„์›€๋ง ์ผœ๊ธฐ

-

์šฐ์ธก ํ•˜๋‹จ์˜ ๋ฌผ์Œํ‘œ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ด์„œ ๋„์›€๋ง์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

diff --git a/frontend/src/component/Info/info.styled.ts b/frontend/src/component/Info/info.styled.ts index 6af9537..6846e3b 100644 --- a/frontend/src/component/Info/info.styled.ts +++ b/frontend/src/component/Info/info.styled.ts @@ -122,17 +122,18 @@ export const content = css` `; export const helpSettingWrapper = css` - font-size: 14px; + width: 100%; + font-size: 12px; padding-top: 20px; text-align: center; `; export const helpSetting = (isCheck: boolean) => css` ${flexCenter} - padding-bottom: 10px; + padding-top: 10px; button { - margin-left: 10px; + margin-left: 5px; width: 14px; height: 14px; background-image: url(${checkBox}); From 7dc83342740c4302c0016afa10d762156cb52f35 Mon Sep 17 00:00:00 2001 From: JJongBin Date: Sun, 11 Dec 2022 14:05:49 +0900 Subject: [PATCH 17/21] =?UTF-8?q?[feat]=20#179=20=EC=9E=AC=EC=8B=A4?= =?UTF-8?q?=ED=96=89=EC=8B=9C=20=EB=8B=A4=EC=8B=9C=EC=97=B4=EA=B8=B0=20?= =?UTF-8?q?=EC=B2=B4=ED=81=AC=EB=90=98=EB=8A=94=20=EB=B2=84=EA=B7=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/Info/Help.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/src/component/Info/Help.tsx b/frontend/src/component/Info/Help.tsx index 1878c8d..ec5cb85 100644 --- a/frontend/src/component/Info/Help.tsx +++ b/frontend/src/component/Info/Help.tsx @@ -10,7 +10,7 @@ import * as style from './info.styled'; const Help = () => { const [isShowModal, setIsShowModal] = useState(false); const [animation, setAnimation] = useState('show'); - const [setOpen, isSetOpen] = useState(true); + const [setOpen, isSetOpen] = useState(false); const setOpenModal = () => { isSetOpen(!setOpen); @@ -31,7 +31,10 @@ const Help = () => { useEffect(() => { const openHelp = localStorage.getItem('openHelp'); - if (openHelp === 'open') setIsShowModal(true); + if (openHelp === 'open') { + setIsShowModal(true); + isSetOpen(true); + } }, []); return ( From 10812144f3e25a0fbab1d0ae014d96f2f5a1a4ae Mon Sep 17 00:00:00 2001 From: JJongBin Date: Sun, 11 Dec 2022 14:09:35 +0900 Subject: [PATCH 18/21] =?UTF-8?q?[fix]=20=ED=8C=8C=EC=9D=BC=EB=AA=85=20?= =?UTF-8?q?=EB=B0=8D=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=AA=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/Info/Help.tsx | 2 +- frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/component/Info/Help.tsx b/frontend/src/component/Info/Help.tsx index ec5cb85..bfc5b5f 100644 --- a/frontend/src/component/Info/Help.tsx +++ b/frontend/src/component/Info/Help.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import help from '../../assets/icon/help.svg'; import BoardAndRankInfo from './HelpDescription/BoardAndRankInfo'; -import KeyBoardInfo from './HelpDescription/keyBoardInfo'; +import KeyBoardInfo from './HelpDescription/KeyBoardInfo'; import SidebarInfo from './HelpDescription/SidebarInfo'; import WalkAndUserInfo from './HelpDescription/WalkAndUserInfo'; diff --git a/frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx b/frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx index 04c8f5f..63ce3c1 100644 --- a/frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx +++ b/frontend/src/component/Info/HelpDescription/KeyBoardInfo.tsx @@ -6,7 +6,7 @@ import keyboardShift from '../../../assets/icon/keyboardShift.svg'; import keyboardA from '../../../assets/icon/keyboardA.svg'; import keyboardR from '../../../assets/icon/keyboardR.svg'; -const keyBoardInfo = () => { +const KeyBoardInfo = () => { return (

- ๊ธฐ๋ณธํ‚ค ์กฐ์ž‘๋ฒ•

@@ -40,4 +40,4 @@ const keyBoardInfo = () => { ); }; -export default keyBoardInfo; +export default KeyBoardInfo; From ac12318c3686cb6daf98b49349f02c7c7f5fb0be Mon Sep 17 00:00:00 2001 From: JJongBin Date: Sun, 11 Dec 2022 16:07:54 +0900 Subject: [PATCH 19/21] =?UTF-8?q?[asset]=20=EA=B3=B5=EA=B2=A9=EB=AA=A8?= =?UTF-8?q?=EC=85=98=20asset=20=EC=B6=94=EA=B0=80=20\?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/character/attack/attack.png | Bin 0 -> 9882 bytes frontend/src/assets/character/tool/attack.png | Bin 0 -> 2983 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 frontend/src/assets/character/attack/attack.png create mode 100644 frontend/src/assets/character/tool/attack.png diff --git a/frontend/src/assets/character/attack/attack.png b/frontend/src/assets/character/attack/attack.png new file mode 100644 index 0000000000000000000000000000000000000000..6f8249a410aa8401e404cb4f3ac9edbeabee4da1 GIT binary patch literal 9882 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 literal 0 HcmV?d00001 From 10d0ad8e0b2e96c5e01d8970db9cc83763e9b72a Mon Sep 17 00:00:00 2001 From: JJongBin Date: Sun, 11 Dec 2022 16:11:02 +0900 Subject: [PATCH 20/21] =?UTF-8?q?[feat]=20#180=20=EA=B3=B5=EA=B2=A9?= =?UTF-8?q?=EB=AA=A8=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/character/sprite.json | 1176 ++++++++++------- .../component/Game/Phaser/Player/myPlayer.ts | 24 +- .../component/Game/Phaser/Player/player.ts | 7 + frontend/src/component/Game/game.ts | 21 +- frontend/src/component/Game/util.ts | 9 + 5 files changed, 725 insertions(+), 512 deletions(-) diff --git a/frontend/src/assets/character/sprite.json b/frontend/src/assets/character/sprite.json index d575f5d..785a05a 100644 --- a/frontend/src/assets/character/sprite.json +++ b/frontend/src/assets/character/sprite.json @@ -3,190 +3,211 @@ { "filename": "base1", "frame": { - "x": 33, - "y": 17, - "w": 30, - "h": 30 + "x": 0, + "y": 0, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "base2", "frame": { - "x": 129, - "y": 17, - "w": 30, - "h": 30 + "x": 96, + "y": 0, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "base3", "frame": { - "x": 225, - "y": 17, - "w": 30, - "h": 30 + "x": 192, + "y": 0, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "base4", "frame": { - "x": 321, - "y": 17, - "w": 30, - "h": 30 + "x": 288, + "y": 0, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "base5", "frame": { - "x": 417, - "y": 17, - "w": 30, - "h": 30 + "x": 384, + "y": 0, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "base6", "frame": { - "x": 513, - "y": 17, - "w": 30, - "h": 30 + "x": 480, + "y": 0, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "base7", "frame": { - "x": 609, - "y": 17, - "w": 30, - "h": 30 + "x": 576, + "y": 0, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "base8", "frame": { - "x": 705, - "y": 17, - "w": 30, - "h": 30 + "x": 672, + "y": 0, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "base9", "frame": { - "x": 801, - "y": 17, - "w": 30, - "h": 30 + "x": 768, + "y": 0, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 + } + }, + { + "filename": "base10", + "frame": { + "x": 864, + "y": 0, + "w": 96, + "h": 64 + }, + "rotated": false, + "trimmed": false, + "spriteSourceSize": { + "x": 0, + "y": 0, + "w": 96, + "h": 64 + }, + "sourceSize": { + "w": 96, + "h": 64 } }, { @@ -378,1138 +399,1285 @@ "h": 0 } }, + { + "filename": "nohair10", + "frame": { + "x": 0, + "y": 0, + "w": 0, + "h": 0 + }, + "rotated": false, + "trimmed": false, + "spriteSourceSize": { + "x": 0, + "y": 0, + "w": 0, + "h": 0 + }, + "sourceSize": { + "w": 0, + "h": 0 + } + }, { "filename": "longhair1", "frame": { - "x": 33, - "y": 81, - "w": 30, - "h": 30 + "x": 0, + "y": 64, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "longhair2", "frame": { - "x": 129, - "y": 81, - "w": 30, - "h": 30 + "x": 96, + "y": 64, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "longhair3", "frame": { - "x": 225, - "y": 81, - "w": 30, - "h": 30 + "x": 192, + "y": 64, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "longhair4", "frame": { - "x": 321, - "y": 81, - "w": 30, - "h": 30 + "x": 288, + "y": 64, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "longhair5", "frame": { - "x": 417, - "y": 81, - "w": 30, - "h": 30 + "x": 384, + "y": 64, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "longhair6", "frame": { - "x": 513, - "y": 81, - "w": 30, - "h": 30 + "x": 480, + "y": 64, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "longhair7", "frame": { - "x": 609, - "y": 81, - "w": 30, - "h": 30 + "x": 576, + "y": 64, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "longhair8", "frame": { - "x": 705, - "y": 81, - "w": 30, - "h": 30 + "x": 672, + "y": 64, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "longhair9", "frame": { - "x": 801, - "y": 81, - "w": 30, - "h": 30 + "x": 768, + "y": 64, + "w": 96, + "h": 64 + }, + "rotated": false, + "trimmed": false, + "spriteSourceSize": { + "x": 0, + "y": 0, + "w": 96, + "h": 64 + }, + "sourceSize": { + "w": 96, + "h": 64 + } + }, + { + "filename": "longhair10", + "frame": { + "x": 864, + "y": 64, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "mophair1", "frame": { - "x": 33, - "y": 145, - "w": 30, - "h": 30 + "x": 0, + "y": 128, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "mophair2", "frame": { - "x": 129, - "y": 145, - "w": 30, - "h": 30 + "x": 96, + "y": 128, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "mophair3", "frame": { - "x": 225, - "y": 145, - "w": 30, - "h": 30 + "x": 192, + "y": 128, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "mophair4", "frame": { - "x": 321, - "y": 145, - "w": 30, - "h": 30 + "x": 288, + "y": 128, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "mophair5", "frame": { - "x": 417, - "y": 145, - "w": 30, - "h": 30 + "x": 384, + "y": 128, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "mophair6", "frame": { - "x": 513, - "y": 145, - "w": 30, - "h": 30 + "x": 480, + "y": 128, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "mophair7", "frame": { - "x": 609, - "y": 145, - "w": 30, - "h": 30 + "x": 576, + "y": 128, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "mophair8", "frame": { - "x": 705, - "y": 145, - "w": 30, - "h": 30 + "x": 672, + "y": 128, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "mophair9", "frame": { - "x": 801, - "y": 145, - "w": 30, - "h": 30 + "x": 768, + "y": 128, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 + } + }, + { + "filename": "mophair10", + "frame": { + "x": 864, + "y": 128, + "w": 96, + "h": 64 + }, + "rotated": false, + "trimmed": false, + "spriteSourceSize": { + "x": 0, + "y": 0, + "w": 96, + "h": 64 + }, + "sourceSize": { + "w": 96, + "h": 64 } }, { "filename": "shorthair1", "frame": { - "x": 33, - "y": 209, - "w": 30, - "h": 30 + "x": 0, + "y": 192, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "shorthair2", "frame": { - "x": 129, - "y": 209, - "w": 30, - "h": 30 + "x": 96, + "y": 192, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "shorthair3", "frame": { - "x": 225, - "y": 209, - "w": 30, - "h": 30 + "x": 192, + "y": 192, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "shorthair4", "frame": { - "x": 321, - "y": 209, - "w": 30, - "h": 30 + "x": 288, + "y": 192, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "shorthair5", "frame": { - "x": 417, - "y": 209, - "w": 30, - "h": 30 + "x": 384, + "y": 192, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "shorthair6", "frame": { - "x": 513, - "y": 209, - "w": 30, - "h": 30 + "x": 480, + "y": 192, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "shorthair7", "frame": { - "x": 609, - "y": 209, - "w": 30, - "h": 30 + "x": 576, + "y": 192, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "shorthair8", "frame": { - "x": 705, - "y": 209, - "w": 30, - "h": 30 + "x": 672, + "y": 192, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "shorthair9", "frame": { - "x": 801, - "y": 209, - "w": 30, - "h": 30 + "x": 768, + "y": 192, + "w": 96, + "h": 64 + }, + "rotated": false, + "trimmed": false, + "spriteSourceSize": { + "x": 0, + "y": 0, + "w": 96, + "h": 64 + }, + "sourceSize": { + "w": 96, + "h": 64 + } + }, + { + "filename": "shorthair10", + "frame": { + "x": 864, + "y": 192, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "spikeyhair1", "frame": { - "x": 33, - "y": 273, - "w": 30, - "h": 30 + "x": 0, + "y": 256, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "spikeyhair2", "frame": { - "x": 129, - "y": 273, - "w": 30, - "h": 30 + "x": 96, + "y": 256, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "spikeyhair3", "frame": { - "x": 225, - "y": 273, - "w": 30, - "h": 30 + "x": 192, + "y": 256, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "spikeyhair4", "frame": { - "x": 321, - "y": 273, - "w": 30, - "h": 30 + "x": 288, + "y": 256, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "spikeyhair5", "frame": { - "x": 417, - "y": 273, - "w": 30, - "h": 30 + "x": 384, + "y": 256, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "spikeyhair6", "frame": { - "x": 513, - "y": 273, - "w": 30, - "h": 30 + "x": 480, + "y": 256, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "spikeyhair7", "frame": { - "x": 609, - "y": 273, - "w": 30, - "h": 30 + "x": 576, + "y": 256, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "spikeyhair8", "frame": { - "x": 705, - "y": 273, - "w": 30, - "h": 30 + "x": 672, + "y": 256, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "spikeyhair9", "frame": { - "x": 801, - "y": 273, - "w": 30, - "h": 30 + "x": 768, + "y": 256, + "w": 96, + "h": 64 + }, + "rotated": false, + "trimmed": false, + "spriteSourceSize": { + "x": 0, + "y": 0, + "w": 96, + "h": 64 + }, + "sourceSize": { + "w": 96, + "h": 64 + } + }, + { + "filename": "spikeyhair10", + "frame": { + "x": 864, + "y": 256, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "bowlhair1", "frame": { - "x": 33, - "y": 337, - "w": 30, - "h": 30 + "x": 0, + "y": 320, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "bowlhair2", "frame": { - "x": 129, - "y": 337, - "w": 30, - "h": 30 + "x": 96, + "y": 320, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "bowlhair3", "frame": { - "x": 225, - "y": 337, - "w": 30, - "h": 30 + "x": 192, + "y": 320, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "bowlhair4", "frame": { - "x": 321, - "y": 337, - "w": 30, - "h": 30 + "x": 288, + "y": 320, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "bowlhair5", "frame": { - "x": 417, - "y": 337, - "w": 30, - "h": 30 + "x": 384, + "y": 320, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "bowlhair6", "frame": { - "x": 513, - "y": 337, - "w": 30, - "h": 30 + "x": 480, + "y": 320, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "bowlhair7", "frame": { - "x": 609, - "y": 337, - "w": 30, - "h": 30 + "x": 576, + "y": 320, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "bowlhair8", "frame": { - "x": 705, - "y": 337, - "w": 30, - "h": 30 + "x": 672, + "y": 320, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "bowlhair9", "frame": { - "x": 801, - "y": 337, - "w": 30, - "h": 30 + "x": 768, + "y": 320, + "w": 96, + "h": 64 + }, + "rotated": false, + "trimmed": false, + "spriteSourceSize": { + "x": 0, + "y": 0, + "w": 96, + "h": 64 + }, + "sourceSize": { + "w": 96, + "h": 64 + } + }, + { + "filename": "bowlhair10", + "frame": { + "x": 864, + "y": 320, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "curlyhair1", "frame": { - "x": 33, - "y": 401, - "w": 30, - "h": 30 + "x": 0, + "y": 384, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "curlyhair2", "frame": { - "x": 129, - "y": 401, - "w": 30, - "h": 30 + "x": 96, + "y": 384, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "curlyhair3", "frame": { - "x": 225, - "y": 401, - "w": 30, - "h": 30 + "x": 192, + "y": 384, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "curlyhair4", "frame": { - "x": 321, - "y": 401, - "w": 30, - "h": 30 + "x": 288, + "y": 384, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "curlyhair5", "frame": { - "x": 417, - "y": 401, - "w": 30, - "h": 30 + "x": 384, + "y": 384, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "curlyhair6", "frame": { - "x": 513, - "y": 401, - "w": 30, - "h": 30 + "x": 480, + "y": 384, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "curlyhair7", "frame": { - "x": 609, - "y": 401, - "w": 30, - "h": 30 + "x": 576, + "y": 384, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "curlyhair8", "frame": { - "x": 705, - "y": 401, - "w": 30, - "h": 30 + "x": 672, + "y": 384, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } }, { "filename": "curlyhair9", "frame": { - "x": 801, - "y": 401, - "w": 30, - "h": 30 + "x": 768, + "y": 384, + "w": 96, + "h": 64 + }, + "rotated": false, + "trimmed": false, + "spriteSourceSize": { + "x": 0, + "y": 0, + "w": 96, + "h": 64 + }, + "sourceSize": { + "w": 96, + "h": 64 + } + }, + { + "filename": "curlyhair10", + "frame": { + "x": 864, + "y": 384, + "w": 96, + "h": 64 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, - "w": 30, - "h": 30 + "w": 96, + "h": 64 }, "sourceSize": { - "w": 30, - "h": 30 + "w": 96, + "h": 64 } } ], diff --git a/frontend/src/component/Game/Phaser/Player/myPlayer.ts b/frontend/src/component/Game/Phaser/Player/myPlayer.ts index 8e8d2b0..a8cf822 100644 --- a/frontend/src/component/Game/Phaser/Player/myPlayer.ts +++ b/frontend/src/component/Game/Phaser/Player/myPlayer.ts @@ -29,9 +29,12 @@ export class MyPlayer extends Player { } } - checkAndSetState(state: string, time: number = 0) { + checkAndSetState(state: string, time: number = 0, isAttack: boolean) { if (this.isChangeState) this.state = state; - + if (isAttack) { + this.isAttack = true; + setTimeout(() => (this.isAttack = false), time); + } if (time) { this.isChangeState = false; setTimeout(() => (this.isChangeState = true), time); @@ -45,10 +48,14 @@ export class MyPlayer extends Player { this.state = 'wait'; this.scene.input.keyboard.removeAllKeys(true); } else { + if (this.isAttack) return; const cursors = this.scene.input.keyboard.createCursorKeys(); const keyR = this.scene.input.keyboard.addKey( Phaser.Input.Keyboard.KeyCodes.R ); + const keyA = this.scene.input.keyboard.addKey( + Phaser.Input.Keyboard.KeyCodes.A + ); const keyShift = this.scene.input.keyboard.addKey( Phaser.Input.Keyboard.KeyCodes.SHIFT ); @@ -59,16 +66,19 @@ export class MyPlayer extends Player { // motion if (keyR.isDown) { this.speed = 1.5; - this.checkAndSetState('roll', 100); + this.checkAndSetState('roll', 100, false); + } else if (keyA.isDown) { + this.speed = 1; + this.checkAndSetState('attack', 800, true); } else if (keyShift.isDown) { this.speed = 1.2; - this.checkAndSetState('run'); + this.checkAndSetState('run', 0, false); } else if (keySpace.isDown) { this.speed = 1; - this.checkAndSetState('jump', 500); + this.checkAndSetState('jump', 500, false); } else { this.speed = 1; - this.checkAndSetState('walk'); + this.checkAndSetState('walk', 0, false); } this.getBody().setVelocity(0, 0); @@ -85,7 +95,7 @@ export class MyPlayer extends Player { changePosition(this, move.x * this.speed, move.y * this.speed); } else { - this.checkAndSetState('wait'); + this.checkAndSetState('wait', 0, false); } } diff --git a/frontend/src/component/Game/Phaser/Player/player.ts b/frontend/src/component/Game/Phaser/Player/player.ts index daebb60..bbf8163 100644 --- a/frontend/src/component/Game/Phaser/Player/player.ts +++ b/frontend/src/component/Game/Phaser/Player/player.ts @@ -4,10 +4,12 @@ export class Player extends Phaser.Physics.Arcade.Sprite { character: Phaser.GameObjects.Sprite | undefined; hair: Phaser.GameObjects.Sprite | undefined; dust: Phaser.GameObjects.Sprite | undefined; + tool: Phaser.GameObjects.Sprite | undefined; nicknameText: Phaser.GameObjects.Text | undefined; direction: string; isChangeState: boolean; isCanMove: boolean; + isAttack: boolean; state: string; x: number; y: number; @@ -37,6 +39,7 @@ export class Player extends Phaser.Physics.Arcade.Sprite { this.heldDirection = []; this.id = id; this.isCanMove = true; + this.isAttack = false; this.character = this.scene.add.sprite(this.x, this.y, 'character-wait'); this.character.setScale(3); @@ -44,6 +47,9 @@ export class Player extends Phaser.Physics.Arcade.Sprite { this.hair = this.scene.add.sprite(this.x, this.y, `${this.hairName}-wait`); this.hair.setScale(3); + this.tool = this.scene.add.sprite(this.x, this.y, 'attackTool'); + this.tool.setScale(3); + this.dust = this.scene.add.sprite(this.x - 20, this.y + 5, 'dust'); this.dust.setScale(3); @@ -67,6 +73,7 @@ export class Player extends Phaser.Physics.Arcade.Sprite { delete() { this.character?.destroy(); this.hair?.destroy(); + this.tool?.destroy(); this.nicknameText?.destroy(); this.dust?.destroy(); } diff --git a/frontend/src/component/Game/game.ts b/frontend/src/component/Game/game.ts index fb8d230..d674b2c 100644 --- a/frontend/src/component/Game/game.ts +++ b/frontend/src/component/Game/game.ts @@ -14,6 +14,8 @@ import walkImg from '../../assets/character/walk/walk.png'; import runImg from '../../assets/character/run/run.png'; import rollImg from '../../assets/character/roll/roll.png'; import jumpImg from '../../assets/character/jump/jump.png'; +import attackImg from '../../assets/character/attack/attack.png'; +import attackTool from '../../assets/character/tool/attack.png'; import { stringObjectType } from '../../types/types'; const characterImg: stringObjectType = { @@ -22,6 +24,7 @@ const characterImg: stringObjectType = { run: runImg, roll: rollImg, jump: jumpImg, + attack: attackImg, }; export default class Game extends Phaser.Scene { @@ -92,7 +95,7 @@ export default class Game extends Phaser.Scene { this.load.audio('christmas', [christmas]); // ์บ๋ฆญํ„ฐ ๋™์ž‘ - const actions = ['wait', 'walk', 'run', 'roll', 'jump']; + const actions = ['wait', 'walk', 'run', 'roll', 'jump', 'attack']; actions.forEach((action: string) => { this.load.atlas(action, characterImg[action], spriteJSON); @@ -103,6 +106,11 @@ export default class Game extends Phaser.Scene { frameWidth: 24, frameHeight: 9, }); + + this.load.spritesheet('attackTool', attackTool, { + frameWidth: 96, + frameHeight: 64, + }); } create() { @@ -128,6 +136,7 @@ export default class Game extends Phaser.Scene { { action: 'run', start: 1, end: 8 }, { action: 'roll', start: 2, end: 5 }, { action: 'jump', start: 1, end: 9 }, + { action: 'attack', start: 1, end: 10 }, ]; const hairInfo = [ @@ -180,6 +189,16 @@ export default class Game extends Phaser.Scene { repeat: -1, }); + this.anims.create({ + key: 'attackTool', + frames: this.anims.generateFrameNames('attackTool', { + start: 0, + end: 9, + }), + frameRate: 10, + repeat: -1, + }); + emitter.emit('ready'); } diff --git a/frontend/src/component/Game/util.ts b/frontend/src/component/Game/util.ts index b3651b7..1951040 100644 --- a/frontend/src/component/Game/util.ts +++ b/frontend/src/component/Game/util.ts @@ -13,6 +13,13 @@ export const changeState = (player: any) => { player.dust.visible = false; player.dust.stop(); } + if (player.state === 'attack') { + player.tool.visible = true; + player.tool.play('attackTool'); + } else { + player.tool.visible = false; + player.tool.stop(); + } }; export const changeDirection = (player: any, direction: string) => { @@ -22,6 +29,7 @@ export const changeDirection = (player: any, direction: string) => { player.character.toggleFlipX(); player.hair.toggleFlipX(); player.dust.toggleFlipX(); + player.tool.toggleFlipX(); player.direction = direction; }; @@ -58,6 +66,7 @@ export const changePosition = (player: any, x: number, y: number) => { player.character.setPosition(player.x, player.y); player.hair.setPosition(player.x, player.y); + player.tool.setPosition(player.x, player.y); player.nicknameText.x = player.x - player.nickname.length * 3.5; player.nicknameText.y = player.y + 25; From bd4f104f63dc03d8f4f6f302cc52cc5a89aa88c1 Mon Sep 17 00:00:00 2001 From: JJongBin Date: Sun, 11 Dec 2022 16:28:51 +0900 Subject: [PATCH 21/21] =?UTF-8?q?[fix]=20#180=20=EC=84=9C=EB=B2=84=20?= =?UTF-8?q?=EA=B3=B5=EA=B2=A9=20=EB=8F=99=EC=9E=91=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/src/socket/enum/player.enum.ts | 1 + .../component/Game/Phaser/Player/myPlayer.ts | 87 ++++++++++--------- 2 files changed, 45 insertions(+), 43 deletions(-) diff --git a/backend/src/socket/enum/player.enum.ts b/backend/src/socket/enum/player.enum.ts index 903d484..79361c5 100644 --- a/backend/src/socket/enum/player.enum.ts +++ b/backend/src/socket/enum/player.enum.ts @@ -9,4 +9,5 @@ export enum stateOptions { WALK = 'walk', ROLL = 'roll', JUMP = 'jump', + ATTACK = 'attack', } diff --git a/frontend/src/component/Game/Phaser/Player/myPlayer.ts b/frontend/src/component/Game/Phaser/Player/myPlayer.ts index a8cf822..161248e 100644 --- a/frontend/src/component/Game/Phaser/Player/myPlayer.ts +++ b/frontend/src/component/Game/Phaser/Player/myPlayer.ts @@ -48,54 +48,55 @@ export class MyPlayer extends Player { this.state = 'wait'; this.scene.input.keyboard.removeAllKeys(true); } else { - if (this.isAttack) return; - const cursors = this.scene.input.keyboard.createCursorKeys(); - const keyR = this.scene.input.keyboard.addKey( - Phaser.Input.Keyboard.KeyCodes.R - ); - const keyA = this.scene.input.keyboard.addKey( - Phaser.Input.Keyboard.KeyCodes.A - ); - const keyShift = this.scene.input.keyboard.addKey( - Phaser.Input.Keyboard.KeyCodes.SHIFT - ); - const keySpace = this.scene.input.keyboard.addKey( - Phaser.Input.Keyboard.KeyCodes.SPACE - ); + if (!this.isAttack) { + const cursors = this.scene.input.keyboard.createCursorKeys(); + const keyR = this.scene.input.keyboard.addKey( + Phaser.Input.Keyboard.KeyCodes.R + ); + const keyA = this.scene.input.keyboard.addKey( + Phaser.Input.Keyboard.KeyCodes.A + ); + const keyShift = this.scene.input.keyboard.addKey( + Phaser.Input.Keyboard.KeyCodes.SHIFT + ); + const keySpace = this.scene.input.keyboard.addKey( + Phaser.Input.Keyboard.KeyCodes.SPACE + ); - // motion - if (keyR.isDown) { - this.speed = 1.5; - this.checkAndSetState('roll', 100, false); - } else if (keyA.isDown) { - this.speed = 1; - this.checkAndSetState('attack', 800, true); - } else if (keyShift.isDown) { - this.speed = 1.2; - this.checkAndSetState('run', 0, false); - } else if (keySpace.isDown) { - this.speed = 1; - this.checkAndSetState('jump', 500, false); - } else { - this.speed = 1; - this.checkAndSetState('walk', 0, false); - } + // motion + if (keyR.isDown) { + this.speed = 1.5; + this.checkAndSetState('roll', 100, false); + } else if (keyA.isDown) { + this.speed = 1; + this.checkAndSetState('attack', 800, true); + } else if (keyShift.isDown) { + this.speed = 1.2; + this.checkAndSetState('run', 0, false); + } else if (keySpace.isDown) { + this.speed = 1; + this.checkAndSetState('jump', 500, false); + } else { + this.speed = 1; + this.checkAndSetState('walk', 0, false); + } - this.getBody().setVelocity(0, 0); + this.getBody().setVelocity(0, 0); - sortHeldDirection(this, cursors); - if (this.heldDirection.length) { - const move: any = calcMoveToPos(this, this.heldDirection); - this.getBody().setVelocity(move.x * this.speed, move.y * this.speed); + sortHeldDirection(this, cursors); + if (this.heldDirection.length) { + const move: any = calcMoveToPos(this, this.heldDirection); + this.getBody().setVelocity(move.x * this.speed, move.y * this.speed); - if (move.x !== 0) { - const direction = move.x > 0 ? 'right' : 'left'; - changeDirection(this, direction); - } + if (move.x !== 0) { + const direction = move.x > 0 ? 'right' : 'left'; + changeDirection(this, direction); + } - changePosition(this, move.x * this.speed, move.y * this.speed); - } else { - this.checkAndSetState('wait', 0, false); + changePosition(this, move.x * this.speed, move.y * this.speed); + } else { + this.checkAndSetState('wait', 0, false); + } } }