Merge branch 'feat-mvp' of github.com:Mississippi-Labs/mississippi in…

…to feat-mvp

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

@@ -0,0 +1,52 @@
+import React, { useRef, useState, useEffect } from 'react';
+import './styles.scss';
+import eventEmitter from '../../utils/eventEmitter';
+
+console.log('eventEmitter', eventEmitter);
+
+const Log = () => {
+  const [logs, setLogs] = useState([]);
+  const myLog = useRef(null);
+
+  const scrollToBottom = () => {
+    myLog.current.scrollTop = myLog.current.scrollHeight;
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [logs]);
+
+  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;
+      } else {
+        logs.push(e);
+      }
+      setLogs([...logs]);
+    }
+    eventEmitter.on('log', addLogCb);
+    return () => {
+      eventEmitter.off('log', addLogCb);
+    };
+  }, []);
+
+  return (
+    <div style={{ fontFamily: 'MISS', height: '200px', position: 'fixed', bottom: '40px', left: '18px', zIndex: '99' }}>
+      <div className="title" style={{ width: '249px', height: '32px', color: '#FFF', fontSize: '18px' }}>Log</div>
+      <div ref={myLog} style={{height: '168px',overflow: 'auto'}}>
+        {
+          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>
+          ))
+        }
+      </div>
+
+    </div>
+  );
+};
+
+export default Log;

packages/client/src/components/UserAvatar/index.tsx

@@ -1,26 +1,44 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import './styles.scss';
 import UserAddress from '@/components/UserAddress';
 import { Stage } from '@pixi/react';
 import Player, { IPlayer } from '@/components/PIXIPlayers/Player';
+import gemImg from '@/assets/img/gem.png';
 
 interface IProps extends IPlayer {
   address: string;
 }
 
 const UserAvatar = (props: IProps) => {
-
+  const [diffHp, setDiffHp] = useState(0);
   const { address, balance, ...rest } = props;
-
+  console.log(props, 'props')
+  useEffect(() => {
+    setDiffHp(props.diffHp)
+    setTimeout(() => {
+      setDiffHp(0)
+    }, 1000)
+  }, [props.diffHp])
   return (
     <div className="mi-c-user-avatar">
       <div className={`avatar-box`}>
-        <Stage width={72} height={72} options={{ resolution: 1, backgroundAlpha: 0 }}>
-          <Player {...rest} size={72} x={0} y={0.3} isPlaying={false} name={''} />
+        <Stage width={60} height={60} options={{ resolution: 1, backgroundAlpha: 0 }}>
+          <Player {...rest} size={60} x={0} y={0.3} isPlaying={false} name={''} />
         </Stage>
       </div>
 
-      <UserAddress address={address} account={balance + 'ETH'}/>
+      <div className='user-info'>
+        <div className='user-hp'>
+          <div className='now-hp' style={{width: (props.hp / props.maxHp) * 100 + '%'}}></div>
+          {
+            diffHp > 0 ? <div className='diff-hp'>+{diffHp}</div> : null
+          }
+        </div>
+        <div className='gems'>
+          <img src={gemImg} alt=""/>
+          <p>{props.oreBalance}</p>
+        </div>
+      </div>
     </div>
   );
 };

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

@@ -1,42 +1,94 @@
 .mi-c-user-avatar {
-    position: relative;
-    padding-left: 80px;
-    //width: 160px;
+  position: relative;
+  padding-left: 80px;
+  //width: 160px;
+  height: 80px;
+
+  .avatar-box {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    left: 0;
+    top: 0;
+    width: 80px;
     height: 80px;
+    border: 5px solid #5D2E1C;
+    border-radius: 10px;
+    background-color: #FCBD80;
+    box-sizing: border-box;
+  }
 
-    .avatar-box {
-        position: absolute;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        left: 0;
-        top: 0;
-        width: 80px;
-        height: 80px;
-        border: 4px solid #5D2E1C;
-        border-radius: 10px;
-        background-color: #FCBD80;
-        box-sizing: border-box;
-    }
+  .hp {
+    background: red;
+  }
 
-    .hp {
-        background: red;
-    }
+  .ap {
+    background: yellow;
+  }
+
+  .hp-wrapper,
+  .ap-wrapper {
+    //height: 20px;
+    border: 2px solid;
 
-    .ap {
-        background: yellow;
+    &>div {
+      height: 16px;
     }
+  }
 
-    .hp-wrapper, .ap-wrapper {
-        //height: 20px;
-        border: 2px solid;
+  .user-address-wrapper {
+    padding: 10px;
+  }
+}
 
-        & > div {
-            height: 16px;
-        }
+.user-info {
+  margin-left: 10px;
+  .user-hp {
+    border-radius: 5px;
+    border: 5px solid #DDC9B2;
+    background: #FFF;
+    width: 300px;
+    height: 25px;
+    box-sizing: border-box;
+    position: relative;
+    .now-hp {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 15px;
+      background: #FF0000;
+      border-radius: 5px;
+      width: 50%;
     }
-
-    .user-address-wrapper {
-        padding: 10px;
+    .diff-hp {
+      font-family: MISS;
+      font-size: 12px;
+      color: #f00;
+      position: absolute;
+      right: -50px;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+    }
+  }
+  .gems {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+    img {
+      width: 30px;
+      height: auto;
+    }
+    p {
+      color: #FFF;
+      font-family: MISS;
+      font-size: 15px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+      margin-left: 10px;
+      padding-top: 5px;
     }
+  }
 }