Implementación completa del protocolo de ChatHEADmaster

2 files changed, 118 insertions, 18 deletions

diff --git a/src/App.css b/src/App.css
index 1b1cca9..22fe12f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -24,3 +24,23 @@ body {
   overflow-y: scroll;
   overflow-wrap: break-word;
 }
+
+.iidx {
+  animation-name: notice;
+  animation-duration: 0.1s;
+  animation-iteration-count: infinite;
+}
+@keyframes notice {
+  0% {
+    color: #ffa400;
+  }
+  25% {
+    color: #467fff;
+  }
+  50% {
+    color: #d0ffe1;
+  }
+  100% {
+    color: #ff5a98;
+  }
+}
diff --git a/src/Chat.js b/src/Chat.js
index c2c6841..b55610c 100644
--- a/src/Chat.js
+++ b/src/Chat.js
@@ -12,7 +12,8 @@ class Chat extends Component {
       chatMessage: "",
       chatUserCount: 0,
       isChatOnline: false,
-      filterMessages: false
+      filterMessages: false,
+      isAdministrador: false
     };
     this.client = {};
     this.chatColors = [
@@ -45,7 +46,8 @@ class Chat extends Component {
     own = false,
     sender = "",
     color = "grey",
-    timestamp = ""
+    timestamp = "",
+    isNotice = false
   ) {
     const ts = timestamp ? new Date(parseInt(timestamp)) : new Date();
     this.setState(
@@ -58,7 +60,8 @@ class Chat extends Component {
             own,
             timestamp: ts,
             author: sender,
-            color: color
+            color: color,
+            isNotice: isNotice
           }
         ]
       }),
@@ -71,8 +74,46 @@ class Chat extends Component {
     );
   }
 
-  printMessage(message, color) {
-    this.addMessage(message, "", false, "", color);
+  printMessage(message, color, notice = false) {
+    this.addMessage(message, "", false, "", color, "", notice);
+  }
+
+  processCommand(command) {
+    const args = command.split(" ");
+    const argCount = args.length;
+    switch (args[0]) {
+      case "/login":
+        if (argCount === 2) {
+          this.client.send("LOGIN:" + args[1]);
+        }
+        break;
+      case "/logout":
+        this.client.send("LOGOUT");
+        break;
+      case "/notice":
+        if (argCount > 1) {
+          this.client.send("NOTICE:0:" + command.replace(args[0], ""));
+        }
+        break;
+      case "/kick":
+        if (argCount === 2) {
+          this.client.send("KICK:" + args[1]);
+        }
+        break;
+      case "/ban":
+        if (argCount === 2) {
+          this.client.send("BAN:" + args[1]);
+        }
+        break;
+      case "/title":
+        if (argCount > 1) {
+          this.client.send("SETTITLE:" + command.replace(args[0], ""));
+        }
+        break;
+      default:
+        break;
+    }
+    this.setState({ chatMessage: "" });
   }
 
   componentWillMount() {
@@ -94,10 +135,13 @@ class Chat extends Component {
   sendMessage() {
     const { chatMessage } = this.state;
     const { stream } = this.props;
-    console.log(stream);
     if (chatMessage === "") {
       return;
     }
+    if (chatMessage.startsWith("/")) {
+      this.processCommand(chatMessage);
+      return;
+    }
     this.client.send(`MSG:${stream.server_name}:${chatMessage}`);
     this.addMessage(chatMessage, stream.server_name, true, "", "black");
     this.setState({ chatMessage: "" });
@@ -110,7 +154,6 @@ class Chat extends Component {
         this.addMessage(this.translateColon(args[2]), args[1]);
         break;
       case "HMSG":
-        console.log(line);
         this.addMessage(
           this.translateColon(args[3]),
           args[2],
@@ -121,12 +164,7 @@ class Chat extends Component {
         );
         break;
       case "FMSG":
-        this.addMessage(
-          this.translateColon(args[3]),
-          this.chatColors[args[2]],
-          false,
-          args[1]
-        );
+        this.addMessage(this.translateColon(args[3]), args[2], false, args[1]);
         break;
       case "WELCOME":
         this.printMessage("Conectado al chat, " + args[1], "green");
@@ -146,6 +184,36 @@ class Chat extends Component {
             Renard: me lo meto en la raja?
             z411: bien adentro */
         break;
+      case "BADPASS":
+        this.printMessage("Error: contraseña incorrecta!", "red");
+        break;
+      case "LOGIN_OK":
+        this.printMessage(
+          `Bienvenido ${args[1]}, ahora tienes permisos de administrador.`,
+          "blue"
+        );
+        this.setState({ isAdministrador: true });
+        break;
+      case "FORBIDDEN":
+        this.printMessage(
+          "Error: No tienes permisos suficientes para ejecutar esta acción",
+          "red"
+        );
+        break;
+      case "KICKED":
+        this.printMessage("Has sido expulsado del chat", "red");
+        this.client.close();
+        break;
+      case "TITLE":
+        this.printMessage(
+          "El streamer ha cambiado el título de la transmisión",
+          "orange"
+        );
+        this.client.close();
+        break;
+      case "NOTICE":
+        this.printMessage(args[2], "yellow", true);
+        break;
       default:
         console.error("[Chat] Unsupported command " + args[0]);
         break;
@@ -158,15 +226,19 @@ class Chat extends Component {
       chatMessage,
       chatUserCount,
       isChatOnline,
-      filterMessages
+      filterMessages,
+      isAdministrador
     } = this.state;
     const { stream } = this.props;
 
-    const MessageItem = ({ message, index }) => {
+    const MessageItem = ({ message, index, showAuthor }) => {
       return (
         <List.Item key={index}>
           [<Moment format="HH:mm:ss" date={message.timestamp} />]{" "}
-          <span className={`ui text ${message.color}`}>
+          {message.author !== "" && showAuthor && `(${message.author})`}
+          <span
+            className={message.isNotice ? "iidx" : `ui text ${message.color}`}
+          >
             {`${message.stream && "[" + message.stream + "]"} ${
               message.content
             }`}
@@ -186,10 +258,18 @@ class Chat extends Component {
             {chat.map((message, i) =>
               filterMessages ? (
                 message.stream === stream.server_name && (
-                  <MessageItem message={message} index={i} />
+                  <MessageItem
+                    message={message}
+                    index={i}
+                    showAuthor={isAdministrador}
+                  />
                 )
               ) : (
-                <MessageItem message={message} index={i} />
+                <MessageItem
+                  message={message}
+                  index={i}
+                  showAuthor={isAdministrador}
+                />
               )
             )}
           </List>