diff --git a/src/Chat.css b/src/Chat.css new file mode 100644 index 0000000..f28bc67 --- /dev/null +++ b/src/Chat.css @@ -0,0 +1,11 @@ +.emote:hover .code { + display: block; + position: relative; + cursor: copy; + top: 30; + z-index: 999; +} + +.code { + display: none; +} \ No newline at end of file diff --git a/src/components/Chat.js b/src/components/Chat.js index f0f0c51..226ee51 100644 --- a/src/components/Chat.js +++ b/src/components/Chat.js @@ -1,4 +1,5 @@ import React, { Component } from 'react' +import '../Chat.css' import moment from 'moment' import axios from 'axios' import { toJS } from 'mobx'; @@ -139,11 +140,12 @@ class Chat extends Component { } }) - let m = (channel, userstate, message, time, key) => { + let addHtmlCSSToMessage = (channel, userstate, message, time, key) => { const k1 = `${channel}-${key}` const k2 = `${time}-${key}` const k3 = `${userstate['display-name']}-${key}` const k4 = `message-${key}` + return
{userstate['display-name'] + ': '} - {this.parseForEmotes(message, removeHashtag(channel))} + {parseForEmotes(message, removeHashtag(channel))}
} + let parseForEmotes = (message, channel) => { + let split_message = message.split(' ') + for (let i in split_message) { + const code = split_message[i] + if (twitch_emotes_map.has(code)) { + split_message[i] = ` +
+ ${code} + emote +
+ ` + } + if (bttv_emotes_map.has(code)) { + split_message[i] = `emote` + } + if (ffz_emotes_map.has(channel)) { + // console.log(ffz_emotes_map) + if (ffz_emotes_map.get(channel).has(code)) { + split_message[i] = `emote` + } + } + if (bttv_user_emotes_map.has(channel)) { + if (bttv_user_emotes_map.get(channel).has(code)) { + split_message[i] = `emote` + } + } + } + + console.log(split_message) + + return ReactHtmlParser(split_message.join(' ')); + } + + let processMessage = (channel, message, key, opacity = 1) => { let color = blueGrey[900] @@ -178,7 +214,7 @@ class Chat extends Component { // Step 1 const key = store.msg_id store.msg_id = store.msg_id + 1 - const msg = m(channel, userstate, message, time, key) + const msg = addHtmlCSSToMessage(channel, userstate, message, time, key) // Step 2 const newMessage = processMessage(channel, msg, key) // Step 3 @@ -219,7 +255,7 @@ class Chat extends Component { const key = store.msg_id store.msg_id = store.msg_id + 1 - const msg = m(channel, userstate, message, time) + const msg = addHtmlCSSToMessage(channel, userstate, message, time) const newMessage = processMessage(channel, msg, key, 0.75) store.messages.push(newMessage) } @@ -232,6 +268,10 @@ class Chat extends Component { this.chatScroll.removeEventListener('scroll', this.handleChatScroll.bind(this)) } + test() { + console.log('boo') + } + truncateMessages() { const truncatedMessages = store.messages if (truncatedMessages.length > 750) { @@ -243,31 +283,6 @@ class Chat extends Component { } } - parseForEmotes(message, channel) { - let split_message = message.split(' ') - for (let i in split_message) { - const code = split_message[i] - if (twitch_emotes_map.has(code)) { - split_message[i] = `` - } - if (bttv_emotes_map.has(code)) { - split_message[i] = `` - } - if (ffz_emotes_map.has(channel)) { - // console.log(ffz_emotes_map) - if (ffz_emotes_map.get(channel).has(code)) { - split_message[i] = `` - } - } - if (bttv_user_emotes_map.has(channel)) { - if (bttv_user_emotes_map.get(channel).has(code)) { - split_message[i] = `` - } - } - } - return ReactHtmlParser(split_message.join(' ')); - } - sendMessage(event) { const message = this.messageInput.value let channel = store.joinedChannels[store.channelSelectValue].key @@ -379,7 +394,7 @@ class Chat extends Component { { this.messageInput = el }} onKeyPress={this.sendMessage.bind(this)} onKeyDown={this.switchChannel.bind(this)} @@ -394,7 +409,7 @@ class Chat extends Component { {chatArea}
0 ? {/* More messages below modal box */ } { (store.scrollToEnd === false) ? -
{ this.moreMessagesBelow = el; }} id={'moreMessagesBelow'}> -
More Messages Below.
-
: -
+
{ this.moreMessagesBelow = el; }} id={'moreMessagesBelow'}> +
More Messages Below.
+
: +
} onKeyDown = { this.switchChannel.bind(this) } @@ -181,68 +181,93 @@ render() { } } - // setTimeout(() => { - // store.join('#icarusFW') - // store.join('#Pasky') - // store.join('#Metako') - // store.join('#landail') - // store.join('#DarkSaber2k') - // store.join('#maurice_33') - // store.join('#Aquas') - // store.join('#Fiercekyo') - // store.join('#mulsqi') - // store.join('#bafael') - // store.join('#theboyks') - // store.join('#Raikou') - // store.join('#perpetualmm') - // store.join('#Bingchang') - // store.join('#frokenok') - // store.join('#vultus') - // store.join('#neohart') - // store.join('#zetsubera') - // store.join('#procplays') - // store.join('#lazerlong') - // store.join('#testrunner') - // store.join('#jiseed') - // store.join('#xxxindyxxx') - // store.join('#narcissawright') - // store.join('#Goati_') - // store.join('#TheLCC') - // store.join('#azureseishin') - // store.join('#pykn') - // store.join('#jiggeh') - // store.join('#chuboh') - // store.join('#UFotekkie') - // store.join('#Ty2358') - // store.join('#sakegeist') - // store.join('#klaige') - // store.join('#Go1den') - // store.join('#capnclever') - // store.join('#omnigamer') - // store.join('#sylux98') - // store.join('#swordsmankirby') - // store.join('#Macaw45') - // store.join('#freddeh') - // store.join('#ghou02') - // store.join('#tterraj42') - // store.join('#superKing13') - // store.join('#CavemanDCJ') - // store.join('#yagamoth') - // store.join('#shadowJacky') - // store.join('#Jenja23') - // }, 4000) - - await this.client.join(channel).then((data) => { - this.channels.set(channel, { - key: channel, - color: web_safe_colors[randomIntFromInterval(0, max_length - 1)], - joined: true, - autoJoin: true, - }) - // Save to localStorage - LOCAL_STORAGE.setItem(CHANNELS, mapToJson(this.channels)) - this.joinedChannels = _.filter(toJS(this.channels), (ch) => { if (ch) return ch.joined }) - // console.log(toJS(this.channels)) - // console.log(toJS(this.joinedChannels)) - return true - }) \ No newline at end of file +// setTimeout(() => { +// store.join('#icarusFW') +// store.join('#Pasky') +// store.join('#Metako') +// store.join('#landail') +// store.join('#DarkSaber2k') +// store.join('#maurice_33') +// store.join('#Aquas') +// store.join('#Fiercekyo') +// store.join('#mulsqi') +// store.join('#bafael') +// store.join('#theboyks') +// store.join('#Raikou') +// store.join('#perpetualmm') +// store.join('#Bingchang') +// store.join('#frokenok') +// store.join('#vultus') +// store.join('#neohart') +// store.join('#zetsubera') +// store.join('#procplays') +// store.join('#lazerlong') +// store.join('#testrunner') +// store.join('#jiseed') +// store.join('#xxxindyxxx') +// store.join('#narcissawright') +// store.join('#Goati_') +// store.join('#TheLCC') +// store.join('#azureseishin') +// store.join('#pykn') +// store.join('#jiggeh') +// store.join('#chuboh') +// store.join('#UFotekkie') +// store.join('#Ty2358') +// store.join('#sakegeist') +// store.join('#klaige') +// store.join('#Go1den') +// store.join('#capnclever') +// store.join('#omnigamer') +// store.join('#sylux98') +// store.join('#swordsmankirby') +// store.join('#Macaw45') +// store.join('#freddeh') +// store.join('#ghou02') +// store.join('#tterraj42') +// store.join('#superKing13') +// store.join('#CavemanDCJ') +// store.join('#yagamoth') +// store.join('#shadowJacky') +// store.join('#Jenja23') +// }, 4000) + +await this.client.join(channel).then((data) => { + this.channels.set(channel, { + key: channel, + color: web_safe_colors[randomIntFromInterval(0, max_length - 1)], + joined: true, + autoJoin: true, + }) + // Save to localStorage + LOCAL_STORAGE.setItem(CHANNELS, mapToJson(this.channels)) + this.joinedChannels = _.filter(toJS(this.channels), (ch) => { if (ch) return ch.joined }) + // console.log(toJS(this.channels)) + // console.log(toJS(this.joinedChannels)) + return true +}) + +let parseForEmotes = (message, channel) => { + let split_message = message.split(' ') + for (let i in split_message) { + const code = split_message[i] + if (twitch_emotes_map.has(code)) { + split_message[i] = `` + } + if (bttv_emotes_map.has(code)) { + split_message[i] = `` + } + if (ffz_emotes_map.has(channel)) { + // console.log(ffz_emotes_map) + if (ffz_emotes_map.get(channel).has(code)) { + split_message[i] = `` + } + } + if (bttv_user_emotes_map.has(channel)) { + if (bttv_user_emotes_map.get(channel).has(code)) { + split_message[i] = emote + } + } + } + return ReactHtmlParser(split_message.join(' ')); +} \ No newline at end of file