Skip to content

Commit

Permalink
Refactoring and trying to add 'onHover show emote code'
Browse files Browse the repository at this point in the history
  • Loading branch information
@takumiadachi
takumiadachi committed Feb 14, 2018
1 parent e42eb3d commit 38bb273
Show file tree
Hide file tree
Showing 3 changed files with 152 additions and 101 deletions.
11 changes: 11 additions & 0 deletions src/Chat.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.emote:hover .code {
display: block;
position: relative;
cursor: copy;
top: 30;
z-index: 999;
}

.code {
display: none;
}
77 changes: 46 additions & 31 deletions src/components/Chat.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { Component } from 'react'
import '../Chat.css'
import moment from 'moment'
import axios from 'axios'
import { toJS } from 'mobx';
Expand Down Expand Up @@ -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 <div style={{ marginLeft: '5px', padding: 0, }} key={k1}>
<span style={{
opacity: '0.8', fontSize: '10px', fontWeight: 'bold',
Expand All @@ -152,10 +154,44 @@ class Chat extends Component {
{time} {channel}
</span>
<span style={{ color: `${userstate['color']}`, marginLeft: '2px', }} key={k3}>{userstate['display-name'] + ': '} </span>
<span style={{}} key={k4}>{this.parseForEmotes(message, removeHashtag(channel))}</span>
<span style={{}} key={k4}>{parseForEmotes(message, removeHashtag(channel))}</span>
</div>
}

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] = `
<div class='emote' style='display: inline-block;'>
<span class='code'>${code}</span>
<img style='vertical-align: middle; padding: 1px;' alt='emote' height='38' src=${twitch_emotes_map.get(code)} />
</div>
`
}
if (bttv_emotes_map.has(code)) {
split_message[i] = `<img style='vertical-align: middle; padding: 1px;' alt='emote' height='38' src=${bttv_emotes_map.get(code)} />`
}
if (ffz_emotes_map.has(channel)) {
// console.log(ffz_emotes_map)
if (ffz_emotes_map.get(channel).has(code)) {
split_message[i] = `<img style='vertical-align: middle; padding: 1px;' alt='emote' height='38' src=${ffz_emotes_map.get(channel).get(code)} />`
}
}
if (bttv_user_emotes_map.has(channel)) {
if (bttv_user_emotes_map.get(channel).has(code)) {
split_message[i] = `<img style='vertical-align: middle; padding: 1px;' alt='emote' height='38' src=${bttv_user_emotes_map.get(channel).get(code)} />`
}
}
}

console.log(split_message)

return ReactHtmlParser(split_message.join(' '));
}


let processMessage = (channel, message, key, opacity = 1) => {
let color = blueGrey[900]

Expand All @@ -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
Expand Down Expand Up @@ -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)
}
Expand All @@ -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) {
Expand All @@ -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] = `<img style='vertical-align: middle; padding: 1px;' height='38' src=${twitch_emotes_map.get(code)} />`
}
if (bttv_emotes_map.has(code)) {
split_message[i] = `<img style='vertical-align: middle; padding: 1px;' height='38' src=${bttv_emotes_map.get(code)} />`
}
if (ffz_emotes_map.has(channel)) {
// console.log(ffz_emotes_map)
if (ffz_emotes_map.get(channel).has(code)) {
split_message[i] = `<img style='vertical-align: middle; padding: 1px;' height='38' src=${ffz_emotes_map.get(channel).get(code)} />`
}
}
if (bttv_user_emotes_map.has(channel)) {
if (bttv_user_emotes_map.get(channel).has(code)) {
split_message[i] = `<img style='vertical-align: middle: padding: 1px;' height='38' src=${bttv_user_emotes_map.get(channel).get(code)} />`
}
}
}
return ReactHtmlParser(split_message.join(' '));
}

sendMessage(event) {
const message = this.messageInput.value
let channel = store.joinedChannels[store.channelSelectValue].key
Expand Down Expand Up @@ -379,7 +394,7 @@ class Chat extends Component {
<TextField
placeholder=
{store.joinedChannels[store.channelSelectValue] ? `${store.joinedChannels[store.channelSelectValue].key}` :
`Send a Message`
`Send a Message`
}
inputRef={(el) => { this.messageInput = el }}
onKeyPress={this.sendMessage.bind(this)} onKeyDown={this.switchChannel.bind(this)}
Expand All @@ -394,7 +409,7 @@ class Chat extends Component {
{chatArea}
<div style={{
width: w, height: 60,
display: 'flex',
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
alignSelf: 'auto',
Expand Down
165 changes: 95 additions & 70 deletions src/scratchpad.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,11 +157,11 @@ const channelSelect = store.channels.length > 0 ?
{/* More messages below modal box */ }
{
(store.scrollToEnd === false) ?
<div style={{ display: 'inline-block', position: 'absolute', top: `${800}px`, marginLeft: '10px', opacity: '0.85', backgroundColor: blueGrey[600], padding: 10, }}
onClick={this.scrollToBottom.bind(this)} ref={(el) => { this.moreMessagesBelow = el; }} id={'moreMessagesBelow'}>
<div>More Messages Below.</div>
</div> :
<div></div>
<div style={{ display: 'inline-block', position: 'absolute', top: `${800}px`, marginLeft: '10px', opacity: '0.85', backgroundColor: blueGrey[600], padding: 10, }}
onClick={this.scrollToBottom.bind(this)} ref={(el) => { this.moreMessagesBelow = el; }} id={'moreMessagesBelow'}>
<div>More Messages Below.</div>
</div> :
<div></div>
}

onKeyDown = { this.switchChannel.bind(this) }
Expand All @@ -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
})
// 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] = `<img style='vertical-align: middle; padding: 1px;' height='38' src=${twitch_emotes_map.get(code)} />`
}
if (bttv_emotes_map.has(code)) {
split_message[i] = `<img style='vertical-align: middle; padding: 1px;' height='38' src=${bttv_emotes_map.get(code)} />`
}
if (ffz_emotes_map.has(channel)) {
// console.log(ffz_emotes_map)
if (ffz_emotes_map.get(channel).has(code)) {
split_message[i] = `<img style='vertical-align: middle; padding: 1px;' height='38' src=${ffz_emotes_map.get(channel).get(code)} />`
}
}
if (bttv_user_emotes_map.has(channel)) {
if (bttv_user_emotes_map.get(channel).has(code)) {
split_message[i] = <img style={{ verticalAlign: 'middle', padding: '1px' }} alt='emote' height={38} src={bttv_user_emotes_map.get(channel).get(code)} />
}
}
}
return ReactHtmlParser(split_message.join(' '));
}

0 comments on commit 38bb273

Please sign in to comment.