of the image.
+ function uncompress(file, width, height) {
+ var uncompressed, p, repeatAttr, repeatChar, count;
+ // Initialize the data used to store the image, each text character has two bytes, one for the character code, and the other for the attribute.
+ uncompressed = new Uint8Array(width * height * 2);
+ i = 0;
+ while (i < uncompressed.length) {
+ p = file.get(); // , the current code under inspection.
+ count = p & 63; // , the times data is repeated
+ switch (p >> 6) { // Look at which RLE scheme to use
+ case 1: // Handle repeated character code.
+ for (repeatChar = file.get(), j = 0; j <= count; ++j) {
+ uncompressed[i++] = repeatChar;
+ uncompressed[i++] = file.get();
+ }
+ break;
+ case 2: // Handle repeated attributes.
+ for (repeatAttr = file.get(), j = 0; j <= count; ++j) {
+ uncompressed[i++] = file.get();
+ uncompressed[i++] = repeatAttr;
+ }
+ break;
+ case 3: // Handle repeated character code and attributes.
+ for (repeatChar = file.get(), repeatAttr = file.get(), j = 0; j <= count; ++j) {
+ uncompressed[i++] = repeatChar;
+ uncompressed[i++] = repeatAttr;
+ }
+ break;
+ default: // Handle no RLE.
+ for (j = 0; j <= count; ++j) {
+ uncompressed[i++] = file.get();
+ uncompressed[i++] = file.get();
+ }
+ }
+ }
+ return uncompressed; // Return the final, data.
+ }
+
+ // Convert the bytes to a File() object, and reader the settings in the header, by calling XBinHeader().
+ file = new File(bytes);
+ header = new XBinHeader(file);
+
+ // If palette information is included, read it immediately after the header, if not, use the default palette used for BIN files.
+ if (header.palette) {
+ file.read(48);
+ }
+ // If font information is included, read it, if not, use the default 80x25 font.
+ if (header.font) {
+ file.read(header.fontHeight * 256);
+ }
+ // Fetch the image data, and uncompress if necessary.
+ imageData = header.compressed ? uncompress(file, header.width, header.height) : file.read(header.width * header.height * 2);
+
+ output = new Uint8Array(imageData.length / 2 * 3);
+
+ for (i = 0, j = 0; i < imageData.length; i += 2, j += 3) {
+ output[j] = imageData[i];
+ output[j + 1] = imageData[i + 1] & 15;
+ output[j + 2] = imageData[i + 1] >> 4;
+ }
+
+ return {
+ "width": header.width,
+ "height": header.height,
+ "data": output
+ };
+ }
+
+ function loadFile(file, callback, palette, codepage, noblink) {
+ var extension, reader;
+ extension = file.name.split(".").pop().toLowerCase();
+ reader = new FileReader();
+ reader.onload = function(data) {
+ switch (extension) {
+ case "png":
+ case "gif":
+ case "jpg":
+ case "jpeg":
+ loadImg(data.target.result, callback, palette, codepage, noblink);
+ break;
+ case "xb":
+ callback(loadXbin(new Uint8Array(data.target.result)));
+ break;
+ default:
+ callback(loadAnsi(new Uint8Array(data.target.result)));
+ }
+ };
+ switch (extension) {
+ case "png":
+ case "gif":
+ case "jpg":
+ case "jpeg":
+ reader.readAsDataURL(file);
+ break;
+ default:
+ reader.readAsArrayBuffer(file);
+ }
+ }
+
+ return {
+ "loadFile": loadFile
+ };
+}());
diff --git a/js/network.js b/js/network.js
new file mode 100644
index 0000000..3e64bc3
--- /dev/null
+++ b/js/network.js
@@ -0,0 +1,303 @@
+function createWorkerHandler(inputHandle) {
+ "use strict";
+ var worker = new Worker("js/worker.js");
+ var handle = localStorage.getItem("handle");
+ if (handle === null) {
+ handle = "Anonymous";
+ localStorage.setItem("handle", handle);
+ }
+ inputHandle.value = handle;
+ var connected = false;
+ worker.postMessage({ "cmd": "handle", "handle": handle });
+ showOverlay($("websocket-overlay"));
+
+ function onConnected() {
+ var excludedElements = document.getElementsByClassName("excluded-for-websocket");
+ for (var i = 0; i < excludedElements.length; i++) {
+ excludedElements[i].style.display = "none";
+ }
+ var includedElement = document.getElementsByClassName("included-for-websocket");
+ for (var i = 0; i < includedElement.length; i++) {
+ includedElement[i].style.display = "block";
+ }
+ title.setName(window.location.hostname);
+ worker.postMessage({ "cmd": "join", "handle": handle });
+ connected = true;
+ }
+
+ function onDisconnected() {
+ if (connected === true) {
+ alert("You were disconnected from the server, try refreshing the page to try again.");
+ } else {
+ hideOverlay($("websocket-overlay"));
+ }
+ connected = false;
+ }
+
+ function onImageData(columns, rows, data, iceColours, letterSpacing) {
+ textArtCanvas.setImageData(columns, rows, data, iceColours, letterSpacing);
+ hideOverlay($("websocket-overlay"));
+ }
+
+ function onChat(handle, text, showNotification) {
+ chat.addConversation(handle, text, showNotification);
+ }
+
+ function onJoin(handle, sessionID, showNotification) {
+ chat.join(handle, sessionID, showNotification);
+ }
+
+ function onPart(sessionID) {
+ chat.part(sessionID);
+ }
+
+ function onNick(handle, sessionID, showNotification) {
+ chat.nick(handle, sessionID, showNotification);
+ }
+
+ function onDraw(blocks) {
+ textArtCanvas.quickDraw(blocks);
+ }
+
+ function onMessage(msg) {
+ var data = msg.data;
+ switch (data.cmd) {
+ case "connected":
+ onConnected();
+ break;
+ case "disconnected":
+ onDisconnected();
+ break;
+ case "imageData":
+ onImageData(data.columns, data.rows, new Uint16Array(data.data), data.iceColours, data.letterSpacing);
+ break;
+ case "chat":
+ onChat(data.handle, data.text, data.showNotification);
+ break;
+ case "join":
+ onJoin(data.handle, data.sessionID, data.showNotification);
+ break;
+ case "part":
+ onPart(data.sessionID);
+ break;
+ case "nick":
+ onNick(data.handle, data.sessionID, data.showNotification);
+ break;
+ case "draw":
+ onDraw(data.blocks);
+ break;
+ }
+ }
+
+ function draw(blocks) {
+ worker.postMessage({ "cmd": "draw", "blocks": blocks });
+ }
+
+ function setHandle(newHandle) {
+ if (handle !== newHandle) {
+ handle = newHandle;
+ localStorage.setItem("handle", handle);
+ worker.postMessage({ "cmd": "nick", "handle": handle });
+ }
+ }
+
+ function sendChat(text) {
+ worker.postMessage({ "cmd": "chat", "text": text });
+ }
+
+ function isConnected() {
+ return connected;
+ }
+
+ worker.addEventListener("message", onMessage);
+ worker.postMessage({ "cmd": "connect", "url": "wss://" + window.location.hostname + ":1337" + window.location.pathname });
+
+ return {
+ "draw": draw,
+ "setHandle": setHandle,
+ "sendChat": sendChat,
+ "isConnected": isConnected
+ };
+}
+
+function createChatController(divChatButton, divChatWindow, divMessageWindow, divUserList, inputHandle, inputMessage, inputNotificationCheckbox, onFocusCallback, onBlurCallback) {
+ "use strict";
+ var enabled = false;
+ var userList = {};
+ var notifications = localStorage.getItem("notifications");
+ if (notifications === null) {
+ notifications = false;
+ localStorage.setItem("notifications", notifications);
+ } else {
+ notifications = JSON.parse(notifications);
+ }
+ inputNotificationCheckbox.checked = notifications;
+
+ function scrollToBottom() {
+ var rect = divMessageWindow.getBoundingClientRect();
+ divMessageWindow.scrollTop = divMessageWindow.scrollHeight - rect.height;
+ }
+
+ function newNotification(text) {
+ var notification = new Notification(title.getName() + " - ANSiEdit", {
+ "body": text,
+ "icon": "../images/face.png"
+ });
+ setTimeout(() => {
+ notification.close();
+ }, 7000);
+ }
+
+ function addConversation(handle, text, showNotification) {
+ var div = document.createElement("DIV");
+ var spanHandle = document.createElement("SPAN");
+ var spanSeperator = document.createElement("SPAN");
+ var spanText = document.createElement("SPAN");
+ spanHandle.textContent = handle;
+ spanHandle.classList.add("handle");
+ spanSeperator.textContent = " ";
+ spanText.textContent = text;
+ div.appendChild(spanHandle);
+ div.appendChild(spanSeperator);
+ div.appendChild(spanText);
+ var rect = divMessageWindow.getBoundingClientRect();
+ var doScroll = (rect.height > divMessageWindow.scrollHeight) || (divMessageWindow.scrollTop === divMessageWindow.scrollHeight - rect.height);
+ divMessageWindow.appendChild(div);
+ if (doScroll) {
+ scrollToBottom();
+ }
+ if (showNotification === true && enabled === false && divChatButton.classList.contains("notification") === false) {
+ divChatButton.classList.add("notification");
+ }
+ }
+
+ function onFocus() {
+ onFocusCallback();
+ }
+
+ function onBlur() {
+ onBlurCallback();
+ }
+
+ function blurHandle(evt) {
+ if (inputHandle.value === "") {
+ inputHandle.value = "Anonymous";
+ }
+ worker.setHandle(inputHandle.value);
+ }
+
+ function keypressHandle(evt) {
+ var keyCode = (evt.keyCode || evt.which);
+ if (keyCode === 13) {
+ inputMessage.focus();
+ }
+ }
+
+ function keypressMessage(evt) {
+ var keyCode = (evt.keyCode || evt.which);
+ if (keyCode === 13) {
+ if (inputMessage.value !== "") {
+ var text = inputMessage.value;
+ inputMessage.value = "";
+ worker.sendChat(text);
+ }
+ }
+ }
+
+ inputHandle.addEventListener("focus", onFocus);
+ inputHandle.addEventListener("blur", onBlur);
+ inputMessage.addEventListener("focus", onFocus);
+ inputMessage.addEventListener("blur", onBlur);
+ inputHandle.addEventListener("blur", blurHandle);
+ inputHandle.addEventListener("keypress", keypressHandle);
+ inputMessage.addEventListener("keypress", keypressMessage);
+
+ function toggle() {
+ if (enabled === true) {
+ divChatWindow.style.display = "none";
+ enabled = false;
+ onBlurCallback();
+ divChatButton.classList.remove("active");
+ } else {
+ divChatWindow.style.display = "block";
+ enabled = true;
+ scrollToBottom();
+ onFocusCallback();
+ inputMessage.focus();
+ divChatButton.classList.remove("notification");
+ divChatButton.classList.add("active");
+ }
+ }
+
+ function isEnabled() {
+ return enabled;
+ }
+
+ function join(handle, sessionID, showNotification) {
+ if (userList[sessionID] === undefined) {
+ if (notifications === true && showNotification === true) {
+ newNotification(handle + " has joined");
+ }
+ userList[sessionID] = { "handle": handle, "div": document.createElement("DIV") };
+ userList[sessionID].div.classList.add("user-name");
+ userList[sessionID].div.textContent = handle;
+ divUserList.appendChild(userList[sessionID].div);
+ }
+ }
+
+ function nick(handle, sessionID, showNotification) {
+ if (userList[sessionID] !== undefined) {
+ if (showNotification === true && notifications === true) {
+ newNotification(userList[sessionID].handle + " has changed their name to " + handle);
+ }
+ userList[sessionID].handle = handle;
+ userList[sessionID].div.textContent = handle;
+ }
+ }
+
+ function part(sessionID) {
+ if (userList[sessionID] !== undefined) {
+ if (notifications === true) {
+ newNotification(userList[sessionID].handle + " has left");
+ }
+ divUserList.removeChild(userList[sessionID].div);
+ delete userList[sessionID];
+ }
+ }
+
+ function globalToggleKeydown(evt) {
+ var keyCode = (evt.keyCode || evt.which);
+ if (keyCode === 27) {
+ toggle();
+ }
+ }
+
+ function notificationCheckboxClicked(evt) {
+ if (inputNotificationCheckbox.checked) {
+ if (Notification.permission !== "granted") {
+ Notification.requestPermission((permission) => {
+ notifications = true;
+ localStorage.setItem("notifications", notifications);
+ });
+ } else {
+ notifications = true;
+ localStorage.setItem("notifications", notifications);
+ }
+ } else {
+ notifications = false;
+ localStorage.setItem("notifications", notifications);
+ }
+ }
+
+ document.addEventListener("keydown", globalToggleKeydown);
+ inputNotificationCheckbox.addEventListener("click", notificationCheckboxClicked);
+
+ return {
+ "addConversation": addConversation,
+ "toggle": toggle,
+ "isEnabled": isEnabled,
+ "join": join,
+ "nick": nick,
+ "part": part
+ };
+}
diff --git a/js/savers.js b/js/savers.js
new file mode 100644
index 0000000..6194c8b
--- /dev/null
+++ b/js/savers.js
@@ -0,0 +1,95 @@
+var Savers = (function() {
+ "use strict";
+
+ // function toANSFormat(input) {
+ // var highest, inputIndex, end, charCode, fg, bg, bold, blink, currentFg, currentBg, currentBold, currentBlink, attribs, attribIndex, output;
+ //
+ // function ansiColor(binColor) {
+ // switch (binColor) {
+ // case 1:
+ // return 4;
+ // case 3:
+ // return 6;
+ // case 4:
+ // return 1;
+ // case 6:
+ // return 3;
+ // default:
+ // return binColor;
+ // }
+ // }
+ //
+ // highest = getHighestRow(input);
+ // output = [27, 91, 48, 109];
+ // for (inputIndex = 0, end = highest * 80 * 3, currentFg = 7, currentBg = 0, currentBold = false, currentBlink = false; inputIndex < end; inputIndex += 3) {
+ // attribs = [];
+ // charCode = input[inputIndex];
+ // fg = input[inputIndex + 1];
+ // bg = input[inputIndex + 2];
+ // if (fg > 7) {
+ // bold = true;
+ // fg = fg - 8;
+ // } else {
+ // bold = false;
+ // }
+ // if (bg > 7) {
+ // blink = true;
+ // bg = bg - 8;
+ // } else {
+ // blink = false;
+ // }
+ // if ((currentBold && !bold) || (currentBlink && !blink)) {
+ // attribs.push([48]);
+ // currentFg = 7;
+ // currentBg = 0;
+ // currentBold = false;
+ // currentBlink = false;
+ // }
+ // if (bold && !currentBold) {
+ // attribs.push([49]);
+ // currentBold = true;
+ // }
+ // if (blink && !currentBlink) {
+ // attribs.push([53]);
+ // currentBlink = true;
+ // }
+ // if (fg !== currentFg) {
+ // attribs.push([51, 48 + ansiColor(fg)]);
+ // currentFg = fg;
+ // }
+ // if (bg !== currentBg) {
+ // attribs.push([52, 48 + ansiColor(bg)]);
+ // currentBg = bg;
+ // }
+ // if (attribs.length) {
+ // output.push(27, 91);
+ // for (attribIndex = 0; attribIndex < attribs.length; ++attribIndex) {
+ // output = output.concat(attribs[attribIndex]);
+ // if (attribIndex !== attribs.length - 1) {
+ // output.push(59);
+ // } else {
+ // output.push(109);
+ // }
+ // }
+ // }
+ // output.push(charCode);
+ // }
+ // return new Uint8Array(output);
+ // }
+
+ function imageDataToDataURL(imageData, noblink) {
+ var bytes, i, j, flags;
+ bytes = new Uint8Array((imageData.width * imageData.height * 2) + 11);
+ flags = noblink ? 8 : 0;
+ bytes.set(new Uint8Array([88, 66, 73, 78, 26, (imageData.width & 0xff), (imageData.width >> 8), (imageData.height & 0xff), (imageData.height >> 8), 16, flags]), 0);
+ for (i = 0, j = 11; i < imageData.data.length; i += 3, j += 2) {
+ bytes[j] = imageData.data[i];
+ bytes[j + 1] = imageData.data[i + 1] + (imageData.data[i + 2] << 4);
+ }
+ return "data:image/x-bin;base64," + btoa(String.fromCharCode.apply(null, bytes));
+ }
+
+ return {
+ "imageDataToDataURL": imageDataToDataURL
+ };
+}());
diff --git a/js/ui.js b/js/ui.js
new file mode 100644
index 0000000..85e8f96
--- /dev/null
+++ b/js/ui.js
@@ -0,0 +1,462 @@
+function createSettingToggle(divButton, getter, setter) {
+ "use strict";
+ var currentSetting;
+
+ function update() {
+ currentSetting = getter();
+ if (currentSetting === true) {
+ divButton.classList.add("enabled");
+ } else {
+ divButton.classList.remove("enabled");
+ }
+ }
+
+ function changeSetting(evt) {
+ evt.preventDefault();
+ currentSetting = !currentSetting;
+ setter(currentSetting);
+ update();
+ }
+
+ divButton.addEventListener("click", changeSetting);
+ update();
+
+ return {
+ "update": update
+ };
+}
+
+var Toolbar = (function() {
+ "use strict";
+ var currentButton;
+ var currentOnBlur;
+
+ function add(divButton, onFocus, onBlur) {
+ function enable() {
+ if (currentButton !== divButton) {
+ if (currentButton !== undefined) {
+ currentButton.classList.remove("toolbar-displayed");
+ }
+ if (currentOnBlur !== undefined) {
+ currentOnBlur();
+ }
+ divButton.classList.add("toolbar-displayed");
+ currentButton = divButton;
+ currentOnBlur = onBlur;
+ if (onFocus !== undefined) {
+ onFocus();
+ }
+ }
+ }
+ divButton.addEventListener("click", (evt) => {
+ evt.preventDefault();
+ enable();
+ });
+ return {
+ "enable": enable
+ };
+ }
+
+ return {
+ "add": add
+ };
+}());
+
+function onReturn(divElement, divTarget) {
+ "use strict";
+ divElement.addEventListener("keypress", (evt) => {
+ var keyCode = (evt.keyCode || evt.which);
+ if (evt.altKey === false && evt.ctrlKey === false && evt.metaKey === false && keyCode === 13) {
+ evt.preventDefault();
+ evt.stopPropagation();
+ divTarget.click();
+ }
+ });
+}
+
+function onClick(divElement, func) {
+ "use strict";
+ divElement.addEventListener("click", (evt) => {
+ evt.preventDefault();
+ func(divElement);
+ });
+}
+
+function onFileChange(divElement, func) {
+ "use strict";
+ divElement.addEventListener("change", (evt) => {
+ if (evt.target.files.length > 0) {
+ func(evt.target.files[0]);
+ }
+ });
+}
+
+function onSelectChange(divElement, func) {
+ "use strict";
+ divElement.addEventListener("change", (evt) => {
+ func(divElement.value);
+ });
+}
+
+function createPositionInfo(divElement) {
+ "use strict";
+ function update(x, y) {
+ divElement.textContent = (x + 1) + ", " + (y + 1);
+ }
+
+ return {
+ "update": update
+ };
+}
+
+function showOverlay(divElement) {
+ "use strict";
+ divElement.classList.add("enabled");
+}
+
+function hideOverlay(divElement) {
+ "use strict";
+ divElement.classList.remove("enabled");
+}
+
+function undoAndRedo(evt) {
+ "use strict";
+ var keyCode = (evt.keyCode || evt.which);
+ if ((evt.ctrlKey === true || (evt.metaKey === true && evt.shiftKey === false)) && keyCode === 90) {
+ evt.preventDefault();
+ textArtCanvas.undo();
+ } else if ((evt.ctrlKey === true && evt.keyCode === 89) || (evt.metaKey === true && evt.shiftKey === true && keyCode === 90)) {
+ evt.preventDefault();
+ textArtCanvas.redo();
+ }
+}
+
+function createTitleHandler(inputElement, onFocusCallback, onBlurCallback) {
+ "use strict";
+ function updateTitle() {
+ document.title = inputElement.value + " - moebius";
+ }
+
+ function onFocus() {
+ onFocusCallback();
+ }
+
+ function onBlur() {
+ onBlurCallback();
+ updateTitle();
+ }
+
+ function keyPress(evt) {
+ var keyCode = (evt.keyCode || evt.which);
+ if (keyCode === 13) {
+ evt.preventDefault();
+ evt.stopPropagation();
+ if (inputElement.value === "") {
+ inputElement.value = "untitled";
+ }
+ inputElement.blur();
+ }
+ }
+
+ function setName(newName) {
+ inputElement.value = newName;
+ updateTitle();
+ }
+
+ function getName() {
+ return inputElement.value;
+ }
+
+ function reset() {
+ setName("untitled");
+ }
+
+ inputElement.addEventListener("focus", onFocus);
+ inputElement.addEventListener("blur", onBlur);
+ inputElement.addEventListener("keypress", keyPress);
+ reset();
+
+ return {
+ "getName": getName,
+ "setName": setName,
+ "reset": reset
+ };
+}
+
+function createPaintShortcuts(keyPair) {
+ "use strict";
+ var ignored = false;
+
+ function keyDown(evt) {
+ if (ignored === false) {
+ var keyCode = (evt.keyCode || evt.which);
+ if (evt.ctrlKey === false && evt.altKey === false && evt.shiftKey === false && evt.metaKey === false) {
+ if (keyCode >= 48 && keyCode <= 55) {
+ var colour = keyCode - 48;
+ var currentColour = palette.getForegroundColour();
+ if (currentColour === colour) {
+ palette.setForegroundColour(colour + 8);
+ } else {
+ palette.setForegroundColour(colour);
+ }
+ } else {
+ var charCode = String.fromCharCode(keyCode);
+ if (keyPair[charCode] !== undefined) {
+ if (worker.isConnected() === false || keyPair[charCode].classList.contains("excluded-for-websocket") === false) {
+ evt.preventDefault();
+ keyPair[charCode].click();
+ }
+ }
+ }
+ }
+ }
+ }
+
+ function keyDownWithCtrl(evt) {
+ if (ignored === false) {
+ var keyCode = (evt.keyCode || evt.which);
+ if (evt.ctrlKey === true && evt.altKey === false && evt.shiftKey === false && evt.metaKey === false) {
+ var charCode = String.fromCharCode(keyCode);
+ if (keyPair[charCode] !== undefined) {
+ if (worker.isConnected() === false || keyPair[charCode].classList.contains("excluded-for-websocket") === false) {
+ evt.preventDefault();
+ keyPair[charCode].click();
+ }
+ }
+ }
+ }
+ }
+
+ document.addEventListener("keydown", keyDownWithCtrl);
+
+ function enable() {
+ document.addEventListener("keydown", keyDown);
+ }
+
+ function disable() {
+ document.removeEventListener("keydown", keyDown);
+ }
+
+ function ignore() {
+ ignored = true;
+ }
+
+ function unignore() {
+ ignored = false;
+ }
+
+ enable();
+
+ return {
+ "enable": enable,
+ "disable": disable,
+ "ignore": ignore,
+ "unignore": unignore
+ };
+}
+
+function createToggleButton(stateOneName, stateTwoName, stateOneClick, stateTwoClick) {
+ "use strict";
+ var divContainer = document.createElement("DIV");
+ divContainer.classList.add("toggle-button-container");
+ var stateOne = document.createElement("DIV");
+ stateOne.classList.add("toggle-button");
+ stateOne.classList.add("left");
+ stateOne.textContent = stateOneName;
+ var stateTwo = document.createElement("DIV");
+ stateTwo.classList.add("toggle-button");
+ stateTwo.classList.add("right");
+ stateTwo.textContent = stateTwoName;
+ divContainer.appendChild(stateOne);
+ divContainer.appendChild(stateTwo);
+
+ function getElement() {
+ return divContainer;
+ }
+
+ function setStateOne() {
+ stateOne.classList.add("enabled");
+ stateTwo.classList.remove("enabled");
+ }
+
+ function setStateTwo() {
+ stateTwo.classList.add("enabled");
+ stateOne.classList.remove("enabled");
+ }
+
+ stateOne.addEventListener("click", (evt) => {
+ setStateOne();
+ stateOneClick();
+ });
+
+ stateTwo.addEventListener("click", (evt) => {
+ setStateTwo();
+ stateTwoClick();
+ });
+
+ return {
+ "getElement": getElement,
+ "setStateOne": setStateOne,
+ "setStateTwo": setStateTwo
+ };
+}
+
+function createGrid(divElement) {
+ "use strict";
+ var canvases = [];
+ var enabled = false;
+
+ function createCanvases() {
+ var fontWidth = font.getWidth();
+ var fontHeight = font.getHeight();
+ var columns = textArtCanvas.getColumns();
+ var rows = textArtCanvas.getRows();
+ var canvasWidth = fontWidth * columns;
+ var canvasHeight = fontHeight * 25;
+ canvases = [];
+ for (var i = 0; i < Math.floor(rows / 25); i++) {
+ var canvas = createCanvas(canvasWidth, canvasHeight);
+ canvases.push(canvas);
+ }
+ if (rows % 25 !== 0) {
+ var canvas = createCanvas(canvasWidth, fontHeight * (rows % 25));
+ canvases.push(canvas);
+ }
+ }
+
+ function renderGrid(canvas) {
+ var columns = textArtCanvas.getColumns();
+ var rows = Math.min(textArtCanvas.getRows(), 25);
+ var fontWidth = canvas.width / columns;
+ var fontHeight = font.getHeight();
+ var ctx = canvas.getContext("2d");
+ var imageData = ctx.createImageData(canvas.width, canvas.height);
+ var byteWidth = canvas.width * 4;
+ var darkGray = new Uint8Array([63, 63, 63, 255]);
+ for (var y = 0; y < rows; y += 1) {
+ for (var x = 0, i = y * fontHeight * byteWidth; x < canvas.width; x += 1, i += 4) {
+ imageData.data.set(darkGray, i);
+ }
+ }
+ for (var x = 0; x < columns; x += 1) {
+ for (var y = 0, i = x * fontWidth * 4; y < canvas.height; y += 1, i += byteWidth) {
+ imageData.data.set(darkGray, i);
+ }
+ }
+ ctx.putImageData(imageData, 0, 0);
+ }
+
+ function createGrid() {
+ createCanvases();
+ renderGrid(canvases[0]);
+ divElement.appendChild(canvases[0]);
+ for (var i = 1; i < canvases.length; i++) {
+ canvases[i].getContext("2d").drawImage(canvases[0], 0, 0);
+ divElement.appendChild(canvases[i]);
+ }
+ }
+
+ function resize() {
+ canvases.forEach((canvas) => {
+ divElement.removeChild(canvas);
+ });
+ createGrid();
+ }
+
+ createGrid();
+
+ document.addEventListener("onTextCanvasSizeChange", resize);
+ document.addEventListener("onLetterSpacingChange", resize);
+ document.addEventListener("onFontChange", resize);
+ document.addEventListener("onOpenedFile", resize);
+
+ function isShown() {
+ return enabled;
+ }
+
+ function show(turnOn) {
+ if (enabled === true && turnOn === false) {
+ divElement.classList.remove("enabled");
+ enabled = false;
+ } else if (enabled === false && turnOn === true) {
+ divElement.classList.add("enabled");
+ enabled = true;
+ }
+ }
+
+ return {
+ "isShown": isShown,
+ "show": show
+ };
+}
+
+function createToolPreview(divElement) {
+ "use strict";
+ var canvases = [];
+ var ctxs = [];
+
+ function createCanvases() {
+ var fontWidth = font.getWidth();
+ var fontHeight = font.getHeight();
+ var columns = textArtCanvas.getColumns();
+ var rows = textArtCanvas.getRows();
+ var canvasWidth = fontWidth * columns;
+ var canvasHeight = fontHeight * 25;
+ canvases = new Array();
+ ctxs = new Array();
+ for (var i = 0; i < Math.floor(rows / 25); i++) {
+ var canvas = createCanvas(canvasWidth, canvasHeight);
+ canvases.push(canvas);
+ ctxs.push(canvas.getContext("2d"));
+ }
+ if (rows % 25 !== 0) {
+ var canvas = createCanvas(canvasWidth, fontHeight * (rows % 25));
+ canvases.push(canvas);
+ ctxs.push(canvas.getContext("2d"));
+ }
+ canvases.forEach((canvas) => {
+ divElement.appendChild(canvas);
+ });
+ }
+
+ function resize() {
+ canvases.forEach((canvas) => {
+ divElement.removeChild(canvas);
+ });
+ createCanvases();
+ }
+
+ function drawHalfBlock(foreground, x, y) {
+ var halfBlockY = y % 2;
+ var textY = Math.floor(y / 2);
+ var ctxIndex = Math.floor(textY / 25);
+ if (ctxIndex >= 0 && ctxIndex < ctxs.length) {
+ font.drawWithAlpha((halfBlockY === 0) ? 223 : 220, foreground, ctxs[ctxIndex], x, textY % 25);
+ }
+ }
+
+ function clear() {
+ for (var i = 0; i < ctxs.length; i++) {
+ ctxs[i].clearRect(0, 0, canvases[i].width, canvases[i].height);
+ }
+ }
+
+ createCanvases();
+ divElement.classList.add("enabled");
+
+ document.addEventListener("onTextCanvasSizeChange", resize);
+ document.addEventListener("onLetterSpacingChange", resize);
+ document.addEventListener("onFontChange", resize);
+ document.addEventListener("onOpenedFile", resize);
+
+ return {
+ "clear": clear,
+ "drawHalfBlock": drawHalfBlock,
+ };
+}
+
+function menuHover() {
+ $("file-menu").classList.remove("hover");
+ $("edit-menu").classList.remove("hover");
+ $("view-menu").classList.remove("hover");
+}
diff --git a/js/worker.js b/js/worker.js
new file mode 100644
index 0000000..055df58
--- /dev/null
+++ b/js/worker.js
@@ -0,0 +1,135 @@
+var socket;
+var sessionID;
+var joint;
+var connected = false;
+
+function send(cmd, msg) {
+ socket.send(JSON.stringify([cmd, msg]));
+}
+
+function onOpen() {
+ postMessage({ "cmd": "connected" });
+}
+
+function onClose(evt) {
+ postMessage({ "cmd": "disconnected" });
+}
+
+function onChat(handle, text, showNotification) {
+ postMessage({ "cmd": "chat", "handle": handle, "text": text, "showNotification": showNotification });
+}
+
+function onStart(msg, newSessionID) {
+ joint = msg;
+ sessionID = newSessionID;
+ msg.chat.forEach((msg) => {
+ onChat(msg[0], msg[1], false);
+ });
+}
+
+function onJoin(handle, joinSessionID, showNotification) {
+ if (joinSessionID === sessionID) {
+ showNotification = false;
+ }
+ postMessage({ "cmd": "join", "sessionID": joinSessionID, "handle": handle, "showNotification": showNotification });
+}
+
+function onNick(handle, nickSessionID) {
+ postMessage({ "cmd": "nick", "sessionID": nickSessionID, "handle": handle, "showNotification": (nickSessionID !== sessionID) });
+}
+
+function onPart(sessionID) {
+ postMessage({ "cmd": "part", "sessionID": sessionID });
+}
+
+function onDraw(blocks) {
+ var outputBlocks = new Array();
+ var index;
+ blocks.forEach((block) => {
+ index = block >> 16;
+ outputBlocks.push([index, block & 0xffff, index % joint.columns, Math.floor(index / joint.columns)]);
+ });
+ postMessage({ "cmd": "draw", "blocks": outputBlocks });
+}
+
+function onMessage(evt) {
+ var data = evt.data;
+ if (typeof (data) === "object") {
+ var fr = new FileReader();
+ fr.addEventListener("load", (evt) => {
+ postMessage({ "cmd": "imageData", "data": evt.target.result, "columns": joint.columns, "rows": joint.rows, "iceColours": joint.iceColours, "letterSpacing": joint.letterSpacing });
+ connected = true;
+ });
+ fr.readAsArrayBuffer(data);
+ } else {
+ data = JSON.parse(data);
+ switch (data[0]) {
+ case "start":
+ sessionID = data[2];
+ var userList = data[3];
+ Object.keys(userList).forEach((userSessionID) => {
+ onJoin(userList[userSessionID], userSessionID, false);
+ });
+ onStart(data[1], data[2]);
+ break;
+ case "join":
+ onJoin(data[1], data[2], true);
+ break;
+ case "nick":
+ onNick(data[1], data[2]);
+ break;
+ case "draw":
+ onDraw(data[1]);
+ break;
+ case "part":
+ onPart(data[1]);
+ break;
+ case "chat":
+ onChat(data[1], data[2], true);
+ break;
+ default:
+ break;
+ }
+ }
+}
+
+function removeDuplicates(blocks) {
+ var indexes = [];
+ var index;
+ blocks = blocks.reverse();
+ blocks = blocks.filter((block) => {
+ index = block >> 16;
+ if (indexes.lastIndexOf(index) === -1) {
+ indexes.push(index);
+ return true;
+ }
+ return false;
+ });
+ return blocks.reverse();
+}
+
+self.onmessage = function(msg) {
+ var data = msg.data;
+ switch (data.cmd) {
+ case "connect":
+ socket = new WebSocket(data.url);
+ socket.addEventListener("open", onOpen);
+ socket.addEventListener("message", onMessage);
+ socket.addEventListener("close", onClose);
+ break;
+ case "join":
+ send("join", data.handle);
+ break;
+ case "nick":
+ send("nick", data.handle);
+ break;
+ case "chat":
+ send("chat", data.text);
+ break;
+ case "draw":
+ send("draw", removeDuplicates(data.blocks));
+ break;
+ default:
+ break;
+ }
+};
diff --git a/public/css/style.css b/public/css/style.css
new file mode 100644
index 0000000..6937e13
--- /dev/null
+++ b/public/css/style.css
@@ -0,0 +1,574 @@
+* {
+ -webkit-touch-callout: none !important;
+ user-select: none !important;
+ -ms-user-select: none !important;
+ -webkit-user-select: none !important;
+}
+
+html,
+body,
+body>div {
+ width: 100%;
+ height: 100%;
+ margin: 0px;
+}
+
+body {
+ position: fixed;
+ overflow: hidden;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+}
+
+#body-container {
+ min-width: 960px;
+ min-height: 480px;
+ overflow: auto;
+}
+
+#top-toolbar,
+#left-toolbar,
+#bottom-toolbar,
+#position-info {
+ background-color: rgb(63, 63, 63);
+}
+
+#top-toolbar {
+ float: left;
+ width: 100%;
+ height: 20px;
+ display: block;
+}
+
+#artwork-title {
+ width: 300px;
+ margin: 0px;
+ margin-left: calc(50% - 151px - 120px);
+ border-left: 1px solid rgb(31, 31, 31);
+ border-right: 1px solid rgb(31, 31, 31);
+ border-top: none;
+ border-bottom: none;
+}
+
+#artwork-title {
+ text-align: center;
+ padding: 0px;
+ background: none;
+ font-family: "Lucida Grande", sans-serif;
+ font-size: 12px;
+ line-height: 20px;
+ color: rgb(200, 200, 200);
+ background-color: rgb(95, 95, 95);
+ outline: none;
+}
+
+#chat-button.notification {
+ background-color: rgb(96, 127, 127);
+}
+
+#chat-button {
+ font-family: "Lucida Grande", sans-serif;
+ font-size: 10px;
+ color: white;
+ line-height: 19px;
+ float: right;
+ padding: 0px 8px;
+ cursor: pointer;
+}
+
+#chat-icon-close-text {
+ display: none;
+}
+
+#chat-button.active #chat-icon-text {
+ display: none;
+}
+
+#chat-button.active #chat-icon-close-text {
+ display: block;
+}
+
+#chat-button img {
+ vertical-align: middle;
+}
+
+#chat-window {
+ width: 640px;
+ height: 400px;
+ position: absolute;
+ right: 8px;
+ top: 20px;
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+ z-index: 3;
+ box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.7);
+ background: linear-gradient(to bottom, #eeeeee 0px, white 64px, white 369px, #eeeeee 370px, white 100%);
+ display: none;
+}
+
+#user-list {
+ width: 140px;
+ height: 350px;
+ border-left: 1px solid rgb(63, 63, 63);
+ overflow: auto;
+}
+
+#user-list div {
+ font-family: "Lucida Grande", sans-serif;
+ font-size: 12px;
+ text-align: center;
+ margin: 4px;
+ padding: 4px;
+ border-radius: 6px;
+ color: white;
+ background: linear-gradient(to bottom, #7c7 0%, #383 1px, #383 calc(100% - 1px), #040 100%);
+}
+
+#message-window {
+ float: left;
+ width: 499px;
+ height: 370px;
+ overflow: auto;
+}
+
+#message-window span {
+ font-family: "Lucida Grande", sans-serif;
+ font-size: 12px;
+ margin: 4px;
+ font-size: 12px;
+ line-height: 20px;
+}
+
+#handle-input,
+#message-input {
+ font-family: "Lucida Grande", sans-serif;
+ font-size: 12px;
+ border: 0px;
+ margin: 0px;
+ outline-style: none;
+ height: 21px;
+ padding: 4px 9px;
+ border-top: 1px solid rgb(63, 63, 63);
+ line-height: 20px;
+}
+
+#handle-input {
+ text-align: center;
+ background: none;
+ background-color: rgb(95, 95, 95);
+ color: white;
+ outline: none;
+ width: 82px;
+ height: 21px;
+}
+
+#message-input {
+ background: none;
+ width: 521px;
+ float: right;
+ border-left: 1px solid rgb(63, 63, 63);
+}
+
+#message-window div:first-child {
+ margin-top: 16px;
+}
+
+#message-window div:last-child {
+ margin-bottom: 16px;
+ border-bottom: none;
+}
+
+#message-window div {
+ margin: 1px 16px 1px 24px;
+ text-indent: -8px;
+ padding-bottom: 2px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+#message-window span {
+ font: normal normal normal 12px "Lucida Grande", sans-serif;
+ color: black;
+}
+
+#message-window span.handle {
+ color: red;
+}
+
+
+#artwork-title:focus {
+ background-color: rgb(127, 127, 127);
+ color: white;
+}
+
+#left-toolbar {
+ float: left;
+ width: 40px;
+ height: calc(100% - 20px);
+}
+
+#left-toolbar>canvas {
+ vertical-align: bottom;
+}
+
+#viewport {
+ margin-left: 40px;
+ width: calc(100% - 40px);
+ height: calc(100% - 20px - 20px);
+ background: rgb(48, 48, 48);
+ text-align: center;
+ overflow: auto;
+ user-select: none;
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
+ -o-user-select: none;
+}
+
+#bottom-toolbar {
+ text-align: center;
+ width: calc(100% - 180px);
+ height: 20px;
+ float: left;
+ padding-left: 60px;
+}
+
+#position-info {
+ float: left;
+ width: 80px;
+ height: 20px;
+ text-align: center;
+ font-family: "Lucida Grande", sans-serif;
+ font-size: 12px;
+ color: rgb(200, 200, 200);
+ line-height: 20px;
+}
+
+#canvas-container {
+ margin: 16px auto;
+ width: 640px;
+ box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.7);
+ position: relative;
+ cursor: crosshair;
+}
+
+#canvas-container canvas {
+ display: block;
+ vertical-align: bottom;
+}
+
+.canvas-overlay {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ display: none;
+}
+
+.canvas-overlay.enabled {
+ display: block;
+}
+
+canvas {
+ image-rendering: optimizeSpeed;
+ image-rendering: crisp-edges;
+ image-rendering: pixelated;
+}
+
+#bottom-toolbar>div>div.button {
+ font-family: "Lucida Grande", sans-serif;
+ font-size: 12px;
+ color: rgb(200, 200, 200);
+ background-color: rgb(96, 96, 96);
+ cursor: pointer;
+ text-align: center;
+ box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.7);
+}
+
+#left-toolbar>div {
+ text-align: center;
+ height: 24px;
+ padding: 3px 0px;
+}
+
+#left-toolbar div.seperator {
+ height: 1px;
+ padding: 0px;
+ margin: 4px auto;
+ width: 32px;
+ background-color: rgb(96, 96, 96);
+}
+
+.toolbar-displayed {
+ background-color: rgb(96, 127, 127);
+}
+
+#bottom-toolbar {
+ overflow: hidden;
+ font-family: "Lucida Grande", sans-serif;
+ font-size: 12px;
+ color: rgb(200, 200, 200);
+}
+
+canvas.fkey {
+ margin: 0px 8px;
+ vertical-align: middle;
+}
+
+div.menu-title {
+ font-family: "Lucida Grande", sans-serif;
+ width: 32px;
+ height: 20px;
+ display: inline-block;
+ position: relative;
+ vertical-align: top;
+ font-size: 12px;
+ color: rgb(200, 200, 200);
+ background-color: rgb(64, 64, 64);
+ line-height: 20px;
+ padding: 0px 0px 0px 8px;
+ overflow: hidden;
+}
+
+div.menu-list {
+ cursor: default;
+ position: absolute;
+ width: 160px;
+ margin-left: -8px;
+ background-color: rgb(64, 64, 64);
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ border-right: 1px solid rgb(127, 127, 127);
+ border-bottom: 1px solid rgb(127, 127, 127);
+ border-left: 1px solid rgb(127, 127, 127);
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
+ z-index: 2;
+}
+
+div.hover,
+div.menu-title:hover {
+ background-color: rgb(96, 96, 96);
+ cursor: pointer;
+ overflow: visible;
+}
+
+div.menu-item {
+ padding: 2px 4px;
+ margin: 4px 2px;
+}
+
+div.menu-list div.seperator {
+ height: 1px;
+ background-color: rgb(127, 127, 127);
+ margin: 2px;
+}
+
+div.menu-item:hover {
+ cursor: pointer;
+ color: white;
+ background-color: rgba(255, 255, 255, 0.2);
+}
+
+div.menu-item.disabled {
+ cursor: default;
+ background-color: inherit;
+ color: inherit;
+}
+
+div.menu-item.enabled {
+ background-image: url("../images/toolbar/done.png");
+ background-position: 130px 0px;
+ background-repeat: no-repeat;
+ background-size: 20px 20px;
+}
+
+div.overlay {
+ position: fixed;
+ left: 0px;
+ top: 0px;
+ width: 100%;
+ height: 100%;
+ display: none;
+ z-index: 4;
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0.8) 21px, rgba(0, 0, 0, 0.2) 100%);
+}
+
+div.overlay.enabled {
+ display: block;
+}
+
+div.dialog {
+ font-family: "Lucida Grande", sans-serif;
+ color: rgb(200, 200, 200);
+ font-size: 12px;
+ position: fixed;
+ left: calc(50% - 180px);
+ top: 20px;
+ width: 360px;
+ background-color: rgb(64, 64, 64);
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ border-right: 1px solid rgb(127, 127, 127);
+ border-bottom: 1px solid rgb(127, 127, 127);
+ border-left: 1px solid rgb(127, 127, 127);
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
+ text-align: center;
+ padding-top: 16px;
+}
+
+div.dialog p {
+ margin: 30px 0px;
+}
+
+div.dialog label {
+ display: inline-block;
+ text-align: right;
+ width: 230px;
+}
+
+div.dialog select {
+ font-family: "Lucida Grande", sans-serif;
+ font-size: 16px;
+ display: block;
+ margin: 8px auto;
+}
+
+div.dialog input {
+ background: none;
+ outline: none;
+ color: rgb(200, 200, 200);
+ border: 1px solid rgb(127, 127, 127);
+ padding: 4px;
+ margin: 4px;
+}
+
+div.button {
+ font-family: "Lucida Grande", sans-serif;
+ color: white;
+ font-size: 12px;
+ display: inline-block;
+ width: 100px;
+ height: 24px;
+ margin: 12px 4px;
+ background: linear-gradient(to bottom, #eee 0%, #888 1px, #999 calc(100% - 1px), #777 100%);
+ color: rgba(255, 255, 255, 0.8);
+ border-radius: 4px;
+ text-align: center;
+ line-height: 24px;
+ text-shadow: rgba(0, 0, 0, 0.7) 0px 1px 1px;
+ box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
+ cursor: pointer;
+}
+
+div.button:active {
+ color: rgba(255, 255, 255, 0.6);
+ background: linear-gradient(to bottom, #ccc 0%, #666 1px, #777 calc(100% - 1px), #555 100%);
+ box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
+}
+
+div.floating-panel {
+ position: fixed;
+ background-color: rgb(64, 64, 64);
+ display: none;
+ padding-top: 20px;
+ padding-bottom: 4px;
+ padding-left: 4px;
+ padding-right: 4px;
+ border: 1px solid rgb(127, 127, 127);
+ border-radius: 4px;
+ cursor: move;
+ box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.3);
+}
+
+div.floating-panel div {
+ position: relative;
+ display: block;
+}
+
+div.floating-panel.enabled {
+ display: block;
+}
+
+div.floating-panel canvas {
+ cursor: crosshair;
+ vertical-align: bottom;
+}
+
+div.toggle-button-container {
+ width: 120px;
+ margin: 8px auto;
+ font-family: "Lucida Grande", sans-serif;
+ color: rgb(200, 200, 200);
+ font-size: 10px;
+ line-height: 20px;
+ text-align: center;
+}
+
+div.toggle-button {
+ width: 59px;
+ height: 20px;
+ margin: 4px auto;
+ background-color: rgb(63, 63, 63);
+ cursor: pointer;
+}
+
+div.toggle-button.enabled {
+ color: white;
+ background-color: rgb(127, 127, 127);
+}
+
+div.toggle-button.left {
+ float: left;
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ border-top: 1px solid black;
+ border-left: 1px solid black;
+ border-bottom: 1px solid black;
+}
+
+div.toggle-button.right {
+ float: right;
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ border-top: 1px solid black;
+ border-right: 1px solid black;
+ border-bottom: 1px solid black;
+}
+
+@keyframes blink {
+ 50% {
+ border: 1px solid rgb(192, 192, 192);
+ }
+}
+
+canvas.cursor {
+ position: absolute;
+ border: 1px solid white;
+ border-radius: 1px;
+ animation: blink 1.5s steps(1) infinite;
+ z-index: 1;
+}
+
+canvas.selection-cursor {
+ position: absolute;
+ border: 1px solid;
+ border-image: url("../images/selection_border.gif") 1 repeat;
+ border-image-width: 1px;
+ z-index: 1;
+}
+
+.included-for-websocket {
+ display: none;
+}
+
+#notification-setting {
+ width: 140px;
+ height: 20px;
+ font-family: "Lucida Grande", sans-serif;
+ font-size: 10px;
+ color: white;
+ line-height: 20px;
+ float: right;
+ border-left: 1px solid rgb(63, 63, 63);
+ background-color: rgb(95, 95, 95);
+}
diff --git a/public/fonts/CP437 8x14.png b/public/fonts/CP437 8x14.png
new file mode 100755
index 0000000..b4e19ba
Binary files /dev/null and b/public/fonts/CP437 8x14.png differ
diff --git a/public/fonts/CP437 8x16.png b/public/fonts/CP437 8x16.png
new file mode 100755
index 0000000..b96745d
Binary files /dev/null and b/public/fonts/CP437 8x16.png differ
diff --git a/public/fonts/CP437 8x19.png b/public/fonts/CP437 8x19.png
new file mode 100755
index 0000000..956143d
Binary files /dev/null and b/public/fonts/CP437 8x19.png differ
diff --git a/public/fonts/CP437 8x8.png b/public/fonts/CP437 8x8.png
new file mode 100755
index 0000000..6404c69
Binary files /dev/null and b/public/fonts/CP437 8x8.png differ
diff --git a/public/fonts/CP737 8x14.png b/public/fonts/CP737 8x14.png
new file mode 100755
index 0000000..9ac004e
Binary files /dev/null and b/public/fonts/CP737 8x14.png differ
diff --git a/public/fonts/CP737 8x16.png b/public/fonts/CP737 8x16.png
new file mode 100755
index 0000000..5dd8ac9
Binary files /dev/null and b/public/fonts/CP737 8x16.png differ
diff --git a/public/fonts/CP737 8x8.png b/public/fonts/CP737 8x8.png
new file mode 100755
index 0000000..445842e
Binary files /dev/null and b/public/fonts/CP737 8x8.png differ
diff --git a/public/fonts/CP775 8x14.png b/public/fonts/CP775 8x14.png
new file mode 100755
index 0000000..b999b39
Binary files /dev/null and b/public/fonts/CP775 8x14.png differ
diff --git a/public/fonts/CP775 8x16.png b/public/fonts/CP775 8x16.png
new file mode 100755
index 0000000..e7c1d74
Binary files /dev/null and b/public/fonts/CP775 8x16.png differ
diff --git a/public/fonts/CP775 8x8.png b/public/fonts/CP775 8x8.png
new file mode 100755
index 0000000..2b008f0
Binary files /dev/null and b/public/fonts/CP775 8x8.png differ
diff --git a/public/fonts/CP850 8x14.png b/public/fonts/CP850 8x14.png
new file mode 100755
index 0000000..f294521
Binary files /dev/null and b/public/fonts/CP850 8x14.png differ
diff --git a/public/fonts/CP850 8x16.png b/public/fonts/CP850 8x16.png
new file mode 100755
index 0000000..d7bfae9
Binary files /dev/null and b/public/fonts/CP850 8x16.png differ
diff --git a/public/fonts/CP850 8x19.png b/public/fonts/CP850 8x19.png
new file mode 100755
index 0000000..18e8f20
Binary files /dev/null and b/public/fonts/CP850 8x19.png differ
diff --git a/public/fonts/CP850 8x8.png b/public/fonts/CP850 8x8.png
new file mode 100755
index 0000000..c77fc8d
Binary files /dev/null and b/public/fonts/CP850 8x8.png differ
diff --git a/public/fonts/CP851 8x14.png b/public/fonts/CP851 8x14.png
new file mode 100755
index 0000000..a50a395
Binary files /dev/null and b/public/fonts/CP851 8x14.png differ
diff --git a/public/fonts/CP851 8x16.png b/public/fonts/CP851 8x16.png
new file mode 100755
index 0000000..507c9f5
Binary files /dev/null and b/public/fonts/CP851 8x16.png differ
diff --git a/public/fonts/CP851 8x19.png b/public/fonts/CP851 8x19.png
new file mode 100755
index 0000000..a05c087
Binary files /dev/null and b/public/fonts/CP851 8x19.png differ
diff --git a/public/fonts/CP851 8x8.png b/public/fonts/CP851 8x8.png
new file mode 100755
index 0000000..4391264
Binary files /dev/null and b/public/fonts/CP851 8x8.png differ
diff --git a/public/fonts/CP852 8x14.png b/public/fonts/CP852 8x14.png
new file mode 100755
index 0000000..fead270
Binary files /dev/null and b/public/fonts/CP852 8x14.png differ
diff --git a/public/fonts/CP852 8x16.png b/public/fonts/CP852 8x16.png
new file mode 100755
index 0000000..000d331
Binary files /dev/null and b/public/fonts/CP852 8x16.png differ
diff --git a/public/fonts/CP852 8x19.png b/public/fonts/CP852 8x19.png
new file mode 100755
index 0000000..87dc918
Binary files /dev/null and b/public/fonts/CP852 8x19.png differ
diff --git a/public/fonts/CP852 8x8.png b/public/fonts/CP852 8x8.png
new file mode 100755
index 0000000..eedb484
Binary files /dev/null and b/public/fonts/CP852 8x8.png differ
diff --git a/public/fonts/CP853 8x14.png b/public/fonts/CP853 8x14.png
new file mode 100755
index 0000000..0642a9b
Binary files /dev/null and b/public/fonts/CP853 8x14.png differ
diff --git a/public/fonts/CP853 8x16.png b/public/fonts/CP853 8x16.png
new file mode 100755
index 0000000..5a97f26
Binary files /dev/null and b/public/fonts/CP853 8x16.png differ
diff --git a/public/fonts/CP853 8x19.png b/public/fonts/CP853 8x19.png
new file mode 100755
index 0000000..8d56d8e
Binary files /dev/null and b/public/fonts/CP853 8x19.png differ
diff --git a/public/fonts/CP853 8x8.png b/public/fonts/CP853 8x8.png
new file mode 100755
index 0000000..820229a
Binary files /dev/null and b/public/fonts/CP853 8x8.png differ
diff --git a/public/fonts/CP855 8x14.png b/public/fonts/CP855 8x14.png
new file mode 100755
index 0000000..fdeac17
Binary files /dev/null and b/public/fonts/CP855 8x14.png differ
diff --git a/public/fonts/CP855 8x16.png b/public/fonts/CP855 8x16.png
new file mode 100755
index 0000000..fbe4605
Binary files /dev/null and b/public/fonts/CP855 8x16.png differ
diff --git a/public/fonts/CP855 8x8.png b/public/fonts/CP855 8x8.png
new file mode 100755
index 0000000..3cf9acf
Binary files /dev/null and b/public/fonts/CP855 8x8.png differ
diff --git a/public/fonts/CP857 8x14.png b/public/fonts/CP857 8x14.png
new file mode 100755
index 0000000..0f49c1d
Binary files /dev/null and b/public/fonts/CP857 8x14.png differ
diff --git a/public/fonts/CP857 8x16.png b/public/fonts/CP857 8x16.png
new file mode 100755
index 0000000..4073e64
Binary files /dev/null and b/public/fonts/CP857 8x16.png differ
diff --git a/public/fonts/CP857 8x8.png b/public/fonts/CP857 8x8.png
new file mode 100755
index 0000000..df14cbe
Binary files /dev/null and b/public/fonts/CP857 8x8.png differ
diff --git a/public/fonts/CP860 8x14.png b/public/fonts/CP860 8x14.png
new file mode 100755
index 0000000..a10d156
Binary files /dev/null and b/public/fonts/CP860 8x14.png differ
diff --git a/public/fonts/CP860 8x16.png b/public/fonts/CP860 8x16.png
new file mode 100755
index 0000000..06e9dfc
Binary files /dev/null and b/public/fonts/CP860 8x16.png differ
diff --git a/public/fonts/CP860 8x19.png b/public/fonts/CP860 8x19.png
new file mode 100755
index 0000000..bdc74d5
Binary files /dev/null and b/public/fonts/CP860 8x19.png differ
diff --git a/public/fonts/CP860 8x8.png b/public/fonts/CP860 8x8.png
new file mode 100755
index 0000000..172ad65
Binary files /dev/null and b/public/fonts/CP860 8x8.png differ
diff --git a/public/fonts/CP861 8x14.png b/public/fonts/CP861 8x14.png
new file mode 100755
index 0000000..69bb4c5
Binary files /dev/null and b/public/fonts/CP861 8x14.png differ
diff --git a/public/fonts/CP861 8x16.png b/public/fonts/CP861 8x16.png
new file mode 100755
index 0000000..4f9230b
Binary files /dev/null and b/public/fonts/CP861 8x16.png differ
diff --git a/public/fonts/CP861 8x19.png b/public/fonts/CP861 8x19.png
new file mode 100755
index 0000000..357ca4b
Binary files /dev/null and b/public/fonts/CP861 8x19.png differ
diff --git a/public/fonts/CP861 8x8.png b/public/fonts/CP861 8x8.png
new file mode 100755
index 0000000..f11be61
Binary files /dev/null and b/public/fonts/CP861 8x8.png differ
diff --git a/public/fonts/CP862 8x14.png b/public/fonts/CP862 8x14.png
new file mode 100755
index 0000000..c82c3aa
Binary files /dev/null and b/public/fonts/CP862 8x14.png differ
diff --git a/public/fonts/CP862 8x16.png b/public/fonts/CP862 8x16.png
new file mode 100755
index 0000000..e472ed0
Binary files /dev/null and b/public/fonts/CP862 8x16.png differ
diff --git a/public/fonts/CP862 8x8.png b/public/fonts/CP862 8x8.png
new file mode 100755
index 0000000..4fe96e7
Binary files /dev/null and b/public/fonts/CP862 8x8.png differ
diff --git a/public/fonts/CP863 8x14.png b/public/fonts/CP863 8x14.png
new file mode 100755
index 0000000..eca5910
Binary files /dev/null and b/public/fonts/CP863 8x14.png differ
diff --git a/public/fonts/CP863 8x16.png b/public/fonts/CP863 8x16.png
new file mode 100755
index 0000000..86d1eb5
Binary files /dev/null and b/public/fonts/CP863 8x16.png differ
diff --git a/public/fonts/CP863 8x19.png b/public/fonts/CP863 8x19.png
new file mode 100755
index 0000000..ca35d31
Binary files /dev/null and b/public/fonts/CP863 8x19.png differ
diff --git a/public/fonts/CP863 8x8.png b/public/fonts/CP863 8x8.png
new file mode 100755
index 0000000..53abb17
Binary files /dev/null and b/public/fonts/CP863 8x8.png differ
diff --git a/public/fonts/CP864 8x14.png b/public/fonts/CP864 8x14.png
new file mode 100755
index 0000000..a0bdbe2
Binary files /dev/null and b/public/fonts/CP864 8x14.png differ
diff --git a/public/fonts/CP864 8x16.png b/public/fonts/CP864 8x16.png
new file mode 100755
index 0000000..e3169b9
Binary files /dev/null and b/public/fonts/CP864 8x16.png differ
diff --git a/public/fonts/CP864 8x8.png b/public/fonts/CP864 8x8.png
new file mode 100755
index 0000000..ac40d0a
Binary files /dev/null and b/public/fonts/CP864 8x8.png differ
diff --git a/public/fonts/CP865 8x14.png b/public/fonts/CP865 8x14.png
new file mode 100755
index 0000000..bb30482
Binary files /dev/null and b/public/fonts/CP865 8x14.png differ
diff --git a/public/fonts/CP865 8x16.png b/public/fonts/CP865 8x16.png
new file mode 100755
index 0000000..93a341f
Binary files /dev/null and b/public/fonts/CP865 8x16.png differ
diff --git a/public/fonts/CP865 8x19.png b/public/fonts/CP865 8x19.png
new file mode 100755
index 0000000..5af551d
Binary files /dev/null and b/public/fonts/CP865 8x19.png differ
diff --git a/public/fonts/CP865 8x8.png b/public/fonts/CP865 8x8.png
new file mode 100755
index 0000000..4bbf61a
Binary files /dev/null and b/public/fonts/CP865 8x8.png differ
diff --git a/public/fonts/CP866 8x14.png b/public/fonts/CP866 8x14.png
new file mode 100755
index 0000000..dd0991c
Binary files /dev/null and b/public/fonts/CP866 8x14.png differ
diff --git a/public/fonts/CP866 8x16.png b/public/fonts/CP866 8x16.png
new file mode 100755
index 0000000..95e6ca8
Binary files /dev/null and b/public/fonts/CP866 8x16.png differ
diff --git a/public/fonts/CP866 8x8.png b/public/fonts/CP866 8x8.png
new file mode 100755
index 0000000..1be3bf0
Binary files /dev/null and b/public/fonts/CP866 8x8.png differ
diff --git a/public/fonts/CP869 8x14.png b/public/fonts/CP869 8x14.png
new file mode 100755
index 0000000..aa04a51
Binary files /dev/null and b/public/fonts/CP869 8x14.png differ
diff --git a/public/fonts/CP869 8x16.png b/public/fonts/CP869 8x16.png
new file mode 100755
index 0000000..416d0cb
Binary files /dev/null and b/public/fonts/CP869 8x16.png differ
diff --git a/public/fonts/CP869 8x8.png b/public/fonts/CP869 8x8.png
new file mode 100755
index 0000000..d274796
Binary files /dev/null and b/public/fonts/CP869 8x8.png differ
diff --git a/public/fonts/MicroKnight 8x16.png b/public/fonts/MicroKnight 8x16.png
new file mode 100755
index 0000000..9667613
Binary files /dev/null and b/public/fonts/MicroKnight 8x16.png differ
diff --git a/public/fonts/MicroKnight+ 8x16.png b/public/fonts/MicroKnight+ 8x16.png
new file mode 100755
index 0000000..6c11289
Binary files /dev/null and b/public/fonts/MicroKnight+ 8x16.png differ
diff --git a/public/fonts/P0t-NOoDLE 8x16.png b/public/fonts/P0t-NOoDLE 8x16.png
new file mode 100755
index 0000000..cc54633
Binary files /dev/null and b/public/fonts/P0t-NOoDLE 8x16.png differ
diff --git a/public/fonts/Topaz 1200 8x16.png b/public/fonts/Topaz 1200 8x16.png
new file mode 100755
index 0000000..cec9312
Binary files /dev/null and b/public/fonts/Topaz 1200 8x16.png differ
diff --git a/public/fonts/Topaz 500 8x16.png b/public/fonts/Topaz 500 8x16.png
new file mode 100755
index 0000000..862f1c2
Binary files /dev/null and b/public/fonts/Topaz 500 8x16.png differ
diff --git a/public/fonts/Topaz+ 1200 8x16.png b/public/fonts/Topaz+ 1200 8x16.png
new file mode 100755
index 0000000..d2c9c1c
Binary files /dev/null and b/public/fonts/Topaz+ 1200 8x16.png differ
diff --git a/public/fonts/Topaz+ 500 8x16.png b/public/fonts/Topaz+ 500 8x16.png
new file mode 100755
index 0000000..686a198
Binary files /dev/null and b/public/fonts/Topaz+ 500 8x16.png differ
diff --git a/public/fonts/mO'sOul 8x16.png b/public/fonts/mO'sOul 8x16.png
new file mode 100755
index 0000000..c45da9e
Binary files /dev/null and b/public/fonts/mO'sOul 8x16.png differ
diff --git a/public/img/android-chrome-192x192.png b/public/img/android-chrome-192x192.png
new file mode 100644
index 0000000..1d0aa15
Binary files /dev/null and b/public/img/android-chrome-192x192.png differ
diff --git a/public/img/apple-touch-icon.png b/public/img/apple-touch-icon.png
new file mode 100644
index 0000000..2cbee4b
Binary files /dev/null and b/public/img/apple-touch-icon.png differ
diff --git a/public/img/browserconfig.xml b/public/img/browserconfig.xml
new file mode 100644
index 0000000..ba99813
--- /dev/null
+++ b/public/img/browserconfig.xml
@@ -0,0 +1,9 @@
+
+
+
+
+
+ #da532c
+
+
+
diff --git a/public/img/chat.png b/public/img/chat.png
new file mode 100644
index 0000000..7dcac60
Binary files /dev/null and b/public/img/chat.png differ
diff --git a/public/img/face.png b/public/img/face.png
new file mode 100644
index 0000000..c05f8e0
Binary files /dev/null and b/public/img/face.png differ
diff --git a/public/img/favicon-16x16.png b/public/img/favicon-16x16.png
new file mode 100644
index 0000000..eb29613
Binary files /dev/null and b/public/img/favicon-16x16.png differ
diff --git a/public/img/favicon-32x32.png b/public/img/favicon-32x32.png
new file mode 100644
index 0000000..71acd8c
Binary files /dev/null and b/public/img/favicon-32x32.png differ
diff --git a/public/img/favicon.ico b/public/img/favicon.ico
new file mode 100644
index 0000000..abb958b
Binary files /dev/null and b/public/img/favicon.ico differ
diff --git a/public/img/favicon.png b/public/img/favicon.png
new file mode 100644
index 0000000..1c7d371
Binary files /dev/null and b/public/img/favicon.png differ
diff --git a/public/img/favicon_192.png b/public/img/favicon_192.png
new file mode 100644
index 0000000..e7ac2cd
Binary files /dev/null and b/public/img/favicon_192.png differ
diff --git a/public/img/mstile-150x150.png b/public/img/mstile-150x150.png
new file mode 100644
index 0000000..7569519
Binary files /dev/null and b/public/img/mstile-150x150.png differ
diff --git a/public/img/safari-pinned-tab.svg b/public/img/safari-pinned-tab.svg
new file mode 100644
index 0000000..b1b19cb
--- /dev/null
+++ b/public/img/safari-pinned-tab.svg
@@ -0,0 +1,74 @@
+
+
+
diff --git a/public/img/selection_border.gif b/public/img/selection_border.gif
new file mode 100644
index 0000000..182413a
Binary files /dev/null and b/public/img/selection_border.gif differ
diff --git a/public/img/site.webmanifest b/public/img/site.webmanifest
new file mode 100644
index 0000000..8dc2840
--- /dev/null
+++ b/public/img/site.webmanifest
@@ -0,0 +1,14 @@
+{
+ "name": "moebius",
+ "short_name": "moebius",
+ "icons": [
+ {
+ "src": "android-chrome-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ }
+ ],
+ "theme_color": "#ffffff",
+ "background_color": "#ffffff",
+ "display": "standalone"
+}
diff --git a/public/img/toolbar/character_brush.png b/public/img/toolbar/character_brush.png
new file mode 100644
index 0000000..5c4c2b7
Binary files /dev/null and b/public/img/toolbar/character_brush.png differ
diff --git a/public/img/toolbar/circle.png b/public/img/toolbar/circle.png
new file mode 100644
index 0000000..876861c
Binary files /dev/null and b/public/img/toolbar/circle.png differ
diff --git a/public/img/toolbar/done.png b/public/img/toolbar/done.png
new file mode 100644
index 0000000..b706ad3
Binary files /dev/null and b/public/img/toolbar/done.png differ
diff --git a/public/img/toolbar/fill.png b/public/img/toolbar/fill.png
new file mode 100644
index 0000000..7a14df4
Binary files /dev/null and b/public/img/toolbar/fill.png differ
diff --git a/public/img/toolbar/freestyle.png b/public/img/toolbar/freestyle.png
new file mode 100644
index 0000000..6a72394
Binary files /dev/null and b/public/img/toolbar/freestyle.png differ
diff --git a/public/img/toolbar/keyboard.png b/public/img/toolbar/keyboard.png
new file mode 100644
index 0000000..2b6b9b4
Binary files /dev/null and b/public/img/toolbar/keyboard.png differ
diff --git a/public/img/toolbar/line.png b/public/img/toolbar/line.png
new file mode 100644
index 0000000..c36bd4c
Binary files /dev/null and b/public/img/toolbar/line.png differ
diff --git a/public/img/toolbar/sample.png b/public/img/toolbar/sample.png
new file mode 100644
index 0000000..c6c995b
Binary files /dev/null and b/public/img/toolbar/sample.png differ
diff --git a/public/img/toolbar/selection.png b/public/img/toolbar/selection.png
new file mode 100644
index 0000000..7b1a133
Binary files /dev/null and b/public/img/toolbar/selection.png differ
diff --git a/public/img/toolbar/square.png b/public/img/toolbar/square.png
new file mode 100644
index 0000000..1f3acfa
Binary files /dev/null and b/public/img/toolbar/square.png differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..a342971
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,272 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ moebius
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Resize
+
Cancel
+
+
+
+
+
Cancel
+
+
+
+
+
+
+
Done
+
+
+
+
Please wait... Retrieving data from server.
+
+
, the current code under inspection.
+ count = p & 63; // , the times data is repeated
+ switch (p >> 6) { // Look at which RLE scheme to use
+ case 1: // Handle repeated character code.
+ for (repeatChar = file.get(), j = 0; j <= count; ++j) {
+ uncompressed[i++] = repeatChar;
+ uncompressed[i++] = file.get();
+ }
+ break;
+ case 2: // Handle repeated attributes.
+ for (repeatAttr = file.get(), j = 0; j <= count; ++j) {
+ uncompressed[i++] = file.get();
+ uncompressed[i++] = repeatAttr;
+ }
+ break;
+ case 3: // Handle repeated character code and attributes.
+ for (repeatChar = file.get(), repeatAttr = file.get(), j = 0; j <= count; ++j) {
+ uncompressed[i++] = repeatChar;
+ uncompressed[i++] = repeatAttr;
+ }
+ break;
+ default: // Handle no RLE.
+ for (j = 0; j <= count; ++j) {
+ uncompressed[i++] = file.get();
+ uncompressed[i++] = file.get();
+ }
+ }
+ }
+ return uncompressed; // Return the final, data.
+ }
+
+ // Convert the bytes to a File() object, and reader the settings in the header, by calling XBinHeader().
+ file = new File(bytes);
+ header = new XBinHeader(file);
+
+ // If palette information is included, read it immediately after the header, if not, use the default palette used for BIN files.
+ if (header.palette) {
+ file.read(48);
+ }
+ // If font information is included, read it, if not, use the default 80x25 font.
+ if (header.font) {
+ file.read(header.fontHeight * 256);
+ }
+ // Fetch the image data, and uncompress if necessary.
+ imageData = header.compressed ? uncompress(file, header.width, header.height) : file.read(header.width * header.height * 2);
+
+ output = new Uint8Array(imageData.length / 2 * 3);
+
+ for (i = 0, j = 0; i < imageData.length; i += 2, j += 3) {
+ output[j] = imageData[i];
+ output[j + 1] = imageData[i + 1] & 15;
+ output[j + 2] = imageData[i + 1] >> 4;
+ }
+
+ return {
+ "width": header.width,
+ "height": header.height,
+ "data": output
+ };
+ }
+
+ function loadFile(file, callback, palette, codepage, noblink) {
+ var extension, reader;
+ extension = file.name.split(".").pop().toLowerCase();
+ reader = new FileReader();
+ reader.onload = function(data) {
+ switch (extension) {
+ case "png":
+ case "gif":
+ case "jpg":
+ case "jpeg":
+ loadImg(data.target.result, callback, palette, codepage, noblink);
+ break;
+ case "xb":
+ callback(loadXbin(new Uint8Array(data.target.result)));
+ break;
+ default:
+ callback(loadAnsi(new Uint8Array(data.target.result)));
+ }
+ };
+ switch (extension) {
+ case "png":
+ case "gif":
+ case "jpg":
+ case "jpeg":
+ reader.readAsDataURL(file);
+ break;
+ default:
+ reader.readAsArrayBuffer(file);
+ }
+ }
+
+ return {
+ "loadFile": loadFile
+ };
+}());
diff --git a/public/js/network.js b/public/js/network.js
new file mode 100644
index 0000000..3e64bc3
--- /dev/null
+++ b/public/js/network.js
@@ -0,0 +1,303 @@
+function createWorkerHandler(inputHandle) {
+ "use strict";
+ var worker = new Worker("js/worker.js");
+ var handle = localStorage.getItem("handle");
+ if (handle === null) {
+ handle = "Anonymous";
+ localStorage.setItem("handle", handle);
+ }
+ inputHandle.value = handle;
+ var connected = false;
+ worker.postMessage({ "cmd": "handle", "handle": handle });
+ showOverlay($("websocket-overlay"));
+
+ function onConnected() {
+ var excludedElements = document.getElementsByClassName("excluded-for-websocket");
+ for (var i = 0; i < excludedElements.length; i++) {
+ excludedElements[i].style.display = "none";
+ }
+ var includedElement = document.getElementsByClassName("included-for-websocket");
+ for (var i = 0; i < includedElement.length; i++) {
+ includedElement[i].style.display = "block";
+ }
+ title.setName(window.location.hostname);
+ worker.postMessage({ "cmd": "join", "handle": handle });
+ connected = true;
+ }
+
+ function onDisconnected() {
+ if (connected === true) {
+ alert("You were disconnected from the server, try refreshing the page to try again.");
+ } else {
+ hideOverlay($("websocket-overlay"));
+ }
+ connected = false;
+ }
+
+ function onImageData(columns, rows, data, iceColours, letterSpacing) {
+ textArtCanvas.setImageData(columns, rows, data, iceColours, letterSpacing);
+ hideOverlay($("websocket-overlay"));
+ }
+
+ function onChat(handle, text, showNotification) {
+ chat.addConversation(handle, text, showNotification);
+ }
+
+ function onJoin(handle, sessionID, showNotification) {
+ chat.join(handle, sessionID, showNotification);
+ }
+
+ function onPart(sessionID) {
+ chat.part(sessionID);
+ }
+
+ function onNick(handle, sessionID, showNotification) {
+ chat.nick(handle, sessionID, showNotification);
+ }
+
+ function onDraw(blocks) {
+ textArtCanvas.quickDraw(blocks);
+ }
+
+ function onMessage(msg) {
+ var data = msg.data;
+ switch (data.cmd) {
+ case "connected":
+ onConnected();
+ break;
+ case "disconnected":
+ onDisconnected();
+ break;
+ case "imageData":
+ onImageData(data.columns, data.rows, new Uint16Array(data.data), data.iceColours, data.letterSpacing);
+ break;
+ case "chat":
+ onChat(data.handle, data.text, data.showNotification);
+ break;
+ case "join":
+ onJoin(data.handle, data.sessionID, data.showNotification);
+ break;
+ case "part":
+ onPart(data.sessionID);
+ break;
+ case "nick":
+ onNick(data.handle, data.sessionID, data.showNotification);
+ break;
+ case "draw":
+ onDraw(data.blocks);
+ break;
+ }
+ }
+
+ function draw(blocks) {
+ worker.postMessage({ "cmd": "draw", "blocks": blocks });
+ }
+
+ function setHandle(newHandle) {
+ if (handle !== newHandle) {
+ handle = newHandle;
+ localStorage.setItem("handle", handle);
+ worker.postMessage({ "cmd": "nick", "handle": handle });
+ }
+ }
+
+ function sendChat(text) {
+ worker.postMessage({ "cmd": "chat", "text": text });
+ }
+
+ function isConnected() {
+ return connected;
+ }
+
+ worker.addEventListener("message", onMessage);
+ worker.postMessage({ "cmd": "connect", "url": "wss://" + window.location.hostname + ":1337" + window.location.pathname });
+
+ return {
+ "draw": draw,
+ "setHandle": setHandle,
+ "sendChat": sendChat,
+ "isConnected": isConnected
+ };
+}
+
+function createChatController(divChatButton, divChatWindow, divMessageWindow, divUserList, inputHandle, inputMessage, inputNotificationCheckbox, onFocusCallback, onBlurCallback) {
+ "use strict";
+ var enabled = false;
+ var userList = {};
+ var notifications = localStorage.getItem("notifications");
+ if (notifications === null) {
+ notifications = false;
+ localStorage.setItem("notifications", notifications);
+ } else {
+ notifications = JSON.parse(notifications);
+ }
+ inputNotificationCheckbox.checked = notifications;
+
+ function scrollToBottom() {
+ var rect = divMessageWindow.getBoundingClientRect();
+ divMessageWindow.scrollTop = divMessageWindow.scrollHeight - rect.height;
+ }
+
+ function newNotification(text) {
+ var notification = new Notification(title.getName() + " - ANSiEdit", {
+ "body": text,
+ "icon": "../images/face.png"
+ });
+ setTimeout(() => {
+ notification.close();
+ }, 7000);
+ }
+
+ function addConversation(handle, text, showNotification) {
+ var div = document.createElement("DIV");
+ var spanHandle = document.createElement("SPAN");
+ var spanSeperator = document.createElement("SPAN");
+ var spanText = document.createElement("SPAN");
+ spanHandle.textContent = handle;
+ spanHandle.classList.add("handle");
+ spanSeperator.textContent = " ";
+ spanText.textContent = text;
+ div.appendChild(spanHandle);
+ div.appendChild(spanSeperator);
+ div.appendChild(spanText);
+ var rect = divMessageWindow.getBoundingClientRect();
+ var doScroll = (rect.height > divMessageWindow.scrollHeight) || (divMessageWindow.scrollTop === divMessageWindow.scrollHeight - rect.height);
+ divMessageWindow.appendChild(div);
+ if (doScroll) {
+ scrollToBottom();
+ }
+ if (showNotification === true && enabled === false && divChatButton.classList.contains("notification") === false) {
+ divChatButton.classList.add("notification");
+ }
+ }
+
+ function onFocus() {
+ onFocusCallback();
+ }
+
+ function onBlur() {
+ onBlurCallback();
+ }
+
+ function blurHandle(evt) {
+ if (inputHandle.value === "") {
+ inputHandle.value = "Anonymous";
+ }
+ worker.setHandle(inputHandle.value);
+ }
+
+ function keypressHandle(evt) {
+ var keyCode = (evt.keyCode || evt.which);
+ if (keyCode === 13) {
+ inputMessage.focus();
+ }
+ }
+
+ function keypressMessage(evt) {
+ var keyCode = (evt.keyCode || evt.which);
+ if (keyCode === 13) {
+ if (inputMessage.value !== "") {
+ var text = inputMessage.value;
+ inputMessage.value = "";
+ worker.sendChat(text);
+ }
+ }
+ }
+
+ inputHandle.addEventListener("focus", onFocus);
+ inputHandle.addEventListener("blur", onBlur);
+ inputMessage.addEventListener("focus", onFocus);
+ inputMessage.addEventListener("blur", onBlur);
+ inputHandle.addEventListener("blur", blurHandle);
+ inputHandle.addEventListener("keypress", keypressHandle);
+ inputMessage.addEventListener("keypress", keypressMessage);
+
+ function toggle() {
+ if (enabled === true) {
+ divChatWindow.style.display = "none";
+ enabled = false;
+ onBlurCallback();
+ divChatButton.classList.remove("active");
+ } else {
+ divChatWindow.style.display = "block";
+ enabled = true;
+ scrollToBottom();
+ onFocusCallback();
+ inputMessage.focus();
+ divChatButton.classList.remove("notification");
+ divChatButton.classList.add("active");
+ }
+ }
+
+ function isEnabled() {
+ return enabled;
+ }
+
+ function join(handle, sessionID, showNotification) {
+ if (userList[sessionID] === undefined) {
+ if (notifications === true && showNotification === true) {
+ newNotification(handle + " has joined");
+ }
+ userList[sessionID] = { "handle": handle, "div": document.createElement("DIV") };
+ userList[sessionID].div.classList.add("user-name");
+ userList[sessionID].div.textContent = handle;
+ divUserList.appendChild(userList[sessionID].div);
+ }
+ }
+
+ function nick(handle, sessionID, showNotification) {
+ if (userList[sessionID] !== undefined) {
+ if (showNotification === true && notifications === true) {
+ newNotification(userList[sessionID].handle + " has changed their name to " + handle);
+ }
+ userList[sessionID].handle = handle;
+ userList[sessionID].div.textContent = handle;
+ }
+ }
+
+ function part(sessionID) {
+ if (userList[sessionID] !== undefined) {
+ if (notifications === true) {
+ newNotification(userList[sessionID].handle + " has left");
+ }
+ divUserList.removeChild(userList[sessionID].div);
+ delete userList[sessionID];
+ }
+ }
+
+ function globalToggleKeydown(evt) {
+ var keyCode = (evt.keyCode || evt.which);
+ if (keyCode === 27) {
+ toggle();
+ }
+ }
+
+ function notificationCheckboxClicked(evt) {
+ if (inputNotificationCheckbox.checked) {
+ if (Notification.permission !== "granted") {
+ Notification.requestPermission((permission) => {
+ notifications = true;
+ localStorage.setItem("notifications", notifications);
+ });
+ } else {
+ notifications = true;
+ localStorage.setItem("notifications", notifications);
+ }
+ } else {
+ notifications = false;
+ localStorage.setItem("notifications", notifications);
+ }
+ }
+
+ document.addEventListener("keydown", globalToggleKeydown);
+ inputNotificationCheckbox.addEventListener("click", notificationCheckboxClicked);
+
+ return {
+ "addConversation": addConversation,
+ "toggle": toggle,
+ "isEnabled": isEnabled,
+ "join": join,
+ "nick": nick,
+ "part": part
+ };
+}
diff --git a/public/js/savers.js b/public/js/savers.js
new file mode 100644
index 0000000..6194c8b
--- /dev/null
+++ b/public/js/savers.js
@@ -0,0 +1,95 @@
+var Savers = (function() {
+ "use strict";
+
+ // function toANSFormat(input) {
+ // var highest, inputIndex, end, charCode, fg, bg, bold, blink, currentFg, currentBg, currentBold, currentBlink, attribs, attribIndex, output;
+ //
+ // function ansiColor(binColor) {
+ // switch (binColor) {
+ // case 1:
+ // return 4;
+ // case 3:
+ // return 6;
+ // case 4:
+ // return 1;
+ // case 6:
+ // return 3;
+ // default:
+ // return binColor;
+ // }
+ // }
+ //
+ // highest = getHighestRow(input);
+ // output = [27, 91, 48, 109];
+ // for (inputIndex = 0, end = highest * 80 * 3, currentFg = 7, currentBg = 0, currentBold = false, currentBlink = false; inputIndex < end; inputIndex += 3) {
+ // attribs = [];
+ // charCode = input[inputIndex];
+ // fg = input[inputIndex + 1];
+ // bg = input[inputIndex + 2];
+ // if (fg > 7) {
+ // bold = true;
+ // fg = fg - 8;
+ // } else {
+ // bold = false;
+ // }
+ // if (bg > 7) {
+ // blink = true;
+ // bg = bg - 8;
+ // } else {
+ // blink = false;
+ // }
+ // if ((currentBold && !bold) || (currentBlink && !blink)) {
+ // attribs.push([48]);
+ // currentFg = 7;
+ // currentBg = 0;
+ // currentBold = false;
+ // currentBlink = false;
+ // }
+ // if (bold && !currentBold) {
+ // attribs.push([49]);
+ // currentBold = true;
+ // }
+ // if (blink && !currentBlink) {
+ // attribs.push([53]);
+ // currentBlink = true;
+ // }
+ // if (fg !== currentFg) {
+ // attribs.push([51, 48 + ansiColor(fg)]);
+ // currentFg = fg;
+ // }
+ // if (bg !== currentBg) {
+ // attribs.push([52, 48 + ansiColor(bg)]);
+ // currentBg = bg;
+ // }
+ // if (attribs.length) {
+ // output.push(27, 91);
+ // for (attribIndex = 0; attribIndex < attribs.length; ++attribIndex) {
+ // output = output.concat(attribs[attribIndex]);
+ // if (attribIndex !== attribs.length - 1) {
+ // output.push(59);
+ // } else {
+ // output.push(109);
+ // }
+ // }
+ // }
+ // output.push(charCode);
+ // }
+ // return new Uint8Array(output);
+ // }
+
+ function imageDataToDataURL(imageData, noblink) {
+ var bytes, i, j, flags;
+ bytes = new Uint8Array((imageData.width * imageData.height * 2) + 11);
+ flags = noblink ? 8 : 0;
+ bytes.set(new Uint8Array([88, 66, 73, 78, 26, (imageData.width & 0xff), (imageData.width >> 8), (imageData.height & 0xff), (imageData.height >> 8), 16, flags]), 0);
+ for (i = 0, j = 11; i < imageData.data.length; i += 3, j += 2) {
+ bytes[j] = imageData.data[i];
+ bytes[j + 1] = imageData.data[i + 1] + (imageData.data[i + 2] << 4);
+ }
+ return "data:image/x-bin;base64," + btoa(String.fromCharCode.apply(null, bytes));
+ }
+
+ return {
+ "imageDataToDataURL": imageDataToDataURL
+ };
+}());
diff --git a/public/js/ui.js b/public/js/ui.js
new file mode 100644
index 0000000..85e8f96
--- /dev/null
+++ b/public/js/ui.js
@@ -0,0 +1,462 @@
+function createSettingToggle(divButton, getter, setter) {
+ "use strict";
+ var currentSetting;
+
+ function update() {
+ currentSetting = getter();
+ if (currentSetting === true) {
+ divButton.classList.add("enabled");
+ } else {
+ divButton.classList.remove("enabled");
+ }
+ }
+
+ function changeSetting(evt) {
+ evt.preventDefault();
+ currentSetting = !currentSetting;
+ setter(currentSetting);
+ update();
+ }
+
+ divButton.addEventListener("click", changeSetting);
+ update();
+
+ return {
+ "update": update
+ };
+}
+
+var Toolbar = (function() {
+ "use strict";
+ var currentButton;
+ var currentOnBlur;
+
+ function add(divButton, onFocus, onBlur) {
+ function enable() {
+ if (currentButton !== divButton) {
+ if (currentButton !== undefined) {
+ currentButton.classList.remove("toolbar-displayed");
+ }
+ if (currentOnBlur !== undefined) {
+ currentOnBlur();
+ }
+ divButton.classList.add("toolbar-displayed");
+ currentButton = divButton;
+ currentOnBlur = onBlur;
+ if (onFocus !== undefined) {
+ onFocus();
+ }
+ }
+ }
+ divButton.addEventListener("click", (evt) => {
+ evt.preventDefault();
+ enable();
+ });
+ return {
+ "enable": enable
+ };
+ }
+
+ return {
+ "add": add
+ };
+}());
+
+function onReturn(divElement, divTarget) {
+ "use strict";
+ divElement.addEventListener("keypress", (evt) => {
+ var keyCode = (evt.keyCode || evt.which);
+ if (evt.altKey === false && evt.ctrlKey === false && evt.metaKey === false && keyCode === 13) {
+ evt.preventDefault();
+ evt.stopPropagation();
+ divTarget.click();
+ }
+ });
+}
+
+function onClick(divElement, func) {
+ "use strict";
+ divElement.addEventListener("click", (evt) => {
+ evt.preventDefault();
+ func(divElement);
+ });
+}
+
+function onFileChange(divElement, func) {
+ "use strict";
+ divElement.addEventListener("change", (evt) => {
+ if (evt.target.files.length > 0) {
+ func(evt.target.files[0]);
+ }
+ });
+}
+
+function onSelectChange(divElement, func) {
+ "use strict";
+ divElement.addEventListener("change", (evt) => {
+ func(divElement.value);
+ });
+}
+
+function createPositionInfo(divElement) {
+ "use strict";
+ function update(x, y) {
+ divElement.textContent = (x + 1) + ", " + (y + 1);
+ }
+
+ return {
+ "update": update
+ };
+}
+
+function showOverlay(divElement) {
+ "use strict";
+ divElement.classList.add("enabled");
+}
+
+function hideOverlay(divElement) {
+ "use strict";
+ divElement.classList.remove("enabled");
+}
+
+function undoAndRedo(evt) {
+ "use strict";
+ var keyCode = (evt.keyCode || evt.which);
+ if ((evt.ctrlKey === true || (evt.metaKey === true && evt.shiftKey === false)) && keyCode === 90) {
+ evt.preventDefault();
+ textArtCanvas.undo();
+ } else if ((evt.ctrlKey === true && evt.keyCode === 89) || (evt.metaKey === true && evt.shiftKey === true && keyCode === 90)) {
+ evt.preventDefault();
+ textArtCanvas.redo();
+ }
+}
+
+function createTitleHandler(inputElement, onFocusCallback, onBlurCallback) {
+ "use strict";
+ function updateTitle() {
+ document.title = inputElement.value + " - moebius";
+ }
+
+ function onFocus() {
+ onFocusCallback();
+ }
+
+ function onBlur() {
+ onBlurCallback();
+ updateTitle();
+ }
+
+ function keyPress(evt) {
+ var keyCode = (evt.keyCode || evt.which);
+ if (keyCode === 13) {
+ evt.preventDefault();
+ evt.stopPropagation();
+ if (inputElement.value === "") {
+ inputElement.value = "untitled";
+ }
+ inputElement.blur();
+ }
+ }
+
+ function setName(newName) {
+ inputElement.value = newName;
+ updateTitle();
+ }
+
+ function getName() {
+ return inputElement.value;
+ }
+
+ function reset() {
+ setName("untitled");
+ }
+
+ inputElement.addEventListener("focus", onFocus);
+ inputElement.addEventListener("blur", onBlur);
+ inputElement.addEventListener("keypress", keyPress);
+ reset();
+
+ return {
+ "getName": getName,
+ "setName": setName,
+ "reset": reset
+ };
+}
+
+function createPaintShortcuts(keyPair) {
+ "use strict";
+ var ignored = false;
+
+ function keyDown(evt) {
+ if (ignored === false) {
+ var keyCode = (evt.keyCode || evt.which);
+ if (evt.ctrlKey === false && evt.altKey === false && evt.shiftKey === false && evt.metaKey === false) {
+ if (keyCode >= 48 && keyCode <= 55) {
+ var colour = keyCode - 48;
+ var currentColour = palette.getForegroundColour();
+ if (currentColour === colour) {
+ palette.setForegroundColour(colour + 8);
+ } else {
+ palette.setForegroundColour(colour);
+ }
+ } else {
+ var charCode = String.fromCharCode(keyCode);
+ if (keyPair[charCode] !== undefined) {
+ if (worker.isConnected() === false || keyPair[charCode].classList.contains("excluded-for-websocket") === false) {
+ evt.preventDefault();
+ keyPair[charCode].click();
+ }
+ }
+ }
+ }
+ }
+ }
+
+ function keyDownWithCtrl(evt) {
+ if (ignored === false) {
+ var keyCode = (evt.keyCode || evt.which);
+ if (evt.ctrlKey === true && evt.altKey === false && evt.shiftKey === false && evt.metaKey === false) {
+ var charCode = String.fromCharCode(keyCode);
+ if (keyPair[charCode] !== undefined) {
+ if (worker.isConnected() === false || keyPair[charCode].classList.contains("excluded-for-websocket") === false) {
+ evt.preventDefault();
+ keyPair[charCode].click();
+ }
+ }
+ }
+ }
+ }
+
+ document.addEventListener("keydown", keyDownWithCtrl);
+
+ function enable() {
+ document.addEventListener("keydown", keyDown);
+ }
+
+ function disable() {
+ document.removeEventListener("keydown", keyDown);
+ }
+
+ function ignore() {
+ ignored = true;
+ }
+
+ function unignore() {
+ ignored = false;
+ }
+
+ enable();
+
+ return {
+ "enable": enable,
+ "disable": disable,
+ "ignore": ignore,
+ "unignore": unignore
+ };
+}
+
+function createToggleButton(stateOneName, stateTwoName, stateOneClick, stateTwoClick) {
+ "use strict";
+ var divContainer = document.createElement("DIV");
+ divContainer.classList.add("toggle-button-container");
+ var stateOne = document.createElement("DIV");
+ stateOne.classList.add("toggle-button");
+ stateOne.classList.add("left");
+ stateOne.textContent = stateOneName;
+ var stateTwo = document.createElement("DIV");
+ stateTwo.classList.add("toggle-button");
+ stateTwo.classList.add("right");
+ stateTwo.textContent = stateTwoName;
+ divContainer.appendChild(stateOne);
+ divContainer.appendChild(stateTwo);
+
+ function getElement() {
+ return divContainer;
+ }
+
+ function setStateOne() {
+ stateOne.classList.add("enabled");
+ stateTwo.classList.remove("enabled");
+ }
+
+ function setStateTwo() {
+ stateTwo.classList.add("enabled");
+ stateOne.classList.remove("enabled");
+ }
+
+ stateOne.addEventListener("click", (evt) => {
+ setStateOne();
+ stateOneClick();
+ });
+
+ stateTwo.addEventListener("click", (evt) => {
+ setStateTwo();
+ stateTwoClick();
+ });
+
+ return {
+ "getElement": getElement,
+ "setStateOne": setStateOne,
+ "setStateTwo": setStateTwo
+ };
+}
+
+function createGrid(divElement) {
+ "use strict";
+ var canvases = [];
+ var enabled = false;
+
+ function createCanvases() {
+ var fontWidth = font.getWidth();
+ var fontHeight = font.getHeight();
+ var columns = textArtCanvas.getColumns();
+ var rows = textArtCanvas.getRows();
+ var canvasWidth = fontWidth * columns;
+ var canvasHeight = fontHeight * 25;
+ canvases = [];
+ for (var i = 0; i < Math.floor(rows / 25); i++) {
+ var canvas = createCanvas(canvasWidth, canvasHeight);
+ canvases.push(canvas);
+ }
+ if (rows % 25 !== 0) {
+ var canvas = createCanvas(canvasWidth, fontHeight * (rows % 25));
+ canvases.push(canvas);
+ }
+ }
+
+ function renderGrid(canvas) {
+ var columns = textArtCanvas.getColumns();
+ var rows = Math.min(textArtCanvas.getRows(), 25);
+ var fontWidth = canvas.width / columns;
+ var fontHeight = font.getHeight();
+ var ctx = canvas.getContext("2d");
+ var imageData = ctx.createImageData(canvas.width, canvas.height);
+ var byteWidth = canvas.width * 4;
+ var darkGray = new Uint8Array([63, 63, 63, 255]);
+ for (var y = 0; y < rows; y += 1) {
+ for (var x = 0, i = y * fontHeight * byteWidth; x < canvas.width; x += 1, i += 4) {
+ imageData.data.set(darkGray, i);
+ }
+ }
+ for (var x = 0; x < columns; x += 1) {
+ for (var y = 0, i = x * fontWidth * 4; y < canvas.height; y += 1, i += byteWidth) {
+ imageData.data.set(darkGray, i);
+ }
+ }
+ ctx.putImageData(imageData, 0, 0);
+ }
+
+ function createGrid() {
+ createCanvases();
+ renderGrid(canvases[0]);
+ divElement.appendChild(canvases[0]);
+ for (var i = 1; i < canvases.length; i++) {
+ canvases[i].getContext("2d").drawImage(canvases[0], 0, 0);
+ divElement.appendChild(canvases[i]);
+ }
+ }
+
+ function resize() {
+ canvases.forEach((canvas) => {
+ divElement.removeChild(canvas);
+ });
+ createGrid();
+ }
+
+ createGrid();
+
+ document.addEventListener("onTextCanvasSizeChange", resize);
+ document.addEventListener("onLetterSpacingChange", resize);
+ document.addEventListener("onFontChange", resize);
+ document.addEventListener("onOpenedFile", resize);
+
+ function isShown() {
+ return enabled;
+ }
+
+ function show(turnOn) {
+ if (enabled === true && turnOn === false) {
+ divElement.classList.remove("enabled");
+ enabled = false;
+ } else if (enabled === false && turnOn === true) {
+ divElement.classList.add("enabled");
+ enabled = true;
+ }
+ }
+
+ return {
+ "isShown": isShown,
+ "show": show
+ };
+}
+
+function createToolPreview(divElement) {
+ "use strict";
+ var canvases = [];
+ var ctxs = [];
+
+ function createCanvases() {
+ var fontWidth = font.getWidth();
+ var fontHeight = font.getHeight();
+ var columns = textArtCanvas.getColumns();
+ var rows = textArtCanvas.getRows();
+ var canvasWidth = fontWidth * columns;
+ var canvasHeight = fontHeight * 25;
+ canvases = new Array();
+ ctxs = new Array();
+ for (var i = 0; i < Math.floor(rows / 25); i++) {
+ var canvas = createCanvas(canvasWidth, canvasHeight);
+ canvases.push(canvas);
+ ctxs.push(canvas.getContext("2d"));
+ }
+ if (rows % 25 !== 0) {
+ var canvas = createCanvas(canvasWidth, fontHeight * (rows % 25));
+ canvases.push(canvas);
+ ctxs.push(canvas.getContext("2d"));
+ }
+ canvases.forEach((canvas) => {
+ divElement.appendChild(canvas);
+ });
+ }
+
+ function resize() {
+ canvases.forEach((canvas) => {
+ divElement.removeChild(canvas);
+ });
+ createCanvases();
+ }
+
+ function drawHalfBlock(foreground, x, y) {
+ var halfBlockY = y % 2;
+ var textY = Math.floor(y / 2);
+ var ctxIndex = Math.floor(textY / 25);
+ if (ctxIndex >= 0 && ctxIndex < ctxs.length) {
+ font.drawWithAlpha((halfBlockY === 0) ? 223 : 220, foreground, ctxs[ctxIndex], x, textY % 25);
+ }
+ }
+
+ function clear() {
+ for (var i = 0; i < ctxs.length; i++) {
+ ctxs[i].clearRect(0, 0, canvases[i].width, canvases[i].height);
+ }
+ }
+
+ createCanvases();
+ divElement.classList.add("enabled");
+
+ document.addEventListener("onTextCanvasSizeChange", resize);
+ document.addEventListener("onLetterSpacingChange", resize);
+ document.addEventListener("onFontChange", resize);
+ document.addEventListener("onOpenedFile", resize);
+
+ return {
+ "clear": clear,
+ "drawHalfBlock": drawHalfBlock,
+ };
+}
+
+function menuHover() {
+ $("file-menu").classList.remove("hover");
+ $("edit-menu").classList.remove("hover");
+ $("view-menu").classList.remove("hover");
+}
diff --git a/public/js/worker.js b/public/js/worker.js
new file mode 100644
index 0000000..055df58
--- /dev/null
+++ b/public/js/worker.js
@@ -0,0 +1,135 @@
+var socket;
+var sessionID;
+var joint;
+var connected = false;
+
+function send(cmd, msg) {
+ socket.send(JSON.stringify([cmd, msg]));
+}
+
+function onOpen() {
+ postMessage({ "cmd": "connected" });
+}
+
+function onClose(evt) {
+ postMessage({ "cmd": "disconnected" });
+}
+
+function onChat(handle, text, showNotification) {
+ postMessage({ "cmd": "chat", "handle": handle, "text": text, "showNotification": showNotification });
+}
+
+function onStart(msg, newSessionID) {
+ joint = msg;
+ sessionID = newSessionID;
+ msg.chat.forEach((msg) => {
+ onChat(msg[0], msg[1], false);
+ });
+}
+
+function onJoin(handle, joinSessionID, showNotification) {
+ if (joinSessionID === sessionID) {
+ showNotification = false;
+ }
+ postMessage({ "cmd": "join", "sessionID": joinSessionID, "handle": handle, "showNotification": showNotification });
+}
+
+function onNick(handle, nickSessionID) {
+ postMessage({ "cmd": "nick", "sessionID": nickSessionID, "handle": handle, "showNotification": (nickSessionID !== sessionID) });
+}
+
+function onPart(sessionID) {
+ postMessage({ "cmd": "part", "sessionID": sessionID });
+}
+
+function onDraw(blocks) {
+ var outputBlocks = new Array();
+ var index;
+ blocks.forEach((block) => {
+ index = block >> 16;
+ outputBlocks.push([index, block & 0xffff, index % joint.columns, Math.floor(index / joint.columns)]);
+ });
+ postMessage({ "cmd": "draw", "blocks": outputBlocks });
+}
+
+function onMessage(evt) {
+ var data = evt.data;
+ if (typeof (data) === "object") {
+ var fr = new FileReader();
+ fr.addEventListener("load", (evt) => {
+ postMessage({ "cmd": "imageData", "data": evt.target.result, "columns": joint.columns, "rows": joint.rows, "iceColours": joint.iceColours, "letterSpacing": joint.letterSpacing });
+ connected = true;
+ });
+ fr.readAsArrayBuffer(data);
+ } else {
+ data = JSON.parse(data);
+ switch (data[0]) {
+ case "start":
+ sessionID = data[2];
+ var userList = data[3];
+ Object.keys(userList).forEach((userSessionID) => {
+ onJoin(userList[userSessionID], userSessionID, false);
+ });
+ onStart(data[1], data[2]);
+ break;
+ case "join":
+ onJoin(data[1], data[2], true);
+ break;
+ case "nick":
+ onNick(data[1], data[2]);
+ break;
+ case "draw":
+ onDraw(data[1]);
+ break;
+ case "part":
+ onPart(data[1]);
+ break;
+ case "chat":
+ onChat(data[1], data[2], true);
+ break;
+ default:
+ break;
+ }
+ }
+}
+
+function removeDuplicates(blocks) {
+ var indexes = [];
+ var index;
+ blocks = blocks.reverse();
+ blocks = blocks.filter((block) => {
+ index = block >> 16;
+ if (indexes.lastIndexOf(index) === -1) {
+ indexes.push(index);
+ return true;
+ }
+ return false;
+ });
+ return blocks.reverse();
+}
+
+self.onmessage = function(msg) {
+ var data = msg.data;
+ switch (data.cmd) {
+ case "connect":
+ socket = new WebSocket(data.url);
+ socket.addEventListener("open", onOpen);
+ socket.addEventListener("message", onMessage);
+ socket.addEventListener("close", onClose);
+ break;
+ case "join":
+ send("join", data.handle);
+ break;
+ case "nick":
+ send("nick", data.handle);
+ break;
+ case "chat":
+ send("chat", data.text);
+ break;
+ case "draw":
+ send("draw", removeDuplicates(data.blocks));
+ break;
+ default:
+ break;
+ }
+};
+ id="chat-icon-close-text">(Escape) X 
+ 
+ 