<commit_before>function DrawTogheter (container, server) {
	this.container = container;
	this.container.style.position = "relative";
	this.chatcontainer = this.container.appendChild(document.createElement('div'));
	this.canvascontainer = this.container.appendChild(document.createElement('div'));

	this.messages = this.chatcontainer.appendChild(document.createElement('div'));
	this.messageinputcontainer = this.chatcontainer.appendChild(document.createElement('div'));
	this.messageinput = this.messageinputcontainer.appendChild(document.createElement('input'));
	this.messageinputbutton = this.messageinputcontainer.appendChild(document.createElement('div'));
	this.messageinputbutton.innerText = 'Send';
	this.messageinputbutton.addEventListener('click', this.sendMessage.bind(this));
	this.messageinput.addEventListener('keypress', function (event) {
		if (event.keyCode === 13) this.sendMessage();
	}.bind(this));

	this.chatcontainer.className = 'chatcontainer';
	this.canvascontainer.className = 'canvascontainer';
	this.messages.className = 'messages';
	this.messageinputcontainer.className = 'messageinputcontainer';
	this.messageinput.className = 'messageinput';
	this.messageinputbutton.className = 'messageinputbutton toolbutton';

	this.background = this.canvascontainer.appendChild(document.createElement("canvas"));
	this.canvas = this.canvascontainer.appendChild(document.createElement("canvas"));
	this.effects = this.canvascontainer.appendChild(document.createElement("canvas"));

	this.setCanvasPosition(this.canvas);
	this.setCanvasPosition(this.effects);

	this.tiledCanvas = new TiledCanvas(this.canvas, {
		chunkSize: 256
	});
	this.bTiledCanvas = new TiledCanvas(this.background, {
		chunkSize: 256
	});

	this.eCtx = this.effects.getContext('2d');

	this.localDrawings = [];
	this.offsetX = 0;
	this.offsetY = 0;

	window.addEventListener("resize", this.resizeHandler.bind(this));

	this.effects.addEventListener("click", this.callTool.bind(this));
	this.effects.addEventListener("mousedown", this.callTool.bind(this));
	this.effects.addEventListener("mouseup", this.callTool.bind(this));
	this.effects.addEventListener("mousemove", this.callTool.bind(this));
	this.effects.addEventListener("mouseleave", this.callTool.bind(this));
	this.effects.addEventListener("touchstqrt", this.callTool.bind(this));
	this.effects.addEventListener("touchend", this.callTool.bind(this));
	this.effects.addEventListener("touchmove", this.callTool.bind(this));

	this.setTool("brush");
	this.setToolSize("5");
	this.setToolColor("#F0BC11");

	this.resizeHandler();

	this.connect(server);
}

DrawTogheter.prototype.setCanvasPosition = function setCanvasPosition (canvas) {
	canvas.style.position = "absolute";
	canvas.style.left = "0";
	canvas.style.top = "0";
};

DrawTogheter.prototype.connect = function connect (server) {
	this.socket = io(server);
	this.socket.on("drawing", this.drawing.bind(this));
	this.socket.on("drawings", this.alldrawings.bind(this));
	this.socket.on("chat", this.chat.bind(this));
	this.socket.on("safechat", this.safechat.bind(this));
	this.socket.on("name", function (name) {
		document.getElementById('nameinput').value = name;
	});
	this.socket.on('disconnect', function () {
		this.chat('You have been disconnected, attemting to reconnect');
	}.bind(this));
	this.socket.on('reconnect', function () {
		this.chat('You have been reconnected, joining main room');
		this.socket.emit("join", this.room || 'main');
	}.bind(this));
	this.socket.on('room', function (room) {
		location.hash = room;
		this.room = room;
		this.chat('You can share this room: ' + location.href);
	}.bind(this));
	this.socket.emit("join", location.hash.substring(1) || "main");
};

DrawTogheter.prototype.safechat = function safechat (msg) {
	if (this.messages.scrollTop >= this.messages.scrollHeight - this.messages.offsetHeight - 10) var scroll = true;

	var msgContainer = this.messages.appendChild(document.createElement('div'));
	msgContainer.className = "messagecontainer";
	if (typeof msg === "string") {
		var message = msgContainer.appendChild(document.createElement('div'));
		message.className = "message";
		message.innerHTML = msg;
	} else {
		var name = msgContainer.appendChild(document.createElement('div'));
		name.className = "name";
		name.appendChild(document.createTextNode(msg.name + ':'))
		var message = msgContainer.appendChild(document.createElement('div'));
		message.className = "message";
		message.innerHTML = msg.msg;
	}

	if (scroll) this.messages.scrollTop = this.messages.scrollHeight;
};

