set colors in chat according to theme
fix default color on refresh
This commit is contained in:
parent
f421f22430
commit
cb2076eb48
|
@ -33,13 +33,14 @@ const Chat = ({
|
||||||
const [nameRegExp, setNameRegExp] = useState(null);
|
const [nameRegExp, setNameRegExp] = useState(null);
|
||||||
const { stayScrolled } = useStayScrolled(listRef, {
|
const { stayScrolled } = useStayScrolled(listRef, {
|
||||||
initialScroll: Infinity,
|
initialScroll: Infinity,
|
||||||
|
inaccuracy: 10,
|
||||||
});
|
});
|
||||||
|
|
||||||
const channelMessages = chatMessages[chatChannel];
|
const channelMessages = chatMessages[chatChannel];
|
||||||
|
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
stayScrolled();
|
stayScrolled();
|
||||||
}, [channelMessages]);
|
}, [channelMessages.length]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (channelMessages.length === MAX_CHAT_MESSAGES) {
|
if (channelMessages.length === MAX_CHAT_MESSAGES) {
|
||||||
|
@ -66,9 +67,10 @@ const Chat = ({
|
||||||
|
|
||||||
function handleSubmit(e) {
|
function handleSubmit(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (!inputMessage) return;
|
const msg = inputMessage.trim();
|
||||||
|
if (!msg) return;
|
||||||
// send message via websocket
|
// send message via websocket
|
||||||
ProtocolClient.sendChatMessage(inputMessage, chatChannel);
|
ProtocolClient.sendChatMessage(msg, chatChannel);
|
||||||
setInputMessage('');
|
setInputMessage('');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,8 +3,9 @@
|
||||||
* @flow
|
* @flow
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
import { colorFromText } from '../core/utils';
|
import { colorFromText, setBrightness } from '../core/utils';
|
||||||
|
|
||||||
|
|
||||||
function ChatMessage({
|
function ChatMessage({
|
||||||
|
@ -12,6 +13,7 @@ function ChatMessage({
|
||||||
msgArray,
|
msgArray,
|
||||||
country,
|
country,
|
||||||
insertText,
|
insertText,
|
||||||
|
darkMode,
|
||||||
}) {
|
}) {
|
||||||
if (!name || !msgArray) {
|
if (!name || !msgArray) {
|
||||||
return null;
|
return null;
|
||||||
|
@ -44,7 +46,7 @@ function ChatMessage({
|
||||||
<span
|
<span
|
||||||
className="chatname"
|
className="chatname"
|
||||||
style={{
|
style={{
|
||||||
color: colorFromText(name),
|
color: setBrightness(colorFromText(name), darkMode),
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
}}
|
}}
|
||||||
role="button"
|
role="button"
|
||||||
|
@ -71,7 +73,7 @@ function ChatMessage({
|
||||||
<span
|
<span
|
||||||
className="ping"
|
className="ping"
|
||||||
style={{
|
style={{
|
||||||
color: colorFromText(txt.substr(1)),
|
color: setBrightness(colorFromText(txt.substr(1)), darkMode),
|
||||||
}}
|
}}
|
||||||
>{txt}</span>
|
>{txt}</span>
|
||||||
);
|
);
|
||||||
|
@ -80,7 +82,7 @@ function ChatMessage({
|
||||||
<span
|
<span
|
||||||
className="mention"
|
className="mention"
|
||||||
style={{
|
style={{
|
||||||
color: colorFromText(txt.substr(1)),
|
color: setBrightness(colorFromText(txt.substr(1)), darkMode),
|
||||||
}}
|
}}
|
||||||
>{txt}</span>
|
>{txt}</span>
|
||||||
);
|
);
|
||||||
|
@ -92,4 +94,10 @@ function ChatMessage({
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ChatMessage;
|
function mapStateToProps(state: State) {
|
||||||
|
const { style } = state.gui;
|
||||||
|
const darkMode = style.indexOf('dark') !== -1;
|
||||||
|
return { darkMode };
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(mapStateToProps)(ChatMessage);
|
||||||
|
|
|
@ -199,6 +199,9 @@ export function numberToString(num: number): string {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* generates a color based on a given string
|
||||||
|
*/
|
||||||
export function numberToStringFull(num: number): string {
|
export function numberToStringFull(num: number): string {
|
||||||
if (num < 0) {
|
if (num < 0) {
|
||||||
return `${num} :-(`;
|
return `${num} :-(`;
|
||||||
|
@ -226,3 +229,24 @@ export function colorFromText(str: string) {
|
||||||
|
|
||||||
return `#${'00000'.substring(0, 6 - c.length)}${c}`;
|
return `#${'00000'.substring(0, 6 - c.length)}${c}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* sets a color into bright or dark mode
|
||||||
|
*/
|
||||||
|
export function setBrightness(hex, dark: boolean = false) {
|
||||||
|
hex = hex.replace(/^\s*#|\s*$/g, '');
|
||||||
|
|
||||||
|
if (hex.length === 3) {
|
||||||
|
hex = hex.replace(/(.)/g, '$1$1');
|
||||||
|
}
|
||||||
|
|
||||||
|
let r = Math.floor(parseInt(hex.substr(0, 2), 16) / 2);
|
||||||
|
let g = Math.floor(parseInt(hex.substr(2, 2), 16) / 2);
|
||||||
|
let b = Math.floor(parseInt(hex.substr(4, 2), 16) / 2);
|
||||||
|
if (dark) {
|
||||||
|
r += 128;
|
||||||
|
g += 128;
|
||||||
|
b += 128;
|
||||||
|
}
|
||||||
|
return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
|
||||||
|
}
|
||||||
|
|
|
@ -109,6 +109,7 @@ function getViewFromURL(canvases: Object) {
|
||||||
canvasMaxTiledZoom: getMaxTiledZoom(canvasSize),
|
canvasMaxTiledZoom: getMaxTiledZoom(canvasSize),
|
||||||
palette: new Palette(colors, 0),
|
palette: new Palette(colors, 0),
|
||||||
clrIgnore,
|
clrIgnore,
|
||||||
|
selectedColor: clrIgnore,
|
||||||
view,
|
view,
|
||||||
viewscale: scale,
|
viewscale: scale,
|
||||||
scale,
|
scale,
|
||||||
|
@ -125,6 +126,7 @@ function getViewFromURL(canvases: Object) {
|
||||||
canvasMaxTiledZoom: getMaxTiledZoom(canvasd.size),
|
canvasMaxTiledZoom: getMaxTiledZoom(canvasd.size),
|
||||||
palette: new Palette(canvasd.colors, 0),
|
palette: new Palette(canvasd.colors, 0),
|
||||||
clrIgnore: canvasd.cli,
|
clrIgnore: canvasd.cli,
|
||||||
|
selectedColor: canvasd.cli,
|
||||||
view: getGivenCoords(),
|
view: getGivenCoords(),
|
||||||
viewscale: DEFAULT_SCALE,
|
viewscale: DEFAULT_SCALE,
|
||||||
scale: DEFAULT_SCALE,
|
scale: DEFAULT_SCALE,
|
||||||
|
@ -135,7 +137,6 @@ function getViewFromURL(canvases: Object) {
|
||||||
const initialState: CanvasState = {
|
const initialState: CanvasState = {
|
||||||
...getViewFromURL(DEFAULT_CANVASES),
|
...getViewFromURL(DEFAULT_CANVASES),
|
||||||
fetchs: 0,
|
fetchs: 0,
|
||||||
selectedColor: 3,
|
|
||||||
isHistoricalView: false,
|
isHistoricalView: false,
|
||||||
historicalDate: null,
|
historicalDate: null,
|
||||||
historicalTime: null,
|
historicalTime: null,
|
||||||
|
|
|
@ -228,60 +228,65 @@ class SocketServer extends WebSocketEvents {
|
||||||
}
|
}
|
||||||
|
|
||||||
static async onTextMessage(text, ws) {
|
static async onTextMessage(text, ws) {
|
||||||
let message;
|
|
||||||
let channelId;
|
|
||||||
try {
|
try {
|
||||||
const data = JSON.parse(text);
|
let message;
|
||||||
[message, channelId] = data;
|
let channelId;
|
||||||
channelId = Number(channelId);
|
try {
|
||||||
if (Number.isNaN(channelId)) {
|
const data = JSON.parse(text);
|
||||||
throw new Error('NaN');
|
[message, channelId] = data;
|
||||||
}
|
channelId = Number(channelId);
|
||||||
} catch {
|
if (Number.isNaN(channelId)) {
|
||||||
logger.warn(
|
throw new Error('NaN');
|
||||||
`Received unparseable message from ${ws.name} on websocket: ${text}`,
|
}
|
||||||
);
|
} catch {
|
||||||
return;
|
logger.warn(
|
||||||
}
|
`Received unparseable message from ${ws.name} on websocket: ${text}`,
|
||||||
|
);
|
||||||
if (ws.name && message) {
|
|
||||||
const waitLeft = ws.rateLimiter.tick();
|
|
||||||
if (waitLeft) {
|
|
||||||
ws.send(JSON.stringify([
|
|
||||||
'info',
|
|
||||||
// eslint-disable-next-line max-len
|
|
||||||
`You are sending messages too fast, you have to wait ${Math.floor(waitLeft / 1000)}s :(`,
|
|
||||||
'il',
|
|
||||||
channelId,
|
|
||||||
]));
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const errorMsg = await chatProvider.sendMessage(
|
message = message.trim();
|
||||||
ws.user,
|
|
||||||
message,
|
if (ws.name && message) {
|
||||||
channelId,
|
const waitLeft = ws.rateLimiter.tick();
|
||||||
);
|
if (waitLeft) {
|
||||||
if (!errorMsg) {
|
ws.send(JSON.stringify([
|
||||||
// automute on repeated message spam
|
'info',
|
||||||
if (ws.last_message && ws.last_message === message) {
|
// eslint-disable-next-line max-len
|
||||||
ws.message_repeat += 1;
|
`You are sending messages too fast, you have to wait ${Math.floor(waitLeft / 1000)}s :(`,
|
||||||
if (ws.message_repeat >= 4) {
|
'il',
|
||||||
logger.info(`User ${ws.name} got automuted`);
|
channelId,
|
||||||
ChatProvider.automute(ws.name, channelId);
|
]));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const errorMsg = await chatProvider.sendMessage(
|
||||||
|
ws.user,
|
||||||
|
message,
|
||||||
|
channelId,
|
||||||
|
);
|
||||||
|
if (!errorMsg) {
|
||||||
|
// automute on repeated message spam
|
||||||
|
if (ws.last_message && ws.last_message === message) {
|
||||||
|
ws.message_repeat += 1;
|
||||||
|
if (ws.message_repeat >= 4) {
|
||||||
|
logger.info(`User ${ws.name} got automuted`);
|
||||||
|
ChatProvider.automute(ws.name, channelId);
|
||||||
|
ws.message_repeat = 0;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
ws.message_repeat = 0;
|
ws.message_repeat = 0;
|
||||||
|
ws.last_message = message;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
ws.message_repeat = 0;
|
ws.send(JSON.stringify(['info', errorMsg, 'il', channelId]));
|
||||||
ws.last_message = message;
|
|
||||||
}
|
}
|
||||||
|
logger.info(
|
||||||
|
`Received chat message ${message} from ${ws.name} / ${ws.user.ip}`,
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
ws.send(JSON.stringify(['info', errorMsg, 'il', channelId]));
|
logger.info('Got empty message or message from unidentified ws');
|
||||||
}
|
}
|
||||||
logger.info(
|
} catch {
|
||||||
`Received chat message ${message} from ${ws.name} / ${ws.user.ip}`,
|
logger.info('Got invalid ws message');
|
||||||
);
|
|
||||||
} else {
|
|
||||||
logger.info('Got empty message or message from unidentified ws');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user