From 9f5299646d2390a82f19a92da648b3778ab77a9a Mon Sep 17 00:00:00 2001
From: HF <pixelplanetdev@gmail.com>
Date: Mon, 11 May 2020 19:36:22 +0200
Subject: [PATCH] add greentext

---
 src/components/Chat.jsx   | 99 +++++++++++++++++++++++++--------------
 src/styles/dark-round.css |  6 +++
 src/styles/dark.css       |  6 +++
 src/styles/default.css    |  6 +++
 tools/webpack.config.js   |  3 --
 5 files changed, 82 insertions(+), 38 deletions(-)

diff --git a/src/components/Chat.jsx b/src/components/Chat.jsx
index 81647aec..3224de86 100644
--- a/src/components/Chat.jsx
+++ b/src/components/Chat.jsx
@@ -11,6 +11,65 @@ import type { State } from '../reducers';
 import ChatInput from './ChatInput';
 import { colorFromText, splitCoordsInString } from '../core/utils';
 
+function ChatMessage({ name, text, country }) {
+  const msgText = text.trim();
+  let className = 'msg';
+  const isInfo = (name === 'info');
+  if (isInfo) {
+    className += ' info';
+  } else if (text.charAt(0) === '>') {
+    className += ' greentext';
+  }
+  const splitMsg = splitCoordsInString(msgText);
+
+  return (
+    <p className="chatmsg">
+      {
+        (!isInfo)
+        && (
+        <img
+          alt=""
+          title={country}
+          src={`${window.assetserver}/cf/${country}.gif`}
+          onError={(e) => {
+            e.target.onerror = null;
+            e.target.src = './cf/xx.gif';
+          }}
+        />
+        )
+      }
+      {
+        (!isInfo)
+        && (
+        <span
+          className="chatname"
+          style={{
+            color: colorFromText(name),
+          }}
+        >
+              &nbsp;
+          {name}
+          :&nbsp;
+        </span>
+        )
+      }
+      {
+        splitMsg.map((txt, i) => {
+          if (i % 2 === 0) {
+            return (
+              <span
+                className={className}
+              >
+                {txt}
+              </span>
+            );
+          }
+          return (<a href={`./${txt}`}>{txt}</a>);
+        })
+      }
+    </p>
+  );
+}
 
 const Chat = ({ chatMessages, chatChannel }) => {
   const listRef = useRef();
@@ -29,41 +88,11 @@ const Chat = ({ chatMessages, chatChannel }) => {
       <ul className="chatarea" ref={listRef} style={{ flexGrow: 1 }}>
         {
           channelMessages.map((message) => (
-            <p className="chatmsg">
-              {(message[0] === 'info')
-                ? <span style={{ color: '#cc0000' }}>{message[1]}</span>
-                : (
-                  <div>
-                    <img
-                      alt=""
-                      title={`${message[2]}`}
-                      src={`${window.assetserver}/cf/${message[2]}.gif`}
-                      onError={(e) => {
-                        e.target.onerror = null;
-                        e.target.src = './cf/xx.gif';
-                      }}
-                    />
-                    &nbsp;
-                    <span
-                      className="chatname"
-                      style={{
-                        color: colorFromText(message[0]),
-                      }}
-                    >
-                      {`${message[0]}`}
-                    </span>
-                    : &nbsp;
-                    {
-                    splitCoordsInString(message[1]).map((text, i) => {
-                      if (i % 2 === 0) {
-                        return (<span className="msg">{text}</span>);
-                      }
-                      return (<a href={`./${text}`}>{text}</a>);
-                    })
-                    }
-                  </div>
-                )}
-            </p>
+            <ChatMessage
+              name={message[0]}
+              text={message[1]}
+              country={message[2]}
+            />
           ))
         }
       </ul>
diff --git a/src/styles/dark-round.css b/src/styles/dark-round.css
index 2dda7305..56580ccf 100644
--- a/src/styles/dark-round.css
+++ b/src/styles/dark-round.css
@@ -92,6 +92,12 @@ tr:nth-child(even) {
 .chatmsg {
   color: white;
 }
+.msg.info{
+  color: #ff91a6;
+}
+.msg.greentext{
+  color: #94ff94;
+}
 
 #chatlink {
   color: #f9edde;
diff --git a/src/styles/dark.css b/src/styles/dark.css
index c537e794..b7e3a57d 100644
--- a/src/styles/dark.css
+++ b/src/styles/dark.css
@@ -89,6 +89,12 @@ tr:nth-child(even) {
 .chatmsg {
   color: white;
 }
+.msg.info{
+  color: #ff91a6;
+}
+.msg.greentext{
+  color: #94ff94;
+}
 
 #chatlink {
   color: #f9edde;
diff --git a/src/styles/default.css b/src/styles/default.css
index 2b65caf5..9ae84529 100644
--- a/src/styles/default.css
+++ b/src/styles/default.css
@@ -397,6 +397,12 @@ tr:nth-child(even) {
   user-select: text;
   margin: 0;
 }
+.msg.info {
+  color: #cc0000;
+}
+.msg.greentext{
+  color: green;
+}
 #chatlink {
   position: absolute;
   font-weight: bold;
diff --git a/tools/webpack.config.js b/tools/webpack.config.js
index ad876f9d..bc8d5422 100644
--- a/tools/webpack.config.js
+++ b/tools/webpack.config.js
@@ -330,9 +330,6 @@ const webConfig = {
               },
               modules: false,
               useBuiltIns: false,
-              corejs: {
-                version: 3,
-              },
               debug: false,
             }],
             "@babel/typescript",