From 6cb416e2fd785df49318f1cb62a150b7a3427c2e Mon Sep 17 00:00:00 2001
From: Tiyo <tiyosheng@gmail.com>
Date: Mon, 27 Nov 2023 22:22:33 +0800
Subject: [PATCH] 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 (
-    <div style={{ fontFamily: 'MISS', height: '200px', position: 'fixed', bottom: '40px', left: '18px', zIndex: '99' }}>
+    <div style={{ fontFamily: 'MISS', height: '200px', position: 'fixed', bottom: '40px', left: '18px', zIndex: '99', width: '250px' }}>
       <div className="title" style={{ width: '249px', height: '32px', color: '#FFF', fontSize: '18px' }}>Log</div>
-      <div ref={myLog} style={{height: '168px',overflow: 'auto'}}>
+      <div className='log-content' ref={myLog} style={{height: '168px',overflow: 'auto', width: '250px'}}>
         {
           logs.map((log, index) => (
             <div key={index} style={{ color: log?.type == 'error' ? '#F00' : log.block ? '#FFF' : '#FFE303', fontSize: '10px', lineHeight: '1.4', marginBottom: '10px' }}>{log?.type == 'error' ? 'Error' : log.block || 'waiting'} {log.msg}</div>
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 (
     <div className='talk'>
@@ -20,9 +22,12 @@ const Talk = (props) => {
                   equip={curPlayer?.equip}
                 />
               </Stage>
-            ) : null
+            ) : <img src={dark} className='dark' />
           }
         </div>
+        <div className='text'>
+          <Typewriter text={text} typingSpeed={50} name={curPlayer?.name || ''} />
+        </div>
       </div>
     </div>
   );
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 <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>
+  </div>;
+}
+
+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 = () => {
             :
             <PIXIAPP/>
         }
-
         <div className="discord">
           <a href="https://discord.gg/UkarGN9Fjn" target="_blank"><img src={discordImg} /></a>
         </div>