From e8e1e3e2db59ad35c117565904b55da0975e2956 Mon Sep 17 00:00:00 2001 From: Tiyo Date: Thu, 11 Apr 2024 01:55:21 +0800 Subject: [PATCH] Optimized code for better performance and maintainability --- .../src/components/Appearance/index.tsx | 8 +- .../client/src/components/Battle/index.tsx | 28 +- .../client/src/components/Battle/styles.scss | 40 +- .../client/src/components/Chests/index.tsx | 2 +- packages/client/src/pages/ffa/index.tsx | 6 +- packages/client/src/pages/ffa/styles.scss | 348 ++++++++-------- packages/client/src/pages/game/index.tsx | 96 ++--- packages/client/src/pages/home/StaticInfo.tsx | 2 +- packages/client/src/pages/home/index.tsx | 46 +-- .../client/src/pages/home/staticInfo.scss | 383 +++++++++--------- packages/client/src/pages/home/styles.scss | 340 ++++++++-------- 11 files changed, 673 insertions(+), 626 deletions(-) diff --git a/packages/client/src/components/Appearance/index.tsx b/packages/client/src/components/Appearance/index.tsx index 0eac4d04..c912bd1e 100644 --- a/packages/client/src/components/Appearance/index.tsx +++ b/packages/client/src/components/Appearance/index.tsx @@ -15,15 +15,15 @@ const Appearance = (props: IProps) => { return (
- + { - clothes && + clothes && } { - handheld && + handheld && } { - head && + head && }
); diff --git a/packages/client/src/components/Battle/index.tsx b/packages/client/src/components/Battle/index.tsx index 9e36949a..f391f574 100644 --- a/packages/client/src/components/Battle/index.tsx +++ b/packages/client/src/components/Battle/index.tsx @@ -9,7 +9,7 @@ import { message } from 'antd'; import CountDown from '@/hooks/useCountDown'; import GameContext from '@/context'; -let interval:any = null +let interval: any = null let nonceHex = '' let curType = '' @@ -19,7 +19,7 @@ let isFirst = false export default function Battle(props) { const duel = useRef(); - let {battleId, curPlayer, targetPlayer} = props + let { battleId, curPlayer, targetPlayer } = props const [tacticsStep, setTacticsStep] = useState(1); const [confirmBattleData, setConfirmBattleData] = useState([]); const [battleData, setBattleData] = useState({}); @@ -55,13 +55,13 @@ export default function Battle(props) { if (seconds == 0) { forceEndFun() } else { - return (

{seconds}

) + return (

{seconds}

) } } const forceEndFun = async () => { try { - let resultBattle:any = await forceEnd(battleId) + let resultBattle: any = await forceEnd(battleId) if (resultBattle?.type && resultBattle?.type == 'error') { } else if (resultBattle?.isEnd && resultBattle?.winner) { isFirst = true @@ -316,7 +316,7 @@ export default function Battle(props) { ) } - const confirmBattleFun = async (arg:Number) => { + const confirmBattleFun = async (arg: Number) => { if (battleState != 0) return let action = confirmBattleData[0] || 'attack' let actionHex = ethers.utils.formatBytes32String(action); @@ -335,12 +335,12 @@ export default function Battle(props) { if (curType == 'attacker' && data?.attackerState == 0) { setBattleState(0) localStorage.removeItem('confirmBattleData') - setTimeout(() => {confirmBattleFun(arg)}, 100) + setTimeout(() => { confirmBattleFun(arg) }, 100) return } else if (curType == 'defender' && data?.defenderState == 0) { setBattleState(0) localStorage.removeItem('confirmBattleData') - setTimeout(() => {confirmBattleFun(arg)}, 100) + setTimeout(() => { confirmBattleFun(arg) }, 100) return } setTimeout(() => { @@ -383,7 +383,7 @@ export default function Battle(props) {
-
{targetPlayer?.name}
+
{targetPlayer?.name}
ATK:{targetPlayer?.attack.toString()}
@@ -407,7 +407,7 @@ export default function Battle(props) {
-
+
: battleState == 3 ? getDom() : battleState == 4 ?

{battle?.winner.toLocaleLowerCase() == curPlayer.addr.toLocaleLowerCase() ? `You win the battle! Click anywhere on the screen to continue you adventure` : `You loss the battle! Don't worry. Click anywhere on the screen to return to the Base`}

: null } - +
{ - tacticsStep == 1 ? (
+ tacticsStep == 1 ? (
setTacticsStepFun(2, 'attack')}>Attack
Bag
setTacticsStepFun(2, 'escape')}>Escape
) : tacticsStep == 2 ? ( -
+
setSelectTactic(1)}>Sprint
setSelectTactic(2)}>Sneak
setSelectTactic(3)}>Magic
-
setTacticsStepFun(1)}>→Back
+
setTacticsStepFun(1)}>→Back
) : null } - +
diff --git a/packages/client/src/components/Battle/styles.scss b/packages/client/src/components/Battle/styles.scss index 9f891abd..245a9a16 100644 --- a/packages/client/src/components/Battle/styles.scss +++ b/packages/client/src/components/Battle/styles.scss @@ -65,6 +65,7 @@ box-sizing: border-box; position: relative; width: 300px; + // left: 40px; .user-info { display: flex; @@ -78,6 +79,7 @@ line-height: normal; margin-bottom: 8px; } + .hp-wrap { border: 4px solid #2d2d2d; height: 30px; @@ -86,6 +88,7 @@ width: 280px; position: relative; box-sizing: border-box; + .hp-text { display: flex; align-items: center; @@ -98,8 +101,9 @@ line-height: 1; box-sizing: border-box; } - + } + .hp-loss { position: absolute; right: -60px; @@ -113,6 +117,7 @@ transform: rotate(-10.07deg); -webkit-text-stroke: 1px #000; } + .confirm-info { position: absolute; top: -50px; @@ -121,6 +126,7 @@ display: flex; align-items: center; justify-content: center; + img { margin-right: 12px; width: 36px; @@ -133,9 +139,11 @@ &.attack { transform: translateX(400px); } + &.back { transform: translateX(-30px); } + img { transform: scaleX(-1); } @@ -145,10 +153,12 @@ &.attack { transform: translateX(-400px); } + &.back { transform: translateX(30px); } } + .dark-attacker { position: relative; top: 20px; @@ -177,12 +187,15 @@ font-size: 16px; font-style: normal; font-weight: 400; - line-height: 26px; /* 162.5% */ + line-height: 26px; + + /* 162.5% */ .character-info { color: #000; } } } + .battle-action { margin-top: 14px; font-family: MISS; @@ -196,6 +209,7 @@ line-height: normal; position: relative; z-index: 9; + .action-step { width: 510px; flex: 0 0 510px; @@ -206,6 +220,7 @@ box-sizing: border-box; line-height: 2; } + .battle-tactics { flex: 1; height: 108px; @@ -214,6 +229,7 @@ padding: 22px; box-sizing: border-box; margin-left: 20px; + .tactics-item { width: 130px; flex: 0 0 130px; @@ -222,6 +238,7 @@ cursor: pointer; display: flex; align-items: center; + &.bag { color: rgba(217, 217, 217, 0.58); cursor: default; @@ -247,10 +264,12 @@ height: 64px; margin-right: 39px; cursor: pointer; + .icon-bg { width: 64px; height: 64px; } + .icon-btn { width: 64px; height: 64px; @@ -261,15 +280,18 @@ bottom: 0; margin: auto; } + &.icon-r { margin-left: 17px; margin-right: 0; + .icon-btn { width: 64px; height: 64px; } } } + img { width: 64px; height: 64px; @@ -310,10 +332,12 @@ margin: 16px auto; position: relative; cursor: pointer; + img { width: 179px; height: 59px; } + .confirm-text { position: absolute; left: 0; @@ -330,7 +354,7 @@ font-size: 18px; font-style: normal; font-weight: 400; - line-height: normal; + line-height: normal; } } } @@ -344,6 +368,7 @@ border-radius: 7px; background: #DCC7AF; box-shadow: 5px 4px 4px -1px rgba(0, 0, 0, 0.25); + .info-title { padding: 25px 18px 0; box-sizing: border-box; @@ -354,10 +379,12 @@ font-weight: 400; line-height: normal; } + .action-section { margin-top: 48px; padding: 0 18px; box-sizing: border-box; + .section-title { margin-bottom: 8px; font-family: MISS; @@ -366,14 +393,17 @@ font-weight: 400; text-transform: capitalize; } + .action-item { margin-bottom: 16px; display: flex; align-items: center; + img { width: 42px; height: 42px; } + p { margin-left: 25px; font-family: MISS; @@ -384,10 +414,12 @@ } } } + .tactic-section { padding: 0 9px; box-sizing: border-box; margin-top: 55px; + .section-title { margin-bottom: 4px; font-family: MISS; @@ -396,10 +428,12 @@ font-weight: 400; text-transform: capitalize; } + img { width: 26px; height: 26px; } + p { color: #000; font-family: Inter; diff --git a/packages/client/src/components/Chests/index.tsx b/packages/client/src/components/Chests/index.tsx index fe48b6dd..a80a20f1 100644 --- a/packages/client/src/components/Chests/index.tsx +++ b/packages/client/src/components/Chests/index.tsx @@ -41,7 +41,7 @@ const Chests = (props: IProps) => { return ( { - openingBox === item.id && + openingBox === item.id && } { return (
-
+
@@ -36,7 +36,7 @@ const FFA = () => {
{ tab === 'home' && <> - + } @@ -59,7 +59,7 @@ const FFA = () => { setDialogVisible(true); }} > - fight + fight
diff --git a/packages/client/src/pages/ffa/styles.scss b/packages/client/src/pages/ffa/styles.scss index 611e5bef..53762492 100644 --- a/packages/client/src/pages/ffa/styles.scss +++ b/packages/client/src/pages/ffa/styles.scss @@ -1,204 +1,206 @@ .ffa-page { - font-family: MISS, sans-serif; - color: #BC8C61; - height: 100vh; - background: url("../../assets/img/bg.jpg") no-repeat center / 100% 100%; - - .ffa-section { - width: 1280px; - margin: 0 auto; - padding-top: 120px; - - h2 { - font-size: 20px; - margin-bottom: 20px; - } + font-family: MISS, sans-serif; + color: #BC8C61; + height: 100vh; + background: url("../../assets/img/bg.jpg") no-repeat center / 100% 100%; + + .ffa-section { + width: 1280px; + margin: 0 auto; + padding-top: 120px; + + h2 { + font-size: 20px; + margin-bottom: 20px; + } - .mi-btn { - display: block; - margin: 36px auto; - width: 234px; - height: 66px; - font-size: 16px; - } + .mi-btn { + display: block; + margin: 36px auto; + width: 234px; + height: 66px; + font-size: 16px; } + } - .ffa-switch-wrapper { - display: flex; + .ffa-switch-wrapper { + display: flex; - .switch-item { - padding: 10px 12px; - cursor: pointer; - border-bottom: 4px solid #BC8C61; + .switch-item { + padding: 10px 12px; + cursor: pointer; + border-bottom: 4px solid #BC8C61; - &.active { + &.active { - color: #FFF5E9; - background: #BC8C61; - } - } + color: #FFF5E9; + background: #BC8C61; + } } + } - .ffa-battle-wrapper { - display: flex; - justify-content: space-between; - h3 { - margin-bottom: 10px; - } + .ffa-battle-wrapper { + display: flex; + justify-content: space-between; - .left-content { - width: 570px; - - .leaderboard-list { - flex: 1; - li { - margin-bottom: 6px; - } - } - - .leaderboard-wrapper { - display: flex; - flex-direction: column; - padding: 60px 92px 50px; - height: 380px; - background: url("../../assets/img/user_bg.png") no-repeat center/100% 100%; - } - - .rank-row { - display: grid; - grid-template-columns: 1fr 4fr 6fr 2fr 2fr 1fr; - } - - .fight-icon { - img { - width: 19px; - height: 19px; - cursor: pointer; - } - } - - .my-rank-info { - padding-top: 6px; - border-top: 2px solid; - } - } + h3 { + margin-bottom: 10px; + } - .right-content { - width: 580px; + .left-content { + width: 570px; - .ffa-logs-wrapper { - font-size: 12px; - color: #fff; + .leaderboard-list { + flex: 1; - li { - display: flex; - justify-content: space-between; - margin-bottom: 6px; - } - } + li { + margin-bottom: 6px; } - } + } - .dialog-user { + .leaderboard-wrapper { display: flex; - justify-content: space-between; flex-direction: column; - height: 100%; - - .username { - font-size: 16px; - color: #5D2E1C; - text-align: center; - margin-bottom: 20px; + padding: 60px 92px 50px; + height: 380px; + background: url("../../assets/img/user_bg.png") no-repeat center/100% 100%; + } + + .rank-row { + display: grid; + grid-template-columns: 1fr 4fr 6fr 2fr 2fr 1fr; + } + + .fight-icon { + img { + width: 19px; + height: 19px; + cursor: pointer; } + } - dl { - display: flex; - justify-content: center; - margin-bottom: 10px; - font-size: 13px; + .my-rank-info { + padding-top: 6px; + border-top: 2px solid; + } + } + + .right-content { + width: 580px; - dt { - margin-right: 10px; - color: #BC8C61; - } + .ffa-logs-wrapper { + font-size: 12px; + color: #fff; - dd { - color: #fff; - } + li { + display: flex; + justify-content: space-between; + margin-bottom: 6px; } + } + } + } + + .dialog-user { + display: flex; + justify-content: space-between; + flex-direction: column; + height: 100%; + + .username { + font-size: 16px; + color: #5D2E1C; + text-align: center; + margin-bottom: 20px; + } + + dl { + display: flex; + justify-content: center; + margin-bottom: 10px; + font-size: 13px; + + dt { + margin-right: 10px; + color: #BC8C61; + } + + dd { + color: #fff; + } } + } - .dialog-opt { + .dialog-opt { + display: flex; + justify-content: center; + + button { + margin: 0 10px; + width: 128px; + height: 48px; + line-height: 54px; + } + } + + .ffa-battle-dialog { + position: fixed; + width: 860px; + height: 380px; + left: 50%; + top: 50%; + transform: translate3d(-50%, -50%, 0); + background: url("../../assets/img/user_bg.png") no-repeat center / 100% 100%; + outline: 1000px solid rgba(0, 0, 0, 0.5); + + .battle-user-info { + background-color: #ddc9b2; + border: 5px solid #6f391e; + border-radius: 10px; + height: 69px; + position: fixed; + top: 40px; + width: 316px; + padding: 10px; + + &.player1 { + left: 40px; + } + + &.player2 { + right: 40px; + } + + .battle-user-info-detail { display: flex; - justify-content: center; + color: #000; + font-size: 10px; - button { - margin: 0 10px; - width: 128px; - height: 48px; - line-height: 54px; + .username { + flex: 1; } - } - .ffa-battle-dialog { - position: fixed; - width: 860px; - height: 380px; - left: 50%; - top: 50%; - transform: translate3d(-50%, -50%, 0); - background: url("../../assets/img/user_bg.png") no-repeat center / 100% 100%; - outline: 1000px solid rgba(0, 0, 0, 0.5); - - .battle-user-info { - background-color: #ddc9b2; - border: 5px solid #6f391e; - border-radius: 10px; - height: 69px; - position: fixed; - top: 40px; - width: 316px; - padding: 10px; - - &.player1 { - left: 40px; - } - - &.player2 { - right: 40px; - } - - .battle-user-info-detail { - display: flex; - color: #000; - font-size: 10px; - - .username { - flex: 1; - } - - & > div:not(:first-child) { - margin-left: 10px; - } - } - - .hp-wrapper { - margin-top: 4px; - border: 3px solid #2c2c2c; - border-radius: 6px; - height: 22px; - - .hp { - background: #ff6060; - color: #000; - font-size: 10px; - line-height: 22px; - padding-right: 20px; - text-align: right; - height: 100%; - } - } + &>div:not(:first-child) { + margin-left: 10px; + } + } + + .hp-wrapper { + margin-top: 4px; + border: 3px solid #2c2c2c; + border-radius: 6px; + height: 22px; + + .hp { + background: #ff6060; + color: #000; + font-size: 10px; + line-height: 22px; + padding-right: 20px; + text-align: right; + height: 100%; } + } } + } } \ No newline at end of file diff --git a/packages/client/src/pages/game/index.tsx b/packages/client/src/pages/game/index.tsx index 6a6c0b67..ce3ffd1d 100644 --- a/packages/client/src/pages/game/index.tsx +++ b/packages/client/src/pages/game/index.tsx @@ -21,7 +21,7 @@ import lootAbi from '../../../../contracts/out/Loot.sol/MLoot.abi.json' import userAbi from '../../../../contracts/out/User.sol/MUser.abi.json' import PIXIAPP from '@/components/PIXIAPP'; import Loading from '@/components/Loading'; -import {BLOCK_TIME} from '@/config/chain'; +import { BLOCK_TIME } from '@/config/chain'; import discordImg from '@/assets/img/discord.png'; import { TALK_MAIN } from '@/config/talk'; import { getClient } from '../../utils/client'; @@ -48,7 +48,7 @@ const Game = () => { network, } = useMUD(); - const {tables, useStore, account} = network + const { tables, useStore, account } = network const [step, setStep] = useState(0); @@ -89,7 +89,7 @@ const Game = () => { const GlobalConfigData = useStore((state: any) => { const records = Object.values(state.getRecords(tables.GlobalConfig)); - return records.map((e:any) => e.value); + return records.map((e: any) => e.value); }); const privateKey = network.privateKey @@ -106,17 +106,17 @@ const Game = () => { const LootList1Data = useStore((state: any) => { const records = Object.values(state.getRecords(tables.LootList1)); - return records.map((e:any) => Object.assign(e.value, {addr: e.key.addr})); + return records.map((e: any) => Object.assign(e.value, { addr: e.key.addr })); }); const PlayerParamsData = useStore((state: any) => { const records = Object.values(state.getRecords(tables.PlayerParams)); - return records.map((e:any) => Object.assign(e.value, {addr: e.key.addr})); + return records.map((e: any) => Object.assign(e.value, { addr: e.key.addr })); }); const PlayerSeasonData = useStore((state: any) => { const records = Object.values(state.getRecords(tables.PlayerSeason)); - return records.map((e:any) => { - let item = Object.assign(e.value, {addr: e.key.addr}) + return records.map((e: any) => { + let item = Object.assign(e.value, { addr: e.key.addr }) // 获取PlayerParamsData.name let PlayerParamsDataItem = PlayerParamsData.find((player: any) => player.addr.toLocaleLowerCase() == e.key.addr.toLocaleLowerCase()) || {} item.name = PlayerParamsDataItem.name @@ -126,13 +126,13 @@ const Game = () => { const PlayersData = useStore((state: any) => { const records = Object.values(state.getRecords(tables.Player)); - return records.map((e:any) => { - let playerItem = Object.assign(e.value, {addr: e.key.addr}) + return records.map((e: any) => { + let playerItem = Object.assign(e.value, { addr: e.key.addr }) //LootList1Data let loot = LootList1Data.find((loot: any) => loot.addr == e.key.addr) || {}; - let clothes = loot?.chest?.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g,"") - let handheld = loot?.weapon?.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g,"") - let head = loot?.head?.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g,"") + let clothes = loot?.chest?.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g, "") + let handheld = loot?.weapon?.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g, "") + let head = loot?.head?.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g, "") playerItem.equip = { clothes, handheld, @@ -192,18 +192,18 @@ const Game = () => { const BoxListData = useStore((state: any) => { const records = Object.values(state.getRecords(tables.BoxList)); - return records.map((e:any) => Object.assign(e.value, {id: e.key.boxId})).filter((e: any) => e.opened == false || (e.opened && (e.oreBalance || e.treasureBalance))); + return records.map((e: any) => Object.assign(e.value, { id: e.key.boxId })).filter((e: any) => e.opened == false || (e.opened && (e.oreBalance || e.treasureBalance))); }) const BattleList1Data = useStore((state: any) => { const records = Object.values(state.getRecords(tables.BattleList1)); - return records.map((e:any) => Object.assign(e.value, {id: e.key.battleId})); + return records.map((e: any) => Object.assign(e.value, { id: e.key.battleId })); }); const BattleListData = useStore((state: any) => { const records = Object.values(state.getRecords(tables.BattleList)); - return records.map((e:any) => { - let battleItem = Object.assign(e.value, {id: e.key.battleId}) + return records.map((e: any) => { + let battleItem = Object.assign(e.value, { id: e.key.battleId }) // battleList let battle = BattleList1Data.find((e: any) => e.id == battleItem.id) || {} if (battle) { @@ -224,11 +224,11 @@ const Game = () => { return null; }).filter(Boolean); - const battle:any = BattleListData.filter((item:any) => (item.attacker.toLocaleLowerCase() == account.toLocaleLowerCase() || item.defender.toLocaleLowerCase() == account.toLocaleLowerCase()) && !item.isEnd)[0] - + const battle: any = BattleListData.filter((item: any) => (item.attacker.toLocaleLowerCase() == account.toLocaleLowerCase() || item.defender.toLocaleLowerCase() == account.toLocaleLowerCase()) && !item.isEnd)[0] + if (battle && !startBattleData && percentage == 100) { - const targetAddr = battle.attacker.toLocaleLowerCase() == account.toLocaleLowerCase() ? battle.defender : battle.attacker - const target = PlayersData.filter((item:any) => item.addr.toLocaleLowerCase() == targetAddr.toLocaleLowerCase())[0] + const targetAddr = battle.attacker.toLocaleLowerCase() == account.toLocaleLowerCase() ? battle.defender : battle.attacker + const target = PlayersData.filter((item: any) => item.addr.toLocaleLowerCase() == targetAddr.toLocaleLowerCase())[0] const cur = PlayersData.find((player: any) => player.addr.toLocaleLowerCase() == account.toLocaleLowerCase()); if (!battleCurPlayer) { setBattleCurPlayer(cur) @@ -240,7 +240,7 @@ const Game = () => { setBattleId(battle.id) } setStartBattleData(true); - } + } const getCollectionsFun = async (box: any) => { setGotBox(box); setModalType('getCollections'); @@ -257,7 +257,7 @@ const Game = () => { }) // 转成eth const walletBalance = (+ethers.utils.formatEther(balance.toString())).toFixed(2) - setBalance(walletBalance); + setBalance(walletBalance); } useEffect(() => { @@ -276,7 +276,7 @@ const Game = () => { if (GlobalConfigData.length && percentage < 100) { setP() } - + }, [GlobalConfigData]); const [clientData, setClientData] = useState(null) @@ -296,7 +296,7 @@ const Game = () => { } setMsgMap({ ...msgMap }); console.log(msg, 'show') - + let playerIndex = playerList.current.findIndex((item) => item.addr.toLocaleLowerCase() == network.account.toLocaleLowerCase()) let player = playerList.current[playerIndex] // console.log(player, playerList.current) @@ -337,7 +337,7 @@ const Game = () => { let lastMsg = client.message.messageList[client.message.messageList.length - 1] showMsg(lastMsg) } - + } client.on('channel.getList', handleEvent) client.on('message.getList', handleEvent); @@ -350,7 +350,7 @@ const Game = () => { let msg = await client.message.getMessageList({ page: 1, size: 1, - }, groupId); + }, groupId); } catch (error) { console.log(error) } @@ -451,11 +451,11 @@ const Game = () => { // let addon = useStore.getState().getValue(tables.Addon, { userId: player.addr }) // let userTokenId = addon.userId.toString() // let lootTokenId = addon.lootId.toString() - + // let urls = await Promise.all([userContract.tokenURI(userTokenId), lootContract.tokenURI(lootTokenId)]) // let url = urls[0] // let lootUrl = urls[1] - + // url = atobUrl(url) // lootUrl = atobUrl(lootUrl) @@ -464,7 +464,7 @@ const Game = () => { // } player.seasonOreBalance = PlayerSeasonData.filter((item) => item.addr.toLocaleLowerCase() == player.addr.toLocaleLowerCase())[0]?.oreBalance - + setUserInfoPlayer(player); setUserInfoVisible(true); } @@ -476,7 +476,7 @@ const Game = () => { await goHome(); if (curPlayer.oreBalance > 0) { console.log('submitGem') - setGotBox({oreBalance: curPlayer.oreBalance}); + setGotBox({ oreBalance: curPlayer.oreBalance }); await submitGem(); setModalType('submitGem'); setModalVisible(true); @@ -501,7 +501,7 @@ const Game = () => { if (curPlayer?.state == 1) { message.loading('join battlefield') await joinBattlefield() - message.destroy() + message.destroy() } setUserInfoVisible(false); setUserInfoPlayer(null); @@ -528,7 +528,7 @@ const Game = () => { } const setStartBattle = async (player) => { - const paths = bfs(simpleMapData, { x: curPlayer.x, y: curPlayer.y }, {x: player.x, y: player.y}).slice(1); + const paths = bfs(simpleMapData, { x: curPlayer.x, y: curPlayer.y }, { x: player.x, y: player.y }).slice(1); let res = await battleInvitation(player.addr, formatMovePath(paths)); if (res) { // setTargetPlayer(player); @@ -602,24 +602,24 @@ const Game = () => { }} >
-
-
- +
+
+ +
+
-
-
{ percentage < 100 ? - + : - + } { - (curPlayer && percentage == 100 && (talked == 'false')) ? : null + (curPlayer && percentage == 100 && (talked == 'false')) ? : null }
@@ -645,7 +645,7 @@ const Game = () => { /> ) } - + { >
- { + { modalType === 'submitGem' ?
Congrats,you submitted {gotBox?.oreBalance} gems!
: null } { modalType === 'getCollections' ?
{gotBox?.oreBalance ? `Congrats,you got ${gotBox?.oreBalance} gems!` : `oops! It's an empty box`}
: null }
-
+
@@ -671,7 +671,7 @@ const Game = () => {
{ - percentage === 100 && + percentage === 100 && } { diff --git a/packages/client/src/pages/home/StaticInfo.tsx b/packages/client/src/pages/home/StaticInfo.tsx index 54f20977..fa8096ba 100644 --- a/packages/client/src/pages/home/StaticInfo.tsx +++ b/packages/client/src/pages/home/StaticInfo.tsx @@ -27,7 +27,7 @@ interface IProps { const StaticInfo = (props: IProps) => { const { onPlay, isOpen } = props; - +˝ const [faqActiveIndex, setFaqActiveIndex] = useState(-1); SwiperCore.use([Mousewheel]); diff --git a/packages/client/src/pages/home/index.tsx b/packages/client/src/pages/home/index.tsx index a4707c6d..5bbe92c0 100644 --- a/packages/client/src/pages/home/index.tsx +++ b/packages/client/src/pages/home/index.tsx @@ -48,30 +48,30 @@ const Home = () => { // getMUDData const GameConfigData = useStore((state: any) => { const records = Object.values(state.getRecords(tables.GameConfig)); - return records.map((e:any) => e.value); + return records.map((e: any) => e.value); }); const GlobalConfigData = useStore((state: any) => { const records = Object.values(state.getRecords(tables.GlobalConfig)); - return records.map((e:any) => e.value); + return records.map((e: any) => e.value); }); const LootList1Data = useStore((state: any) => { const records = Object.values(state.getRecords(tables.LootList1)); - return records.map((e:any) => Object.assign(e.value, {addr: e.key.addr})); + return records.map((e: any) => Object.assign(e.value, { addr: e.key.addr })); }); const PlayerParamsData = useStore((state: any) => { const records = Object.values(state.getRecords(tables.PlayerParams)); - return records.map((e:any) => Object.assign(e.value, {addr: e.key.addr})); + return records.map((e: any) => Object.assign(e.value, { addr: e.key.addr })); }); const PlayerData = useStore((state: any) => { const records = Object.values(state.getRecords(tables.Player)); - return records.map((e:any) => { - let playerItem = Object.assign(e.value, {addr: e.key.addr}) + return records.map((e: any) => { + let playerItem = Object.assign(e.value, { addr: e.key.addr }) //LootList1Data let loot = LootList1Data.find((loot: any) => loot.addr == e.key.addr) || {} - let clothes = loot?.chest?.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g,"") - let handheld = loot?.weapon?.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g,"") - let head = loot?.head?.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g,"") + let clothes = loot?.chest?.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g, "") + let handheld = loot?.weapon?.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g, "") + let head = loot?.head?.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g, "") playerItem.equip = { clothes, handheld, @@ -86,7 +86,7 @@ const Home = () => { const PlayerAddonData = useStore((state: any) => { const records = Object.values(state.getRecords(tables.PlayerAddon)); - return records.map((e:any) => Object.assign(e.value, {addr: e.key.addr})); + return records.map((e: any) => Object.assign(e.value, { addr: e.key.addr })); }); const curPlayer = PlayerData.find((player: any) => player.addr.toLocaleLowerCase() == network?.account.toLocaleLowerCase()); @@ -103,17 +103,17 @@ const Home = () => { userContract = new ethers.Contract(userContractAddress, userAbi, wallet) lootContract = new ethers.Contract(lootContractAddress, lootAbi, wallet) pluginContract = new ethers.Contract(pluginContractAddress, pluginAbi, wallet) - userContract?.getUserTokenIdList().then((res:any) => { + userContract?.getUserTokenIdList().then((res: any) => { userTokenIds = res }) - lootContract?.getUserTokenIdList().then((res:any) => { + lootContract?.getUserTokenIdList().then((res: any) => { lootTokenIds = res }) } console.log(PlayerAddonData, GameConfigData, GlobalConfigData, LootList1Data, PlayerData, 'PlayerAddonData, GameConfigData, SyncProgressData, GlobalConfigData, LootList1Data, PlayerData') - const syncprogress = {percentage: 100} + const syncprogress = { percentage: 100 } // isOpen const [isOpen, setIsOpen] = useState(import.meta.env.VITE_IS_OPEN == 'true' ? true : false); @@ -144,7 +144,7 @@ const Home = () => { setHead(curPlayer?.equip?.head); setPlayer(curPlayer); } - + // const address = localStorage.getItem(UserAddressKey); // if (address) { // setWalletAddress(address); @@ -199,8 +199,8 @@ const Home = () => { const toObject = (obj) => { return JSON.parse(JSON.stringify(obj, (key, value) => typeof value === 'bigint' ? value.toString() : value - )) -} + )) + } const mintAndGo = async (type, uName) => { if (syncprogress?.percentage != 100) { @@ -230,7 +230,7 @@ const Home = () => { } let userTokenId = userTokenIds[0].toString() let lootTokenId = lootTokenIds[0].toString() - + // let urls = await Promise.all([userContract.tokenURI(userTokenId), lootContract.tokenURI(lootTokenId)]) // let url = urls[0] // let lootUrl = urls[1] @@ -248,9 +248,9 @@ const Home = () => { let { playerData, lootData } = await selectBothNFT(userTokenId, lootTokenId, network.account) - let clothes = lootData.chest.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g,"") - let handheld = lootData.weapon.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g,"") - let head = lootData.head.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g,"") + let clothes = lootData.chest.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g, "") + let handheld = lootData.weapon.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g, "") + let head = lootData.head.replace(/"(.*?)"/, '').split(' of')[0].replace(/^\s+|\s+$/g, "") setPlayer(playerData) setClothes(clothes); setHandheld(handheld); @@ -262,7 +262,7 @@ const Home = () => { head, } - let player = Object.assign(playerData, {username: username || uName, clothes, handheld, head}) + let player = Object.assign(playerData, { username: username || uName, clothes, handheld, head }) console.log(player, 'player', username, uName) await Promise.all([setInfo(username || uName, ''), joinBattlefield()]) setMinting(false); @@ -353,10 +353,10 @@ const Home = () => {

HOME

{ - minting ?
The minting process may take up to several tens of seconds
: null + minting ?
The minting process may take up to several tens of seconds
: null }
diff --git a/packages/client/src/pages/home/staticInfo.scss b/packages/client/src/pages/home/staticInfo.scss index 010da4b1..dff5547b 100644 --- a/packages/client/src/pages/home/staticInfo.scss +++ b/packages/client/src/pages/home/staticInfo.scss @@ -1,228 +1,231 @@ .static-info { - font-family: MISS, sans-serif; - word-spacing: 10px; + font-family: MISS, sans-serif; + word-spacing: 10px; + + .mi-section { + position: relative; + padding-top: 86px; + width: 1280px; + margin: 0 auto; + + .play-btn { + display: block; + margin: 40px auto; + width: 216px; + height: 66px; + font-size: 16px; + box-sizing: border-box; + } - .mi-section { - position: relative; - padding-top: 86px; - width: 1280px; - margin: 0 auto; - - .play-btn { - display: block; - margin: 40px auto; - width: 216px; - height: 66px; - font-size: 16px; - box-sizing: border-box; - } + } - } + .mi-section2 { + display: flex; + flex-direction: column; + } - .mi-section2 { - display: flex; - flex-direction: column; + + .mi-section-video { + color: #fff; + width: 1280px; + margin: 0 auto; + + h2 { + margin: 20px auto; + } + } + + .mi-home-desc { + position: relative; + + .mi-home-desc-title-wrap { + position: relative; + padding: 0 38px; + text-align: center; + + &:before, + &:after { + content: ''; + position: absolute; + top: 0; + width: 40px; + height: 60px; + background: url("../../assets/img/title_bg.png") no-repeat center; + } + + &:before { + left: 0; + } + + &:after { + right: 0; + transform: rotateY(180deg); + } } + h2 { + background: #55225e; + font-size: 18px; + line-height: 60px; + color: #fae1cc; + } - .mi-section-video { - color: #fff; - width: 1280px; - margin: 0 auto; + p { + padding: 44px 120px; + font-size: 16px; + line-height: 42px; + color: #55225e; + text-align: center; + background: url("../../assets/img/desc_bg.png") no-repeat center / 100% 100%; + } - h2 { - margin: 20px auto; - } + .player { + position: absolute; + bottom: 10px; } - .mi-home-desc { - position: relative; + .p1 { + left: -10px; + bottom: 16px; + } - .mi-home-desc-title-wrap { - position: relative; - padding: 0 38px; - text-align: center; - - &:before, &:after { - content: ''; - position: absolute; - top: 0; - width: 40px; - height: 60px; - background: url("../../assets/img/title_bg.png") no-repeat center; - } - - &:before { - left: 0; - } - - &:after { - right: 0; - transform: rotateY(180deg); - } - } + .p2 { + right: 10px; + //transform: rotateY(180deg); + } + } - h2 { - background: #55225e; - font-size: 18px; - line-height: 60px; - color: #fae1cc; - } - p { - padding: 44px 120px; - font-size: 16px; - line-height: 42px; - color: #55225e; - text-align: center; - background: url("../../assets/img/desc_bg.png") no-repeat center / 100% 100%; - } + .mi-home-desc-wrapper { + padding-top: 20px; + color: #fff; - .player { - position: absolute; - bottom: 10px; - } + dl { + margin-bottom: 20px; + padding: 16px 30px; + border-radius: 16px; + background: rgb(0, 0, 0, 0.5); + } - .p1 { - left: -10px; - bottom: 16px; - } + dt { + font-size: 20px; + margin-bottom: 12px; + } - .p2 { - right: 10px; - //transform: rotateY(180deg); - } + dd { + font-size: 18px; + font-family: Arial, sans-serif; + word-spacing: 0; + line-height: 1.5; } + } + .mi-section-faq { + display: flex; + flex-direction: column; - .mi-home-desc-wrapper { - padding-top: 20px; - color: #fff; + h2 { + font-size: 22px; + margin-bottom: 30px; + color: #fff; + } - dl { - margin-bottom: 20px; - padding: 16px 30px; - border-radius: 16px; - background: rgb(0, 0, 0, 0.5); - } + .faq-wrapper { + color: #fff; - dt { - font-size: 20px; - margin-bottom: 12px; - } + dl { + padding: 24px 32px; + border-radius: 16px; + background: rgba(0, 0, 0, 0.5); + margin-bottom: 10px; + cursor: pointer; + } - dd { - font-size: 18px; - font-family: Arial, sans-serif; - word-spacing: 0; - line-height: 1.5; - } + dt { + position: relative; + font-size: 18px; + + + &::after { + content: ''; + position: absolute; + top: 16px; + right: 20px; + width: 21px; + height: 12px; + transform: rotate(180deg); + transition: all 0.3s; + background: url("../../assets/img/btn_3.png"); + } + + &.active::after { + transform: rotate(0); + } + } + + dd { + display: none; + font-size: 20px; + font-family: Arial, sans-serif; + word-spacing: 0; + padding-top: 10px; + line-height: 2; + text-shadow: 0 4px 4px #00000040; + } + + dt.active+dd { + display: block; + } } + } - .mi-section-faq { - display: flex; - flex-direction: column; + .mi-section-last { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; - h2 { - font-size: 22px; - margin-bottom: 30px; - color: #fff; - } - - .faq-wrapper { - color: #fff; - - dl { - padding: 24px 32px; - border-radius: 16px; - background: rgba(0, 0, 0, 0.5); - margin-bottom: 10px; - cursor: pointer; - } - - dt { - position: relative; - font-size: 18px; - - - &::after { - content: ''; - position: absolute; - top: 16px; - right: 20px; - width: 21px; - height: 12px; - transform: rotate(180deg); - transition: all 0.3s; - background: url("../../assets/img/btn_3.png"); - } - - &.active::after { - transform: rotate(0); - } - } - - dd { - display: none; - font-size: 20px; - font-family: Arial, sans-serif; - word-spacing: 0; - padding-top: 10px; - line-height: 2; - text-shadow: 0 4px 4px #00000040; - } - - dt.active + dd { - display: block; - } - } + .players { + width: 250px; + height: 180px; } - .mi-section-last { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - .players { - width: 250px; - height: 180px; - } + .player-desc { + font-size: 22px; + text-align: center; + color: #fff; + } + .backed-by-wrapper { + margin-top: 40px; + color: #fff; - .player-desc { - font-size: 22px; - text-align: center; - color: #fff; - } + ul { + margin-top: 24px; + } - .backed-by-wrapper { - margin-top: 40px; - color: #fff; - ul { - margin-top: 24px; - } - li { - display: flex; - margin-bottom: 24px; - align-items: center; - - img { - margin-right: 24px; - width: 40px; - height: 40px; - } - } + li { + display: flex; + margin-bottom: 24px; + align-items: center; + + img { + margin-right: 24px; + width: 40px; + height: 40px; } + } } + } } @keyframes move { - from { - top: 36px; - } + from { + top: 36px; + } - to { - top: 46px; - } + to { + top: 46px; + } } \ No newline at end of file diff --git a/packages/client/src/pages/home/styles.scss b/packages/client/src/pages/home/styles.scss index a3cb64b0..db594995 100644 --- a/packages/client/src/pages/home/styles.scss +++ b/packages/client/src/pages/home/styles.scss @@ -1,198 +1,206 @@ +.mi-home-page { + min-height: 100vh; + background: url("../../assets/img/bg.jpg") no-repeat fixed 100% / 100% 100%; + + + .index-section { + + .img-wrap { + position: absolute; + bottom: 0; + right: 0px; + width: 670px; + height: 670px; + + .duck { + width: 100%; + height: auto; + position: absolute; + bottom: 0; + right: 0; + animation: beat-scale .6s infinite; + opacity: 0; + &.duck-3 { + animation-delay: .12s; + } -.mi-home-page { - min-height: 100vh; - background: url("../../assets/img/bg.jpg") no-repeat fixed 100% / 100% 100%; - - - .index-section { - - .img-wrap { - position: absolute; - bottom: 0; - right: 0px; - width: 670px; - height: 670px; - .duck { - width: 100%; - height: auto; - position: absolute; - bottom: 0; - right: 0; - animation: beat-scale .6s infinite; - opacity: 0; - &.duck-3 { - animation-delay: .12s; - } - &.duck-2 { - animation-delay: .24s; - } - &.duck-1 { - animation-delay: .36s; - } - &.duck-5 { - animation-delay: .48s; - } - } - .gem { - position: absolute; - bottom: -80px; - right: 35%; - } + &.duck-2 { + animation-delay: .24s; } - .intro-box { - font-family: Arbutus, sans-serif; - word-spacing: 0px; - width:765px; - color: #fff; - position: relative; - .bg-img { - width:765px; - height: 823px; - } - .intro-main { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 2; - padding: 140px 113px 0; - box-sizing: border-box; - } - - h1 { - text-align: center; - font-size: 40px; - font-family: Arbutus; - line-height: normal; - margin-bottom: 30px; - } - - p { - font-family: Arbutus; - font-size: 20px; - line-height: normal; - } - - .play-btn { - display: block; - margin: 40px auto; - height: 66px; - font-size: 16px; - padding: 0 30px; - box-sizing: border-box; - } + &.duck-1 { + animation-delay: .36s; } - .section-box { - position: relative; - width: 1280px; - margin: 0 auto; + &.duck-5 { + animation-delay: .48s; } + } + + .gem { + position: absolute; + bottom: -80px; + right: 35%; + } } + .intro-box { + font-family: Arbutus, sans-serif; + word-spacing: 0px; + width: 765px; + color: #fff; + position: relative; + + .bg-img { + width: 765px; + height: 823px; + } + + .intro-main { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 2; + padding: 140px 113px 0; + box-sizing: border-box; + } + + h1 { + text-align: center; + font-size: 40px; + font-family: Arbutus; + line-height: normal; + margin-bottom: 30px; + } + + p { + font-family: Arbutus; + font-size: 20px; + line-height: normal; + } + + .play-btn { + display: block; + margin: 40px auto; + height: 66px; + font-size: 16px; + padding: 0 30px; + box-sizing: border-box; + } + } - .mint-section { - display: flex; - align-items: center; - font-family: MISS, Arial, "Microsoft YaHei UI", sans-serif; - word-spacing: 10px; - color: #BC8C61; - height: 100vh; - background: rgba(0, 0, 0, 0.6); + .section-box { + position: relative; + width: 1280px; + margin: 0 auto; + } + } - .mint-box { - padding-top: 24px; - width: 1200px; - margin: 0 auto; - } - .mint-title { - margin-bottom: 18px; - font-size: 16px; - font-weight: 700; - line-height: 40px; - } + .mint-section { + display: flex; + align-items: center; + font-family: MISS, Arial, "Microsoft YaHei UI", sans-serif; + word-spacing: 10px; + color: #BC8C61; + height: 100vh; + background: rgba(0, 0, 0, 0.6); + + .mint-box { + padding-top: 24px; + width: 1200px; + margin: 0 auto; + } - .mi-btn { - display: block; - margin: 36px auto; - padding: 0 24px; - box-sizing: border-box; - height: 66px; - font-size: 16px; - } + .mint-title { + margin-bottom: 18px; + font-size: 16px; + font-weight: 700; + line-height: 40px; + } + .mi-btn { + display: block; + margin: 36px auto; + padding: 0 24px; + box-sizing: border-box; + height: 66px; + font-size: 16px; } + + } } .create-wallet-wrapper { - padding: 40px; + padding: 40px; + display: flex; + justify-content: space-between; + flex-direction: column; + height: 100%; + + .create-wallet-content { + padding: 20px; + font-size: 16px; + line-height: 2; + font-family: MISS, sans-serif; + word-spacing: 10px; + text-align: center; + color: #5D2E1C; + } + + .mint-name { display: flex; justify-content: space-between; - flex-direction: column; - height: 100%; - .create-wallet-content { - padding: 20px; - font-size: 16px; - line-height: 2; - font-family: MISS, sans-serif; - word-spacing: 10px; - text-align: center; - color: #5D2E1C; + input { + width: 245px; + height: 45px; + background: url("../../assets/img/btn.png") no-repeat center / 100% 100%; } - .mint-name { - display: flex; - justify-content: space-between; - - input { - width: 245px; - height: 45px; - background: url("../../assets/img/btn.png") no-repeat center / 100% 100%; - } - - button { - font-size: 16px; - width: 170px; - height: 45px; - } + button { + font-size: 16px; + width: 170px; + height: 45px; } + } } .create-wallet-successful-wrapper { - display: flex; - justify-content: space-around; - align-items: center; - flex-direction: column; - padding: 20px; - - .create-wallet-successful-content { - font-size: 24px; - font-family: MISS, sans-serif; - word-spacing: 10px; - color: #e16f39; - } - - button { - width: 220px; - height: 70px; - font-size: 16px; - } + display: flex; + justify-content: space-around; + align-items: center; + flex-direction: column; + padding: 20px; + + .create-wallet-successful-content { + font-size: 24px; + font-family: MISS, sans-serif; + word-spacing: 10px; + color: #e16f39; + } + + button { + width: 220px; + height: 70px; + font-size: 16px; + } } @keyframes beat-scale { - 0%{ - opacity: 1; - } - 20%{ - opacity: 1; - } - 21%{ - opacity: 0; - } + 0% { + opacity: 1; + } + + 20% { + opacity: 1; + } + + 21% { + opacity: 0; + } } \ No newline at end of file