From 77514ba9974c2d72e0f0d8b76264a2a65e494f73 Mon Sep 17 00:00:00 2001 From: vivomo <929992114@qq.com> Date: Sat, 25 Nov 2023 01:32:05 +0800 Subject: [PATCH 01/12] feat: open Chests's distance update --- packages/client/src/components/PIXIAPP/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/components/PIXIAPP/index.tsx b/packages/client/src/components/PIXIAPP/index.tsx index bf35715a..031b008e 100644 --- a/packages/client/src/components/PIXIAPP/index.tsx +++ b/packages/client/src/components/PIXIAPP/index.tsx @@ -206,7 +206,7 @@ const PIXIAPP = () => { break; case 'click': targetChests = treasureChest.filter(item => item.x === coordinate.x && item.y === coordinate.y); - if (targetChests.length > 0 && getDistance(curPlayer, coordinate) <= 1) { + if (targetChests.length > 0 && getDistance(curPlayer, coordinate) < 2) { openTreasureChest(targetChests[0].id); return; } From eb36e8ba1bd522eb6cbd5c89753b92d25ff9fa20 Mon Sep 17 00:00:00 2001 From: Tiyo Date: Sun, 26 Nov 2023 21:16:01 +0800 Subject: [PATCH 02/12] fix: fix bug --- .../client/src/components/UserAvatar/index.tsx | 2 +- .../client/src/components/UserAvatar/styles.scss | 14 +++++++++++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/client/src/components/UserAvatar/index.tsx b/packages/client/src/components/UserAvatar/index.tsx index 12da3466..accb0f9e 100644 --- a/packages/client/src/components/UserAvatar/index.tsx +++ b/packages/client/src/components/UserAvatar/index.tsx @@ -29,7 +29,7 @@ const UserAvatar = (props: IProps) => {
-
+
{ diffHp > 0 ?
+{diffHp}
: null } diff --git a/packages/client/src/components/UserAvatar/styles.scss b/packages/client/src/components/UserAvatar/styles.scss index 2d979837..1da2b48c 100644 --- a/packages/client/src/components/UserAvatar/styles.scss +++ b/packages/client/src/components/UserAvatar/styles.scss @@ -47,7 +47,7 @@ .user-hp { border-radius: 5px; border: 5px solid #DDC9B2; - background: #FFF; + background: #DDC9B2; width: 300px; height: 25px; box-sizing: border-box; @@ -56,10 +56,18 @@ position: absolute; left: 0; top: 0; + right: 0; height: 15px; - background: #FF0000; + background: #fff; border-radius: 5px; - width: 50%; + .hp { + position: absolute; + left: 0; + top: 0; + height: 15px; + background: #f00; + border-radius: 5px; + } } .diff-hp { font-family: MISS; From 9f496f1a54185d540e80dda387bf0978f0e34c16 Mon Sep 17 00:00:00 2001 From: vivomo <929992114@qq.com> Date: Sun, 26 Nov 2023 21:45:19 +0800 Subject: [PATCH 03/12] feat: user info --- packages/client/src/App.tsx | 8 +++ .../client/src/components/Equipment/index.tsx | 36 ++++++++++ .../src/components/Equipment/styles.scss | 72 +++++++++++++++++++ .../src/components/PIXIPlayers/Player.tsx | 1 + .../client/src/components/UserInfo/index.tsx | 63 ++++++++++------ .../src/components/UserInfo/styles.scss | 55 ++++++++++++-- .../src/components/UserInfoDialog/styles.scss | 1 - .../src/components/UserPackage/index.tsx | 20 ++++-- .../src/components/UserPackage/styles.scss | 11 ++- packages/client/src/pages/game/index.tsx | 2 +- packages/client/src/pages/heroEdit/index.tsx | 2 +- packages/client/src/pages/home/index.tsx | 2 +- packages/client/tsconfig.json | 2 +- 13 files changed, 233 insertions(+), 42 deletions(-) create mode 100644 packages/client/src/components/Equipment/index.tsx create mode 100644 packages/client/src/components/Equipment/styles.scss diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx index 23e0d50b..26db21d7 100644 --- a/packages/client/src/App.tsx +++ b/packages/client/src/App.tsx @@ -5,9 +5,17 @@ import Test from './pages/test'; import Home from '@/pages/home'; import HeroEdit from '@/pages/heroEdit'; import PIXIAPP from '@/components/PIXIAPP'; +import { useEffect } from 'react'; export const App = () => { + useEffect(() => { + document.body.addEventListener('contextmenu', (e) => { + e.preventDefault(); + return false; + }) + }, []) + return (
diff --git a/packages/client/src/components/Equipment/index.tsx b/packages/client/src/components/Equipment/index.tsx new file mode 100644 index 00000000..c9c99a09 --- /dev/null +++ b/packages/client/src/components/Equipment/index.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import './styles.scss'; + +export interface IEquipment { + type: string; + name?: string | undefined; +} + +const Equipment = (props: IEquipment) => { + + const { name, type } = props; + + if (!name) { + return null; + } + + return ( +
+
+
+
    +
  • +
  • +
  • +
+ +

This piece of equipment is synthesized from 3 pieces of loot

+
+
+
+ ); +}; + +export default Equipment; \ No newline at end of file diff --git a/packages/client/src/components/Equipment/styles.scss b/packages/client/src/components/Equipment/styles.scss new file mode 100644 index 00000000..fe64525d --- /dev/null +++ b/packages/client/src/components/Equipment/styles.scss @@ -0,0 +1,72 @@ +.mi-equipment { + position: relative; + width: 64px; + height: 64px; + background-repeat: no-repeat; + image-rendering: pixelated; + background-size: 1600%; + background-position: 2px 4px; + + .equipment-info { + display: none; + position: absolute; + z-index: 1; + top: -80px; + left: 99%; + width: 440px; + padding-left: 20px; + height: 226px; + + + .equipment-info-content { + position: relative; + width: 420px; + height: 100%; + padding: 12px; + border-radius: 10px; + border: 5px solid #DCC7AF; + background: #FFF5E9; + + &::before, &::after { + content: ''; + position: absolute; + right: 100%; + top: 50%; + transform: translate3d(0, -50%, 0); + } + + &::before { + border: 20px solid; + border-color: transparent #DCC7AF transparent transparent; + } + + &::after { + border: 14px solid; + transform: translate3d(1px, -50%, 0); + border-color: transparent #FFF5E9 transparent transparent; + } + } + + .loot-list { + display: flex; + justify-content: space-between; + + .loot-item { + width: 120px; + height: 120px; + background: #000; + } + } + + .equipment-desc { + margin-top: 12px; + font-size: 12px; + line-height: 1.57; + color: #BC8C61; + } + } + + &:hover .equipment-info { + display: block; + } +} \ No newline at end of file diff --git a/packages/client/src/components/PIXIPlayers/Player.tsx b/packages/client/src/components/PIXIPlayers/Player.tsx index 3e2a53a1..ae420faf 100644 --- a/packages/client/src/components/PIXIPlayers/Player.tsx +++ b/packages/client/src/components/PIXIPlayers/Player.tsx @@ -40,6 +40,7 @@ export interface IPlayer { strength: number; space: number; oreBalance: number; + seasonOreBalance: number; treasureBalance: number; state: number; lastBattleTime: number; diff --git a/packages/client/src/components/UserInfo/index.tsx b/packages/client/src/components/UserInfo/index.tsx index 75c0ee0d..1ade7a22 100644 --- a/packages/client/src/components/UserInfo/index.tsx +++ b/packages/client/src/components/UserInfo/index.tsx @@ -6,6 +6,7 @@ import * as PIXI from 'pixi.js'; import { Stage } from '@pixi/react'; import Player, { IPlayer } from '@/components/PIXIPlayers/Player'; import { MapConfig } from '@/config/map'; +import Equipment from '@/components/Equipment'; const { cellSize } = MapConfig; PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; @@ -27,27 +28,48 @@ const UserInfo = (props: IUserInfo) => { return (
-

User info

+

Equipment

-
-
- - - -
-
-
-
- { - userUrl ? : null - } -
-
- { - lootUrl ? : null - } +
+
    +
  • + +
    • +
  • + +
    • +
  • +
  • +
+
+
+ + + +
+
    +
  • +
  • +
  • + +
    • +
  • +
+ {/*
*/} + {/*
*/} + {/* {*/} + {/* userUrl ? : null*/} + {/* }*/} + {/*
*/} + {/*
*/} + {/* {*/} + {/* lootUrl ? : null*/} + {/* }*/} + {/*
*/} + {/*
*/} +
HP
@@ -79,11 +101,12 @@ const UserInfo = (props: IUserInfo) => {
diff --git a/packages/client/src/components/UserInfo/styles.scss b/packages/client/src/components/UserInfo/styles.scss index 31c1b634..b8664118 100644 --- a/packages/client/src/components/UserInfo/styles.scss +++ b/packages/client/src/components/UserInfo/styles.scss @@ -8,30 +8,61 @@ } .left-main-content { - width: 768px; + //width: 768px; } - .user-detail-wrapper { - height: 378px; + .right-main-content { + margin-left: 85px; + width: 600px; } .user-detail-wrapper { + //height: 378px; + } + + .user-detail-content { display: flex; - justify-content: space-between; + //justify-content: space-between; } .user-appearance-wrapper { display: flex; + margin: 0 12px; justify-content: center; align-items: center; width: 338px; - height: 100%; + height: 338px; background: url("../../assets/img/user_bg.png") no-repeat center / 100% 100%; .user-appearance-box { width: 256px; height: 256px; } + + + } + + .equipments { + width: 72px; + + .equipments-item { + margin-bottom: 12px; + height: 72px; + border: 4px solid #DCC7AF; + background: #FFF5E9; + + &:not(:empty) { + background-color: #6f553c; + } + + &.helmet-item { + border-color: #f00; + } + + &.weapon-item { + border-color: #00FF38; + } + } } .loot-wrapper { @@ -50,21 +81,31 @@ } .user-attr-wrapper { - width: 213px; + display: flex; + flex-wrap: wrap; + margin-top: 20px; + width: 478px; + height: 152px; + padding: 20px 0; font-size: 13px; line-height: 2; + border: 5px solid #BAA48B; + background: #FFF5E9; dl { + min-width: 50%; display: flex; } dt { + padding-left: 20px; margin-right: 10px; + color: #BC8C61; } .base-attr { margin-right: 10px; - color: #fff; + color: #000; } &.loaded { diff --git a/packages/client/src/components/UserInfoDialog/styles.scss b/packages/client/src/components/UserInfoDialog/styles.scss index aa912251..2c8f88f8 100644 --- a/packages/client/src/components/UserInfoDialog/styles.scss +++ b/packages/client/src/components/UserInfoDialog/styles.scss @@ -2,7 +2,6 @@ position: fixed; z-index: 1000; width: 1298px; - height: 585px; padding: 36px 66px; left: 50%; top: 50%; diff --git a/packages/client/src/components/UserPackage/index.tsx b/packages/client/src/components/UserPackage/index.tsx index 8330b7a9..c49b89ce 100644 --- a/packages/client/src/components/UserPackage/index.tsx +++ b/packages/client/src/components/UserPackage/index.tsx @@ -1,14 +1,17 @@ import React from 'react'; import gemImg from '@/assets/img/gem.png'; import './styles.scss'; +import Equipment, { IEquipment } from '@/components/Equipment'; interface IProps { title: string; gem: number; + items?: IEquipment[]; } const UserPackage = (props: IProps) => { + const { items = [], gem = 0 } = props; const arr = new Array(10).fill(0); arr[0] = props.gem; @@ -17,16 +20,19 @@ const UserPackage = (props: IProps) => {

{props.title}

+ { + gem > 0 && ( +
+ +
{gem}
+
+ ) + } { - arr.map((count, index) => { + items.map((item, index) => { return (
- { - count > 0 && (<> - -
{count}
- ) - } +
) }) diff --git a/packages/client/src/components/UserPackage/styles.scss b/packages/client/src/components/UserPackage/styles.scss index c39af267..0312e361 100644 --- a/packages/client/src/components/UserPackage/styles.scss +++ b/packages/client/src/components/UserPackage/styles.scss @@ -5,15 +5,20 @@ display: flex; justify-content: space-between; flex-wrap: wrap; + width: 600px; + padding: 12px; + min-height: 105px; + border: 5px solid #DCC7AF; + background: #FFF5E9; } .package-item { position: relative; margin-bottom: 14px; - width: 62px; - height: 62px; + width: 72px; + height: 72px; background: #FFF5E9; - border: 6px solid transparent; + border: 5px solid #DCC7AF; &:nth-child(-n+3) { border-color: #DCC7AF; diff --git a/packages/client/src/pages/game/index.tsx b/packages/client/src/pages/game/index.tsx index e3abd0c3..9d6e1742 100644 --- a/packages/client/src/pages/game/index.tsx +++ b/packages/client/src/pages/game/index.tsx @@ -475,7 +475,7 @@ const Game = () => { /> setModalVisible(false)} diff --git a/packages/client/src/pages/heroEdit/index.tsx b/packages/client/src/pages/heroEdit/index.tsx index ec72f86d..b3c31842 100644 --- a/packages/client/src/pages/heroEdit/index.tsx +++ b/packages/client/src/pages/heroEdit/index.tsx @@ -27,7 +27,7 @@ const HeroEdit = () => { return (
- + {/*
*/} {/* {*/} diff --git a/packages/client/src/pages/home/index.tsx b/packages/client/src/pages/home/index.tsx index 0a1be83b..7dcdc0b2 100644 --- a/packages/client/src/pages/home/index.tsx +++ b/packages/client/src/pages/home/index.tsx @@ -372,7 +372,7 @@ const Home = () => { ) } setModalVisible(false)} diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json index e3762749..5926a059 100644 --- a/packages/client/tsconfig.json +++ b/packages/client/tsconfig.json @@ -6,7 +6,7 @@ "module": "ESNext", "lib": ["ESNext", "DOM"], "moduleResolution": "Node", - "strict": true, + "strict": false, "resolveJsonModule": true, "isolatedModules": true, "esModuleInterop": true, From 8d268d000b1b5fbe87f88eba750fbe3dec4a86be Mon Sep 17 00:00:00 2001 From: vivomo <929992114@qq.com> Date: Sun, 26 Nov 2023 22:01:58 +0800 Subject: [PATCH 04/12] feat: hide loot --- packages/client/src/components/Equipment/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/components/Equipment/styles.scss b/packages/client/src/components/Equipment/styles.scss index fe64525d..20d5e5dd 100644 --- a/packages/client/src/components/Equipment/styles.scss +++ b/packages/client/src/components/Equipment/styles.scss @@ -67,6 +67,6 @@ } &:hover .equipment-info { - display: block; + //display: block; } } \ No newline at end of file From c7e51ee32f2cd58baef56a830f02326b43d33f1e Mon Sep 17 00:00:00 2001 From: Tiyo Date: Sun, 26 Nov 2023 22:08:29 +0800 Subject: [PATCH 05/12] fix: fix bug --- packages/client/src/components/Log/index.jsx | 2 +- packages/client/src/components/Talk/index.jsx | 25 +++++++++++++++++++ .../client/src/components/Talk/styles.scss | 9 +++++++ .../src/components/UserAvatar/index.tsx | 1 - packages/client/src/pages/game/index.tsx | 5 +++- 5 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 packages/client/src/components/Talk/index.jsx create mode 100644 packages/client/src/components/Talk/styles.scss diff --git a/packages/client/src/components/Log/index.jsx b/packages/client/src/components/Log/index.jsx index 02a4d4c8..8b0cc56d 100644 --- a/packages/client/src/components/Log/index.jsx +++ b/packages/client/src/components/Log/index.jsx @@ -30,7 +30,7 @@ const Log = () => { } eventEmitter.on('log', addLogCb); return () => { - eventEmitter.off('log', addLogCb); + eventEmitter?.off('log', addLogCb); }; }, []); diff --git a/packages/client/src/components/Talk/index.jsx b/packages/client/src/components/Talk/index.jsx new file mode 100644 index 00000000..b3bec8b6 --- /dev/null +++ b/packages/client/src/components/Talk/index.jsx @@ -0,0 +1,25 @@ +import React, { useState } from 'react'; +import './styles.scss'; +import Player from '@/components/PIXIPlayers/Player'; +import { Stage } from '@pixi/react'; + +const Talk = (props) => { + const {position, text, curPlayer } = props; + console.log('curPlayer', curPlayer); + return ( +
+
+ + + +
+
+ ); +}; + +export default Talk; \ No newline at end of file diff --git a/packages/client/src/components/Talk/styles.scss b/packages/client/src/components/Talk/styles.scss new file mode 100644 index 00000000..f01cbe67 --- /dev/null +++ b/packages/client/src/components/Talk/styles.scss @@ -0,0 +1,9 @@ +.talk { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 999; + background: rgba(0, 0, 0, 0.5); +} \ No newline at end of file diff --git a/packages/client/src/components/UserAvatar/index.tsx b/packages/client/src/components/UserAvatar/index.tsx index accb0f9e..7fc87146 100644 --- a/packages/client/src/components/UserAvatar/index.tsx +++ b/packages/client/src/components/UserAvatar/index.tsx @@ -12,7 +12,6 @@ interface IProps extends IPlayer { const UserAvatar = (props: IProps) => { const [diffHp, setDiffHp] = useState(0); const { address, balance, ...rest } = props; - console.log(props, 'props') useEffect(() => { setDiffHp(props.diffHp) setTimeout(() => { diff --git a/packages/client/src/pages/game/index.tsx b/packages/client/src/pages/game/index.tsx index d80c8753..4e9758de 100644 --- a/packages/client/src/pages/game/index.tsx +++ b/packages/client/src/pages/game/index.tsx @@ -18,6 +18,7 @@ import Log from "@/components/Log"; import GameContext from '@/context'; import TreasureChest from '@/components/TreasureChest'; import UserInfoDialog from '@/components/UserInfoDialog'; +import Talk from '@/components/Talk'; import Header from '../home/header' import { DELIVERY } from '@/config/map'; import { getPlayersCache, updatePlayerPosition } from '@/utils/player'; @@ -174,7 +175,6 @@ const Game = () => { navigate('/'); } } - console.log(curPlayer, 'curPlayer') const battles = useEntityQuery([Has(BattleList), HasValue(BattleList, {isEnd: false})]).map((entity) => { const id = decodeEntity({ battleId: "uint256" }, entity); const battle:any = getComponentValue(BattleList, entity) @@ -487,6 +487,9 @@ const Game = () => { : } + // { + // curPlayer && percentage == 100 ? : null + // }
From b3c1826c23568f107a8034f9ffdbda056fb4dcea Mon Sep 17 00:00:00 2001 From: Tiyo Date: Sun, 26 Nov 2023 22:09:41 +0800 Subject: [PATCH 06/12] fix: fix bug --- packages/client/src/pages/game/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/client/src/pages/game/index.tsx b/packages/client/src/pages/game/index.tsx index 16aaea26..e14e75bd 100644 --- a/packages/client/src/pages/game/index.tsx +++ b/packages/client/src/pages/game/index.tsx @@ -487,9 +487,7 @@ const Game = () => { : } - // { - // curPlayer && percentage == 100 ? : null - // } +
@@ -504,7 +502,7 @@ const Game = () => { /> setModalVisible(false)} From 234fb894c6559ebfb37d43e8930c2e2cfe2c00d3 Mon Sep 17 00:00:00 2001 From: Tiyo Date: Mon, 27 Nov 2023 00:15:28 +0800 Subject: [PATCH 07/12] fix: fix bug --- packages/client/src/components/Log/index.jsx | 4 +--- packages/client/src/components/Talk/index.jsx | 24 ++++++++++++------- .../client/src/components/Talk/styles.scss | 4 ++++ packages/client/src/pages/game/index.tsx | 9 +++---- 4 files changed, 25 insertions(+), 16 deletions(-) diff --git a/packages/client/src/components/Log/index.jsx b/packages/client/src/components/Log/index.jsx index 8b0cc56d..269c76d4 100644 --- a/packages/client/src/components/Log/index.jsx +++ b/packages/client/src/components/Log/index.jsx @@ -18,8 +18,6 @@ const Log = () => { useEffect(() => { function addLogCb(e) { - console.log('e', e); - console.log('logsTemp', logs); let index = logs.findIndex(log => log.time === e.time); if (index > -1) { logs[index] = e; @@ -28,7 +26,7 @@ const Log = () => { } setLogs([...logs]); } - eventEmitter.on('log', addLogCb); + eventEmitter?.on('log', addLogCb); return () => { eventEmitter?.off('log', addLogCb); }; diff --git a/packages/client/src/components/Talk/index.jsx b/packages/client/src/components/Talk/index.jsx index b3bec8b6..c48de982 100644 --- a/packages/client/src/components/Talk/index.jsx +++ b/packages/client/src/components/Talk/index.jsx @@ -8,15 +8,21 @@ const Talk = (props) => { console.log('curPlayer', curPlayer); return (
-
- - - +
+
+ { + curPlayer?.equip ? ( + + + + ) : null + } +
); diff --git a/packages/client/src/components/Talk/styles.scss b/packages/client/src/components/Talk/styles.scss index f01cbe67..41a53733 100644 --- a/packages/client/src/components/Talk/styles.scss +++ b/packages/client/src/components/Talk/styles.scss @@ -6,4 +6,8 @@ right: 0; z-index: 999; background: rgba(0, 0, 0, 0.5); + .talk-main { + width: 1280px; + margin: auto; + } } \ 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 e14e75bd..92f02a4e 100644 --- a/packages/client/src/pages/game/index.tsx +++ b/packages/client/src/pages/game/index.tsx @@ -163,9 +163,9 @@ const Game = () => { const curPlayer = players.find(player => player.addr.toLocaleLowerCase() == account.toLocaleLowerCase()); - if (curPlayer && curPlayer.state < 2 && percentage == 100) { - navigate('/'); - } + // if (curPlayer && curPlayer.state < 2 && percentage == 100) { + // navigate('/'); + // } if (curPlayer && curPlayer.addr) { localStorage.setItem('curPlayer', JSON.stringify(toObject(curPlayer))) localStorage.setItem('worldContractAddress', network.worldContract.address) @@ -374,6 +374,7 @@ const Game = () => { } const closeUserInfoDialog = async () => { + console.log(curPlayer) if (curPlayer.waiting) { message.error('Waiting for transaction'); return; @@ -487,7 +488,7 @@ const Game = () => { : } - +
From 4e8d75fba5b7c0028bfeb4dcaf1320580db5e267 Mon Sep 17 00:00:00 2001 From: Tiyo Date: Mon, 27 Nov 2023 12:54:31 +0800 Subject: [PATCH 08/12] update text --- packages/client/src/pages/game/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/client/src/pages/game/index.tsx b/packages/client/src/pages/game/index.tsx index 92f02a4e..70816508 100644 --- a/packages/client/src/pages/game/index.tsx +++ b/packages/client/src/pages/game/index.tsx @@ -374,7 +374,6 @@ const Game = () => { } const closeUserInfoDialog = async () => { - console.log(curPlayer) if (curPlayer.waiting) { message.error('Waiting for transaction'); return; @@ -488,7 +487,9 @@ const Game = () => { : } - + { + curPlayer && percentage == 100 ? : null + }
@@ -514,7 +515,7 @@ const Game = () => { modalType === 'submitGem' ?
Congrats,you submitted {gotBox?.oreBalance} gems!
: null } { - modalType === 'getCollections' ?
Congrats,you got {gotBox?.oreBalance} gems!
: null + modalType === 'getCollections' ?
{gotBox?.oreBalance ? `Congrats,you got ${gotBox?.oreBalance} gems!` : `oops! It's an empty box`}
: null }
From 1a3c70c1bdc8be8649af3774b3f647e976e0ab33 Mon Sep 17 00:00:00 2001 From: Tiyo Date: Mon, 27 Nov 2023 19:09:14 +0800 Subject: [PATCH 09/12] fix: fix bug --- packages/client/src/pages/game/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/client/src/pages/game/index.tsx b/packages/client/src/pages/game/index.tsx index 70816508..cb53e399 100644 --- a/packages/client/src/pages/game/index.tsx +++ b/packages/client/src/pages/game/index.tsx @@ -487,9 +487,7 @@ const Game = () => { : } - { - curPlayer && percentage == 100 ? : null - } +
From df43d432d8f19fc8c07d6e2a852c3487a7f76b1a Mon Sep 17 00:00:00 2001 From: Tiyo Date: Mon, 27 Nov 2023 19:27:40 +0800 Subject: [PATCH 10/12] fix: fix bug --- packages/client/src/components/Log/index.jsx | 9 +++++---- packages/client/src/pages/game/index.tsx | 4 +++- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/client/src/components/Log/index.jsx b/packages/client/src/components/Log/index.jsx index 269c76d4..4a316c47 100644 --- a/packages/client/src/components/Log/index.jsx +++ b/packages/client/src/components/Log/index.jsx @@ -26,10 +26,11 @@ const Log = () => { } setLogs([...logs]); } - eventEmitter?.on('log', addLogCb); - return () => { - eventEmitter?.off('log', addLogCb); - }; + try { + eventEmitter?.on('log', addLogCb); + } catch (error) { + console.log('eventEmitter.on error', error); + } }, []); return ( diff --git a/packages/client/src/pages/game/index.tsx b/packages/client/src/pages/game/index.tsx index cb53e399..70816508 100644 --- a/packages/client/src/pages/game/index.tsx +++ b/packages/client/src/pages/game/index.tsx @@ -487,7 +487,9 @@ const Game = () => { : } - + { + curPlayer && percentage == 100 ? : null + }
From d74632635278abc4cf9549527ce850a52ab55d02 Mon Sep 17 00:00:00 2001 From: Tiyo Date: Mon, 27 Nov 2023 19:27:54 +0800 Subject: [PATCH 11/12] fix: fix bug --- packages/client/src/pages/game/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/client/src/pages/game/index.tsx b/packages/client/src/pages/game/index.tsx index 70816508..cb53e399 100644 --- a/packages/client/src/pages/game/index.tsx +++ b/packages/client/src/pages/game/index.tsx @@ -487,9 +487,7 @@ const Game = () => { : } - { - curPlayer && percentage == 100 ? : null - } +
From 6cb416e2fd785df49318f1cb62a150b7a3427c2e Mon Sep 17 00:00:00 2001 From: Tiyo Date: Mon, 27 Nov 2023 22:22:33 +0800 Subject: [PATCH 12/12] fix: fix bug --- packages/client/src/components/Log/index.jsx | 4 +-- .../client/src/components/Log/styles.scss | 7 ++++ packages/client/src/components/Talk/index.jsx | 9 +++-- .../client/src/components/Talk/styles.scss | 29 ++++++++++++++++ .../src/components/Typewriter/index.jsx | 34 +++++++++++++++++++ packages/client/src/pages/game/index.tsx | 1 - 6 files changed, 79 insertions(+), 5 deletions(-) create mode 100644 packages/client/src/components/Typewriter/index.jsx diff --git a/packages/client/src/components/Log/index.jsx b/packages/client/src/components/Log/index.jsx index 4a316c47..a46203bb 100644 --- a/packages/client/src/components/Log/index.jsx +++ b/packages/client/src/components/Log/index.jsx @@ -34,9 +34,9 @@ const Log = () => { }, []); return ( -
+
Log
-
+
{ logs.map((log, index) => (
{log?.type == 'error' ? 'Error' : log.block || 'waiting'} {log.msg}
diff --git a/packages/client/src/components/Log/styles.scss b/packages/client/src/components/Log/styles.scss index e69de29b..f84b35ac 100644 --- a/packages/client/src/components/Log/styles.scss +++ b/packages/client/src/components/Log/styles.scss @@ -0,0 +1,7 @@ +.log-content { + scrollbar-width: none; + -ms-overflow-style: none; + &::-webkit-scrollbar { + display: none; /* Chrome Safari */ + } +} \ No newline at end of file diff --git a/packages/client/src/components/Talk/index.jsx b/packages/client/src/components/Talk/index.jsx index c48de982..9f5a8bff 100644 --- a/packages/client/src/components/Talk/index.jsx +++ b/packages/client/src/components/Talk/index.jsx @@ -1,10 +1,12 @@ import React, { useState } from 'react'; import './styles.scss'; import Player from '@/components/PIXIPlayers/Player'; +import Typewriter from '@/components/Typewriter'; import { Stage } from '@pixi/react'; +import dark from '@/assets/img/duck_index.png'; const Talk = (props) => { - const {position, text, curPlayer } = props; + const {position, text = 'I used to be an adventurer like you, then I took an arrow in the knee', curPlayer } = props; console.log('curPlayer', curPlayer); return (
@@ -20,9 +22,12 @@ const Talk = (props) => { equip={curPlayer?.equip} /> - ) : null + ) : }
+
+ +
); diff --git a/packages/client/src/components/Talk/styles.scss b/packages/client/src/components/Talk/styles.scss index 41a53733..41abcf68 100644 --- a/packages/client/src/components/Talk/styles.scss +++ b/packages/client/src/components/Talk/styles.scss @@ -9,5 +9,34 @@ .talk-main { width: 1280px; margin: auto; + position: absolute; + bottom: 40px; + left: 0; + right: 0; + .player { + + } + .dark { + transform: rotateY(180deg) translateY(-80px); + width: 200px; + height: auto; + margin-top: -100px; + } + .text { + border-radius: 20px; + border: 10px solid #DCC7AF; + background: #6F391E; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + width: 1280px; + height: 190px; + box-sizing: border-box; + margin-top: -100px; + position: relative; + z-index: 9; + padding: 16px 20px; + color: #FFF; + font-size: 22px; + font-family: 'MISS'; + } } } \ No newline at end of file diff --git a/packages/client/src/components/Typewriter/index.jsx b/packages/client/src/components/Typewriter/index.jsx new file mode 100644 index 00000000..e486f10d --- /dev/null +++ b/packages/client/src/components/Typewriter/index.jsx @@ -0,0 +1,34 @@ +import React, { useState, useEffect } from 'react'; + +function Typewriter({ text, typingSpeed, step, name }) { + const [displayText, setDisplayText] = useState(''); + const [currentIndex, setCurrentIndex] = useState(0); + + useEffect(() => { + const interval = setInterval(() => { + if (currentIndex < text.length) { + setDisplayText((prevText) => prevText + text[currentIndex]); + setCurrentIndex((prevIndex) => prevIndex + 1); + } else { + clearInterval(interval); + } + }, typingSpeed); + + return () => { + clearInterval(interval); + }; + }, [text, typingSpeed, currentIndex]); + + useEffect(() => { + setDisplayText(''); + setCurrentIndex(0); + }, [step]); + + return
+
{name || 'Mistery Duck'}:
+ {displayText} +
Click any button to continue
+
; +} + +export default Typewriter; \ 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 cb53e399..1304c32d 100644 --- a/packages/client/src/pages/game/index.tsx +++ b/packages/client/src/pages/game/index.tsx @@ -487,7 +487,6 @@ const Game = () => { : } -