talk add skip

Mississippi-Labs · Dec 1, 2023 · bb57a85 · bb57a85
1 parent 6fef9c9
commit bb57a85
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/packages/client/src/components/Talk/index.jsx b/packages/client/src/components/Talk/index.jsx
@@ -7,6 +7,12 @@ import dark from '@/assets/img/duck_index.png';
 
 const Talk = (props) => {
   const {position, text, curPlayer, step, sample } = props;
+
+  const skip = () => {
+    // 阻止冒泡
+    event.stopPropagation();
+    props.onSkip();
+  };
   return (
     <div className='talk'>
       <div className='talk-main'>
@@ -31,7 +37,7 @@ const Talk = (props) => {
           <div className='step'>{step} / 9</div>
           <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 style={{position: 'absolute', bottom: '18px', right: '18px', fontSize: '12px', color: 'rgba(255, 255, 255, 0.80)', cursor: 'pointer'}} onClick={skip}>Skip The Tutorial {'>'}</div>
         </div>
       </div>
     </div>

diff --git a/packages/client/src/components/Talk/styles.scss b/packages/client/src/components/Talk/styles.scss
@@ -45,6 +45,8 @@
         position: absolute;
         top: -40px;
         right: 0px;
+        display: flex;
+        align-items: center;
       }
     }
   }

diff --git a/packages/client/src/pages/game/index.tsx b/packages/client/src/pages/game/index.tsx
@@ -458,6 +458,12 @@ const Game = () => {
     }
   }
 
+  const onSkip = async () => {
+    setTalked('true')
+    localStorage.setItem('talked', 'true')
+    return
+  }
+
   const blockTime = BLOCK_TIME[network?.publicClient?.chain?.id]
   return (
     <GameContext.Provider
@@ -497,7 +503,7 @@ 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
+          (curPlayer && percentage == 100 && (talked == 'false')) ? <Talk onNext={onNext} onSkip={onSkip} 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>