add talk

packages/client/src/components/Talk/index.jsx

@@ -6,11 +6,13 @@ import { Stage } from '@pixi/react';
 import dark from '@/assets/img/duck_index.png';
 
 const Talk = (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);
+  const {position, text, curPlayer, step, sample } = props;
   return (
     <div className='talk'>
       <div className='talk-main'>
+        <div className='sample'>
+          <img src={sample}></img>
+        </div>
         <div className='player'>
           {
             curPlayer?.equip ? (
@@ -25,8 +27,10 @@ const Talk = (props) => {
             ) : <img src={dark} className='dark' />
           }
         </div>
-        <div className='text'>
-          <Typewriter text={text} typingSpeed={50} name={curPlayer?.name || ''} />
+        <div className='text' onClick={() => props.onNext()}>
+          <div className='name' style={{marginBottom: '18px'}}>{curPlayer?.name || 'Mistery Duck'}:</div>
+          <Typewriter text={text} typingSpeed={30} step={step} />
+          <div style={{position: 'absolute', bottom: '18px', right: '18px', fontSize: '12px', color: 'rgba(255, 255, 255, 0.80)'}}>Click any button to continue</div>
         </div>
       </div>
     </div>

packages/client/src/components/Talk/styles.scss

@@ -5,16 +5,20 @@
   left: 0;
   right: 0;
   z-index: 999;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.8);
   .talk-main {
     width: 1280px;
     margin: auto;
     position: absolute;
     bottom: 40px;
     left: 0;
     right: 0;
-    .player {
-
+    .sample {
+      text-align: center;
+      img {
+        width: 692px;
+        height: auto;
+      }
     }
     .dark {
       transform: rotateY(180deg) translateY(-80px);

packages/client/src/components/Typewriter/index.jsx

@@ -6,7 +6,7 @@ function Typewriter({ text, typingSpeed, step, name }) {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      if (currentIndex < text.length) {
+      if (text && (currentIndex < text.length)) {
         setDisplayText((prevText) => prevText + text[currentIndex]);
         setCurrentIndex((prevIndex) => prevIndex + 1);
       } else {
@@ -20,14 +20,12 @@ function Typewriter({ text, typingSpeed, step, name }) {
   }, [text, typingSpeed, currentIndex]);
 
   useEffect(() => {
+    console.log(1)
     setDisplayText('');
     setCurrentIndex(0);
   }, [step]);
 
-  return <div style={{width: '100%', height: '100%', position: 'relative'}}>
-    <div className='name' style={{marginBottom: '18px'}}>{name || 'Mistery Duck'}:</div>
-    {displayText}
-    <div style={{position: 'absolute', bottom: '0px', right: '0px', fontSize: '12px', color: 'rgba(255, 255, 255, 0.80)'}}>Click any button to continue</div>
+  return <div style={{width: '100%', height: '100%', position: 'relative'}} dangerouslySetInnerHTML={{ __html: displayText }}>
   </div>;
 }
 

packages/client/src/config/talk.ts

@@ -0,0 +1,42 @@
+import talk_1 from '@/assets/img/talk/talk_1.png'
+import talk_2 from '@/assets/img/talk/talk_2.png'
+import talk_3 from '@/assets/img/talk/talk_3.png'
+import talk_4 from '@/assets/img/talk/talk_4.png'
+import talk_5 from '@/assets/img/talk/talk_5.png'
+import talk_6 from '@/assets/img/talk/talk_6.png'
+import talk_7 from '@/assets/img/talk/talk_7.png'
+import talk_8 from '@/assets/img/talk/talk_8.png'
+import talk_9 from '@/assets/img/talk/talk_9.png'
+import talk_10 from '@/assets/img/talk/talk_10.png'
+
+export const TALK_MAIN = [{
+  img: talk_1,
+  text: 'Drag the mouse cursor around the map. <br /> Right-click on a blue box to move.'
+}, {
+  img: talk_2,
+  text: 'Move next to the chest box.Left-click on the chest box to mine the treasure. '
+}, {
+  img: talk_3,
+  text: 'Make sure to click on the “OK” button to claim your gems.  '
+}, {
+  img: talk_4,
+  text: 'Go back to home to submit gems and increase the leaderboard score. '
+}, {
+  img: talk_5,
+  text: 'Left-click on any player, and you will see a panel.'
+}, {
+  img: talk_6,
+  text: '“Move”: move to the player’s location. “Attack”: initiate a battle.'
+}, {
+  img: talk_7,
+  text: '“Hunt”: lock on the target for automatic attacks. “Info”: check the user stats.'
+}, {
+  img: talk_8,
+  text: 'When in a battle, select “Attack” to attack, or “Escape” to flee(might fail).'
+}, {
+  img: talk_9,
+  text: 'Now select one of the strategies as a buff. Magic > Sneak > Sprint > Magic'
+}, {
+  img: talk_10,
+  text: 'If your strategy counters the other’s, better chance of attacking/escaping.Vice versa.'
+}]

packages/client/src/pages/game/index.tsx

@@ -32,6 +32,7 @@ import { ICoordinate } from '@/components/MapCell';
 import Loading from '@/components/Loading';
 import {BLOCK_TIME} from '@/config/chain';
 import discordImg from '@/assets/img/discord.png';
+import { TALK_MAIN } from '@/config/talk';
 
 const toObject = (obj) => {
   return JSON.parse(JSON.stringify(obj, (key, value) =>
@@ -52,6 +53,8 @@ const Game = () => {
     network,
   } = useMUD();
 
+  const [step, setStep] = useState(0);
+
   const [renderMapData, setRenderMapData] = useState([]);
 
   const simpleMapData = useMemo(() => {
@@ -449,6 +452,18 @@ const Game = () => {
     }, 1000)
   }
 
+  const [talked, setTalked] = useState(localStorage.getItem('talked') || 'false')
+  const onNext = async () => {
+    console.log(step, TALK_MAIN.length)
+    if (step < TALK_MAIN.length - 1) {
+      setStep(step + 1)
+    } else {
+      setTalked('true')
+      localStorage.setItem('talked', 'true')
+      return
+    }
+  }
+
   const blockTime = BLOCK_TIME[network?.publicClient?.chain?.id]
   return (
     <GameContext.Provider
@@ -487,6 +502,9 @@ const Game = () => {
             :
             <PIXIAPP/>
         }
+        {
+          (curPlayer && percentage == 100 && (talked == 'false')) ? <Talk onNext={onNext} text={TALK_MAIN[step].text} sample={TALK_MAIN[step].img} step={step + 1}  /> : null
+        }
         <div className="discord">
           <a href="https://discord.gg/UkarGN9Fjn" target="_blank"><img src={discordImg} /></a>
         </div>

packages/contracts/worlds.json

@@ -8,7 +8,7 @@
     "blockNumber": 413937
   },
   "31337": {
-    "address": "0x322813Fd9A801c5507c9de605d63CEA4f2CE6c44"
+    "address": "0x5f3f1dBD7B74C6B46e8c44f98792A1dAf8d69154"
   },
   "33784": {
     "address": "0xdbe0c372bEA8cB306CB3022381D1CC57b20834B5",