2024-04-27 03:23:05 -05:00
|
|
|
/*
|
|
|
|
MIT License
|
|
|
|
|
|
|
|
Copyright (c) 2022 Calder Young
|
|
|
|
|
|
|
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
|
|
of this software and associated documentation files (the "Software"), to deal
|
|
|
|
in the Software without restriction, including without limitation the rights
|
|
|
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
|
|
copies of the Software, and to permit persons to whom the Software is
|
|
|
|
furnished to do so, subject to the following conditions:
|
|
|
|
|
|
|
|
The above copyright notice and this permission notice shall be included in all
|
|
|
|
copies or substantial portions of the Software.
|
|
|
|
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
|
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
|
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
|
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
|
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
|
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
|
|
SOFTWARE.
|
|
|
|
*/
|
|
|
|
const CHAR_WIDTHS = [
|
|
|
|
1,9,9,8,8,8,8,7,9,8,9,9,8,9,9,9,
|
|
|
|
8,8,8,8,9,9,8,9,8,8,8,8,8,9,9,9,
|
|
|
|
4,2,5,6,6,6,6,3,5,5,5,6,2,6,2,6,
|
|
|
|
6,6,6,6,6,6,6,6,6,6,2,2,5,6,5,6,
|
|
|
|
7,6,6,6,6,6,6,6,6,4,6,6,6,6,6,6,
|
|
|
|
6,6,6,6,6,6,6,6,6,6,6,4,6,4,6,6,
|
|
|
|
3,6,6,6,6,6,5,6,6,2,6,5,3,6,6,6,
|
|
|
|
6,6,6,6,4,6,6,6,6,6,6,5,2,5,7,6,
|
|
|
|
6,6,6,6,6,6,6,6,6,6,6,4,6,3,6,6,
|
|
|
|
6,6,6,6,6,6,6,6,6,6,6,6,6,6,4,6,
|
|
|
|
6,3,6,6,6,6,6,6,6,7,6,6,6,2,6,6,
|
|
|
|
8,9,9,6,6,6,8,8,6,8,8,8,8,8,6,6,
|
|
|
|
9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,
|
|
|
|
9,9,9,9,9,9,9,9,9,6,9,9,9,5,9,9,
|
|
|
|
8,7,7,8,7,8,8,8,7,8,8,7,9,9,6,7,
|
|
|
|
7,7,7,7,9,6,7,8,7,6,6,9,7,6,7,1
|
|
|
|
];
|
|
|
|
|
|
|
|
const CHAR_SHADOW_BRIGHTNESS = 0.247;
|
|
|
|
|
|
|
|
const SERVER_ASPECT_RATIO = 38.0 / 256.0;
|
|
|
|
|
|
|
|
class ServerEmbed {
|
|
|
|
|
|
|
|
constructor(tag, width) {
|
|
|
|
this.containerTag = tag;
|
|
|
|
tag.style.width = width;
|
|
|
|
tag.style.height = Math.floor(tag.clientWidth * SERVER_ASPECT_RATIO) + "px";
|
|
|
|
tag.style.backgroundColor = "black";
|
|
|
|
this.canvas = document.createElement("canvas");
|
|
|
|
this.canvas.width = tag.clientWidth;
|
|
|
|
this.canvas.height = tag.clientHeight;
|
|
|
|
tag.appendChild(this.canvas);
|
|
|
|
this.ctx = this.canvas.getContext("2d");
|
|
|
|
if(!this.ctx) {
|
|
|
|
throw new Error("CanvasRenderingContext2D is not supported in this browser");
|
|
|
|
}
|
|
|
|
this.ctx.imageSmoothingEnabled = false;
|
|
|
|
this.tmpCanvas = document.createElement("canvas");
|
|
|
|
this.tmpCanvas.width = 64;
|
|
|
|
this.tmpCanvas.height = 64;
|
|
|
|
this.tmpCtx = this.tmpCanvas.getContext("2d");
|
|
|
|
this.tmpCtx.imageSmoothingEnabled = false;
|
|
|
|
const self = this;
|
|
|
|
this.spriteSheet = document.createElement("img");
|
|
|
|
this.spriteSheet.addEventListener("load", () => {
|
|
|
|
self.isSpriteSheetLoaded = true;
|
|
|
|
setInterval(() => self.redraw(), 50);
|
|
|
|
});
|
2024-05-03 12:44:37 -05:00
|
|
|
this.spriteSheet.src = "./assets/scripts/icons.png";
|
2024-04-27 03:23:05 -05:00
|
|
|
this.socket = null;
|
|
|
|
this.connected = false;
|
|
|
|
this.dirty = false;
|
|
|
|
this.connecting = 0;
|
|
|
|
this.currentStatus = {
|
|
|
|
serverName: "",
|
|
|
|
serverCracked: false,
|
|
|
|
pingSentTime: 0,
|
|
|
|
pingToServer: -1,
|
|
|
|
motdLine1: "",
|
|
|
|
motdLine2: "",
|
|
|
|
onlineCount: 0,
|
|
|
|
maxCount: 0,
|
|
|
|
players: []
|
|
|
|
};
|
|
|
|
this.showCracked = true;
|
|
|
|
this.tooltip = "";
|
|
|
|
this.isShowingTooltip = false;
|
|
|
|
this.isTooltipEnabled = true;
|
|
|
|
this.tooltipCanvas = document.createElement("canvas");
|
|
|
|
this.tooltipCanvas.width = 64;
|
|
|
|
this.tooltipCanvas.height = 64;
|
|
|
|
this.tooltipCanvas.style.display = "none";
|
|
|
|
this.tooltipCanvas.style.position = "fixed";
|
|
|
|
this.tooltipCanvas.style.zIndex = "100";
|
|
|
|
this.tooltipCanvas.style.pointerEvents = "none";
|
|
|
|
this.tooltipCtx = this.tooltipCanvas.getContext("2d");
|
|
|
|
this.tooltipCtx.imageSmoothingEnabled = false;
|
|
|
|
document.body.appendChild(this.tooltipCanvas);
|
|
|
|
this.mouseOver = false;
|
|
|
|
this.mouseX = 0;
|
|
|
|
this.mouseY = 0;
|
|
|
|
this.mousePageX = 0;
|
|
|
|
this.mousePageY = 0;
|
|
|
|
var mouseMove = (e) => {
|
|
|
|
self.mouseOver = true;
|
|
|
|
self.mouseX = e.offsetX / self.canvas.width * 256.0;
|
|
|
|
self.mouseY = e.offsetY / self.canvas.height * 38.0;
|
|
|
|
self.mousePageX = e.clientX;
|
|
|
|
self.mousePageY = e.clientY;
|
|
|
|
};
|
|
|
|
this.canvas.addEventListener("mouseover", mouseMove);
|
|
|
|
this.canvas.addEventListener("mousemove", mouseMove);
|
|
|
|
this.canvas.addEventListener("mouseout", (e) => {
|
|
|
|
self.mouseOver = false;
|
|
|
|
self.tooltipCanvas.style.display = "none";
|
|
|
|
});
|
|
|
|
this.lastWidth = 0;
|
|
|
|
this.redrawTimer = 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
setShowCracked(b) {
|
|
|
|
if(b != this.showCracked) {
|
|
|
|
this.showCracked = b;
|
|
|
|
this.dirty = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
setShowTooltip(b) {
|
|
|
|
this.isTooltipEnabled = b;
|
|
|
|
}
|
|
|
|
|
|
|
|
getPixelX(x) {
|
|
|
|
return x * this.canvas.width / 256.0;
|
|
|
|
}
|
|
|
|
|
|
|
|
getPixelY(y) {
|
|
|
|
return y * this.canvas.height / 38.0;
|
|
|
|
}
|
|
|
|
|
|
|
|
drawIcon(x, y, w, h, dx, dy, dw, dh) {
|
|
|
|
if(this.isSpriteSheetLoaded) {
|
|
|
|
this.ctx.drawImage(this.spriteSheet, x + 0.05, y + 0.05, w - 0.1, h - 0.1, this.getPixelX(dx),
|
|
|
|
this.getPixelY(dy), this.getPixelX(dw||w), this.getPixelY(dh||h));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
drawChar(x, y, ch, italic) {
|
|
|
|
if(ch >= CHAR_WIDTHS.length) {
|
|
|
|
ch = 176;
|
|
|
|
}
|
|
|
|
if(!italic) {
|
|
|
|
this.drawIcon(ch % 16 * 8, Math.floor(ch / 16.0) * 8.0, CHAR_WIDTHS[ch], 8, x, y);
|
|
|
|
}else {
|
|
|
|
if(this.isSpriteSheetLoaded) {
|
|
|
|
this.ctx.resetTransform();
|
|
|
|
this.ctx.scale(this.canvas.width / 256.0, this.canvas.height / 38.0);
|
|
|
|
this.ctx.translate(x + 1.1, y);
|
|
|
|
this.ctx.transform(1, 0, -0.35, 1, 0, 0);
|
|
|
|
this.ctx.drawImage(this.spriteSheet, ch % 16 * 8, Math.floor(ch / 16.0) * 8.0,
|
|
|
|
CHAR_WIDTHS[ch] * 0.99, 8 * 0.99, 0, 0, CHAR_WIDTHS[ch], 8);
|
|
|
|
this.ctx.resetTransform();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return CHAR_WIDTHS[ch];
|
|
|
|
}
|
|
|
|
|
|
|
|
drawColoredChar(x, y, ch, color, italic) {
|
|
|
|
if(ch >= CHAR_WIDTHS.length) {
|
|
|
|
ch = 176;
|
|
|
|
}
|
|
|
|
if(!this.isSpriteSheetLoaded) {
|
|
|
|
return CHAR_WIDTHS[ch];
|
|
|
|
}
|
|
|
|
this.tmpCtx.globalCompositeOperation = "source-over";
|
|
|
|
this.tmpCtx.clearRect(0, 0, 8, 8);
|
|
|
|
this.tmpCtx.imageSmoothingEnabled = false;
|
|
|
|
this.tmpCtx.drawImage(this.spriteSheet, ch % 16 * 8, Math.floor(ch / 16.0) * 8.0,
|
|
|
|
CHAR_WIDTHS[ch] * 0.99, 8 * 0.99, 0, 0, CHAR_WIDTHS[ch], 8);
|
|
|
|
this.tmpCtx.globalCompositeOperation = "source-in";
|
|
|
|
this.tmpCtx.fillStyle = color;
|
|
|
|
this.tmpCtx.fillRect(0, 0, CHAR_WIDTHS[ch], 8);
|
|
|
|
|
|
|
|
if(!italic) {
|
|
|
|
this.ctx.drawImage(this.tmpCanvas, 0, 0, CHAR_WIDTHS[ch] * 0.99, 8 * 0.99, this.getPixelX(x),
|
|
|
|
this.getPixelY(y), this.getPixelX(CHAR_WIDTHS[ch]), this.getPixelY(8));
|
|
|
|
}else {
|
|
|
|
this.ctx.resetTransform();
|
|
|
|
this.ctx.scale(this.canvas.width / 256.0, this.canvas.height / 38.0);
|
|
|
|
this.ctx.translate(x + 1.1, y);
|
|
|
|
this.ctx.transform(1, 0, -0.35, 1, 0, 0);
|
|
|
|
this.ctx.drawImage(this.tmpCanvas, 0, 0, CHAR_WIDTHS[ch] * 0.99, 8 * 0.99, 0, 0, CHAR_WIDTHS[ch], 8);
|
|
|
|
this.ctx.resetTransform();
|
|
|
|
}
|
|
|
|
return CHAR_WIDTHS[ch];
|
|
|
|
}
|
|
|
|
|
|
|
|
drawCharLine(x, y, w, clr) {
|
|
|
|
this.ctx.fillStyle = clr;
|
|
|
|
this.ctx.fillRect(this.getPixelX(x), this.getPixelY(y), this.getPixelX(w + 0.02), this.getPixelY(1));
|
|
|
|
}
|
|
|
|
|
|
|
|
makeColor(r, g, b) {
|
|
|
|
return "rgba(" + Math.floor(r) + "," + Math.floor(g) + "," + Math.floor(b) + ",1.0)";
|
|
|
|
}
|
|
|
|
|
|
|
|
getStringWidth(txt, escapeChar) {
|
|
|
|
if(!escapeChar) {
|
|
|
|
escapeChar = 167;
|
|
|
|
}else {
|
|
|
|
escapeChar = escapeChar.charCodeAt(0);
|
|
|
|
}
|
|
|
|
var j = 0;
|
|
|
|
for(var i = 0; i < txt.length; ++i) {
|
|
|
|
var c = txt.charCodeAt(i);
|
|
|
|
if(c == escapeChar) {
|
|
|
|
i += 2;
|
|
|
|
}else {
|
|
|
|
if(c < CHAR_WIDTHS.length) {
|
|
|
|
j += CHAR_WIDTHS[c];
|
|
|
|
}else {
|
|
|
|
j += 6;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return j;
|
|
|
|
}
|
|
|
|
|
|
|
|
drawString(x, y, txt, r, g, b, shadow, randomSeed, escapeChar) {
|
|
|
|
var escapeCharChar = escapeChar;
|
|
|
|
if(!escapeChar) {
|
|
|
|
escapeChar = 167;
|
|
|
|
}else {
|
|
|
|
escapeChar = escapeChar.charCodeAt(0);
|
|
|
|
}
|
|
|
|
var startX = x;
|
|
|
|
var startY = y;
|
|
|
|
if(shadow) {
|
|
|
|
++x;
|
|
|
|
++y;
|
|
|
|
}
|
|
|
|
if(!randomSeed) {
|
|
|
|
randomSeed = 3492589035;
|
|
|
|
}
|
|
|
|
var readFormat = false;
|
|
|
|
var cr = r;
|
|
|
|
var cg = g;
|
|
|
|
var cb = b;
|
|
|
|
var obfuscate = false; var bold = false; var strikethrough = false;
|
|
|
|
var underline = false; var italic = false;
|
|
|
|
for(var i = 0; i < txt.length; ++i) {
|
|
|
|
var c = txt.charCodeAt(i);
|
|
|
|
if(c == escapeChar) { // color code symbol
|
|
|
|
readFormat = true;
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
if(readFormat) {
|
|
|
|
if(c == 48) { // black (0)
|
|
|
|
cr = cg = cb = 0;
|
|
|
|
readFormat = obfuscate = bold =
|
|
|
|
strikethrough = underline = italic = false;
|
|
|
|
continue;
|
|
|
|
}else if(c == 49) { // dark_blue (1)
|
|
|
|
cr = cg = 0;
|
|
|
|
cb = 170;
|
|
|
|
readFormat = obfuscate = bold =
|
|
|
|
strikethrough = underline = italic = false;
|
|
|
|
continue;
|
|
|
|
}else if(c == 50) { // dark_green (2)
|
|
|
|
cr = cb = 0;
|
|
|
|
cg = 170;
|
|
|
|
readFormat = obfuscate = bold =
|
|
|
|
strikethrough = underline = italic = false;
|
|
|
|
continue;
|
|
|
|
}else if(c == 51) { // dark_aqua (3)
|
|
|
|
cr = 0;
|
|
|
|
cg = cb = 170;
|
|
|
|
readFormat = obfuscate = bold =
|
|
|
|
strikethrough = underline = italic = false;
|
|
|
|
continue;
|
|
|
|
}else if(c == 52) { // dark_red (4)
|
|
|
|
cr = 170;
|
|
|
|
cg = cb = 0;
|
|
|
|
readFormat = obfuscate = bold =
|
|
|
|
strikethrough = underline = italic = false;
|
|
|
|
continue;
|
|
|
|
}else if(c == 53) { // dark_purple (5)
|
|
|
|
cr = cb = 170;
|
|
|
|
cg = 0;
|
|
|
|
readFormat = obfuscate = bold =
|
|
|
|
strikethrough = underline = italic = false;
|
|
|
|
continue;
|
|
|
|
}else if(c == 54) { // gold (6)
|
|
|
|
cr = 255;
|
|
|
|
cg = 170;
|
|
|
|
cb = 0;
|
|
|
|
readFormat = obfuscate = bold =
|
|
|
|
strikethrough = underline = italic = false;
|
|
|
|
continue;
|
|
|
|
}else if(c == 55) { // gray (7)
|
|
|
|
cr = cg = cb = 170;
|
|
|
|
readFormat = obfuscate = bold =
|
|
|
|
strikethrough = underline = italic = false;
|
|
|
|
continue;
|
|
|
|
}else if(c == 56) { // dark_gray (8)
|
|
|
|
cr = cg = cb = 85;
|
|
|
|
readFormat = obfuscate = bold =
|
|
|
|
strikethrough = underline = italic = false;
|
|
|
|
continue;
|
|
|
|
}else if(c == 57) { // blue (9)
|
|
|
|
cr = cg = 85;
|
|
|
|
cb = 255;
|
|
|
|
readFormat = obfuscate = bold =
|
|
|
|
strikethrough = underline = italic = false;
|
|
|
|
continue;
|
|
|
|
}else if(c == 97) { // green (a)
|
|
|
|
cr = cb = 85;
|
|
|
|
cg = 255;
|
|
|
|
readFormat = obfuscate = bold =
|
|
|
|
strikethrough = underline = italic = false;
|
|
|
|
continue;
|
|
|
|
}else if(c == 98) { // aqua (b)
|
|
|
|
cr = 85;
|
|
|
|
cg = cb = 255;
|
|
|
|
readFormat = obfuscate = bold =
|
|
|
|
strikethrough = underline = italic = false;
|
|
|
|
continue;
|
|
|
|
}else if(c == 99) { // red (c)
|
|
|
|
cg = cb = 85;
|
|
|
|
cr = 255;
|
|
|
|
readFormat = obfuscate = bold =
|
|
|
|
strikethrough = underline = italic = false;
|
|
|
|
continue;
|
|
|
|
}else if(c == 100) { // light_purple (d)
|
|
|
|
cr = cb = 255;
|
|
|
|
cg = 85;
|
|
|
|
readFormat = obfuscate = bold =
|
|
|
|
strikethrough = underline = italic = false;
|
|
|
|
continue;
|
|
|
|
}else if(c == 101) { // yellow (e)
|
|
|
|
cr = cg = 255;
|
|
|
|
cb = 85;
|
|
|
|
readFormat = obfuscate = bold =
|
|
|
|
strikethrough = underline = italic = false;
|
|
|
|
continue;
|
|
|
|
}else if(c == 102) { // white (f)
|
|
|
|
cr = cg = cb = 255;
|
|
|
|
readFormat = obfuscate = bold =
|
|
|
|
strikethrough = underline = italic = false;
|
|
|
|
continue;
|
|
|
|
}else if(c == 107) { // obfuscated (k)
|
|
|
|
readFormat = false;
|
|
|
|
obfuscate = true;
|
|
|
|
continue;
|
|
|
|
}else if(c == 108) { // bold (l)
|
|
|
|
readFormat = false;
|
|
|
|
bold = true;
|
|
|
|
continue;
|
|
|
|
}else if(c == 109) { // strikethrough (m)
|
|
|
|
readFormat = false;
|
|
|
|
strikethrough = true;
|
|
|
|
continue;
|
|
|
|
}else if(c == 110) { // underline (n)
|
|
|
|
readFormat = false;
|
|
|
|
underline = true;
|
|
|
|
continue;
|
|
|
|
}else if(c == 111) { // italic (o)
|
|
|
|
readFormat = false;
|
|
|
|
italic = true;
|
|
|
|
continue;
|
|
|
|
}else if(c == 114) { // reset (r)
|
|
|
|
cr = r;
|
|
|
|
cg = g;
|
|
|
|
cb = b;
|
|
|
|
readFormat = obfuscate = bold =
|
|
|
|
strikethrough = underline = italic = false;
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
readFormat = false;
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
if(obfuscate) {
|
|
|
|
this.dirty = true;
|
|
|
|
var w = 6
|
|
|
|
if(c < CHAR_WIDTHS.length) {
|
|
|
|
w = CHAR_WIDTHS[c];
|
|
|
|
}
|
|
|
|
var j = 0;
|
|
|
|
var newChar = 0;
|
|
|
|
do {
|
|
|
|
var t = randomSeed += 0x6D2B79F5;
|
|
|
|
t = Math.imul(t ^ t >>> 15, t | 1);
|
|
|
|
t ^= t + Math.imul(t ^ t >>> 7, t | 61);
|
|
|
|
newChar = (((t ^ t >>> 14) >>> 0) / 429496) & 255;
|
|
|
|
}while((newChar == c || CHAR_WIDTHS[newChar] != w) && ++j < 1000);
|
|
|
|
c = newChar;
|
|
|
|
}
|
|
|
|
if(shadow) {
|
|
|
|
var ccc = this.makeColor(cr * CHAR_SHADOW_BRIGHTNESS,
|
|
|
|
cg * CHAR_SHADOW_BRIGHTNESS, cb * CHAR_SHADOW_BRIGHTNESS);
|
|
|
|
var ox = x;
|
|
|
|
var ow = 0;
|
|
|
|
if(bold) this.drawColoredChar(x + 1, y, c, ccc, italic);
|
|
|
|
x += (ow = this.drawColoredChar(x, y, c, ccc, italic));
|
|
|
|
if(bold) {
|
|
|
|
++x;
|
|
|
|
++ow;
|
|
|
|
}
|
|
|
|
if(strikethrough) this.drawCharLine(ox, y + 4, ow, ccc);
|
|
|
|
if(underline) this.drawCharLine(ox, y + 8, ow, ccc);
|
|
|
|
}else {
|
|
|
|
if(cr >= 250 && cg >= 250 && cb >= 250) {
|
|
|
|
var ox = x;
|
|
|
|
var ow = 0;
|
|
|
|
if(bold) this.drawChar(x + 1.0, y, c, italic);
|
|
|
|
x += (ow = this.drawChar(x, y, c, italic));
|
|
|
|
if(bold) {
|
|
|
|
++x;
|
|
|
|
++ow;
|
|
|
|
}
|
|
|
|
if(strikethrough) this.drawCharLine(ox, y + 4, ow, "#FFFFFF");
|
|
|
|
if(underline) this.drawCharLine(ox, y + 8, ow, "#FFFFFF");
|
|
|
|
}else {
|
|
|
|
var ccc = this.makeColor(cr,cg,cb);
|
|
|
|
var ox = x;
|
|
|
|
var ow = 0;
|
|
|
|
if(bold) this.drawColoredChar(x + 1.0, y, c, ccc, italic);
|
|
|
|
x += (ow = this.drawColoredChar(x, y, c, ccc, italic));
|
|
|
|
if(bold) {
|
|
|
|
++x;
|
|
|
|
++ow;
|
|
|
|
}
|
|
|
|
if(strikethrough) this.drawCharLine(ox, y + 4, ow, ccc);
|
|
|
|
if(underline) this.drawCharLine(ox, y + 8, ow, ccc);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if(x > 250.0) {
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if(shadow) {
|
|
|
|
this.drawString(startX, startY, txt, r, g, b, false, randomSeed, escapeCharChar);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
redraw() {
|
|
|
|
if(this.dirty || (this.mouseOver && ++this.redrawTimer % 6 == 0) || this.canvas.width != this.containerTag.clientWidth) {
|
|
|
|
this.dirty = false;
|
|
|
|
if(this.canvas.width != this.containerTag.clientWidth) {
|
|
|
|
this.containerTag.style.height = Math.floor(this.containerTag.clientWidth * SERVER_ASPECT_RATIO) + "px";
|
|
|
|
this.canvas.width = this.containerTag.clientWidth;
|
|
|
|
this.canvas.height = this.containerTag.clientHeight;
|
|
|
|
}
|
|
|
|
var tooltipNewArray = [];
|
|
|
|
this.ctx.imageSmoothingEnabled = false;
|
|
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
|
this.ctx.fillStyle = "#101010";
|
|
|
|
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
|
this.ctx.strokeStyle = "#808080";
|
|
|
|
this.ctx.lineWidth = this.getPixelX(1.0);
|
|
|
|
this.ctx.strokeRect(this.ctx.lineWidth / 2, this.ctx.lineWidth / 2,this.canvas.width - this.ctx.lineWidth,this.canvas.height - this.ctx.lineWidth);
|
|
|
|
|
|
|
|
if(!this.iconCanvas) {
|
|
|
|
this.drawIcon(128, 0, 64, 64, 4, 4, 30, 30);
|
|
|
|
}else {
|
|
|
|
this.ctx.drawImage(this.iconCanvas, 0, 0, 64, 64, this.getPixelX(4),
|
|
|
|
this.getPixelY(4), this.getPixelX(30), this.getPixelY(30));
|
|
|
|
}
|
|
|
|
|
|
|
|
var v = Date.now();
|
|
|
|
var drawAddress = false;
|
|
|
|
|
|
|
|
this.drawString(38, 4, this.currentStatus.serverName, 255, 255, 255, true, v);
|
|
|
|
if(this.currentStatus.pingToServer >= 0) {
|
|
|
|
if(this.currentStatus.motdLine1.length > 0) {
|
|
|
|
this.drawString(38, 15, ""+this.currentStatus.motdLine1, 255, 255, 255, true, v);
|
|
|
|
}
|
|
|
|
if(this.currentStatus.motdLine2.length > 0) {
|
|
|
|
this.drawString(38, 27, ""+this.currentStatus.motdLine2, 255, 255, 255, true, v);
|
|
|
|
}else {
|
|
|
|
drawAddress = true;
|
|
|
|
}
|
|
|
|
}else if(v - this.connecting < 7000) {
|
|
|
|
this.dirty = true;
|
|
|
|
var dots = Math.floor(v / 300) % 4;
|
|
|
|
this.drawString(38, 15, "Connecting" + (dots > 0 ? "." : "") + (dots > 1 ? "." : "") + (dots > 2 ? "." : ""), 128, 128, 128, true, v);
|
|
|
|
drawAddress = true;
|
|
|
|
}else {
|
|
|
|
this.drawString(38, 15, "No Connection", 96, 96, 96, true, v);
|
|
|
|
drawAddress = true;
|
|
|
|
}
|
|
|
|
if(drawAddress && this.showAddress) {
|
|
|
|
this.drawString(38, 27, this.originalAddress, 48, 48, 48, true, v);
|
|
|
|
}
|
|
|
|
var mouseIsOverPing = this.mouseOver && this.mouseX >= 233 && this.mouseX <= 256 && this.mouseY >= 1 && this.mouseY <= 11;
|
|
|
|
var mouseIsOverPlayers = false;
|
|
|
|
if(this.currentStatus.pingToServer >= 0) {
|
|
|
|
if(mouseIsOverPing) tooltipNewArray = [""+this.currentStatus.pingToServer+"ms"];
|
|
|
|
var i = 5;
|
|
|
|
if(this.currentStatus.pingToServer < 150) i = 0;
|
|
|
|
else if(this.currentStatus.pingToServer < 300) i = 1;
|
|
|
|
else if(this.currentStatus.pingToServer < 600) i = 2;
|
|
|
|
else if(this.currentStatus.pingToServer < 1000) i = 3;
|
|
|
|
else i = 4;
|
|
|
|
this.drawIcon(128, 80 + i * 8, 10, 7, 243, 3);
|
|
|
|
var onlineStr = "" + this.currentStatus.onlineCount + "/" + this.currentStatus.maxCount;
|
|
|
|
var xx = 253 - this.getStringWidth(onlineStr);
|
|
|
|
mouseIsOverPlayers = !mouseIsOverPing && this.mouseOver && this.mouseX >= xx - 5 && this.mouseX <= 256
|
|
|
|
&& this.mouseY >= 12 && this.mouseY <= 23;
|
|
|
|
this.drawString(xx, 14, onlineStr, 128, 128, 128, true);
|
|
|
|
if(mouseIsOverPlayers) {
|
|
|
|
tooltipNewArray = this.currentStatus.players;
|
|
|
|
}
|
|
|
|
}else {
|
|
|
|
if(v - this.connecting < 7000 || this.connected) {
|
|
|
|
this.dirty = true;
|
|
|
|
if(mouseIsOverPing) tooltipNewArray = ["Connecting..."];
|
|
|
|
this.drawIcon(138, 80 + Math.abs(Math.floor(v / 100.0) % 8 - 4) * 8, 10, 7, 243, 3);
|
|
|
|
}else {
|
|
|
|
if(mouseIsOverPing) tooltipNewArray = ["No Connection"];
|
|
|
|
this.drawIcon(128, 120, 10, 7, 243, 3);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if(this.showCracked && this.currentStatus.pingToServer >= 0) {
|
|
|
|
if(this.currentStatus.serverCracked) {
|
|
|
|
this.drawIcon(144, 64, 16, 16, 243, 25, 10, 10);
|
|
|
|
}else {
|
|
|
|
this.drawIcon(176, 96, 16, 16, 243, 25, 11, 11);
|
|
|
|
}
|
|
|
|
if(!mouseIsOverPlayers && this.mouseOver && this.mouseX >= 239 && this.mouseX <= 256
|
|
|
|
&& this.mouseY >= 22 && this.mouseY <= 36) {
|
|
|
|
if(this.currentStatus.serverCracked) {
|
|
|
|
tooltipNewArray = ["Server is cracked"];
|
|
|
|
}else {
|
|
|
|
tooltipNewArray = ["Server has login"];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if(!tooltipNewArray || !this.mouseOver || tooltipNewArray.length == 0) {
|
|
|
|
this.tooltipCanvas.style.display = "none";
|
|
|
|
}else {
|
|
|
|
this.showTooltip(tooltipNewArray);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
ping(addr, name, forceName, hideAddress, hideCracked) {
|
|
|
|
if(!name) {
|
|
|
|
name = "Minecraft Server";
|
|
|
|
this.showQueryName = (typeof forceName === "undefined") || !forceName;
|
|
|
|
}else {
|
|
|
|
this.showQueryName = (typeof forceName !== "undefined") && !forceName;
|
|
|
|
}
|
|
|
|
this.defaultName = name;
|
|
|
|
this.showAddress = !hideAddress;
|
|
|
|
this.originalAddress = addr;
|
|
|
|
if(typeof hideCracked !== "undefined") {
|
|
|
|
this.showCracked = !hideCracked;
|
|
|
|
}
|
|
|
|
if(addr.indexOf("ws://") != 0 && addr.indexOf("wss://") != 0) {
|
|
|
|
addr = (window.location.href.indexOf("https:") == 0 ? "wss" : "ws") + "://" + addr;
|
|
|
|
}
|
|
|
|
if(this.socket != null && this.connected) {
|
|
|
|
this.socket.close();
|
|
|
|
}
|
|
|
|
this.currentStatus = {
|
|
|
|
serverName: name,
|
|
|
|
serverCracked: false,
|
|
|
|
pingSentTime: Date.now(),
|
|
|
|
pingToServer: -1,
|
|
|
|
motdLine1: "Connecting...",
|
|
|
|
motdLine2: "",
|
|
|
|
onlineCount: 0,
|
|
|
|
maxCount: 0,
|
|
|
|
players: []
|
|
|
|
};
|
|
|
|
this.dirty = true;
|
|
|
|
if(this.connected || this.connecting > 0) {
|
|
|
|
this.socket.close();
|
|
|
|
this.connected = false;
|
|
|
|
this.connecting = 0;
|
|
|
|
this.redraw();
|
|
|
|
}
|
|
|
|
this.connecting = Date.now();
|
|
|
|
const self = this;
|
|
|
|
this.socket = new WebSocket(addr);
|
|
|
|
this.socket.binaryType = "arraybuffer";
|
|
|
|
this.socket.onopen = () => {
|
|
|
|
self.socket.send("Accept: MOTD");
|
|
|
|
self.connecting = 0;
|
|
|
|
self.connected = true;
|
|
|
|
self.dirty = true;
|
|
|
|
};
|
|
|
|
this.socket.onmessage = (e) => {
|
|
|
|
if(e.data) {
|
|
|
|
if(typeof e.data === "string") {
|
|
|
|
try {
|
|
|
|
var dat = JSON.parse(e.data);
|
|
|
|
if(dat["type"].toLowerCase() === "motd") {
|
|
|
|
self.dirty = true;
|
|
|
|
if(self.currentStatus.pingSentTime > 0) {
|
|
|
|
self.currentStatus.pingToServer = Date.now() - self.currentStatus.pingSentTime;
|
|
|
|
self.currentStatus.pingSentTime = 0;
|
|
|
|
}
|
|
|
|
if(this.showQueryName) {
|
|
|
|
self.currentStatus.serverName = dat["name"];
|
|
|
|
}else {
|
|
|
|
self.currentStatus.serverName = this.defaultName;
|
|
|
|
}
|
|
|
|
self.currentStatus.serverCracked = dat["cracked"];
|
|
|
|
var lns = dat["data"]["motd"];
|
|
|
|
if(lns && lns.length > 0) {
|
|
|
|
self.currentStatus.motdLine1 = lns[0];
|
|
|
|
if(lns.length > 1) {
|
|
|
|
self.currentStatus.motdLine2 = lns[1];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
self.currentStatus.onlineCount = dat["data"]["online"];
|
|
|
|
self.currentStatus.maxCount = dat["data"]["max"];
|
|
|
|
self.currentStatus.players = dat["data"]["players"]||[];
|
|
|
|
}
|
|
|
|
}catch(e) {
|
|
|
|
self.currentStatus.motdLine1 = "ERROR: " + e;
|
|
|
|
}
|
|
|
|
}else {
|
|
|
|
var dat = new Uint8Array(e.data);
|
|
|
|
if(dat.length == 64*64*4) {
|
|
|
|
this.updateIconFromBytes(dat);
|
|
|
|
this.dirty = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
this.socket.onclose = (e) => {
|
|
|
|
self.connecting = 0;
|
|
|
|
self.connected = false;
|
|
|
|
self.dirty = true;
|
|
|
|
};
|
|
|
|
this.socket.onerror = (e) => {
|
|
|
|
if(self.connected || self.connecting > 0) {
|
|
|
|
self.socket.close();
|
|
|
|
}
|
|
|
|
self.connecting = 0;
|
|
|
|
self.connected = false;
|
|
|
|
self.dirty = true;
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
isActive() {
|
|
|
|
return self.connecting > 0 || self.connected;
|
|
|
|
}
|
|
|
|
|
|
|
|
setTooltip(ttList) {
|
|
|
|
if(this.isTooltipEnabled) {
|
|
|
|
var tst = ttList.join();
|
|
|
|
if(tst !== this.tooltip || this.lastWidth !== this.canvas.width) {
|
|
|
|
var listWidth = 0;
|
|
|
|
var listHeight = ttList.length * 9;
|
|
|
|
for(var i = 0; i < ttList.length; ++i) {
|
|
|
|
listWidth = Math.max(listWidth, this.getStringWidth(ttList[i]));
|
|
|
|
}
|
|
|
|
listWidth += 6;
|
|
|
|
listHeight += 3;
|
|
|
|
this.tooltipCanvas.width = this.getPixelX(listWidth);
|
|
|
|
this.tooltipCanvas.height = this.getPixelY(listHeight);
|
|
|
|
var mainCtx = this.ctx;
|
|
|
|
this.ctx = this.tooltipCtx;
|
|
|
|
this.ctx.imageSmoothingEnabled = false;
|
|
|
|
this.ctx.clearRect(0, 0, this.tooltipCanvas.width, this.tooltipCanvas.height);
|
|
|
|
this.ctx.fillStyle = "#101010E0";
|
|
|
|
this.ctx.fillRect(0, 0, this.tooltipCanvas.width, this.tooltipCanvas.height);
|
|
|
|
for(var i = 0; i < ttList.length; ++i) {
|
|
|
|
this.drawString(3, (2 + i*9), ttList[i], 256, 256, 256, true);
|
|
|
|
}
|
|
|
|
this.ctx = mainCtx;
|
|
|
|
this.tooltip = tst;
|
|
|
|
this.lastWidth = this.canvas.width;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
showTooltip(ttList) {
|
|
|
|
this.dirty = true;
|
|
|
|
if(!this.mouseOver) {
|
|
|
|
this.tooltipCanvas.style.display = "none";
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.setTooltip(ttList);
|
|
|
|
this.tooltipCanvas.style.display = "block";
|
|
|
|
var x = this.mousePageX + this.getPixelX(4);
|
|
|
|
var y = this.mousePageY - this.getPixelY(9);
|
|
|
|
if(this.mousePageX + this.tooltipCanvas.width + 2 > window.innerWidth) {
|
|
|
|
x = window.innerWidth - this.tooltipCanvas.width - 2;
|
|
|
|
}
|
|
|
|
if(this.mousePageY + this.tooltipCanvas.height + 2 > window.innerHeight) {
|
|
|
|
y = window.innerHeight - this.tooltipCanvas.height - 2;
|
|
|
|
if(y < 0) {
|
|
|
|
y = 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.tooltipCanvas.style.left = x + "px";
|
|
|
|
this.tooltipCanvas.style.top = y + "px";
|
|
|
|
}
|
|
|
|
|
|
|
|
updateIconFromBytes(arr) {
|
|
|
|
if(!this.iconCanvas) {
|
|
|
|
this.iconCanvas = document.createElement("canvas");
|
|
|
|
this.iconCanvas.width = 64;
|
|
|
|
this.iconCanvas.height = 64;
|
|
|
|
this.iconContext = this.iconCanvas.getContext("2d");
|
|
|
|
}
|
|
|
|
var dat = this.iconContext.createImageData(64, 64);
|
|
|
|
for(var i = 0, l = 64*64*4; i < l; ++i) {
|
|
|
|
dat.data[i] = arr[i];
|
|
|
|
}
|
|
|
|
this.iconContext.putImageData(dat, 0, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|