DrawTogheter.prototype.chat = function chat (msg) {
	if (this.messages.scrollTop >= this.messages.scrollHeight - this.messages.offsetHeight - 10) var scroll = true;

	var msgContainer = this.messages.appendChild(document.createElement('div'));
	msgContainer.className = "messagecontainer";
	if (typeof msg === "string") {
		msgContainer.appendChild(document.createTextNode(msg));
	} else {
		var name = msgContainer.appendChild(document.createElement('div'));
		name.className = "name";
		name.appendChild(document.createTextNode(msg.name + ':'))
		var message = msgContainer.appendChild(document.createElement('div'));
		message.className = "message";
		message.appendChild(document.createTextNode(msg.msg))
	}

	if (scroll) this.messages.scrollTop = this.messages.scrollHeight;
};

DrawTogheter.prototype.changeRoom = function changeRoom (room) {
	this.socket.emit("join", room);
};

DrawTogheter.prototype.changeName = function changeName (name) {
	this.socket.emit("changeName", name);
};

DrawTogheter.prototype.sendMessage = function sendMessage () {
	if (this.messageinput.value == '') return;
	this.socket.emit("chat", this.messageinput.value);
	this.messageinput.value = '';
};

DrawTogheter.prototype.setTool = function setTool (tool) {
	if (typeof this.tools[this.tool] === "function") {
		this.tools[this.tool].call(this, "remove");
	}
	this.tool = tool;
};

DrawTogheter.prototype.setToolSize = function setToolSize (size) {
	if (size > 50) return;
	if (size < 0) return;
	this.toolSize = size;
};

DrawTogheter.prototype.setToolColor = function setToolColor (color) {
	this.toolColor = color;
};

