diff options
| -rw-r--r-- | src/App.css | 20 | ||||
| -rw-r--r-- | src/Chat.js | 116 |
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> |