diff --git a/qwilight-fe/.env b/qwilight-fe/.env index 6e29c1b..9a4a14b 100644 --- a/qwilight-fe/.env +++ b/qwilight-fe/.env @@ -1,2 +1 @@ PORT = 3001 -API = http://localhost:7301 diff --git a/qwilight-fe/src/Language.json b/qwilight-fe/src/Language.json index 9a36505..1130009 100644 --- a/qwilight-fe/src/Language.json +++ b/qwilight-fe/src/Language.json @@ -25,22 +25,10 @@ "avatarCountText": "%d 명", "avatarDate": "마지막 접속일: %s", "avatarDateText": "활동 추세", - "avatarFavorites10KText": "⑩K 가장 많이 플레이 TOP 10", - "avatarFavorites14KText": "⑭K 가장 많이 플레이 TOP 10", - "avatarFavorites24KText": "24 가장 많이 플레이 TOP 10", - "avatarFavorites48KText": "48 가장 많이 플레이 TOP 10", - "avatarFavorites5KText": "⑤K 가장 많이 플레이 TOP 10", - "avatarFavorites7KText": "⑦K 가장 많이 플레이 TOP 10", - "avatarFavorites9KText": "9K 가장 많이 플레이 TOP 10", + "avatarFavoritesText": "가장 많이 플레이 TOP 10", "avatarIntroText": "자기소개", - "avatarLasts10KText": "⑩K 마지막 플레이 TOP 10", - "avatarLasts14KText": "⑭K 마지막 플레이 TOP 10", - "avatarLasts24KText": "24 마지막 플레이 TOP 10", - "avatarLasts48KText": "48 마지막 플레이 TOP 10", - "avatarLasts5KText": "⑤K 마지막 플레이 TOP 10", - "avatarLasts7KText": "⑦K 마지막 플레이 TOP 10", - "avatarLasts9KText": "9K 마지막 플레이 TOP 10", - "avatarQuitText": "랭크", + "avatarLastsText": "마지막 플레이 TOP 10", + "avatarQuitStatusText": "랭크", "bannedNoteFile": "불법 BMS, BMSON 노트 파일은 키음 개수를 확인하여 자체적으로 걸러집니다.
만약 불법 BMS/BMSON 노트 파일을 발견하시면 %s로 알려주시면 삭제합니다.", "commentSiteName": "성과 알림방", "defaultSiteName": "일반 대화방", @@ -170,22 +158,10 @@ "avatarCountText": "%d people", "avatarDate": "Last Connection Date: %s", "avatarDateText": "Activity Trends", - "avatarFavorites10KText": "⑩K Most plays TOP 10", - "avatarFavorites14KText": "⑭K Most plays TOP 10", - "avatarFavorites24KText": "24 Most plays TOP 10", - "avatarFavorites48KText": "48 Most plays TOP 10", - "avatarFavorites5KText": "⑤K Most plays TOP 10", - "avatarFavorites7KText": "⑦K Most plays TOP 10", - "avatarFavorites9KText": "9K Most plays TOP 10", + "avatarFavoritesText": "Most plays TOP 10", "avatarIntroText": "Introduce yourself", - "avatarLasts10KText": "⑩K Last plays TOP 10", - "avatarLasts14KText": "⑭K Last plays TOP 10", - "avatarLasts24KText": "24 Last plays TOP 10", - "avatarLasts48KText": "48 Last plays TOP 10", - "avatarLasts5KText": "⑤K Last plays TOP 10", - "avatarLasts7KText": "⑦K Last plays TOP 10", - "avatarLasts9KText": "9K Last plays TOP 10", - "avatarQuitText": "Rank", + "avatarLastsText": "Last plays TOP 10", + "avatarQuitStatusText": "Rank", "bannedNoteFile": "Illegal BMS and BMSON note files are filtered by themselves by checking the number of key notes.
If you find illegal BMS/BMSON note file, please let us know via %s and delete it.", "commentSiteName": "Performance notification room", "defaultSiteName": "General chat room", diff --git a/qwilight-fe/src/avatar/AvatarView.tsx b/qwilight-fe/src/avatar/AvatarView.tsx index 576e6f7..9c3c0fe 100644 --- a/qwilight-fe/src/avatar/AvatarView.tsx +++ b/qwilight-fe/src/avatar/AvatarView.tsx @@ -23,7 +23,7 @@ import { formatText, getDefaultAvatarID } from "src/Utility"; import { wwwAPI } from "src/Www"; import AvatarDrawing from "src/AvatarDrawing"; -import QuitStatusValues from "src/avatar/QuitValues"; +import QuitStatusValues from "src/avatar/QuitStatusValues"; import AvatarTitle from "src/AvatarTitle"; import { AvatarViewLoading } from "src/Loading"; @@ -69,6 +69,8 @@ getAvatarLasts48K, getAvatarWwwLevels, getAvatar, + favoritesTabPosition, + lastsTabPosition, } = useAvatarStore(); const { siteAvatarID, isSignedIn, setSignInOpened } = useSiteStore(); @@ -102,26 +104,33 @@ useEffect(() => { if (avatarID) { - Promise.all([ - getAvatarFavorites5K(t), - getAvatarFavorites7K(t), - getAvatarFavorites9K(t), - getAvatarFavorites10K(t), - getAvatarFavorites14K(t), - getAvatarFavorites24K(t), - getAvatarFavorites48K(t), - getAvatarLasts5K(), - getAvatarLasts7K(), - getAvatarLasts9K(), - getAvatarLasts10K(), - getAvatarLasts14K(), - getAvatarLasts24K(), - getAvatarLasts48K(), - getAvatarWwwLevels(), - ]); + switch (favoritesTabPosition) { + case 0: + getAvatarFavorites5K(t); + break; + case 1: + getAvatarFavorites7K(t); + break; + case 2: + getAvatarFavorites9K(t); + break; + case 3: + getAvatarFavorites10K(t); + break; + case 4: + getAvatarFavorites14K(t); + break; + case 5: + getAvatarFavorites24K(t); + break; + case 6: + getAvatarFavorites48K(t); + break; + } } }, [ avatarID, + favoritesTabPosition, getAvatarFavorites10K, getAvatarFavorites14K, getAvatarFavorites24K, @@ -129,6 +138,38 @@ getAvatarFavorites5K, getAvatarFavorites7K, getAvatarFavorites9K, + t, + ]); + + useEffect(() => { + if (avatarID) { + switch (lastsTabPosition) { + case 0: + getAvatarLasts5K(); + break; + case 1: + getAvatarLasts7K(); + break; + case 2: + getAvatarLasts9K(); + break; + case 3: + getAvatarLasts10K(); + break; + case 4: + getAvatarLasts14K(); + break; + case 5: + getAvatarLasts24K(); + break; + case 6: + getAvatarLasts48K(); + break; + } + } + }, [ + avatarID, + lastsTabPosition, getAvatarLasts10K, getAvatarLasts14K, getAvatarLasts24K, @@ -136,7 +177,6 @@ getAvatarLasts5K, getAvatarLasts7K, getAvatarLasts9K, - getAvatarWwwLevels, t, ]); @@ -322,6 +362,8 @@ )} + + @@ -332,10 +374,18 @@ - - - + + + + + + + + + + + diff --git a/qwilight-fe/src/avatar/FavoritesView.tsx b/qwilight-fe/src/avatar/FavoritesView.tsx index 2f9b510..0f32b84 100644 --- a/qwilight-fe/src/avatar/FavoritesView.tsx +++ b/qwilight-fe/src/avatar/FavoritesView.tsx @@ -1,10 +1,18 @@ import { observer } from "mobx-react-lite"; import { useTranslation } from "react-i18next"; -import { Badge, Col, ListGroup, Row } from "reactstrap"; +import { + Badge, + ListGroup, + Nav, + NavItem, + NavLink, + TabContent, + TabPane, +} from "reactstrap"; import { useAvatarStore } from "src/Stores"; import NoteItem from "src/note/NoteItem"; -import { AvatarLoading } from "../Loading"; +import { AvatarLoading } from "src/Loading"; export default observer(() => { const { @@ -23,235 +31,269 @@ isFavorites24KLoading, isFavorites48KLoading, avatarID, + favoritesTabPosition, + setFavoritesTabPosition, } = useAvatarStore(); const { t } = useTranslation(); + const getProperties = (tabPosition: number) => ({ + className: favoritesTabPosition === tabPosition ? "active route" : "route", + onClick: () => { + setFavoritesTabPosition(tabPosition); + }, + }); + return ( - - - - {t("avatarFavorites5KText")} - {isFavorites5KLoading ? ( - - ) : ( - favorites5K.map( - ({ - noteID, - artist, - title, - genre, - levelText, - level, - fittedText, - }) => ( - - ), - ) - )} - - - - - {t("avatarFavorites7KText")} - {isFavorites7KLoading ? ( - - ) : ( - favorites7K.map( - ({ - noteID, - artist, - title, - genre, - levelText, - level, - fittedText, - }) => ( - - ), - ) - )} - - - - - {t("avatarFavorites9KText")} - {isFavorites9KLoading ? ( - - ) : ( - favorites9K.map( - ({ - noteID, - artist, - title, - genre, - levelText, - level, - fittedText, - }) => ( - - ), - ) - )} - - - - - {t("avatarFavorites10KText")} - {isFavorites10KLoading ? ( - - ) : ( - favorites10K.map( - ({ - noteID, - artist, - title, - genre, - levelText, - level, - fittedText, - }) => ( - - ), - ) - )} - - - - - {t("avatarFavorites14KText")} - {isFavorites14KLoading ? ( - - ) : ( - favorites14K.map( - ({ - noteID, - artist, - title, - genre, - levelText, - level, - fittedText, - }) => ( - - ), - ) - )} - - - - - {t("avatarFavorites24KText")} - {isFavorites24KLoading ? ( - - ) : ( - favorites24K.map( - ({ - noteID, - artist, - title, - genre, - levelText, - level, - fittedText, - }) => ( - - ), - ) - )} - - - - - {t("avatarFavorites48KText")} - {isFavorites48KLoading ? ( - - ) : ( - favorites48K.map( - ({ - noteID, - artist, - title, - genre, - levelText, - level, - fittedText, - }) => ( - - ), - ) - )} - - - + <> + + + + + {t("avatarFavoritesText")} + {isFavorites5KLoading ? ( + + ) : ( + favorites5K.map( + ({ + noteID, + artist, + title, + genre, + levelText, + level, + fittedText, + }) => ( + + ), + ) + )} + + + + + {t("avatarFavoritesText")} + {isFavorites7KLoading ? ( + + ) : ( + favorites7K.map( + ({ + noteID, + artist, + title, + genre, + levelText, + level, + fittedText, + }) => ( + + ), + ) + )} + + + + + {t("avatarFavoritesText")} + {isFavorites9KLoading ? ( + + ) : ( + favorites9K.map( + ({ + noteID, + artist, + title, + genre, + levelText, + level, + fittedText, + }) => ( + + ), + ) + )} + + + + + {t("avatarFavoritesText")} + {isFavorites10KLoading ? ( + + ) : ( + favorites10K.map( + ({ + noteID, + artist, + title, + genre, + levelText, + level, + fittedText, + }) => ( + + ), + ) + )} + + + + + {t("avatarFavoritesText")} + {isFavorites14KLoading ? ( + + ) : ( + favorites14K.map( + ({ + noteID, + artist, + title, + genre, + levelText, + level, + fittedText, + }) => ( + + ), + ) + )} + + + + + {t("avatarFavoritesText")} + {isFavorites24KLoading ? ( + + ) : ( + favorites24K.map( + ({ + noteID, + artist, + title, + genre, + levelText, + level, + fittedText, + }) => ( + + ), + ) + )} + + + + + {t("avatarFavoritesText")} + {isFavorites48KLoading ? ( + + ) : ( + favorites48K.map( + ({ + noteID, + artist, + title, + genre, + levelText, + level, + fittedText, + }) => ( + + ), + ) + )} + + + + ); }); diff --git a/qwilight-fe/src/avatar/LastsView.tsx b/qwilight-fe/src/avatar/LastsView.tsx index d87355b..b4faa20 100644 --- a/qwilight-fe/src/avatar/LastsView.tsx +++ b/qwilight-fe/src/avatar/LastsView.tsx @@ -1,6 +1,14 @@ import { observer } from "mobx-react-lite"; import { useTranslation } from "react-i18next"; -import { Badge, Col, ListGroup, Row } from "reactstrap"; +import { + Badge, + ListGroup, + Nav, + NavItem, + NavLink, + TabContent, + TabPane, +} from "reactstrap"; import { useAvatarStore } from "src/Stores"; import NoteItem from "src/note/NoteItem"; @@ -22,237 +30,271 @@ isLasts14KLoading, isLasts24KLoading, isLasts48KLoading, + lastsTabPosition, + setLastsTabPosition, } = useAvatarStore(); const { t } = useTranslation(); const { avatarID } = useAvatarStore(); + const getProperties = (tabPosition: number) => ({ + className: lastsTabPosition === tabPosition ? "active route" : "route", + onClick: () => { + setLastsTabPosition(tabPosition); + }, + }); + return ( - - - - {t("avatarLasts5KText")} - {isLasts5KLoading ? ( - - ) : ( - lasts5K.map( - ({ - noteID, - artist, - title, - genre, - levelText, - level, - fittedText, - }) => ( - - ), - ) - )} - - - - - {t("avatarLasts7KText")} - {isLasts7KLoading ? ( - - ) : ( - lasts7K.map( - ({ - noteID, - artist, - title, - genre, - levelText, - level, - fittedText, - }) => ( - - ), - ) - )} - - - - - {t("avatarLasts9KText")} - {isLasts9KLoading ? ( - - ) : ( - lasts9K.map( - ({ - noteID, - artist, - title, - genre, - levelText, - level, - fittedText, - }) => ( - - ), - ) - )} - - - - - {t("avatarLasts10KText")} - {isLasts10KLoading ? ( - - ) : ( - lasts10K.map( - ({ - noteID, - artist, - title, - genre, - levelText, - level, - fittedText, - }) => ( - - ), - ) - )} - - - - - {t("avatarLasts14KText")} - {isLasts14KLoading ? ( - - ) : ( - lasts14K.map( - ({ - noteID, - artist, - title, - genre, - levelText, - level, - fittedText, - }) => ( - - ), - ) - )} - - - - - {t("avatarLasts24KText")} - {isLasts24KLoading ? ( - - ) : ( - lasts24K.map( - ({ - noteID, - artist, - title, - genre, - levelText, - level, - fittedText, - }) => ( - - ), - ) - )} - - - - - {t("avatarLasts48KText")} - {isLasts48KLoading ? ( - - ) : ( - lasts48K.map( - ({ - noteID, - artist, - title, - genre, - levelText, - level, - fittedText, - }) => ( - - ), - ) - )} - - - + <> + + + + + {t("avatarLastsText")} + {isLasts5KLoading ? ( + + ) : ( + lasts5K.map( + ({ + noteID, + artist, + title, + genre, + levelText, + level, + fittedText, + }) => ( + + ), + ) + )} + + + + + {t("avatarLastsText")} + {isLasts7KLoading ? ( + + ) : ( + lasts7K.map( + ({ + noteID, + artist, + title, + genre, + levelText, + level, + fittedText, + }) => ( + + ), + ) + )} + + + + + {t("avatarLastsText")} + {isLasts9KLoading ? ( + + ) : ( + lasts9K.map( + ({ + noteID, + artist, + title, + genre, + levelText, + level, + fittedText, + }) => ( + + ), + ) + )} + + + + + {t("avatarLastsText")} + {isLasts10KLoading ? ( + + ) : ( + lasts10K.map( + ({ + noteID, + artist, + title, + genre, + levelText, + level, + fittedText, + }) => ( + + ), + ) + )} + + + + + {t("avatarLastsText")} + {isLasts14KLoading ? ( + + ) : ( + lasts14K.map( + ({ + noteID, + artist, + title, + genre, + levelText, + level, + fittedText, + }) => ( + + ), + ) + )} + + + + + {t("avatarLastsText")} + {isLasts24KLoading ? ( + + ) : ( + lasts24K.map( + ({ + noteID, + artist, + title, + genre, + levelText, + level, + fittedText, + }) => ( + + ), + ) + )} + + + + + {t("avatarLastsText")} + {isLasts48KLoading ? ( + + ) : ( + lasts48K.map( + ({ + noteID, + artist, + title, + genre, + levelText, + level, + fittedText, + }) => ( + + ), + ) + )} + + + + ); }); diff --git a/qwilight-fe/src/avatar/QuitStatusValues.tsx b/qwilight-fe/src/avatar/QuitStatusValues.tsx new file mode 100644 index 0000000..6b361f1 --- /dev/null +++ b/qwilight-fe/src/avatar/QuitStatusValues.tsx @@ -0,0 +1,23 @@ +import { observer } from "mobx-react-lite"; +import { useTranslation } from "react-i18next"; +import { Badge, ListGroup, ListGroupItem } from "reactstrap"; +import { useAvatarStore } from "src/Stores"; + +const quitItems = ["S+", "S", "A+", "A", "B", "C", "D"]; + +export default observer(() => { + const { quitStatusValues } = useAvatarStore(); + const { t } = useTranslation(); + + return ( + + {t("avatarQuitStatusText")} + {quitItems.map((quitItem) => ( + + {quitItem}{" "} + {quitStatusValues[quitItems.indexOf(quitItem)]} + + ))} + + ); +}); diff --git a/qwilight-fe/src/avatar/QuitValues.tsx b/qwilight-fe/src/avatar/QuitValues.tsx deleted file mode 100644 index 1082028..0000000 --- a/qwilight-fe/src/avatar/QuitValues.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { observer } from "mobx-react-lite"; -import { useTranslation } from "react-i18next"; -import { Badge, ListGroup, ListGroupItem } from "reactstrap"; -import { useAvatarStore } from "src/Stores"; - -const quitItems = ["S+", "S", "A+", "A", "B", "C", "D"]; - -export default observer(() => { - const { quitStatusValues } = useAvatarStore(); - const { t } = useTranslation(); - - return ( - - {t("avatarQuitText")} - {quitItems.map((quitItem) => ( - - {quitItem}{" "} - {quitStatusValues[quitItems.indexOf(quitItem)]} - - ))} - - ); -}); diff --git a/qwilight-fe/src/avatar/setAvatarStore.ts b/qwilight-fe/src/avatar/setAvatarStore.ts index 79118fe..7b2e3e9 100644 --- a/qwilight-fe/src/avatar/setAvatarStore.ts +++ b/qwilight-fe/src/avatar/setAvatarStore.ts @@ -75,6 +75,16 @@ isLasts24KLoading: false, isLasts48KLoading: false, isWwwLevelLoading: false, + favoritesTabPosition: 0, + lastsTabPosition: 0, + + setFavoritesTabPosition(favoritesTabPosition: number) { + this.favoritesTabPosition = favoritesTabPosition; + }, + + setLastsTabPosition(lastsTabPosition: number) { + this.lastsTabPosition = lastsTabPosition; + }, get isLoading() { return ( @@ -160,7 +170,7 @@ }, async getAvatarFavorites5K(t: TFunction) { - return this.getAvatarFavorites( + await this.getAvatarFavorites( t, "5K", (isLoading) => (this.isFavorites5KLoading = isLoading), @@ -169,7 +179,7 @@ }, async getAvatarFavorites7K(t: TFunction) { - return this.getAvatarFavorites( + await this.getAvatarFavorites( t, "7K", (isLoading) => (this.isFavorites7KLoading = isLoading), @@ -178,7 +188,7 @@ }, async getAvatarFavorites9K(t: TFunction) { - return this.getAvatarFavorites( + await this.getAvatarFavorites( t, "9K", (isLoading) => (this.isFavorites9KLoading = isLoading), @@ -187,7 +197,7 @@ }, async getAvatarFavorites10K(t: TFunction) { - return this.getAvatarFavorites( + await this.getAvatarFavorites( t, "10K", (isLoading) => (this.isFavorites10KLoading = isLoading), @@ -196,7 +206,7 @@ }, async getAvatarFavorites14K(t: TFunction) { - return this.getAvatarFavorites( + await this.getAvatarFavorites( t, "14K", (isLoading) => (this.isFavorites14KLoading = isLoading), @@ -205,7 +215,7 @@ }, async getAvatarFavorites24K(t: TFunction) { - return this.getAvatarFavorites( + await this.getAvatarFavorites( t, "24K", (isLoading) => (this.isFavorites24KLoading = isLoading), @@ -214,7 +224,7 @@ }, async getAvatarFavorites48K(t: TFunction) { - return this.getAvatarFavorites( + await this.getAvatarFavorites( t, "48K", (isLoading) => (this.isFavorites48KLoading = isLoading), @@ -258,7 +268,7 @@ }, async getAvatarLasts5K() { - return this.getAvatarLasts( + await this.getAvatarLasts( "5K", (isLoading) => (this.isLasts5KLoading = isLoading), (lasts) => (this.lasts5K = lasts), @@ -266,7 +276,7 @@ }, async getAvatarLasts7K() { - return this.getAvatarLasts( + await this.getAvatarLasts( "7K", (isLoading) => (this.isLasts7KLoading = isLoading), (lasts) => (this.lasts7K = lasts), @@ -274,7 +284,7 @@ }, async getAvatarLasts9K() { - return this.getAvatarLasts( + await this.getAvatarLasts( "9K", (isLoading) => (this.isLasts9KLoading = isLoading), (lasts) => (this.lasts9K = lasts), @@ -282,7 +292,7 @@ }, async getAvatarLasts10K() { - return this.getAvatarLasts( + await this.getAvatarLasts( "10K", (isLoading) => (this.isLasts10KLoading = isLoading), (lasts) => (this.lasts10K = lasts), @@ -290,7 +300,7 @@ }, async getAvatarLasts14K() { - return this.getAvatarLasts( + await this.getAvatarLasts( "14K", (isLoading) => (this.isLasts14KLoading = isLoading), (lasts) => (this.lasts14K = lasts), @@ -298,15 +308,15 @@ }, async getAvatarLasts24K() { - return this.getAvatarLasts( + await this.getAvatarLasts( "24K", (isLoading) => (this.isLasts24KLoading = isLoading), (lasts) => (this.lasts24K = lasts), ); }, - getAvatarLasts48K() { - return this.getAvatarLasts( + async getAvatarLasts48K() { + await this.getAvatarLasts( "48K", (isLoading) => (this.isLasts48KLoading = isLoading), (lasts) => (this.lasts48K = lasts), diff --git a/qwilight-fe/src/index.scss b/qwilight-fe/src/index.scss index e2e98de..266325a 100644 --- a/qwilight-fe/src/index.scss +++ b/qwilight-fe/src/index.scss @@ -1,18 +1,17 @@ * { margin: 0; - font-family: - "Century Gothic", - -apple-system, - BlinkMacSystemFont, - "Segoe UI", - "Roboto", - "Oxygen", - "Ubuntu", - "Cantarell", - "Fira Sans", - "Droid Sans", - "Helvetica Neue", - sans-serif; + font-family: "Century Gothic", + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + "Roboto", + "Oxygen", + "Ubuntu", + "Cantarell", + "Fira Sans", + "Droid Sans", + "Helvetica Neue", + sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -21,6 +20,18 @@ font-size: 0.75rem; } +a { + &.nav-link { + @include default(); + color: white; + + &:hover { + @include default(); + color: white; + } + } +} + body { background: url("assets/dark-honeycomb.png"); } @@ -152,14 +163,14 @@ &.titleLV2000 { background: linear-gradient( - to right, - red, - orange, - yellow, - green, - blue, - indigo, - purple + to right, + red, + orange, + yellow, + green, + blue, + indigo, + purple ); background-clip: text; -webkit-text-fill-color: transparent;