DrawTogheter.prototype.addDrawing = function addDrawing (drawing) {
	this.localDrawings.push(drawing);
	this.socket.emit("drawing", drawing, function () {<commit_msg>Fixed changename<commit_after>function DrawTogheter (container, server) {
	this.container = container;
	this.container.style.position = "relative";
	this.chatcontainer = this.container.appendChild(document.createElement('div'));
	this.canvascontainer = this.container.appendChild(document.createElement('div'));

	this.messages = this.chatcontainer.appendChild(document.createElement('div'));
	this.messageinputcontainer = this.chatcontainer.appendChild(document.createElement('div'));
	this.messageinput = this.messageinputcontainer.appendChild(document.createElement('input'));
	this.messageinputbutton = this.messageinputcontainer.appendChild(document.createElement('div'));
	this.messageinputbutton.innerText = 'Send';
	this.messageinputbutton.addEventListener('click', this.sendMessage.bind(this));
	this.messageinput.addEventListener('keypress', function (event) {
		if (event.keyCode === 13) this.sendMessage();
	}.bind(this));

	this.chatcontainer.className = 'chatcontainer';
	this.canvascontainer.className = 'canvascontainer';
	this.messages.className = 'messages';
	this.messageinputcontainer.className = 'messageinputcontainer';
	this.messageinput.className = 'messageinput';
	this.messageinputbutton.className = 'messageinputbutton toolbutton';

	this.background = this.canvascontainer.appendChild(document.createElement("canvas"));
	this.canvas = this.canvascontainer.appendChild(document.createElement("canvas"));
	this.effects = this.canvascontainer.appendChild(document.createElement("canvas"));

	this.setCanvasPosition(this.canvas);
	this.setCanvasPosition(this.effects);

	this.tiledCanvas = new TiledCanvas(this.canvas, {
		chunkSize: 256
	});
	this.bTiledCanvas = new TiledCanvas(this.background, {
		chunkSize: 256
	});

	this.eCtx = this.effects.getContext('2d');

	this.localDrawings = [];
	this.offsetX = 0;
	this.offsetY = 0;

	window.addEventListener("resize", this.resizeHandler.bind(this));

	this.effects.addEventListener("click", this.callTool.bind(this));
	this.effects.addEventListener("mousedown", this.callTool.bind(this));
	this.effects.addEventListener("mouseup", this.callTool.bind(this));
	this.effects.addEventListener("mousemove", this.callTool.bind(this));
	this.effects.addEventListener("mouseleave", this.callTool.bind(this));
	this.effects.addEventListener("touchstqrt", this.callTool.bind(this));
	this.effects.addEventListener("touchend", this.callTool.bind(this));
	this.effects.addEventListener("touchmove", this.callTool.bind(this));

	this.setTool("brush");
	this.setToolSize("5");
	this.setToolColor("#F0BC11");

	this.resizeHandler();

	this.connect(server);
}

DrawTogheter.prototype.setCanvasPosition = function setCanvasPosition (canvas) {
	canvas.style.position = "absolute";
	canvas.style.left = "0";
	canvas.style.top = "0";
};

DrawTogheter.prototype.connect = function connect (server) {
	this.socket = io(server);
	this.socket.on("drawing", this.drawing.bind(this));
	this.socket.on("drawings", this.alldrawings.bind(this));
	this.socket.on("chat", this.chat.bind(this));
	this.socket.on("safechat", this.safechat.bind(this));
	this.socket.on("name", function (name) {
		document.getElementById('nameinput').value = name;
	});
	this.socket.on('disconnect', function () {
		this.chat('You have been disconnected, attemting to reconnect');
	}.bind(this));
	this.socket.on('reconnect', function () {
		this.chat('You have been reconnected, joining main room');
		this.socket.emit("join", this.room || 'main');
	}.bind(this));
	this.socket.on('room', function (room) {
		location.hash = room;
		this.room = room;
		this.chat('You can share this room: ' + location.href);
	}.bind(this));
	this.socket.emit("join", location.hash.substring(1) || "main");
};

DrawTogheter.prototype.safechat = function safechat (msg) {
	if (this.messages.scrollTop >= this.messages.scrollHeight - this.messages.offsetHeight - 10) var scroll = true;

	var msgContainer = this.messages.appendChild(document.createElement('div'));
	msgContainer.className = "messagecontainer";
	if (typeof msg === "string") {
		var message = msgContainer.appendChild(document.createElement('div'));
		message.className = "message";
		message.innerHTML = msg;
	} else {
		var name = msgContainer.appendChild(document.createElement('div'));
		name.className = "name";
		name.appendChild(document.createTextNode(msg.name + ':'))
		var message = msgContainer.appendChild(document.createElement('div'));
		message.className = "message";
		message.innerHTML = msg.msg;
	}

	if (scroll) this.messages.scrollTop = this.messages.scrollHeight;
};

DrawTogheter.prototype.chat = function chat (msg) {
	if (this.messages.scrollTop >= this.messages.scrollHeight - this.messages.offsetHeight - 10) var scroll = true;

	var msgContainer = this.messages.appendChild(document.createElement('div'));
	msgContainer.className = "messagecontainer";
	if (typeof msg === "string") {
		msgContainer.appendChild(document.createTextNode(msg));
	} else {
		var name = msgContainer.appendChild(document.createElement('div'));
		name.className = "name";
		name.appendChild(document.createTextNode(msg.name + ':'))
		var message = msgContainer.appendChild(document.createElement('div'));
		message.className = "message";
		message.appendChild(document.createTextNode(msg.msg))
	}

	if (scroll) this.messages.scrollTop = this.messages.scrollHeight;
};

DrawTogheter.prototype.changeRoom = function changeRoom (room) {
	this.socket.emit("join", room);
};

DrawTogheter.prototype.changeName = function changeName (name) {
	this.socket.emit("changename", name);
};

DrawTogheter.prototype.sendMessage = function sendMessage () {
	if (this.messageinput.value == '') return;
	this.socket.emit("chat", this.messageinput.value);
	this.messageinput.value = '';
};

DrawTogheter.prototype.setTool = function setTool (tool) {
	if (typeof this.tools[this.tool] === "function") {
		this.tools[this.tool].call(this, "remove");
	}
	this.tool = tool;
};

DrawTogheter.prototype.setToolSize = function setToolSize (size) {
	if (size > 50) return;
	if (size < 0) return;
	this.toolSize = size;
};

DrawTogheter.prototype.setToolColor = function setToolColor (color) {
	this.toolColor = color;
};

DrawTogheter.prototype.addDrawing = function addDrawing (drawing) {
	this.localDrawings.push(drawing);
	this.socket.emit("drawing", drawing, function () {
{'fraction_non_alphanumeric': 0.15534287748161038, 'fraction_numerical': 0.003954757573360753, 'mean_word_length': 6.103370786516854, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7188191', 'n_tokens_mistral': 3924, 'n_tokens_neox': 3747, 'n_words': 617}