Как изменить цвет своего сообщения на сайтах, где есть онлайн чат? если нет такой функции в чате
Как изменить цвет своего сообщения на сайтах, где есть онлайн чат? Если не предусмотрена такая функция. Редактировал CSS файл, но результата не дало.
function Chat() {
var p = this;
this.started = !0;
var a = this.div = new Div({
x: isMobile ? -offWidth / 2 : 700,
y: isMobile ? 0 : 40,
width: isMobile ? 700 + offWidth : 300,
height: isMobile ? maxHeight - mBottomHeight : 850,
zIndex: isMobile ? 10 : 0,
color: "#172736",
toDiv: mainDiv
}).div
, h = this.chatDom = new Div({
top: isMobile ? 130 : 30,
className: "chat",
width: isMobile ? 700 + offWidth : 300,
toDiv: a
}).div
, b = this.chatDomClan = new Div({
top: isMobile ? 130 : 30,
className: "chat",
width: isMobile ? 700 + offWidth : 300,
toDiv: a
}).div
, t = this.topLevelDom = new Div({
top: isMobile ? 130 : 30,
className: "chat",
width: isMobile ? 700 + offWidth : 300,
toDiv: a
}).div
, s = this.topActiveDom = new Div({
top: isMobile ? 130 : 30,
className: "chat",
width: isMobile ? 700 + offWidth : 300,
toDiv: a
}).div
, u = new Div({
top: isMobile ? 70 : 30,
className: "chat",
width: isMobile ? 700 + offWidth : 300,
toDiv: a
}).div
, c = new Div({
top: 130,
className: "chat",
width: isMobile ? 700 + offWidth : 300,
toDiv: a
}).div;
isMobile && new Div({
width: isMobile ? 700 + offWidth : 300,
height: isMobile ? 70 : 50,
color: isMobile ? "#bdcadd" : "#192E3E",
toDiv: a
}).div;
try {
var i = document.createElement("input");
i.maxLength = 120,
i.placeholder = "Введите сообщение...",
i.className = "input",
a.appendChild(i),
i.value = localStorage.getItem("input") ? localStorage.getItem("input") : "",
window.onbeforeunload = function(e) {
localStorage.setItem("input", i.value)
}
,
null == uid && (uid = "" != i.value ? i.value : 0),
i.oninput = function(e) {
var i, t;
i = p.inputGet(),
t = !1,
(t = "" != appealMes && -1 < i.indexOf(appealMes) ? !0 : t) || (appealMes = "")
}
} catch (e) {}
isMobile ? (h.style.height = maxHeight - 325 + "px",
b.style.height = maxHeight - 325 + "px",
t.style.height = maxHeight - 325 + "px",
s.style.height = maxHeight - 325 + "px",
u.style.height = maxHeight - 250 + "px",
c.style.height = maxHeight - 240 + "px",
i.style.width = 590 + offWidth + "px",
i.style.height = "38px",
i.style.fontSize = isMobile ? "24px" : "18px",
i.style.left = "15px",
i.style.top = maxHeight - 170 + "px",
g = new Div({
x: (maxWidth - gameWidth) / -2,
y: maxHeight - mBottomHeight,
width: maxWidth,
height: iphoneX ? mBottomHeight + iPhoneYOff : mBottomHeight,
color: "#06141f",
toDiv: a
})) : (h.style.height = "750px",
b.style.height = "750px",
t.style.height = "750px",
s.style.height = "750px",
c.style.height = "750px",
u.style.height = "750px",
i.style.top = "800px");
var o = new Button({
image: "send_message",
scale: isMobile ? 1.8 : 1,
x: isMobile ? 628 + offWidth : 250,
y: isMobile ? maxHeight - 168 : 801,
setOrigin: 0,
toDiv: a
},function() {
var e = 0;
if (2 == subChat) {
if (!idClan || !clanPosition)
return void addWindAttention("Внимание!", "Вы не состоите в клане!");
e = idClan
}
p.addMes({
idUser: idUser,
vip: vip,
name: userShortName,
mes: p.inputGet(),
pic: lastPresent,
userPic: userPic,
bold: corona || userKitsBonus.bold,
clan: e,
appealLen: appealMes.length
}, !0, "log" == p.chatActiveUI),
appealMes = ""
}
);
isMobile && new Button({
x: 75,
y: g.y + 40,
image: "bCloseMobile",
zIndex: 10,
scale: .9,
toDiv: a
},function() {
chat.chatVisible(!1)
}
);
var n = "Игроки, занявшие первые 100 мест в<br>еженедельном рейтинге, получат призы золотом!";
isMobile && (n = "Игроки, занявшие первые 100 мест в еженедельном рейтинге, получат призы золотом!");
var l = "Самый активный каждые 3 часа получает<br>3 ключа!";
isMobile && (l = "Самый активный каждые 3 часа получает 3 ключа!");
var r = new Par({
x: isMobile ? 10 + offWidth / 2 : 0,
y: isMobile ? maxHeight - 175 : 855,
width: isMobile ? gameWidth - 20 : 300,
fontName: "SegoeBold",
fontSize: isMobile ? 22 : 12,
color: "#BBCADD",
textAlign: "center",
toDiv: a
})
, f = []
, m = [];
function e(e, i) {
var t, s, o = e.x || 0, n = e.y || 0, l = e.scale || 6;
e.pic && (t = document.createElement("IMG"),
"png" == e.typePic ? t.src = "assets/" + e.pic : t.src = "assets/svg/" + e.pic,
t.className = "noselect",
t.style.position = "absolute",
t.style.left = o + "px",
t.style.top = n + "px",
t.style.width = l + "%",
t.style.cursor = "pointer",
a.appendChild(t),
i && (t.onclick = i)),
e.mes && ((s = document.createElement("p")).innerHTML = e.mes,
s.className = "noselect",
s.style.position = "absolute",
s.style.left = o + 25 + "px",
s.style.top = n - 14 + "px",
s.style.color = "#bccadd",
s.style.fontFamily = "SegoeBold",
s.style.cursor = "pointer",
e.fontSize ? s.style.fontSize = e.fontSize + "px" : isMobile && (s.style.fontSize = "26px"),
a.appendChild(s),
i && (s.onclick = i)),
this.setPos = function(e, i) {
!e && 0 != e || (t.style.left = e + "px",
s.style.left = e + 25 + "px"),
!i && 0 != i || (t.style.top = i + "px",
s.style.top = i - 14 + "px")
}
,
this.setActiv = function(e) {
s.style.color = e ? "#bccadd" : "#364e65"
}
,
this.setAlpha = function(e) {
t && (t.style.opacity = e),
s && (s.style.opacity = e)
}
,
this.setVisible = function(e) {
t && (t.style.visibility = e ? "visible" : "hidden"),
s && (s.style.visibility = e ? "visible" : "hidden")
}
,
this.hide = function() {
t && (t.style.display = "none"),
s && (s.style.display = "none")
}
}
this.chatActiveUI = "chat";
var d, M = new Button({
x: isMobile ? 207 + offWidth / 2 : 235,
y: isMobile ? 98 : 10,
label: "ОБЩИЙ",
fontSize: isMobile ? 24 : 14,
toDiv: a
},function() {
T(1)
}
), y = new Button({
x: isMobile ? 365 + offWidth / 2 : 180,
y: isMobile ? 98 : 10,
label: "КЛАН",
fontSize: isMobile ? 24 : 14,
toDiv: a
},function() {
T(2)
}
), v = new Button({
x: 135,
y: isMobile ? 50 : 10,
label: "ЛОГ",
fontSize: isMobile ? 24 : 14,
toDiv: a
},function() {
U("log")
}
), g = 50 + offWidth / 2, x = new e({
mes: "ОПЫТНЫЕ",
x: g = isMobile && isOk ? 130 + offWidth / 2 : g,
y: isMobile ? 73 : 63,
fontSize: isMobile ? 24 : 14
},function() {
S(1)
}
), w = new e({
mes: "АКТИВНЫЕ",
x: g + 150,
y: isMobile ? 73 : 63,
fontSize: isMobile ? 24 : 14
},function() {
S(2)
}
), D = new e({
mes: "ДРУЗЬЯ",
x: g + 305,
y: isMobile ? 73 : 63,
fontSize: isMobile ? 24 : 14
},function() {
S(3)
}
);
isMobile && !isOk && (d = new e({
mes: "ЛИДЕРБОРД",
x: g + 420,
y: isMobile ? 73 : 63,
fontSize: isMobile ? 24 : 14
},function() {
subTop = 5,
vkConnect.send("VKWebAppShowLeaderBoardBox", {
user_result: level
})
}
));
var C = new Par({
x: 0,
y: 15,
text: "",
textAlign: "center",
width: 700 + offWidth,
fontSize: 30,
color: "#1f3b50",
toDiv: a
});
isMobile && v.hide();
var U = this.chatClickUI = function(e, i) {
r.setText(""),
p.chatActiveUI = e,
P(h, !1),
P(b, !1),
P(t, !1),
P(s, !1),
P(c, !1),
P(u, !1),
isMobile && C.setText(""),
M.setVisible(!1),
y.setVisible(!1),
x.setVisible(!1),
w.setVisible(!1),
D.setVisible(!1),
d && d.setVisible(!1),
"chat" == e && (P(h, !0),
I(!0),
isMobile && C.setText("ЧАТ"),
M.setVisible(!0),
y.setVisible(!0),
T(i)),
"log" == e && (P(u, !0),
I(!0),
isMobile ? C.setText("ЧАТ") : (M.setVisible(!0),
y.setVisible(!0)),
T(3)),
"top" == e && (x.setVisible(!0),
w.setVisible(!0),
D.setVisible(!0),
d && d.setVisible(!0),
I(!1),
p.topUpdate(),
S(i),
isMobile && C.setText("РЕЙТИНГ")),
menu && (menu.started ? v.setVisible(!1) : v.setVisible(!0)),
isMobile && v.hide()
}
;
function T(e) {
e && (subChat = e),
P(h, !1),
P(b, !1),
P(u, !1),
M.setTextColor("#364e65"),
y.setTextColor("#364e65"),
v.setTextColor("#364e65"),
1 == subChat && (M.setTextColor("#bccadd"),
P(h, !0),
chat.chatActiveUI = "chat"),
2 == subChat && (y.setTextColor("#bccadd"),
P(b, !0),
chat.chatActiveUI = "chat"),
3 == subChat && (v.setTextColor("#bccadd"),
P(u, !0),
chat.chatActiveUI = "log")
}
function S(e) {
e && (subTop = e),
P(t, !1),
P(s, !1),
P(c, !1),
x.setActiv(!1),
w.setActiv(!1),
D.setActiv(!1),
d && d.setActiv(!1),
r.setText(""),
1 == subTop && (x.setActiv(!0),
P(t, !0),
r.setText(n)),
2 == subTop && (w.setActiv(!0),
P(s, !0),
r.setText(l)),
3 == subTop && (D.setActiv(!0),
I(!1),
P(c, !0),
0 < friendsInGameId.length && socket.emit("getOnlineStatus", {
playersId: friendsInGameId,
soc: isOk ? 2 : 1
}))
}
function P(e, i) {
e && (e.style.visibility = i ? "visible" : "hidden")
}
function I(e) {
i.style.visibility = e ? "visible" : "hidden",
o && o.setVisible(e)
}
this.topUpdate = function() {
function e(o, n) {
for (var l in n.innerHTML = "",
o)
e(Number(l) + 1);
function e(e) {
var i = o[l]
, t = document.createElement("div");
t.className = "noselect topBlocks",
t.style.marginTop = "12px",
t.style.height = isMobile ? "110px" : "51px",
i.pic || (i.pic = picDef);
new Pic({
x: isMobile ? 50 : 25,
y: 0,
borderRadius: isMobile ? 100 : 50,
width: isMobile ? 100 : 50,
cursor: "pointer",
src: i.pic,
toDiv: t
});
new Div({
x: isMobile ? 50 : 25,
y: 0,
width: isMobile ? 96 : 46,
height: isMobile ? 96 : 46,
borderRadius: isMobile ? 96 : 46,
cursor: "pointer",
border: isMobile ? "3px solid orange" : "2px solid orange",
toDiv: t
}).div.onclick = function() {
addUserInfo(i.idUser)
}
;
var s;
new Par({
x: isMobile ? 7 : -3,
y: isMobile ? 35 : 17,
fontSize: isMobile ? 25 : 12,
width: 30,
text: e,
textAlign: "center",
toDiv: t
});
new Par({
x: isMobile ? 185 : 85,
y: isMobile ? 10 : 0,
fontSize: isMobile ? 30 : 16,
cursor: "pointer",
text: i.firstName + " " + i.lastName,
whiteSpace: "nowrap",
toDiv: t
}).par.onclick = function() {
addUserInfo(i.idUser)
}
,
i.weekLevelElo && (new Pic({
x: isMobile ? 187 : 87,
y: isMobile ? 55 : 23,
cursor: "pointer",
src: "experienceIcon",
toDiv: t
}).img.onclick = function() {
addUserInfo(i.idUser)
}
,
s = new Par({
x: isMobile ? 220 : 115,
y: isMobile ? 49 : 23,
fontSize: isMobile ? 25 : 16,
cursor: "pointer",
text: i.weekLevelElo,
toDiv: t
})),
i.activnost && (s = new Par({
x: isMobile ? 185 : 85,
y: isMobile ? 55 : 23,
fontSize: isMobile ? 25 : 16,
cursor: "pointer",
text: i.activnost + " акт.",
toDiv: t
})),
i.numSub && (s = new Par({
x: isMobile ? 185 : 85,
y: isMobile ? 55 : 23,
fontSize: isMobile ? 25 : 16,
cursor: "pointer",
text: i.numSub + " " + declOfNum(i.numSub, ["игрок", "игрока", "игроков"]),
toDiv: t
})),
i.price && (new Pic({
x: isMobile ? 187 : 87,
y: isMobile ? 58 : 25,
scale: isMobile ? .7 : .5,
cursor: "pointer",
src: "diamond",
toDiv: t
}),
s = new Par({
x: isMobile ? 232 : 117,
y: isMobile ? 55 : 23,
fontSize: isMobile ? 25 : 16,
cursor: "pointer",
text: i.price,
toDiv: t
})),
s && (s.par.onclick = function() {
addUserInfo(i.idUser)
}
),
i.lastPresent && new Pic({
x: isMobile ? 120 : 55,
y: isMobile ? 65 : 30,
scale: isMobile ? .6 : .35,
pointerEvents: "none",
src: "assets/allgifts/" + i.lastPresent + ".png",
toDiv: t
}),
}
new Div({
x: isMobile ? 50 : 15,
width: isMobile ? 97 : 47,
height: isMobile ? 97 : 47,
borderRadius: isMobile ? 97 : 47,
cursor: "pointer",
border: isMobile ? "3px solid orange" : "2px solid orange",
toDiv: i
}).div.onclick = function() {
l(e.uid, e.idUser, e.inApp)
}
,
new Par({
x: isMobile ? 185 : 80,
y: isMobile ? 10 : 0,
text: e.firstName + " " + e.lastName,
cursor: "pointer",
fontSize: isMobile ? 30 : 16,
whiteSpace: "nowrap",
toDiv: i
}).par.onclick = function() {
l(e.uid, e.idUser, e.inApp)
}
e.inApp && !e.online && !includes(goldFriends, e.uid) && goldFriends.length < 10 && new Par({
x: isMobile ? 385 : 215,
y: isMobile ? 54 : 28,
color: "#EFE467",
text: "+0.2кг",
fontSize: isMobile ? 22 : 14,
toDiv: i
}),
e.corona && (new Pic({
x: isMobile ? 107 : 45,
y: -8,
scale: isMobile ? .6 : .3,
pointerEvents: "none",
src: "corona" + e.corona,
toDiv: i
}).img.style.transform = "rotate(35deg)"),
e.lastPresent && new Pic({
x: isMobile ? 120 : 50,
y: isMobile ? 65 : 25,
scale: isMobile ? .6 : .4,
pointerEvents: "none",
src: "assets/allgifts/" + e.lastPresent + ".png",
toDiv: i
}),
c.appendChild(i)
}
function l(e, i, t) {
e < 0 || (t ? (t = !0,
e == uid && (t = !1),
if (t ? socket.emit("newMesSendPrivate", e) : socket.emit("newMesSend", e),
banChat)
return
}
t ? p.addLog({
idUser: e.idUser,
name: e.name,
mes: e.mes,
type: "private",
tint: e.tint
}) : p.addMesDom(e),
i && (p.inputSet(""),
setTimeout(function() {
p.inputFocus(!0)
}, 100))
}
}
,
this.addMesDom = function(i) {
var e, t = !0, s = i.clan ? b : h;
if (i.idUser != idUser && s.clientHeight - (s.scrollHeight - s.scrollTop) < -30 && (t = !1),
!includes(blackListChat, i.idUser) && (i.mes && !i.sysToUid && (i.mes = i.mes.replace(/[<>&]/g, "")),
!isEmpty(i.mes))) {
2 < i.mes.length && (e = i.mes) === e.toUpperCase() && (i.mes = i.mes.toLowerCase()),
i.idUser == idUser || i.clan || (i.mes = containsMat(i.mes));
var o, n, l, a = isMobile ? 60 : 45, c = document.createElement("div");
if (i.pic && 0 < i.pic && i.pic <= allPresents ? o = new Pic({
x: (isMobile,
5),
y: isMobile ? 6 : 1,
src: "assets/allgifts/" + i.pic + ".png",
cursor: "pointer",
scale: isMobile ? .38 : .25,
toDiv: c
}) : i.idUser < 0 && (l = "board_mini_white",
-2 == i.tint && (l = "board_mini_orange"),
-3 == i.tint && (l = "board_mini_purpur"),
-4 == i.tint && (l = "board_mini_gray"),
i.userPic = l),
i.userPic && (n = new Pic({
x: isMobile ? 43 : 30,
y: isMobile ? 6 : 1,
width: isMobile ? 30 : 20,
src: i.userPic,
cursor: "pointer",
borderRadius: 20,
toDiv: c
})),
i.appealLen && 0 < i.appealLen && i.appealLen < 70) {
var r = '<span style="color:#B47FFC">' + i.mes.substring(0, i.appealLen) + "</span>" + i.mes.substring(i.appealLen, i.mes.length);
try {
-1 < r.indexOf(userShortName) && (r = r.replace(new RegExp("(" + userShortName + ")","g"), '<span style="color:#8733FA">$1</span>'))
} catch (e) {
console.log(e)
}
i.mes = r
}
a = i.tint < 0 ? new Par({
textIndent: a,
position: "static",
color: colorChatSys[-1 * i.tint - 1],
text: i.name + ": " + i.mes,
toDiv: c
}) : i.bold ? new Par({
textIndent: a,
position: "static",
color: colorChatTint[i.tint],
text: '<span class="fontBold", style="color:#B3CDE1; cursor:pointer">' + i.name + ': </span><span class="fontBold">' + i.mes + "</span>",
toDiv: c
}) : new Par({
textIndent: a,
position: "static",
color: colorChatTint[i.tint],
text: '<span class="fontBold", style="color:#B3CDE1; cursor:pointer">' + i.name + ': </span><span class="fontNormal">' + i.mes + "</span>",
toDiv: c
}),
-1 == i.idUser ? a.setClassName("messageChat messageChatSystem noselect") : a.setClassName("messageChat noselect noLightingTap"),
i.vip && (a.par.style.textDecoration = "UnderLine"),
isMobile && (a.par.style.marginLeft = "20px",
a.par.style.fontSize = "32px"),
a.par.onclick = function(e) {
if (!e || !e.target || !e.target.style || "pointer" != e.target.style.cursor)
return;
if (e.target.classList && "sysUserName" == e.target.classList[0])
return socket.emit("getUserInfo", {
idUser: i.sysToUid || i.idUser,
isFriend: !1
}),
if (i.idUser < 0 && !i.sysToUid)
return;
p.inputFocus(1);
e = p.inputGet();
if (-1 < e.indexOf(i.name))
return;
appealMes = i.name + ", " + appealMes,
p.inputSet(i.name + ", " + e)
}
,
o && (o.img.onclick = d),
n && (n.img.onclick = d),
s.appendChild(c),
50 < s.childElementCount && s.hasChildNodes() && s.removeChild(s.childNodes[0]),
t && (s.scrollTop = s.scrollHeight)
}
function d(e) {
e && e.target && e.target.style && "pointer" == e.target.style.cursor && (i.idUser < 0 && !i.sysToUid || (socket.emit("getUserInfo", {
idUser: i.sysToUid || i.idUser,
isFriend: !1
}
,
this.clearMes = function() {
h.innerHTML = ""
}
,
this.clearMesClan = function() {
b.innerHTML = ""
}
,
this.addLog = function(e) {
var i, t, s, o, n, l, a, c, r, d, p, h = "";
"log" == e.type && (i = "w" == e.color ? "Б" : "Ч",
t = e.from.toUpperCase(),
s = e.to.toUpperCase(),
p = e.captured,
o = nameFigRus[e.piece],
n = e.check ? "ШАХ" : "",
l = e.checkmate ? "МАТ" : "",
a = Math.ceil((f.length + 1) / 2),
c = "Б" == i ? a + " - " : "",
r = isMobile ? 34 : 22,
d = isMobile ? 14 : 9,
e.textIndent = "Б" == i ? 0 : 100 <= a ? r + 2 * d : 10 <= a ? r + d : r,
h = "O-O-O" == e.san || "O-O" == e.san ? c + i + ": рокировка " + e.san + " " + n + " " + l : c + i + ": " + o + " " + t + "-" + s + " " + n + " " + l,
p && (game.addCapturedFig("w" == e.color ? "b" : "w", p),
h += " (x " + nameFigRus[p] + ")"),
f.push(h)),
"private" == e.type && (h = e.name + ": " + e.mes,
m.push(h)),
"text" == e.type && (h = e.mes),
e.mes = h,
(p = e).mes && (p.mes = p.mes.replace(/[<>&]/g, "")),
isEmpty(p.mes) || (h = !0,
p.uid != uid && u.clientHeight - (u.scrollHeight - u.scrollTop) < -30 && (h = !1),
"private" == p.type && p.uid != uid && (p.mes = containsMat(p.mes)),
(e = document.createElement("p")).className = "messageChat noselect noLightingTap",
e.style.color = colorChatTint[p.tint],
p.textIndent && (e.style.textIndent = p.textIndent + "px"),
isMobile && (e.style.marginLeft = "20px",
e.style.fontSize = "24px"),
p = document.createTextNode(p.mes),
e.appendChild(p),
u.appendChild(e),
300 < u.childElementCount && u.hasChildNodes() && u.removeChild(u.childNodes[0]),
h && (u.scrollTop = u.scrollHeight))
}
,
this.clearLog = function() {
game && game.clearCapturedFig(),
f = [],
m = [],
u.innerHTML = ""
}
,
this.chatVisible = function(e, i) {
if (isMobile)
if (e) {
if ("block" == a.style.display && a.style.opacity)
return;
a.style.display = "block",
a.style.opacity = 0,
h.scrollTop = h.scrollHeight,
b.scrollTop = b.scrollHeight,
u.scrollTop = u.scrollHeight,
$(a).animate({
opacity: 1
}, 200, "linear", function() {})
} else
i ? (a.style.opacity = 0,
a.style.display = "none") : (a.style.opacity = 1,
$(a).animate({
opacity: 0
}, 200, "linear", function() {
a.style.display = "none"
}));
else
e ? (a.style.display = "block",
h.scrollTop = h.scrollHeight,
b.scrollTop = b.scrollHeight,
u.scrollTop = u.scrollHeight) : a.style.display = "none"
}
,
p.chatVisible(!1, !0),
this.isChatVisible = function() {
return "block" == a.style.display
}
,
this.inputFocus = function(e) {
i && (e ? i.focus() : i.blur())
}
,
this.inputGet = function() {
if (i)
return i.value
}
,
this.inputSet = function(e) {
i && (i.value = e)
}
,
this.isInputFocus = function() {
return !!i && $(i).is(":focus")
}
}
Ответы (1 шт):
Автор решения: Grundy
→ Ссылка
При отправке сообщения вызывается метод .addMes, в котором первым параметром передается объект сообщения с настройками.
Если в этом объекте изменить поле tint - то можно изменить цвет, которым будет подсвечиваться сообщение.
tint- это число. Положительное значение соответствует индексу элемента в массиве colorChatTint:
[
'#bbbbbb',
'#EDA090',
'#fcef66',
'#b5d4f2',
'#7DB4EF',
'#a8d4af',
'#73C773',
'#f7d48f',
'#888888'
]
Вторым параметром передается флаг, показывающий, что это твое сообщение, таким образом можно менять цвет только твоим сообщениям.