[Formatting] Tabs instead of spaces

author: Kyle Gunger <kgunger12@gmail.com> 2021-10-16 17:12:32 -0400
committer: Kyle Gunger <kgunger12@gmail.com> 2021-10-16 17:12:32 -0400
commit: b8c91f08adc7bdb0095fb61a59bc03f0d568f478 (patch)
tree: 1c9f39c2d2c2279593d2117ef64274b561981db6
parent: 8f71df8341224a0898984a9bc67005fdbea9ee30 (diff)
24 files changed, 2265 insertions, 2262 deletions
diff --git a/client.html b/client.html
index bc85fee..d589344 100644
--- a/client.html
+++ b/client.html
@@ -1,131 +1,131 @@
 <!DOCTYPE HTML>
 
 <html>
-    <head>
-        <meta name="viewport" content="width=device-width,initial-scale=1">
-        <meta charset="utf-8">
-        
-        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
-        <link rel="stylesheet" type="text/css" href="styles/icofont.css">
-
-        <link rel="stylesheet" type="text/css" href="styles/input.css">
-
-        <link rel="stylesheet" type="text/css" href="styles/client/base.css">
-        <link rel="stylesheet" type="text/css" href="styles/client/desktop.css">
-        <link rel="stylesheet" type="text/css" href="styles/client/tablet.css">
-        <link rel="stylesheet" type="text/css" href="styles/client/mobile.css">
-        <link rel="stylesheet" type="text/css" href="styles/client/card.css">
+	<head>
+		<meta name="viewport" content="width=device-width,initial-scale=1">
+		<meta charset="utf-8">
+		
+		<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
+		<link rel="stylesheet" type="text/css" href="styles/icofont.css">
+
+		<link rel="stylesheet" type="text/css" href="styles/input.css">
+
+		<link rel="stylesheet" type="text/css" href="styles/client/base.css">
+		<link rel="stylesheet" type="text/css" href="styles/client/desktop.css">
+		<link rel="stylesheet" type="text/css" href="styles/client/tablet.css">
+		<link rel="stylesheet" type="text/css" href="styles/client/mobile.css">
+		<link rel="stylesheet" type="text/css" href="styles/client/card.css">
 
-        <link id="theme" rel="stylesheet" type="text/css" href="styles/themes/colors-base.css">
-
-        <link rel="icon" sizes="32x32" href="images/wc-icon-32.png">
-        <link rel="icon" sizes="48x48" href="images/wc-icon-48.png">
-        <link rel="icon" sizes="96x96" href="images/wc-icon-96.png">
-        <link rel="icon" sizes="144x144" href="images/wc-icon-144.png">
-        <link rel="icon" sizes="288x288" href="images/wc-icon-288.png">
-
-        <script src="scripts/cookie.js"></script>
-        <script src="scripts/theme.js"></script>
-
-        <script src="scripts/cards/card.js"></script>
-        <script src="scripts/cards/deck.js"></script>
-        <script src="scripts/cards/drag.js"></script>
-
-        <script src="scripts/gui/input.js"></script>
-        <script src="scripts/gui/lobby.js"></script>
-        <script src="scripts/gui/table.js"></script>
-        <script src="scripts/gui/chat.js"></script>
-
-        <script src="scripts/socket/message.js"></script>
-        <script src="scripts/socket/sock.js"></script>
-
-        <script src="scripts/client.js"></script>
-
-        <title>WebCards - Client</title>
-    </head>
-
-    <body>
-        
-        <div class="table" state="closed">
-
-        </div>
-
-        <div class="topbar" style="height: auto;">
-            <div class="top-buttons">
-                <button id="newgame" class="top-button" onclick="game.lobby.newGame()"></button>
-                <button id="settings" class="top-button" onclick="game.lobby.mobileSettings(game.settings)"></button>
-                <button id="reset" class="top-button" onclick="game.reset()"></button>
-            </div>
-
-            <div class="new-game" style="display: none;"></div>
-
-            <div class="settings mobile-settings" style="display: none;">
-            </div>
-            
-            <div class="status"></div>
-        </div>
-
-        <div class="lobby">
-
-            <div class="server">
-                <span style="font-weight: 700;" class="status">Connecting</span>
-                <span class="addr"></span>
-            </div>
-
-            <div class="content">
-
-                <div class="games">
-                </div>
-
-                <div class="info">
-                    <div class="stats">
-                        <div>
-                            <span>Game Name:</span><span id="game">-</span>
-                        </div>
-
-                        <div>
-                            <span>Packs Available:</span><span id="packs">-</span>
-                        </div>
-                        
-                        <div>
-                            <span>Players Online:</span><span id="online">-</span>
-                        </div>
-
-                        <div>
-                            <span>Players In Game:</span><span id="ingame">-</span>
-                        </div>
-
-                        <div>
-                            <span>Public Games:</span><span id="pubgame">-</span>
-                        </div>
-                    </div>
-
-                    <div class="settings" >
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="chat">
-            <button class="toggle-chat">Toggle Chat</button>
-
-            <div class="chat-select">
-            </div>
-
-            <div class="chat-text">
-            </div>
-
-            <div class="chat-input">
-                <input type="text" placeholder="Chat..."/>
-                <button>Send</button>
-            </div>
-        </div>
-
-        <script>
-            var params = new URLSearchParams((new URL(window.location)).search);
-            var game = new Client(params.get("s"), params.get("g"));
-            setTimeout(game.init.bind(game), 100);
-        </script>
-    </body>
+		<link id="theme" rel="stylesheet" type="text/css" href="styles/themes/colors-base.css">
+
+		<link rel="icon" sizes="32x32" href="images/wc-icon-32.png">
+		<link rel="icon" sizes="48x48" href="images/wc-icon-48.png">
+		<link rel="icon" sizes="96x96" href="images/wc-icon-96.png">
+		<link rel="icon" sizes="144x144" href="images/wc-icon-144.png">
+		<link rel="icon" sizes="288x288" href="images/wc-icon-288.png">
+
+		<script src="scripts/cookie.js"></script>
+		<script src="scripts/theme.js"></script>
+
+		<script src="scripts/cards/card.js"></script>
+		<script src="scripts/cards/deck.js"></script>
+		<script src="scripts/cards/drag.js"></script>
+
+		<script src="scripts/gui/input.js"></script>
+		<script src="scripts/gui/lobby.js"></script>
+		<script src="scripts/gui/table.js"></script>
+		<script src="scripts/gui/chat.js"></script>
+
+		<script src="scripts/socket/message.js"></script>
+		<script src="scripts/socket/sock.js"></script>
+
+		<script src="scripts/client.js"></script>
+
+		<title>WebCards - Client</title>
+	</head>
+
+	<body>
+		
+		<div class="table" state="closed">
+
+		</div>
+
+		<div class="topbar" style="height: auto;">
+			<div class="top-buttons">
+				<button id="newgame" class="top-button" onclick="game.lobby.newGame()"></button>
+				<button id="settings" class="top-button" onclick="game.lobby.mobileSettings(game.settings)"></button>
+				<button id="reset" class="top-button" onclick="game.reset()"></button>
+			</div>
+
+			<div class="new-game" style="display: none;"></div>
+
+			<div class="settings mobile-settings" style="display: none;">
+			</div>
+			
+			<div class="status"></div>
+		</div>
+
+		<div class="lobby">
+
+			<div class="server">
+				<span style="font-weight: 700;" class="status">Connecting</span>
+				<span class="addr"></span>
+			</div>
+
+			<div class="content">
+
+				<div class="games">
+				</div>
+
+				<div class="info">
+					<div class="stats">
+						<div>
+							<span>Game Name:</span><span id="game">-</span>
+						</div>
+
+						<div>
+							<span>Packs Available:</span><span id="packs">-</span>
+						</div>
+						
+						<div>
+							<span>Players Online:</span><span id="online">-</span>
+						</div>
+
+						<div>
+							<span>Players In Game:</span><span id="ingame">-</span>
+						</div>
+
+						<div>
+							<span>Public Games:</span><span id="pubgame">-</span>
+						</div>
+					</div>
+
+					<div class="settings" >
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="chat">
+			<button class="toggle-chat">Toggle Chat</button>
+
+			<div class="chat-select">
+			</div>
+
+			<div class="chat-text">
+			</div>
+
+			<div class="chat-input">
+				<input type="text" placeholder="Chat..."/>
+				<button>Send</button>
+			</div>
+		</div>
+
+		<script>
+			var params = new URLSearchParams((new URL(window.location)).search);
+			var game = new Client(params.get("s"), params.get("g"));
+			setTimeout(game.init.bind(game), 100);
+		</script>
+	</body>
 
 </html>
 \ No newline at end of file
diff --git a/scripts/cards/card.js b/scripts/cards/card.js
index 884e0d9..43dc965 100644
--- a/scripts/cards/card.js
+++ b/scripts/cards/card.js
@@ -7,114 +7,114 @@ const CardPos = ["top", "topl", "topr", "mid", "midt", "midb", "bot", "botl", "b
 // Every card should have a deck.
 // Use deck.appendCard or deck.prependCard to make a card visible
 class Card {
-    constructor (id, data)
-    {
-        this.e = document.createElement("card");
-        this.generateElements(data);
-        this.e.style.left = "0px";
-        this.e.style.top = "0px";
-
-        this.getID = function() {
-            return id;
-        }
-    }
-
-    // Generate a card with basic text only
-    static generateBasicCard (data, el)
-    {
-        let t = document.createElement("carea");
-        t.className = "mid";
-        t.innerText = data;
-        el.appendChild(t);
-    }
-
-    // Generate a card with a simple error message.
-    static generateErrorCard (el)
-    {
-        Card.generateBasicCard("Card Error: data", el);
-    }
-
-    // Generate an area of a card
-    static generateCArea (data, carea, assetURL)
-    {
-        // Create and set area
-        let area = document.createElement("carea");
-        area.className = carea;
-
-        // Create inner area text and images
-        for (let i in data)
-        {
-            if (i == "style")
-            {
-                for (j in data.style) 
-                    area.style[j] = data.style[j];
-            }
-            
-            if (data[i].type == "text")
-            {
-                let e = document.createElement("ctext");
-
-                e.innerText = data[i].text;
-
-                for (let j in data[i].style)
-                    e.style[j] = data[i].style[j];
-
-                area.appendChild(e);
-
-            }
-            else if (data[i].type == "image")
-            {
-                let e = document.createElement("cimage");
-
-                e.style.backgroundImage = "url(\"" + assetURL + data[i].image + "\")";
-                
-                for (let j in data[i].style)
-                    e.style[j] = data[i].style[j];
-
-                area.appendChild(e);
-            }
-        }
-
-        return area;
-    }
-
-    // Generate a card with rich visuals
-    static generateObjectCard (data, el)
-    {
-        // Generate card areas.
-        for (let i in CardPos)
-        {
-            if (typeof data[CardPos[i]] == "object")
-                el.appendChild(this.generateCArea(data[CardPos[i]], CardPos[i], data.assetURL));
-        }
-    }
-
-    generateElements (data)
-    {
-        while(this.e.firstElementChild != null)
-            this.e.firstElementChild.remove();
-
-        switch (typeof data)
-        {
-            case "object":
-                Card.generateObjectCard(data, this.e);
-                break;
-            case "string":
-                Card.generateBasicCard(data, this.e);
-                break;
-            default:
-                Card.generateErrorCard(this.e);
-        }
-    }
-
-    setPos (p)
-    {
-        this.e.style.setProperty("--cpos", p);
-    }
-
-    resetPos()
-    {
-        this.e.style.left = "0px";
-        this.e.style.top = "0px";
-    }
+	constructor (id, data)
+	{
+		this.e = document.createElement("card");
+		this.generateElements(data);
+		this.e.style.left = "0px";
+		this.e.style.top = "0px";
+
+		this.getID = function() {
+			return id;
+		}
+	}
+
+	// Generate a card with basic text only
+	static generateBasicCard (data, el)
+	{
+		let t = document.createElement("carea");
+		t.className = "mid";
+		t.innerText = data;
+		el.appendChild(t);
+	}
+
+	// Generate a card with a simple error message.
+	static generateErrorCard (el)
+	{
+		Card.generateBasicCard("Card Error: data", el);
+	}
+
+	// Generate an area of a card
+	static generateCArea (data, carea, assetURL)
+	{
+		// Create and set area
+		let area = document.createElement("carea");
+		area.className = carea;
+
+		// Create inner area text and images
+		for (let i in data)
+		{
+			if (i == "style")
+			{
+				for (j in data.style) 
+					area.style[j] = data.style[j];
+			}
+			
+			if (data[i].type == "text")
+			{
+				let e = document.createElement("ctext");
+
+				e.innerText = data[i].text;
+
+				for (let j in data[i].style)
+					e.style[j] = data[i].style[j];
+
+				area.appendChild(e);
+
+			}
+			else if (data[i].type == "image")
+			{
+				let e = document.createElement("cimage");
+
+				e.style.backgroundImage = "url(\"" + assetURL + data[i].image + "\")";
+				
+				for (let j in data[i].style)
+					e.style[j] = data[i].style[j];
+
+				area.appendChild(e);
+			}
+		}
+
+		return area;
+	}
+
+	// Generate a card with rich visuals
+	static generateObjectCard (data, el)
+	{
+		// Generate card areas.
+		for (let i in CardPos)
+		{
+			if (typeof data[CardPos[i]] == "object")
+				el.appendChild(this.generateCArea(data[CardPos[i]], CardPos[i], data.assetURL));
+		}
+	}
+
+	generateElements (data)
+	{
+		while(this.e.firstElementChild != null)
+			this.e.firstElementChild.remove();
+
+		switch (typeof data)
+		{
+			case "object":
+				Card.generateObjectCard(data, this.e);
+				break;
+			case "string":
+				Card.generateBasicCard(data, this.e);
+				break;
+			default:
+				Card.generateErrorCard(this.e);
+		}
+	}
+
+	setPos (p)
+	{
+		this.e.style.setProperty("--cpos", p);
+	}
+
+	resetPos()
+	{
+		this.e.style.left = "0px";
+		this.e.style.top = "0px";
+	}
 }
diff --git a/scripts/cards/deck.js b/scripts/cards/deck.js
index 4800e54..caa62bc 100644
--- a/scripts/cards/deck.js
+++ b/scripts/cards/deck.js
@@ -4,175 +4,175 @@
 // Can be arranged in multiple ways.
 // Decks work as FIFO
 class Deck {
-    
-    cards = [];
-    inf = false;
-    smode = "";
-    sct = 0;
-    x = 0;
-    y = 0;
-    e = null;
-
-    constructor(id, options = {mode: "stack", smode: "one", sct: 0, pos: [0, 0]})
-    {
-        // View mode
-        //  infdraw - infinite draw. always appears as if there are multiple cards
-        //  stack - stack mode
-        //  strip
-        //      horizontal
-        //          left (strip-hl)
-        //          right (strip-hr)
-        //      vertical
-        //          up (strip-vu)
-        //          down (strip-vd)
-        this.inf = options.mode == "infdraw";
-
-        // Select mode - controls what other cards are selected when one card is selected
-        //  above - selectes cards above the selected one
-        //  below - selects cards below the selected one
-        //  around - selects cards above and below
-        //  one - selects only card chosen
-        //  all - selects all cards when card selected
-        this.smode = options.smode;
-        
-        // Select count (negative defaults to 0)
-        //  above - controls number of cards above clicked are selected
-        //  below - controls number of cards below clicked are selected
-        //  around
-        //      number - number above and below selected
-        //      array - [first number: number above selected] [second number: number below selected]
-        //  one - no effect
-        //  all - no effect
-        this.sct = options.sct > 0 ? options.sct : 0;
-        
-        this.e = document.createElement("deck");
-
-        // x and y values are on a scale from 0 to 1, 0 being top left, 1 being bottom right.
-        this.e.style.setProperty("--x", options.pos[0]);
-        this.e.style.setProperty("--y", options.pos[1]);
-        
-        this.e.setAttribute("mode", options.mode);
-
-        this.getID = function() {
-            return id;
-        }
-    }
-
-    updatePos()
-    {
-        let len = this.cards.length - 1;
-        for(let i in this.cards)
-            this.cards[i].setPos(len-i);
-        this.updateCount();
-    }
-
-    appendCard(card)
-    {
-        this.cards.push(card);
-        this.e.appendChild(card.e);
-        this.updatePos();
-    }
-
-    prependCard(card)
-    {
-        this.cards.unshift(card);
-        this.e.prepend(card.e);
-        card.setPos(this.cards.length - 1);
-        this.updateCount();
-    }
-
-    addCardAt(card, index)
-    {
-        if(index < 0 || index > this.cards.length)
-            return
-        
-        if(index == 0) {
-            this.prependCard(card);
-        } else if (index == this.cards.length) {
-            this.appendCard(card);
-        } else {
-            let temp = this.cards.slice(0, index);
-            temp[temp.length - 1].e.after(card.e);
-            temp.push(card);
-            this.cards.unshift(...temp);
-            this.updatePos();
-        }
-    }
-
-    swapCards(index1, index2)
-    {
-        if(index1 < 0 || index1 >= this.cards.length || index2 < 0 || index2 >= this.cards.length)
-            return
-        
-        var temp = this.cards[index1]
-        this.cards[index1] = this.cards[index2];
-        this.cards[index2] = temp;
-
-        this.cards[index1 - 1].e.after(this.cards[index1]);
-        this.cards[index2 - 1].e.after(this.cards[index2]);
-    }
-
-    removeCard(index)
-    {
-        if(index < 0 || index >= this.cards.length)
-            return
-
-        this.e.removeChild(this.cards[index].e);
-        let c = this.cards.splice(index, 1)[0];
-
-        this.updatePos();
-        return c;
-    }
-
-    removeCardByID(id)
-    {
-        for(let i in this.cards)
-        {
-            if(this.cards[i].getID() == id)
-                return this.removeCard(i);
-        }
-
-        return null;
-    }
-
-    removeFront()
-    {
-        return this.removeCard(this.cards.length - 1);
-    }
-
-    removeBack()
-    {
-        return this.removeCard(0);
-    }
-
-    updateCount ()
-    {
-        this.e.style.setProperty("--ccount", this.cards.length - 1);
-    }
-
-    isInside(x, y)
-    {
-        var rect = this.e.getBoundingClientRect();
-        return (x > rect.left && x < rect.right && y > rect.top && y < rect.bottom)
-    }
-
-    checkCard (el)
-    {
-        for(let c of this.cards)
-        {
-            if(c.e === el)
-                return c;
-        }
-        return null;
-    }
-
-    hasCard(id)
-    {
-        for(let c of this.cards)
-        {
-            if(c.getID() === id)
-                return c;
-        }
-        return null;
-    }
+
+	cards = [];
+	inf = false;
+	smode = "";
+	sct = 0;
+	x = 0;
+	y = 0;
+	e = null;
+
+	constructor(id, options = {mode: "stack", smode: "one", sct: 0, pos: [0, 0]})
+	{
+		// View mode
+		//  infdraw - infinite draw. always appears as if there are multiple cards
+		//  stack - stack mode
+		//  strip
+		//      horizontal
+		//          left (strip-hl)
+		//          right (strip-hr)
+		//      vertical
+		//          up (strip-vu)
+		//          down (strip-vd)
+		this.inf = options.mode == "infdraw";
+
+		// Select mode - controls what other cards are selected when one card is selected
+		//  above - selectes cards above the selected one
+		//  below - selects cards below the selected one
+		//  around - selects cards above and below
+		//  one - selects only card chosen
+		//  all - selects all cards when card selected
+		this.smode = options.smode;
+		
+		// Select count (negative defaults to 0)
+		//  above - controls number of cards above clicked are selected
+		//  below - controls number of cards below clicked are selected
+		//  around
+		//      number - number above and below selected
+		//      array - [first number: number above selected] [second number: number below selected]
+		//  one - no effect
+		//  all - no effect
+		this.sct = options.sct > 0 ? options.sct : 0;
+		
+		this.e = document.createElement("deck");
+
+		// x and y values are on a scale from 0 to 1, 0 being top left, 1 being bottom right.
+		this.e.style.setProperty("--x", options.pos[0]);
+		this.e.style.setProperty("--y", options.pos[1]);
+		
+		this.e.setAttribute("mode", options.mode);
+
+		this.getID = function() {
+			return id;
+		}
+	}
+
+	updatePos()
+	{
+		let len = this.cards.length - 1;
+		for(let i in this.cards)
+			this.cards[i].setPos(len-i);
+		this.updateCount();
+	}
+
+	appendCard(card)
+	{
+		this.cards.push(card);
+		this.e.appendChild(card.e);
+		this.updatePos();
+	}
+
+	prependCard(card)
+	{
+		this.cards.unshift(card);
+		this.e.prepend(card.e);
+		card.setPos(this.cards.length - 1);
+		this.updateCount();
+	}
+
+	addCardAt(card, index)
+	{
+		if(index < 0 || index > this.cards.length)
+			return
+		
+		if(index == 0) {
+			this.prependCard(card);
+		} else if (index == this.cards.length) {
+			this.appendCard(card);
+		} else {
+			let temp = this.cards.slice(0, index);
+			temp[temp.length - 1].e.after(card.e);
+			temp.push(card);
+			this.cards.unshift(...temp);
+			this.updatePos();
+		}
+	}
+
+	swapCards(index1, index2)
+	{
+		if(index1 < 0 || index1 >= this.cards.length || index2 < 0 || index2 >= this.cards.length)
+			return
+		
+		var temp = this.cards[index1]
+		this.cards[index1] = this.cards[index2];
+		this.cards[index2] = temp;
+
+		this.cards[index1 - 1].e.after(this.cards[index1]);
+		this.cards[index2 - 1].e.after(this.cards[index2]);
+	}
+
+	removeCard(index)
+	{
+		if(index < 0 || index >= this.cards.length)
+			return
+
+		this.e.removeChild(this.cards[index].e);
+		let c = this.cards.splice(index, 1)[0];
+
+		this.updatePos();
+		return c;
+	}
+
+	removeCardByID(id)
+	{
+		for(let i in this.cards)
+		{
+			if(this.cards[i].getID() == id)
+				return this.removeCard(i);
+		}
+
+		return null;
+	}
+
+	removeFront()
+	{
+		return this.removeCard(this.cards.length - 1);
+	}
+
+	removeBack()
+	{
+		return this.removeCard(0);
+	}
+
+	updateCount ()
+	{
+		this.e.style.setProperty("--ccount", this.cards.length - 1);
+	}
+
+	isInside(x, y)
+	{
+		var rect = this.e.getBoundingClientRect();
+		return (x > rect.left && x < rect.right && y > rect.top && y < rect.bottom)
+	}
+
+	checkCard (el)
+	{
+		for(let c of this.cards)
+		{
+			if(c.e === el)
+				return c;
+		}
+		return null;
+	}
+
+	hasCard(id)
+	{
+		for(let c of this.cards)
+		{
+			if(c.getID() === id)
+				return c;
+		}
+		return null;
+	}
 }
diff --git a/scripts/cards/drag.js b/scripts/cards/drag.js
index 807e0c5..1014656 100644
--- a/scripts/cards/drag.js
+++ b/scripts/cards/drag.js
@@ -1,152 +1,152 @@
 'use strict';
 
 class MultiDrag extends EventTarget {
-    del = false;
-    drag = [];
-    mouse = [null, null];
-
-    constructor(ret = false) {
-        super();
-
-        window.addEventListener("mousemove", this.update.bind(this));
-        window.addEventListener("mouseup", this.stopDraggingAll.bind(this));
-        document.body.addEventListener("mouseleave", this.stopDraggingAll.bind(this));
-
-        this.ret = ret;
-    }
-
-    addDragEl(el, ox, oy, px, py, pt) {
-        if(this.del)
-            return;
-    
-        el.style.transitionDuration = "0s";
-        
-        let push = {
-            e: el,
-            osx: ox,
-            osy: oy,
-            ptd: pt
-        };
-
-        if(this.ret) {
-            push.prx = px;
-            push.pry = py;
-        }
-
-        this.drag.push(push);
-    
-        return push;
-    }
-
-    dragging(e) {
-        for(let i in this.drag) {
-            if(this.drag[i].e == e)
-                return true;
-        }
-        return false;
-    }
-
-    startDragging(e) {
-        if(this.del)
-            return;
-    
-        console.log(e);
-    
-        if(e.button != 0)
-            return;
-
-        var cap = new Event("dragstart");
-        
-        cap.drag = this.addDragEl(
-            e.target,
-            e.pageX - parseInt(e.target.style.left),
-            e.pageY - parseInt(e.target.style.top),
-            e.target.style.left,
-            e.target.style.top,
-            e.target.style.transitionDuration
-        );
-
-        this.dispatchEvent(cap);
-    }
-    
-    stopDragging(i) {
-        if(this.del)
-            return;
-        
-        this.del = true;
-    
-        if (i < 0 || i >= this.drag.length)
-            return;
-        
-        var cap = new Event("dragstop");
-        cap.x = this.mouse[0];
-        cap.y = this.mouse[1];
-        
-        this.drag[i].e.style.transitionDuration = this.drag[i].ptd;
-
-        if(this.ret) {
-            this.drag[i].e.style.left = this.drag[i].prx;
-            this.drag[i].e.style.top = this.drag[i].pry;
-        }
-
-        cap.drag = this.drag.splice(i, 1);
-    
-        this.del = false;
-
-        this.dispatchEvent(cap);
-    }
-
-    stopDraggingEl(el) {
-        for(let d of this.drag) {
-            if(d.e === el)
-                this.stopDragging(this.drag.indexOf(d));
-        }
-    }
-
-    stopDraggingAll() {
-        if(this.del)
-            return;
-        
-        this.del = true;
-        
-        var cap = new Event("dragstop");
-
-        cap.x = this.mouse[0];
-        cap.y = this.mouse[1];
-
-        cap.drag = [];
-        
-        while (this.drag.length > 0) {
-            this.drag[0].e.style.transitionDuration = this.drag[0].ptd;
-
-            if(this.ret) {
-                this.drag[0].e.style.left = this.drag[0].prx;
-                this.drag[0].e.style.top = this.drag[0].pry;
-            }
-    
-            cap.drag.push(this.drag.shift());
-        }
-    
-        this.del = false;
-
-        this.dispatchEvent(cap);
-    }
-
-    update(e) {
-        this.mouse[0] = e.pageX;
-        this.mouse[1] = e.pageY;
-
-        for (let i = 0; i < this.drag.length && !this.del; i++) {
-            this.drag[i].e.style.left = e.pageX - this.drag[i].osx + "px";
-            this.drag[i].e.style.top = e.pageY - this.drag[i].osy + "px";
-        }
-    }
-
-    addTarget(e) {
-        e.addEventListener("mousedown", this.startDragging.bind(this));
-    }
-
-    removeTarget (e) {
-        e.removeEventListener("mousedown", this.startDragging.bind(this));
-    }
+	del = false;
+	drag = [];
+	mouse = [null, null];
+
+	constructor(ret = false) {
+		super();
+
+		window.addEventListener("mousemove", this.update.bind(this));
+		window.addEventListener("mouseup", this.stopDraggingAll.bind(this));
+		document.body.addEventListener("mouseleave", this.stopDraggingAll.bind(this));
+
+		this.ret = ret;
+	}
+
+	addDragEl(el, ox, oy, px, py, pt) {
+		if(this.del)
+			return;
+
+		el.style.transitionDuration = "0s";
+		
+		let push = {
+			e: el,
+			osx: ox,
+			osy: oy,
+			ptd: pt
+		};
+
+		if(this.ret) {
+			push.prx = px;
+			push.pry = py;
+		}
+
+		this.drag.push(push);
+
+		return push;
+	}
+
+	dragging(e) {
+		for(let i in this.drag) {
+			if(this.drag[i].e == e)
+				return true;
+		}
+		return false;
+	}
+
+	startDragging(e) {
+		if(this.del)
+			return;
+
+		console.log(e);
+
+		if(e.button != 0)
+			return;
+
+		var cap = new Event("dragstart");
+		
+		cap.drag = this.addDragEl(
+			e.target,
+			e.pageX - parseInt(e.target.style.left),
+			e.pageY - parseInt(e.target.style.top),
+			e.target.style.left,
+			e.target.style.top,
+			e.target.style.transitionDuration
+		);
+
+		this.dispatchEvent(cap);
+	}
+
+	stopDragging(i) {
+		if(this.del)
+			return;
+		
+		this.del = true;
+
+		if (i < 0 || i >= this.drag.length)
+			return;
+		
+		var cap = new Event("dragstop");
+		cap.x = this.mouse[0];
+		cap.y = this.mouse[1];
+		
+		this.drag[i].e.style.transitionDuration = this.drag[i].ptd;
+
+		if(this.ret) {
+			this.drag[i].e.style.left = this.drag[i].prx;
+			this.drag[i].e.style.top = this.drag[i].pry;
+		}
+
+		cap.drag = this.drag.splice(i, 1);
+
+		this.del = false;
+
+		this.dispatchEvent(cap);
+	}
+
+	stopDraggingEl(el) {
+		for(let d of this.drag) {
+			if(d.e === el)
+				this.stopDragging(this.drag.indexOf(d));
+		}
+	}
+
+	stopDraggingAll() {
+		if(this.del)
+			return;
+		
+		this.del = true;
+		
+		var cap = new Event("dragstop");
+
+		cap.x = this.mouse[0];
+		cap.y = this.mouse[1];
+
+		cap.drag = [];
+		
+		while (this.drag.length > 0) {
+			this.drag[0].e.style.transitionDuration = this.drag[0].ptd;
+
+			if(this.ret) {
+				this.drag[0].e.style.left = this.drag[0].prx;
+				this.drag[0].e.style.top = this.drag[0].pry;
+			}
+
+			cap.drag.push(this.drag.shift());
+		}
+
+		this.del = false;
+
+		this.dispatchEvent(cap);
+	}
+
+	update(e) {
+		this.mouse[0] = e.pageX;
+		this.mouse[1] = e.pageY;
+
+		for (let i = 0; i < this.drag.length && !this.del; i++) {
+			this.drag[i].e.style.left = e.pageX - this.drag[i].osx + "px";
+			this.drag[i].e.style.top = e.pageY - this.drag[i].osy + "px";
+		}
+	}
+
+	addTarget(e) {
+		e.addEventListener("mousedown", this.startDragging.bind(this));
+	}
+
+	removeTarget (e) {
+		e.removeEventListener("mousedown", this.startDragging.bind(this));
+	}
 }
 \ No newline at end of file
diff --git a/scripts/client.js b/scripts/client.js
index 07e2fce..c612175 100644
--- a/scripts/client.js
+++ b/scripts/client.js
@@ -2,44 +2,39 @@
 const VERSION = "1.0.0";
 
 const DefaultUserOps = {
-    a: {
-        type: "color",
-        title: "Player Color",
-        args: ["#ff0000"]
-    },
-    b: {
-        type: "text",
-        title: "Player Name",
-        args: ["User " + Math.floor(Math.random() * 10000), ""]
-    },
-    d: {
-        type: "checkbox",
-        title: "Order Check (D)",
-        args: []
-    },
-    c: {
-        type: "checkbox",
-        title: "Order Check (C)",
-        args: []
-    }
+	color: {
+		type: "color",
+		title: "Player Color",
+		args: ["#ff0000"]
+	},
+	name: {
+		type: "text",
+		title: "Player Name",
+		args: ["User " + Math.floor(Math.random() * 10000), ""]
+	}
 }
 
 const DefaultGameOps = {
-    a: {
-        type: "checkbox",
-        title: "Unlisted",
-        args: []
-    },
-    b: {
-        type: "checkbox",
-        title: "Use Password",
-        args: []
-    },
-    c: {
-        type: "text",
-        title: "Set Password",
-        args: [Math.floor(Math.random() * 10000), ""]
-    }
+	name: {
+		type:"text",
+		title: "Room Name",
+		args: ["", ""]
+	},
+	hidden: {
+		type: "checkbox",
+		title: "Unlisted",
+		args: []
+	},
+	usePass: {
+		type: "checkbox",
+		title: "Use Password",
+		args: []
+	},
+	pass: {
+		type: "text",
+		title: "Set Password",
+		args: [Math.floor(Math.random() * 10000), ""]
+	}
 }
 
 // Client acts as the message hub for the whole game.
@@ -47,162 +42,170 @@ const DefaultGameOps = {
 // Client also performs the handshake for first starting the connection and messages everyone if the connection errors or closes.
 class Client{
 
-    constructor (serveraddr, game)
-    {
-        this.socket = new SockWorker(serveraddr, VERSION);
-        this.socket.addEventListener("error", this.socketError.bind(this));
-        this.socket.addEventListener("closed", this.socketClose.bind(this));
-        this.socket.addEventListener("handshake", this.handshake.bind(this));
-        this.socket.addEventListener("menu", this.menu.bind(this));
-        this.socket.addEventListener("game", this.game.bind(this));
+	constructor (serveraddr, game)
+	{
+		this.socket = new SockWorker(serveraddr, VERSION);
+		this.socket.addEventListener("error", this.socketError.bind(this));
+		this.socket.addEventListener("closed", this.socketClose.bind(this));
+		this.socket.addEventListener("handshake", this.handshake.bind(this));
+		this.socket.addEventListener("menu", this.menu.bind(this));
+		this.socket.addEventListener("game", this.game.bind(this));
 		this.socket.addEventListener("chat", this.chat.bind(this));
 
-        this.lobby = new Lobby(document.getElementsByClassName("lobby")[0], this.socket);
-
-        this.drag = new MultiDrag();
-        
-        this.table = new Table(document.getElementsByClassName("table")[0], this.drag, this.socket);
-
-        this.chat = new Chat(document.getElementsByClassName("chat")[0], this.socket);
-        this.chat.addChannel("Global");
-        this.chat.switchChannel("Global");
-
-        this.settings = new Settings(DefaultUserOps);
-        this.settings.putSettings(this.lobby.e.settings);
-
-        this.gameOptions = new Settings(DefaultGameOps);
-        this.gameOptions.putSettings(this.lobby.top.newGame);
-
-        this.game = game;
-    }
-
-    // Initialize the connection
-    init ()
-    {
-        this.socket.init();
-    }
-
-    // Callbacks for if the socket fails or closes
-
-    socketError() {
-        this.lobby.setState("Error", "closed", this.socket.server);
-        this.table.handleClose();
-    }
-
-    socketClose() {
-        this.lobby.setState("Closed", "closed", this.socket.server);
-        this.table.handleClose();
-    }
-
-    // Callback when negotiating with the server for the first time and we are determining versions
-    handshake (m)
-    {
-        switch (m.type) {
-            case "verr":
-                this.socket.close();
-                
-                alert(`Error connecting to server: version of client (${this.version}) not accepted.`);
-                
-                console.error(`Error connecting to server: version of client (${this.version}) not accepted.`);
-                
-                console.error(m.data);
-                
-                return;
-
-            case "ready":
-                this.settings.cleanup();
-                this.gameOptions.cleanup();
-                
-                this.settings = new Settings(m.data.user);
-                this.gameOptions = new Settings(m.data.game);
-
-                this.gameOptions.putSettings(this.lobby.top.newGame);
-                
-                if(this.lobby.top.mobileSettingsOpen())
-                    this.settings.putSettings(this.lobby.top.mobileSettings);
-                else
-                    this.settings.putSettings(this.lobby.e.settings);
-                
-                this.socket.send("ready", "");
-                
-                return;
-        }
-    }
-
-    // Menu switch, called when in the lobby and a message arrives from the server
-    menu (m)
-    {
-        switch (m.type) {
-            case "plist":
-                this.lobby.packList(m.data);
-                break;
-            case "glist":
-                this.lobby.gameList(m.data, this.game);
-                this.game = null;
-                break;
-            case "players":
-                this.lobby.players(m.data);
-                break;
-            case "gdel":
-                this.lobby.removeGame(m.data);
-                break;
-            case "gadd":
-                this.lobby.addGame(m.data);
-                break;
-            case "pdel":
-                this.lobby.removePlayer(m.data);
-                break;
-            case "padd":
-                this.lobby.addPlayer(m.data);
-                break;
-            case "pmove":
-                this.lobby.movePlayer(m.data);
-                break;
-        }
-    }
-
-    // Game switch, called when in game and a message arrives from the server
-    game (m)
-    {
-        switch (m.type) {
-            case "move":
-                this.table.moveByID(m.data.card, m.data.deck, m.data.pos);
-                break;
-        }
-    }
-
-    // Callback when a chat event is recieved from the server
-    chat (m)
-    {
-        switch (m.type) {
-            case "delchan":
-                this.chat.deleteChannel(m.data);
-                break;
-            case "newchan":
-                this.chat.addChannel(m.data);
-                break;
-            
-            case "message":
-                this.chat.recieveMessage(m.data.type, m.data.data);
-        }
-    }
-
-    // Reset the lobby and table, then attempt to reopen the connection to the server.
-    reset ()
-    {
-        this.lobby.reset();
-        this.table.reset();
-
-        this.socket.init();
-    }
-
-    joinGame(id)
-    {
-        this.table.openTable();
-    }
-
-    leaveGame()
-    {
-        
-    }
+		this.lobby = new Lobby(document.getElementsByClassName("lobby")[0], this.socket);
+
+		this.drag = new MultiDrag();
+		
+		this.table = new Table(document.getElementsByClassName("table")[0], this.drag, this.socket);
+
+		this.chat = new Chat(document.getElementsByClassName("chat")[0], this.socket);
+		this.chat.addChannel("Global");
+		this.chat.switchChannel("Global");
+
+		this.settings = new Settings(DefaultUserOps);
+		this.settings.putSettings(this.lobby.e.settings);
+
+		this.gameOptions = new Settings(DefaultGameOps);
+		this.gameOptions.putSettings(this.lobby.top.newGame);
+
+		this.game = game;
+	}
+
+	// Initialize the connection
+	init ()
+	{
+		this.socket.init();
+	}
+
+	// Callbacks for if the socket fails or closes
+
+	socketError() {
+		alert("Connection error");
+		this.lobby.setState("Error", "closed", this.socket.server);
+		this.table.handleClose();
+	}
+
+	socketClose() {
+		alert("Connection closed by server");
+		this.lobby.setState("Closed", "closed", this.socket.server);
+		this.table.handleClose();
+	}
+
+	// Callback when negotiating with the server for the first time and we are determining versions
+	handshake (e)
+	{
+		let m = e.detail;
+		switch (m.type) {
+			case "verr":
+				this.socket.close();
+				
+				alert(`Error connecting to server: version of client (${this.version}) not accepted.`);
+				
+				console.error(`Error connecting to server: version of client (${this.version}) not accepted.`);
+				
+				console.error(m.data);
+				
+				return;
+
+			case "ready":
+				console.log(`Handshake with server OK.  Running client version ${this.version}`);
+
+				this.settings.cleanup();
+				this.gameOptions.cleanup();
+				
+				this.settings = new Settings(m.data.user);
+				this.gameOptions = new Settings(m.data.game);
+
+				this.gameOptions.putSettings(this.lobby.top.newGame);
+				
+				if(this.lobby.top.mobileSettingsOpen())
+					this.settings.putSettings(this.lobby.top.mobileSettings);
+				else
+					this.settings.putSettings(this.lobby.e.settings);
+				
+				this.socket.send("ready", "");
+				
+				return;
+		}
+	}
+
+	// Menu switch, called when in the lobby and a message arrives from the server
+	menu (e)
+	{
+		let m = e.detail;
+		switch (m.type) {
+			case "plist":
+				this.lobby.packList(m.data);
+				break;
+			case "glist":
+				this.lobby.gameList(m.data, this.game);
+				this.game = null;
+				break;
+			case "players":
+				this.lobby.players(m.data);
+				break;
+			case "gdel":
+				this.lobby.removeGame(m.data);
+				break;
+			case "gadd":
+				this.lobby.addGame(m.data);
+				break;
+			case "pdel":
+				this.lobby.removePlayer(m.data);
+				break;
+			case "padd":
+				this.lobby.addPlayer(m.data);
+				break;
+			case "pmove":
+				this.lobby.movePlayer(m.data);
+				break;
+		}
+	}
+
+	// Game switch, called when in game and a message arrives from the server
+	game (e)
+	{
+		let m = e.detail;
+		switch (m.type) {
+			case "move":
+				this.table.moveByID(m.data.card, m.data.deck, m.data.pos);
+				break;
+		}
+	}
+
+	// Callback when a chat event is recieved from the server
+	chat (e)
+	{
+		let m = e.detail;
+		switch (m.type) {
+			case "delchan":
+				this.chat.deleteChannel(m.data);
+				break;
+			case "newchan":
+				this.chat.addChannel(m.data);
+				break;
+			
+			case "message":
+				this.chat.recieveMessage(m.data.type, m.data.data);
+		}
+	}
+
+	// Reset the lobby and table, then attempt to reopen the connection to the server.
+	reset ()
+	{
+		this.lobby.reset();
+		this.table.reset();
+
+		this.socket.init();
+	}
+
+	joinGame(id)
+	{
+		this.table.openTable();
+	}
+
+	leaveGame()
+	{
+		
+	}
 }
diff --git a/scripts/cookie.js b/scripts/cookie.js
index 44a0be9..9c88963 100644
--- a/scripts/cookie.js
+++ b/scripts/cookie.js
@@ -1,36 +1,36 @@
 'use strict';
 
 class Cookies {
-    static getCookie(name){
-        let cookies = document.cookie.split(";");
-        for(let i in cookies) {
-            let cname = cookies[i].trim().split("=")[0];
-            if(cname == name){
-                return cookies[i].trim().slice(name.length + 1);
-            }
-        }
-        return "";
-    }
+	static getCookie(name){
+		let cookies = document.cookie.split(";");
+		for(let i in cookies) {
+			let cname = cookies[i].trim().split("=")[0];
+			if(cname == name){
+				return cookies[i].trim().slice(name.length + 1);
+			}
+		}
+		return "";
+	}
 
-    static setCookie(name, value, data = {SameSite: "Strict"}) {
-        let extra = "";
+	static setCookie(name, value, data = {SameSite: "Strict"}) {
+		let extra = "";
 
-        for(let key in data)
-        {
-            extra += "; " + key + "=" + data[key];
-        }
+		for(let key in data)
+		{
+			extra += "; " + key + "=" + data[key];
+		}
 
-        document.cookie = name + "=" + value + extra;
-    }
+		document.cookie = name + "=" + value + extra;
+	}
 
-    static setYearCookie(name, value) {
-        var date = new Date(Date.now());
-        date.setFullYear(date.getFullYear() + 1);
-        Cookies.setCookie(name, value, {SameSite: "Strict", expires: date.toUTCString()});
-    }
+	static setYearCookie(name, value) {
+		var date = new Date(Date.now());
+		date.setFullYear(date.getFullYear() + 1);
+		Cookies.setCookie(name, value, {SameSite: "Strict", expires: date.toUTCString()});
+	}
 
-    static removeCookie(name) {
-        var date = new Date(0);
-        Cookies.setCookie(name, "", {SameSite: "Strict", expires: date.toUTCString()});
-    }
+	static removeCookie(name) {
+		var date = new Date(0);
+		Cookies.setCookie(name, "", {SameSite: "Strict", expires: date.toUTCString()});
+	}
 }
diff --git a/scripts/gui/chat.js b/scripts/gui/chat.js
index dda541e..f3b0975 100644
--- a/scripts/gui/chat.js
+++ b/scripts/gui/chat.js
@@ -1,102 +1,102 @@
 'use strict';
 
 class Chat {
-    constructor(e, soc)
-    {
-        this.chats = [];
-        this.root = e;
+	constructor(e, soc)
+	{
+		this.chats = [];
+		this.root = e;
 		this.socket = soc;
-        e.getElementsByClassName("toggle-chat")[0].onclick = this.toggle.bind(this);
+		e.getElementsByClassName("toggle-chat")[0].onclick = this.toggle.bind(this);
 		let cin = e.getElementsByClassName("chat-input")[0];
 		this.chatInput = cin.children[0];
 
 		cin.children[0].addEventListener("keydown", this.checkEnter.bind(this));
 		cin.children[1].addEventListener("click", this.sendMessage.bind(this));
-    }
-
-    getChannel (name)
-    {
-        for(let i in this.chats)
-        {
-            if (this.chats[i].name == name)
-            {
-                return this.chats[i];
-            }
-        }
-
-        return null;
-    }
-
-    isActive (name)
-    {
-        for(let i in this.chats)
-        {
-            if (this.chats[i].name == name)
-            {
-                if(this.chats[i].btn.getAttribute("active") == "true")
-                    return true;
-                return false;
-            }
-        }
-
-        return false;
-    }
-
-    addChannel (name, follow = true)
-    {
-        if(this.getChannel(name) != null)
-            return;
-
-        let d = document.createElement("div");
-        let b = document.createElement("button");
-
-        this.root.getElementsByClassName("chat-select")[0].appendChild(b);
-
-        b.setAttribute("active", false);
-
-        b.onclick = this.switchChannel.bind(this, name);
-
-        b.innerText = name;
-
-        d.className = "chat-text";
-
-        this.chats.push({name: name, e: d, btn: b});
-
-        if(follow)
-            this.switchChannel(name)
-    }
-
-    getActiveChannel ()
-    {
-        for(let i in this.chats)
-        {
-            if (this.chats[i].btn.getAttribute("active") == "true")
-            {
-                return this.chats[i];
-            }
-        }
-
-        return null;
-    }
-
-    switchChannel (name)
-    {
-        let c = this.getChannel(name);
-        
-        if(c == null)
-            return;
-
-        if(this.getActiveChannel() != null)
-            this.getActiveChannel().btn.setAttribute("active", false);
-
-        c.btn.setAttribute("active", true);
-        var ct = this.root.getElementsByClassName("chat-text")[0];
-        ct.replaceWith(c.e);
-
-        c.e.scroll({
-            top: c.e.scrollTopMax
-        });
-    }
+	}
+
+	getChannel (name)
+	{
+		for(let i in this.chats)
+		{
+			if (this.chats[i].name == name)
+			{
+				return this.chats[i];
+			}
+		}
+
+		return null;
+	}
+
+	isActive (name)
+	{
+		for(let i in this.chats)
+		{
+			if (this.chats[i].name == name)
+			{
+				if(this.chats[i].btn.getAttribute("active") == "true")
+					return true;
+				return false;
+			}
+		}
+
+		return false;
+	}
+
+	addChannel (name, follow = true)
+	{
+		if(this.getChannel(name) != null)
+			return;
+
+		let d = document.createElement("div");
+		let b = document.createElement("button");
+
+		this.root.getElementsByClassName("chat-select")[0].appendChild(b);
+
+		b.setAttribute("active", false);
+
+		b.onclick = this.switchChannel.bind(this, name);
+
+		b.innerText = name;
+
+		d.className = "chat-text";
+
+		this.chats.push({name: name, e: d, btn: b});
+
+		if(follow)
+			this.switchChannel(name)
+	}
+
+	getActiveChannel ()
+	{
+		for(let i in this.chats)
+		{
+			if (this.chats[i].btn.getAttribute("active") == "true")
+			{
+				return this.chats[i];
+			}
+		}
+
+		return null;
+	}
+
+	switchChannel (name)
+	{
+		let c = this.getChannel(name);
+		
+		if(c == null)
+			return;
+
+		if(this.getActiveChannel() != null)
+			this.getActiveChannel().btn.setAttribute("active", false);
+
+		c.btn.setAttribute("active", true);
+		var ct = this.root.getElementsByClassName("chat-text")[0];
+		ct.replaceWith(c.e);
+
+		c.e.scroll({
+			top: c.e.scrollTopMax
+		});
+	}
 
 	checkEnter(e)
 	{
@@ -113,67 +113,67 @@ class Chat {
 
 	}
 
-    recieveMessage (channel, msg)
-    {
-        let c = this.getChannel(channel);
-        
-        if(c == null)
-            return;
-        
-        let autoscroll = c.e.scrollTop == c.e.scrollTopMax;
-
-        let csp = document.createElement("span")
-        let tsp = document.createElement("span");
-
-        if(msg.server === true){
-            csp.style.color = "white";
-            csp.style.backgroundColor = "black";
-            csp.innerText = "[SERVER]";
-            tsp.innerText = " " + msg.text;
-        } else {
-            csp.style.color = msg.color;
-            csp.innerText = msg.user + ": ";
-            tsp.innerText = msg.text;
-        }
-        
-        let d = document.createElement("div");
-        d.appendChild(csp);
-        d.appendChild(tsp);
-
-        c.e.appendChild(d);
-
-        if(autoscroll)
-            c.e.scroll({top: c.e.scrollTopMax});
-    }
-
-    clearChannel (name)
-    {
-        let c = this.getChannel(name);
-        if(c == null)
-            return;
-        
-        while(c.e.firstElementChild != null)
-            c.e.firstElementChild.remove();
-    }
-
-    deleteChannel (name)
-    {
-        let c = this.getChannel(name);
-        if(c == null)
-            return;
-        
-        while(c.e.firstElementChild != null)
-            c.e.firstElementChild.remove();
-        
-        c.btn.remove();
-
-        this.chats.splice(this.chats.indexOf(c), 1);
-    }
-
-    toggle () {
-        if(this.root.getAttribute("show") != "true")
-            this.root.setAttribute("show", "true");
-        else
-            this.root.setAttribute("show", "false");
-    }
+	recieveMessage (channel, msg)
+	{
+		let c = this.getChannel(channel);
+		
+		if(c == null)
+			return;
+		
+		let autoscroll = c.e.scrollTop == c.e.scrollTopMax;
+
+		let csp = document.createElement("span")
+		let tsp = document.createElement("span");
+
+		if(msg.server === true){
+			csp.style.color = "white";
+			csp.style.backgroundColor = "black";
+			csp.innerText = "[SERVER]";
+			tsp.innerText = " " + msg.text;
+		} else {
+			csp.style.color = msg.color;
+			csp.innerText = msg.user + ": ";
+			tsp.innerText = msg.text;
+		}
+		
+		let d = document.createElement("div");
+		d.appendChild(csp);
+		d.appendChild(tsp);
+
+		c.e.appendChild(d);
+
+		if(autoscroll)
+			c.e.scroll({top: c.e.scrollTopMax});
+	}
+
+	clearChannel (name)
+	{
+		let c = this.getChannel(name);
+		if(c == null)
+			return;
+		
+		while(c.e.firstElementChild != null)
+			c.e.firstElementChild.remove();
+	}
+
+	deleteChannel (name)
+	{
+		let c = this.getChannel(name);
+		if(c == null)
+			return;
+		
+		while(c.e.firstElementChild != null)
+			c.e.firstElementChild.remove();
+		
+		c.btn.remove();
+
+		this.chats.splice(this.chats.indexOf(c), 1);
+	}
+
+	toggle () {
+		if(this.root.getAttribute("show") != "true")
+			this.root.setAttribute("show", "true");
+		else
+			this.root.setAttribute("show", "false");
+	}
 }
diff --git a/scripts/gui/input.js b/scripts/gui/input.js
index a44784b..ddaa4a3 100644
--- a/scripts/gui/input.js
+++ b/scripts/gui/input.js
@@ -2,239 +2,239 @@
 
 //Mostly fixed now
 class MakeInput {
-    static createInput(type = "text", wrap = false, getset = true)
-    {
-        var el = document.createElement("input");
-        el.setAttribute("type", type);
-
-        if(wrap)
-        {
-            return this.wrapInputs(type, el);
-        }
-
-        if(getset) {
-            el.getValue = function () {
-                return this.value;
-            }
-
-            el.setValue = function(value) {
-                this.value = value
-            }
-        }
-
-        return el;
-    }
-
-    // Function deprecated, finding another way to do this
-    static inputLabel(text, id)
-    {
-        var el = document.createElement("label");
-        el.innerText = text;
-        if(typeof id == "string")
-            el.setAttribute("for", id);
-        return el;
-    }
-
-    static colorInput (value) {
-        var el = MakeInput.createInput("color", true);
-        el.setValue(value);
-        return el;
-    }
-
-    static textInput (value, placeholder)
-    {
-        var el = MakeInput.createInput("text");
-        el.setAttribute("placeholder", placeholder);
-        el.value = value;
-        return el;
-    }
-
-    static numberInput (value)
-    {
-        var el = MakeInput.createInput("number");
-        el.value = value;
-        return el;
-    }
-
-    static fileInput (accepts = "", multiple = false) {
-        var el = MakeInput.createInput("file", true, false);
-        
-        let e = el.getElement();
-        e.setAttribute("accepts", accepts);
-        e.multiple = multiple;
-        el.getValue = function() {
-            return e.files;
-        }
-        
-        el.setAttribute("data-files", "Choose a file");
-
-        el.firstElementChild.onchange = function () {
-            let text = "";
-            switch (this.files.length) {
-                case 0:
-                    text = "Choose a file";
-                    break;
-                case 1:
-                    text = "File: " + this.files[0].name;
-                    break;
-                default:
-                    text = "Files: " + this.files[0].name + "...";
-                    break;
-            }
-            el.setAttribute("data-files", text);
-        }
-
-        return el;
-    }
-
-    static checkboxInput (value = false) {
-        var el = MakeInput.createInput("checkbox", false, false);
-
-        el.getValue = function() {
-            return el.checked;
-        }
-
-        el.setValue = function(check) {
-            el.checked = check;
-        }
-
-        el.setValue(value);
-        
-        return el;
-    }
-
-    static radio (value, group, checked = false) {
-        var el = MakeInput.createInput("radio", false, false);
-        el.setAttribute("name", group);
-        el.setAttribute("value", value);
-        if(checked)
-            el.checked = true;
-        return el;
-    }
-
-    static radioInput (values, names, group, prompt = "Select One", select = 0) {
-
-        let toWrap = [];
-
-        for(let i = 0; i < values.length; i++) {
-            toWrap.push(MakeInput.inputLabel(names[i]));
-            if(i == select)
-                toWrap.push(MakeInput.radio(values[i], group, true));
-            else
-                toWrap.push(MakeInput.radio(values[i], group, false));
-            toWrap.push(document.createElement("br"));
-        }
-
-        var wrapper = MakeInput.wrapInputs("radio", ...toWrap);
-
-        wrapper.setAttribute("data-prompt", prompt);
-
-        wrapper.getValue = function() {
-            for(let i = 0; i < this.children.length; i++){
-                if(this.children[i].checked)
-                    return this.children[i].value;
-            }
-        };
-
-        wrapper.setValue = function(value) {
-            for(let i = 0; i < this.children.length; i++){
-                if(this.children[i].value == value){
-                    this.children[i].checked = true;
-                    return;
-                }
-            }
-        };
-
-        return wrapper;
-    }
-
-    static wrapInputs (type, ...el) {
-
-        var wrapper = document.createElement("div");
-        wrapper.className = "input-container";
-        wrapper.setAttribute("type", type);
-
-        for(let i = 0; i < el.length; i++)
-        {
-            wrapper.appendChild(el[i]);
-        }
-
-        if(el.length == 1)
-        {
-            wrapper.getValue = function () {return el[0].value;}
-    
-            wrapper.setValue = function(value) {el[0].value = value;}
-
-            wrapper.onclick = el[0].click.bind(el[0]);
-
-            wrapper.getElement = function(){return el[0];}
-        }
-
-        return wrapper;
-    }
-
-    static selectOption (value, text, index, selected) {
-        var so = document.createElement("div");
-        so.innerText = text;
-        so.selectValue = value;
-        so.selectIndex = index;
-        so.addEventListener("mousedown", MakeInput.selOption.bind(null, so));
-
-        if(selected === true)
-            so.setAttribute("selected", true);
-
-        return so
-    }
-
-    static selectInput (values, names, select = 0) {
-        var se = document.createElement("div");
-        se.className = "input-select";
-        se.setAttribute("tabindex", 0);
-        se.setAttribute("selected", select);
-
-        for(let i in names)
-        {
-            se.appendChild(MakeInput.selectOption(values[i], names[i], i, i == select));
-        }
-        
-        var wrapper = MakeInput.wrapInputs("select", se);
-        wrapper.getValue = MakeInput.selValue.bind(null, se);
+	static createInput(type = "text", wrap = false, getset = true)
+	{
+		var el = document.createElement("input");
+		el.setAttribute("type", type);
+
+		if(wrap)
+		{
+			return this.wrapInputs(type, el);
+		}
+
+		if(getset) {
+			el.getValue = function () {
+				return this.value;
+			}
+
+			el.setValue = function(value) {
+				this.value = value
+			}
+		}
+
+		return el;
+	}
+
+	// Function deprecated, finding another way to do this
+	static inputLabel(text, id)
+	{
+		var el = document.createElement("label");
+		el.innerText = text;
+		if(typeof id == "string")
+			el.setAttribute("for", id);
+		return el;
+	}
+
+	static colorInput (value) {
+		var el = MakeInput.createInput("color", true);
+		el.setValue(value);
+		return el;
+	}
+
+	static textInput (value, placeholder)
+	{
+		var el = MakeInput.createInput("text");
+		el.setAttribute("placeholder", placeholder);
+		el.value = value;
+		return el;
+	}
+
+	static numberInput (value)
+	{
+		var el = MakeInput.createInput("number");
+		el.value = value;
+		return el;
+	}
+
+	static fileInput (accepts = "", multiple = false) {
+		var el = MakeInput.createInput("file", true, false);
+		
+		let e = el.getElement();
+		e.setAttribute("accepts", accepts);
+		e.multiple = multiple;
+		el.getValue = function() {
+			return e.files;
+		}
+		
+		el.setAttribute("data-files", "Choose a file");
+
+		el.firstElementChild.onchange = function () {
+			let text = "";
+			switch (this.files.length) {
+				case 0:
+					text = "Choose a file";
+					break;
+				case 1:
+					text = "File: " + this.files[0].name;
+					break;
+				default:
+					text = "Files: " + this.files[0].name + "...";
+					break;
+			}
+			el.setAttribute("data-files", text);
+		}
+
+		return el;
+	}
+
+	static checkboxInput (value = false) {
+		var el = MakeInput.createInput("checkbox", false, false);
+
+		el.getValue = function() {
+			return el.checked;
+		}
+
+		el.setValue = function(check) {
+			el.checked = check;
+		}
+
+		el.setValue(value);
+		
+		return el;
+	}
+
+	static radio (value, group, checked = false) {
+		var el = MakeInput.createInput("radio", false, false);
+		el.setAttribute("name", group);
+		el.setAttribute("value", value);
+		if(checked)
+			el.checked = true;
+		return el;
+	}
+
+	static radioInput (values, names, group, prompt = "Select One", select = 0) {
+
+		let toWrap = [];
+
+		for(let i = 0; i < values.length; i++) {
+			toWrap.push(MakeInput.inputLabel(names[i]));
+			if(i == select)
+				toWrap.push(MakeInput.radio(values[i], group, true));
+			else
+				toWrap.push(MakeInput.radio(values[i], group, false));
+			toWrap.push(document.createElement("br"));
+		}
+
+		var wrapper = MakeInput.wrapInputs("radio", ...toWrap);
+
+		wrapper.setAttribute("data-prompt", prompt);
+
+		wrapper.getValue = function() {
+			for(let i = 0; i < this.children.length; i++){
+				if(this.children[i].checked)
+					return this.children[i].value;
+			}
+		};
+
+		wrapper.setValue = function(value) {
+			for(let i = 0; i < this.children.length; i++){
+				if(this.children[i].value == value){
+					this.children[i].checked = true;
+					return;
+				}
+			}
+		};
+
+		return wrapper;
+	}
+
+	static wrapInputs (type, ...el) {
+
+		var wrapper = document.createElement("div");
+		wrapper.className = "input-container";
+		wrapper.setAttribute("type", type);
+
+		for(let i = 0; i < el.length; i++)
+		{
+			wrapper.appendChild(el[i]);
+		}
+
+		if(el.length == 1)
+		{
+			wrapper.getValue = function () {return el[0].value;}
+
+			wrapper.setValue = function(value) {el[0].value = value;}
+
+			wrapper.onclick = el[0].click.bind(el[0]);
+
+			wrapper.getElement = function(){return el[0];}
+		}
+
+		return wrapper;
+	}
+
+	static selectOption (value, text, index, selected) {
+		var so = document.createElement("div");
+		so.innerText = text;
+		so.selectValue = value;
+		so.selectIndex = index;
+		so.addEventListener("mousedown", MakeInput.selOption.bind(null, so));
+
+		if(selected === true)
+			so.setAttribute("selected", true);
+
+		return so
+	}
+
+	static selectInput (values, names, select = 0) {
+		var se = document.createElement("div");
+		se.className = "input-select";
+		se.setAttribute("tabindex", 0);
+		se.setAttribute("selected", select);
+
+		for(let i in names)
+		{
+			se.appendChild(MakeInput.selectOption(values[i], names[i], i, i == select));
+		}
+		
+		var wrapper = MakeInput.wrapInputs("select", se);
+		wrapper.getValue = MakeInput.selValue.bind(null, se);
 		wrapper.getIndex = MakeInput.selIndex.bind(null, se);
 		wrapper.addOption = MakeInput.selAdd.bind(se);
 		wrapper.removeOption = MakeInput.selRem.bind(se);
 		wrapper.setIndex = MakeInput.selSet.bind(se);
-        wrapper.setAttribute("tabindex", 0);
+		wrapper.setAttribute("tabindex", 0);
+
+		return wrapper;
+	}
 
-        return wrapper;
-    }
+	static selValue (el) {
+		let sel = parseInt(el.getAttribute("selected"));
+			
+		if(typeof sel != "undefined") {
+			return el.children[sel].selectValue;
+		}
 
-    static selValue (el) {
-        let sel = parseInt(el.getAttribute("selected"));
-            
-        if(typeof sel != "undefined") {
-            return el.children[sel].selectValue;
-        }
-    
-        return "";
-    }
+		return "";
+	}
 
 	static selIndex (el) {
 		return parseInt(el.getAttribute("selected"));
 	}
-    
-    static selOption (el, dispatch = true) {
-        let sn = el.selectIndex;
-        let psn = parseInt(el.parentElement.getAttribute("selected"));
-    
-        if(Number.isInteger(psn) && psn < el.parentElement.childElementCount)
-            el.parentElement.children[psn].setAttribute("selected", false);
-    
-        el.parentElement.setAttribute("selected", sn);
-        el.setAttribute("selected", true);
+
+	static selOption (el, dispatch = true) {
+		let sn = el.selectIndex;
+		let psn = parseInt(el.parentElement.getAttribute("selected"));
+
+		if(Number.isInteger(psn) && psn < el.parentElement.childElementCount)
+			el.parentElement.children[psn].setAttribute("selected", false);
+
+		el.parentElement.setAttribute("selected", sn);
+		el.setAttribute("selected", true);
 
 		if(dispatch)
 			el.parentElement.parentElement.dispatchEvent(new InputEvent("change"));
-    }
+	}
 
 	static selSet (index) {
 		MakeInput.selOption(this.children[index], false);
@@ -258,71 +258,71 @@ class MakeInput {
 		return true;
 	}
 
-    static titleWrap(el, title) {
-        var wrapper = document.createElement("div");
-        wrapper.className = "input-title-wrapper";
-        wrapper.setAttribute("type", el.getAttribute("type"));
-        wrapper.setAttribute("data-title", title);
-        
-        wrapper.appendChild(el);
-
-        if(el.getAttribute("type") == "checkbox")
-        {
-            wrapper.onclick = el.click.bind(el);
-        }
-
-        return wrapper;
-    }
+	static titleWrap(el, title) {
+		var wrapper = document.createElement("div");
+		wrapper.className = "input-title-wrapper";
+		wrapper.setAttribute("type", el.getAttribute("type"));
+		wrapper.setAttribute("data-title", title);
+		
+		wrapper.appendChild(el);
+
+		if(el.getAttribute("type") == "checkbox")
+		{
+			wrapper.onclick = el.click.bind(el);
+		}
+
+		return wrapper;
+	}
 }
 
 // Mostly fixed now
 class Settings {
-    constructor (template = {})
-    {
-        this.settings = Settings.genSettings(template);
-
-        this.wrappers = {};
-    }
-
-    static genSettings (template)
-    {
-        var out = {};
-
-        for(let key in template)
-        {
-            if(typeof MakeInput[template[key].type+"Input"] != null)
-                out[key] = {el: MakeInput[template[key].type+"Input"](...template[key].args), title: template[key].title};
-        }
-        
-        return out;
-    }
-
-    getSettings ()
-    {
-        var out = {};
-
-        for(let key in this.settings)
-            out[key] = this.settings[key].el.getValue();
-        
-        return out;
-    }
-
-    putSettings (el)
-    {
-        this.cleanup();
-
-        this.wrappers = {};
-
-        for(let key in this.settings) {
-            this.wrappers[key] = MakeInput.titleWrap(this.settings[key].el, this.settings[key].title)
-            el.appendChild(this.wrappers[key]);
-        }
-            
-    }
-
-    cleanup ()
-    {
-        for(let key in this.wrappers)
-            this.wrappers[key].remove();
-    }
+	constructor (template = {})
+	{
+		this.settings = Settings.genSettings(template);
+
+		this.wrappers = {};
+	}
+
+	static genSettings (template)
+	{
+		var out = {};
+
+		for(let key in template)
+		{
+			if(typeof MakeInput[template[key].type+"Input"] != null)
+				out[key] = {el: MakeInput[template[key].type+"Input"](...template[key].args), title: template[key].title};
+		}
+		
+		return out;
+	}
+
+	getSettings ()
+	{
+		var out = {};
+
+		for(let key in this.settings)
+			out[key] = this.settings[key].el.getValue();
+		
+		return out;
+	}
+
+	putSettings (el)
+	{
+		this.cleanup();
+
+		this.wrappers = {};
+
+		for(let key in this.settings) {
+			this.wrappers[key] = MakeInput.titleWrap(this.settings[key].el, this.settings[key].title)
+			el.appendChild(this.wrappers[key]);
+		}
+			
+	}
+
+	cleanup ()
+	{
+		for(let key in this.wrappers)
+			this.wrappers[key].remove();
+	}
 }
diff --git a/scripts/gui/table.js b/scripts/gui/table.js
index 9aac2ae..e242ac6 100644
--- a/scripts/gui/table.js
+++ b/scripts/gui/table.js
@@ -1,143 +1,143 @@
 'use strict';
 // Table represents and manages the actual game.  It accepts inputs from the server and tries to query the server when the player makes a move.
 class Table{
-    constructor(e, drag, socket) {
-        this.root = e;
-        this.drag = drag;
-
-        drag.addEventListener("dragstart", (e) => {console.log(e)});
-        drag.addEventListener("dragstop", this.dragMsg.bind(this));
-
-        this.socket = socket;
-
-        this.decks = [];
-    }
-
-    openTable ()
-    {
-        let state = this.root.getAttribute("state")
-        if((state == "close" || state == "closed") && state != "") {
-            this.root.setAttribute("state", "closed");
-            setTimeout(this.root.setAttribute.bind(this.root), 50, "state", "open");
-        }
-    }
-
-    closeTable ()
-    {
-        let state = this.root.getAttribute("state")
-        if(state != "close" && state != "closed") {
-            this.root.setAttribute("state", "");
-            setTimeout(this.root.setAttribute.bind(this.root), 50, "state", "close");
-        }
-    }
-
-    handleClose ()
-    {
-        this.reset();
-    }
-
-    reset ()
-    {
-        while(this.root.firstElementChild != null)
-            this.root.firstElementChild.remove();
-        
-        this.decks = [];
-
-        this.closeTable();
-        this.drag.stopDraggingAll();
-    }
-
-    /*   Deck and card functions   */
-    newDeck(id, options)
-    {
-        var d = new Deck(id, options);
-        this.decks.push(d);
-        this.root.appendChild(d.e);
-    }
-
-    newCard(id, data, deck = 0)
-    {
-        var c = new Card(id, data);
-        this.decks[deck].appendCard(c);
-        this.drag.addTarget(c.e);
-    }
-
-    checkDeck(x, y)
-    {
-        for(let d of this.decks)
-        {
-            if(d.isInside(x, y))
-                return d;
-        }
-        return null;
-    }
-
-    checkCard (el)
-    {
-        for(let d of this.decks)
-        {
-            let c = d.checkCard(el);
-            if(c !== null)
-                return c;
-        }
-        return null;
-    }
-
-    moveCard(card, newDeck, index = -1)
-    {
-        for(let d of this.decks)
-        {
-            if (d.removeCardByID(card.getID()) !== null)
-                break;
-        }
-        card.resetPos();
-
-        if(index < 0)
-            newDeck.appendCard(card);
-        else
-            newDeck.addCardAt(card, index);
-    }
-
-    moveByID(cardID, deckID, index = -1)
-    {
-        let card, deck;
-        for(let d of this.decks)
-        {
-            let c = d.hasCard(cardID)
-            if(c !== null)
-                card = c;
-            
-            if(d.getID() == deckID)
-                deck = d;
-        }
-
-        this.moveCard(card, deck, index);
-    }
-
-    checkMove(cardID, deckID, index = -1)
-    {
-        this.socket.send("game", {type: "move", card: cardID, deck: deckID, pos: index});
-    }
-
-    dragCheck(cap)
-    {
-        console.log(cap);
-    }
-
-    dragMsg (event)
-    {
-        if(event.drag.length < 1)
-            return;
-
-        var c = this.checkCard(event.drag[0].e);
-        var d = this.checkDeck(event.x, event.y);
-
-        if(c !== null)
-        {
-            if(d !== null)
-                this.checkMove(c.getID(), d.getID());
-            else
-                c.resetPos();
-        }
-    }
+	constructor(e, drag, socket) {
+		this.root = e;
+		this.drag = drag;
+
+		drag.addEventListener("dragstart", (e) => {console.log(e)});
+		drag.addEventListener("dragstop", this.dragMsg.bind(this));
+
+		this.socket = socket;
+
+		this.decks = [];
+	}
+
+	openTable ()
+	{
+		let state = this.root.getAttribute("state")
+		if((state == "close" || state == "closed") && state != "") {
+			this.root.setAttribute("state", "closed");
+			setTimeout(this.root.setAttribute.bind(this.root), 50, "state", "open");
+		}
+	}
+
+	closeTable ()
+	{
+		let state = this.root.getAttribute("state")
+		if(state != "close" && state != "closed") {
+			this.root.setAttribute("state", "");
+			setTimeout(this.root.setAttribute.bind(this.root), 50, "state", "close");
+		}
+	}
+
+	handleClose ()
+	{
+		this.reset();
+	}
+
+	reset ()
+	{
+		while(this.root.firstElementChild != null)
+			this.root.firstElementChild.remove();
+		
+		this.decks = [];
+
+		this.closeTable();
+		this.drag.stopDraggingAll();
+	}
+
+	/*   Deck and card functions   */
+	newDeck(id, options)
+	{
+		var d = new Deck(id, options);
+		this.decks.push(d);
+		this.root.appendChild(d.e);
+	}
+
+	newCard(id, data, deck = 0)
+	{
+		var c = new Card(id, data);
+		this.decks[deck].appendCard(c);
+		this.drag.addTarget(c.e);
+	}
+
+	checkDeck(x, y)
+	{
+		for(let d of this.decks)
+		{
+			if(d.isInside(x, y))
+				return d;
+		}
+		return null;
+	}
+
+	checkCard (el)
+	{
+		for(let d of this.decks)
+		{
+			let c = d.checkCard(el);
+			if(c !== null)
+				return c;
+		}
+		return null;
+	}
+
+	moveCard(card, newDeck, index = -1)
+	{
+		for(let d of this.decks)
+		{
+			if (d.removeCardByID(card.getID()) !== null)
+				break;
+		}
+		card.resetPos();
+
+		if(index < 0)
+			newDeck.appendCard(card);
+		else
+			newDeck.addCardAt(card, index);
+	}
+
+	moveByID(cardID, deckID, index = -1)
+	{
+		let card, deck;
+		for(let d of this.decks)
+		{
+			let c = d.hasCard(cardID)
+			if(c !== null)
+				card = c;
+			
+			if(d.getID() == deckID)
+				deck = d;
+		}
+
+		this.moveCard(card, deck, index);
+	}
+
+	checkMove(cardID, deckID, index = -1)
+	{
+		this.socket.send("game", {type: "move", card: cardID, deck: deckID, pos: index});
+	}
+
+	dragCheck(cap)
+	{
+		console.log(cap);
+	}
+
+	dragMsg (event)
+	{
+		if(event.drag.length < 1)
+			return;
+
+		var c = this.checkCard(event.drag[0].e);
+		var d = this.checkDeck(event.x, event.y);
+
+		if(c !== null)
+		{
+			if(d !== null)
+				this.checkMove(c.getID(), d.getID());
+			else
+				c.resetPos();
+		}
+	}
 }
diff --git a/scripts/socket/message.js b/scripts/socket/message.js
index 044027d..0288cbc 100644
--- a/scripts/socket/message.js
+++ b/scripts/socket/message.js
@@ -1,18 +1,18 @@
 'use strict';
 
 class Message{
-    constructor (type, data)
-    {
-        this.t = type;
-        this.d = data;
-    }
+	constructor (type, data)
+	{
+		this.t = type;
+		this.d = data;
+	}
 
-    stringify ()
-    {
-        var dat = this.d
-        if(typeof dat !== "string"){
-            dat = JSON.stringify(dat);
-        }
-        return JSON.stringify({type: this.t, data: dat});
-    }
+	stringify ()
+	{
+		var dat = this.d
+		if(typeof dat !== "string"){
+			dat = JSON.stringify(dat);
+		}
+		return JSON.stringify({type: this.t, data: dat});
+	}
 }
diff --git a/scripts/socket/sock.js b/scripts/socket/sock.js
index 36e28bc..0a04b63 100644
--- a/scripts/socket/sock.js
+++ b/scripts/socket/sock.js
@@ -1,71 +1,71 @@
 'use strict';
 // A wrapper around the wrapper 
 class SockWorker extends EventTarget{
-    constructor (serveraddr, version)
-    {
-        super();
+	constructor (serveraddr, version)
+	{
+		super();
 
-        this.server = serveraddr;
-        this.version = version;
-    }
+		this.server = serveraddr;
+		this.version = version;
+	}
 
-    // Initialize the connection.
-    init () {
-        if(this.server == "" || this.server == null) {
-            return;
-        }
-        try {
-            this.socket = new WebSocket(this.server);
+	// Initialize the connection.
+	init () {
+		if(this.server == "" || this.server == null) {
+			return;
+		}
+		try {
+			this.socket = new WebSocket(this.server);
 
-            this.socket.addEventListener("open", this.o.bind(this));
-            this.socket.addEventListener("message", this.msg.bind(this));
+			this.socket.addEventListener("open", this.o.bind(this));
+			this.socket.addEventListener("message", this.msg.bind(this));
 
-            this.socket.addEventListener("closed", this.c.bind(this));
-            this.socket.addEventListener("error", this.err.bind(this));
-        } catch (e) {
-            this.err();
-        }
-    }
+			this.socket.addEventListener("closed", this.c.bind(this));
+			this.socket.addEventListener("error", this.err.bind(this));
+		} catch (e) {
+			this.err();
+		}
+	}
 
-    // Called when the connection connects to the server
-    o () {
-        this.send("version", this.version);
-    }
+	// Called when the connection connects to the server
+	o () {
+		this.send("version", this.version);
+	}
 
-    // Called when the connection gets a message from the server
-    // Attempts to turn the message into a usable object and pass it to the callback
-    msg (e) {
-        if(typeof e.data == "string") {
-            var dat = JSON.parse(e.data)
-            this.dispatchEvent(new Event(dat.type, dat.data));
-        }
-    }
+	// Called when the connection gets a message from the server
+	// Attempts to turn the message into a usable object and pass it to the callback
+	msg (e) {
+		if(typeof e.data == "string") {
+			var dat = JSON.parse(e.data);
+			this.dispatchEvent(new CustomEvent(dat.type, {detail: dat.data}));
+		}
+	}
 
-    // Called when the connection closes.
-    // Passes a close object to the callback.
-    c () {
-        this.dispatchEvent(new Event("closed"));
-    }
+	// Called when the connection closes.
+	// Passes a close object to the callback.
+	c () {
+		this.dispatchEvent(new Event("closed"));
+	}
 
-    // Called when the connection encounters an error.
-    // Passes an error to the callback
-    err () {
-        this.dispatchEvent(new Event("error"));
-    }
-    
-    // Call to close the connection to the server
-    close () {
-        this.socket.close();
-    }
+	// Called when the connection encounters an error.
+	// Passes an error to the callback
+	err () {
+		this.dispatchEvent(new Event("error"));
+	}
 
-    // Send a message to the server
-    send (type, data) {
-        var m = new Message(type, data);
-        this.socket.send(m.stringify())
-    }
+	// Call to close the connection to the server
+	close () {
+		this.socket.close();
+	}
 
-    // Raw message the server
-    sendRaw (s) {
-        this.socket.send(s)
-    }
+	// Send a message to the server
+	send (type, data) {
+		var m = new Message(type, data);
+		this.socket.send(m.stringify())
+	}
+
+	// Raw message the server
+	sendRaw (s) {
+		this.socket.send(s)
+	}
 }
diff --git a/scripts/theme.js b/scripts/theme.js
index b9dcb37..886a3a1 100644
--- a/scripts/theme.js
+++ b/scripts/theme.js
@@ -10,11 +10,11 @@ const BASE_THEMES = [[
 ]];
 
 class Theme{
-    static theme = document.getElementById("theme");
+	static theme = document.getElementById("theme");
 	static UserThemes = [[],[]];
 
-    static init()
-    {
+	static init()
+	{
 		let uth = Cookies.getCookie("userThemes").split(',');
 
 		for (let i = 1; i < uth.length; i += 2)
@@ -23,22 +23,22 @@ class Theme{
 			this.UserThemes[1].push(uth[i]);
 		}
 
-        if(Cookies.getCookie("theme") == ""){
-            Cookies.setYearCookie("theme", "styles/themes/colors-base.css");
-        }
-    }
+		if(Cookies.getCookie("theme") == ""){
+			Cookies.setYearCookie("theme", "styles/themes/colors-base.css");
+		}
+	}
 
-    static restore()
-    {
-        Theme.init();
-        Theme.theme.setAttribute("href", Cookies.getCookie("theme") + "?v=" + Date.now());
-    }
+	static restore()
+	{
+		Theme.init();
+		Theme.theme.setAttribute("href", Cookies.getCookie("theme") + "?v=" + Date.now());
+	}
 
-    static set(sheet)
-    {
-        Cookies.setYearCookie("theme", sheet);
-        Theme.theme.setAttribute("href", sheet + "?v=" + Date.now());
-    }
+	static set(sheet)
+	{
+		Cookies.setYearCookie("theme", sheet);
+		Theme.theme.setAttribute("href", sheet + "?v=" + Date.now());
+	}
 
 	static setUserThemes() {
 		let out = "";
diff --git a/styles/client/base.css b/styles/client/base.css
index a0178fd..60631ce 100644
--- a/styles/client/base.css
+++ b/styles/client/base.css
@@ -1,348 +1,348 @@
 * {
-    font-family: 'Montserrat', sans-serif;
+	font-family: 'Montserrat', sans-serif;
 	transition-duration: 0.2s;
 }
 
 html, body {
-    margin: 0;
-    padding: 0;
+	margin: 0;
+	padding: 0;
 
-    min-width: 100vw;
-    min-height: 100vh;
+	min-width: 100vw;
+	min-height: 100vh;
 
-    display: block;
+	display: block;
 
-    background-color: var(--main-bg);
-    color: var(--main-color);
+	background-color: var(--main-bg);
+	color: var(--main-color);
 
-    overflow: hidden;
+	overflow: hidden;
 }
 
 /*    Topbar rules    */
 
 .topbar
 {
-    position: fixed;
+	position: fixed;
 
-    background-color: var(--gui-bg-main);
+	background-color: var(--gui-bg-main);
 
-    top: 0;
-    left: 0;
+	top: 0;
+	left: 0;
 
-    display: flex;
+	display: flex;
 
-    flex-direction: column;
+	flex-direction: column;
 
-    width: 100vw;
-    z-index: 1;
+	width: 100vw;
+	z-index: 1;
 }
 
 .top-buttons
 {
-    display: flex;
+	display: flex;
 }
 
 button.top-button
 {
-    border-radius: 0;
-    background-color: var(--top-bg-button);
-    color: var(--top-color-button);
-    flex: 1;
+	border-radius: 0;
+	background-color: var(--top-bg-button);
+	color: var(--top-color-button);
+	flex: 1;
 
-    border-left: 1px solid var(--top-border);
-    border-right: 1px solid var(--top-border);
+	border-left: 1px solid var(--top-border);
+	border-right: 1px solid var(--top-border);
 
-    transition-duration: 0.2s;
+	transition-duration: 0.2s;
 }
 
 button.top-button:hover {
-    background-color: var(--top-bg-button-hover);
-    color: var(--top-color-button-hover);
+	background-color: var(--top-bg-button-hover);
+	color: var(--top-color-button-hover);
 }
 
 button.top-button:active {
-    background-color: var(--top-bg-button-active);
-    color: var(--top-color-button-active);
+	background-color: var(--top-bg-button-active);
+	color: var(--top-color-button-active);
 }
 
 .top-buttons > button:first-child
 {
-    border-left: none;
+	border-left: none;
 }
 
 .top-buttons > button:last-child
 {
-    border-right: none;
+	border-right: none;
 }
 
 div.new-game
 {
-    flex: 1;
-    flex-grow: 1;
-    border-top: 2px solid var(--top-border);
+	flex: 1;
+	flex-grow: 1;
+	border-top: 2px solid var(--top-border);
 }
 
 div.mobile-settings
 {
-    flex: 1;
-    flex-grow: 1;
-    border-top: 2px solid var(--top-border);
+	flex: 1;
+	flex-grow: 1;
+	border-top: 2px solid var(--top-border);
 }
 
 div.topbar > div.status
 {
-    height: 5px;
-    flex-basis: auto;
+	height: 5px;
+	flex-basis: auto;
 
-    background-color: var(--server-bg-loading);
+	background-color: var(--server-bg-loading);
 }
 
 div.topbar > div.status[s=loading] {
-    background-color: var(--server-bg-loading);
+	background-color: var(--server-bg-loading);
 }
 
 div.topbar > div.status[s=ok] {
-    background-color: var(--server-bg-ok);
+	background-color: var(--server-bg-ok);
 }
 
 div.topbar > div.status[s=closed] {
-    background-color: var(--server-bg-closed);
+	background-color: var(--server-bg-closed);
 }
 
 /*    Content rules    */
 
 div.stats
 {
-    padding: 5px;
-    display: flex;
-    flex-direction: column;
+	padding: 5px;
+	display: flex;
+	flex-direction: column;
 }
 
 div.stats > div
 {
-    flex: 1;
-    display: flex;
+	flex: 1;
+	display: flex;
 }
 
 div.stats > div > span
 {
-    flex-basis: content;
-    display: inline-block;
+	flex-basis: content;
+	display: inline-block;
 }
 
 div.stats > div > span:last-child {
-    text-align: right;
-    flex: 1;
-    display: inline-block;
+	text-align: right;
+	flex: 1;
+	display: inline-block;
 }
 
 div.game {
-    background-color: var(--gui-bg-game);
-    color: var(--gui-color-game);
-    border-radius: 5px;
-    box-shadow: var(--gui-shadow-game) 3px 3px 2px;
-    box-sizing: border-box;
-    margin-bottom: 10px;
-    padding: 5px;
+	background-color: var(--gui-bg-game);
+	color: var(--gui-color-game);
+	border-radius: 5px;
+	box-shadow: var(--gui-shadow-game) 3px 3px 2px;
+	box-sizing: border-box;
+	margin-bottom: 10px;
+	padding: 5px;
 
-    display: block;
-    position: relative;
+	display: block;
+	position: relative;
 
-    text-align: left;
+	text-align: left;
 }
 
 div.game:last-child {
-    margin-bottom: none;
+	margin-bottom: none;
 }
 
 div.settings {
-    display:flex;
-    flex-direction: column;
-    padding: 5px;
-    overflow-y: auto;
+	display:flex;
+	flex-direction: column;
+	padding: 5px;
+	overflow-y: auto;
 }
 
 /*    Table rules    */
 
 .table {
-    position: absolute;
-    z-index: 2;
-    width: 100vw;
-    height: 100vh;
+	position: absolute;
+	z-index: 2;
+	width: 100vw;
+	height: 100vh;
 
-    animation-duration: 0.8s;
+	animation-duration: 0.8s;
 
-    background-color: var(--table-bg);
+	background-color: var(--table-bg);
 
-    overflow: hidden;
+	overflow: hidden;
 }
 
 .table[state=open] ,.table[state=close]{
-    animation-name: slide-in;
-    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
-    animation-iteration-count: 1;
-    animation-direction: normal;
-    animation-fill-mode: forwards;
+	animation-name: slide-in;
+	animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
+	animation-iteration-count: 1;
+	animation-direction: normal;
+	animation-fill-mode: forwards;
 }
 
 .table[state=close] {
-    animation-direction: reverse;
+	animation-direction: reverse;
 }
 
 .table[state=closed] {
-    transform: translate(0, -100vh);
-    opacity: 0;
+	transform: translate(0, -100vh);
+	opacity: 0;
 }
 
 @keyframes slide-in {
-    from {
-        transform: translate(0, -100vh);
-        opacity: 0;
-    }
+	from {
+		transform: translate(0, -100vh);
+		opacity: 0;
+	}
 
-    to {
-        transform: translate(0, 0);
-        opacity: 1;
-    }
+	to {
+		transform: translate(0, 0);
+		opacity: 1;
+	}
 }
 
 /*    Chat    */
 
 div.chat {
-    border-top-left-radius: 10px;
-    background-color: var(--chat-bg);
-    color: var(--chat-color);
+	border-top-left-radius: 10px;
+	background-color: var(--chat-bg);
+	color: var(--chat-color);
 
-    width: 50vw;
-    height: 50vh;
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    right: -50vw;
+	width: 50vw;
+	height: 50vh;
+	display: flex;
+	flex-direction: column;
+	position: absolute;
+	right: -50vw;
 
-    box-sizing: border-box;
+	box-sizing: border-box;
 
-    top: 50vh;
+	top: 50vh;
 
-    transition-duration: 0.2s;
+	transition-duration: 0.2s;
 
-    padding: 5px;
+	padding: 5px;
 
-    z-index: 4;
+	z-index: 4;
 }
 
 div.chat[show=true] {
-    right: 0;
+	right: 0;
 }
 
 button.toggle-chat {
-    position: absolute;
-    bottom: 5px;
-    left: -5px;
-    transform-origin: bottom left;
-    transform: rotate(-90deg);
+	position: absolute;
+	bottom: 5px;
+	left: -5px;
+	transform-origin: bottom left;
+	transform: rotate(-90deg);
 }
 
 div.chat > div {
-    box-sizing: border-box;
-    margin: 5px;
+	box-sizing: border-box;
+	margin: 5px;
 }
 
 div.chat-select, div.chat-input {
-    flex-basis: content;
-    display: flex;
+	flex-basis: content;
+	display: flex;
 }
 
 div.chat-text {
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 5px;
-    background-color: var(--chat-bg-text);
-    border-radius: 10px;
-    border: 5px solid rgba(0, 0, 0, 0);
+	flex: 1;
+	overflow-y: auto;
+	overflow-x: hidden;
+	padding: 5px;
+	background-color: var(--chat-bg-text);
+	border-radius: 10px;
+	border: 5px solid rgba(0, 0, 0, 0);
 }
 
 div.chat-select > button {
-    flex: 1;
+	flex: 1;
 
-    margin-right: 2px;
-    margin-left: 2px;
+	margin-right: 2px;
+	margin-left: 2px;
 }
 
 div.chat-select > button[active="false"] {
-    background-color: var(--chat-bg-inactive);
+	background-color: var(--chat-bg-inactive);
 }
 
 div.chat-select > button[active="false"]:hover {
-    background-color: var(--chat-bg-inactive-hover);
+	background-color: var(--chat-bg-inactive-hover);
 }
 
 div.chat-select > button[active="false"]:active {
-    background-color: var(--chat-bg-inactive-active);
+	background-color: var(--chat-bg-inactive-active);
 }
 
 div.chat-select > button[active="true"] {
-    background-color: var(--chat-bg-active);
+	background-color: var(--chat-bg-active);
 }
 
 div.chat-select > button[active="true"]:hover {
-    background-color: var(--chat-bg-active-hover);
+	background-color: var(--chat-bg-active-hover);
 }
 
 div.chat-select > button[active="true"]:active {
-    background-color: var(--chat-bg-active-active);
+	background-color: var(--chat-bg-active-active);
 }
 
 div.chat-select > button:first-child {
-    margin-left: 0;
+	margin-left: 0;
 }
 
 div.chat-select > button:last-child {
-    margin-right: 0;
+	margin-right: 0;
 }
 
 div.chat-input > input {
-    flex: 5;
+	flex: 5;
 
-    margin: 0;
-    margin-right: 5px;
+	margin: 0;
+	margin-right: 5px;
 
-    border-radius: 5px;
+	border-radius: 5px;
 
-    transition-duration: 0.2s;
-    border: none;
+	transition-duration: 0.2s;
+	border: none;
 
-    background-color: var(--chat-bg-input);
+	background-color: var(--chat-bg-input);
 }
 
 div.chat-input > input:hover {
-    background-color: var(--chat-bg-input-hover);
+	background-color: var(--chat-bg-input-hover);
 }
 
 div.chat-input > input:focus {
-    background-color: var(--chat-bg-input-active);
+	background-color: var(--chat-bg-input-active);
 }
 
 div.chat-input > button {
-    flex: 1;
+	flex: 1;
 }
 
 div.chat-text > div {
-    word-wrap: break-word;
-    word-break: break-all;
+	word-wrap: break-word;
+	word-break: break-all;
 }
 
 /*   Game card element   */
 
 div.game > h2 {
-    margin: 0;
+	margin: 0;
 }
 
 button.join {
-    position: absolute;
+	position: absolute;
 
-    bottom: 5px;
-    right: 5px;
+	bottom: 5px;
+	right: 5px;
 }
 
diff --git a/styles/client/card.css b/styles/client/card.css
index 0ee8f6a..b19b17a 100644
--- a/styles/client/card.css
+++ b/styles/client/card.css
@@ -1,192 +1,192 @@
 card
 {
-    position: absolute;
-    display: block;
-    width: 150px;
-    height: 230px;
-    background-color: var(--card-bg);
-    color: var(--card-color);
-    border: 2px solid var(--card-border);
-    border-radius: 10px;
-    transition-duration: 0.2s;
-    cursor: pointer;
-    flex-direction: column;
-    overflow: hidden;
-    user-select: none;
-    box-sizing: border-box;
-
-    z-index: 3;
+	position: absolute;
+	display: block;
+	width: 150px;
+	height: 230px;
+	background-color: var(--card-bg);
+	color: var(--card-color);
+	border: 2px solid var(--card-border);
+	border-radius: 10px;
+	transition-duration: 0.2s;
+	cursor: pointer;
+	flex-direction: column;
+	overflow: hidden;
+	user-select: none;
+	box-sizing: border-box;
+
+	z-index: 3;
 }
 
 card:hover
 {
-    box-shadow: 0 0 10px var(--card-hover);
+	box-shadow: 0 0 10px var(--card-hover);
 
-    z-index: 4;
+	z-index: 4;
 }
 
 card > * {
-    pointer-events: none;
+	pointer-events: none;
 }
 
 carea
 {
-    padding-left: 2px;
-    padding-right: 2px;
-    position: absolute;
-    display: flex;
-    vertical-align: middle;
-    width: 100%;
-    box-sizing: border-box;
+	padding-left: 2px;
+	padding-right: 2px;
+	position: absolute;
+	display: flex;
+	vertical-align: middle;
+	width: 100%;
+	box-sizing: border-box;
 }
 
 carea.top, carea.topl, carea.topr
 {
-    top: 0;
-    height: 8%;
-    text-align: center;
+	top: 0;
+	height: 8%;
+	text-align: center;
 }
 
 carea.topl
 {
-    width: 50%;
-    text-align: left;
+	width: 50%;
+	text-align: left;
 }
 
 carea.topr
 {
-    right: 0;
-    width: 50%;
-    text-align: right;
+	right: 0;
+	width: 50%;
+	text-align: right;
 }
 
 carea.mid
 {
-    top: 8%;
-    height: 84%;
+	top: 8%;
+	height: 84%;
 }
 
 carea.midt
 {
-    top: 8%;
-    height: 42%;
+	top: 8%;
+	height: 42%;
 }
 
 carea.midb
 {
     
-    top: 50%;
-    height: 42%;
+	top: 50%;
+	height: 42%;
 }
 
 carea.bot, carea.botl, carea.botr
 {
-    bottom: 0;
-    height: 8%;
-    text-align: center;
+	bottom: 0;
+	height: 8%;
+	text-align: center;
 }
 
 carea.botl
 {
-    width: 50%;
-    text-align: left;
+	width: 50%;
+	text-align: left;
 }
 
 carea.botr
 {
-    right: 0;
-    width: 50%;
-    text-align: right;
+	right: 0;
+	width: 50%;
+	text-align: right;
 }
 
 carea.all
 {
-    top: 0;
-    height: 100%;
+	top: 0;
+	height: 100%;
 }
 
 ctext
 {
-    display: inline-block;
-    flex: 1;
-    font-size: small;
-    height: auto;
+	display: inline-block;
+	flex: 1;
+	font-size: small;
+	height: auto;
 }
 
 cimage
 {
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: contain;
-    flex: 1;
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: contain;
+	flex: 1;
 }
 
 card[drag=true]
 {
-    z-index: 3;
+	z-index: 3;
 }
 
 /*  Deck  */
 
 deck {
-    --ccount: 0;
+	--ccount: 0;
 
-    position: absolute;
-    width: 166px;
-    height: 250px;
+	position: absolute;
+	width: 166px;
+	height: 250px;
 
-    top: calc(var(--y) * (100vh - 250px));
-    left: calc(var(--x) * (100vw - 166px));
+	top: calc(var(--y) * (100vh - 250px));
+	left: calc(var(--x) * (100vw - 166px));
 
-    overflow: visible;
+	overflow: visible;
 
-    border-radius: 10px;
+	border-radius: 10px;
 
-    transition-duration: 0.2s;
+	transition-duration: 0.2s;
 
-    border: 3px solid var(--deck-shadow);
-    box-sizing: border-box;
+	border: 3px solid var(--deck-shadow);
+	box-sizing: border-box;
 }
 
 deck:hover {
-    border: 3px solid var(--deck-hover);
+	border: 3px solid var(--deck-hover);
 }
 
 /* Deck modes */
 
 deck[mode="stack"] > card {
-    transform: translate(5px, calc(var(--cpos) * 3px + 7px));
+	transform: translate(5px, calc(var(--cpos) * 3px + 7px));
 }
 
 deck[mode="stack"] {
-    height: calc(var(--ccount) * 3px + 250px);
-    top: calc(var(--y) * (100vh - (var(--ccount) * 3px + 250px)));
+	height: calc(var(--ccount) * 3px + 250px);
+	top: calc(var(--y) * (100vh - (var(--ccount) * 3px + 250px)));
 }
 
 
 deck[mode="strip-hl"] > card {
-    transform: translate(calc(var(--ccount) * 75px + var(--cpos) * -75px + 5px), 7px);
+	transform: translate(calc(var(--ccount) * 75px + var(--cpos) * -75px + 5px), 7px);
 }
 
 deck[mode="strip-hr"] > card {
-    transform: translate(calc(var(--cpos) * 75px + 5px), 7px);
+	transform: translate(calc(var(--cpos) * 75px + 5px), 7px);
 }
 
 deck[mode="strip-hl"], deck[mode="strip-hr"] {
-    width: calc(var(--ccount) * 75px + 160px);
-    left: calc(var(--x) * (100vw - (var(--ccount) * 75px + 160px)));
+	width: calc(var(--ccount) * 75px + 160px);
+	left: calc(var(--x) * (100vw - (var(--ccount) * 75px + 160px)));
 }
 
 
 deck[mode="strip-vu"] > card {
-    transform: translate(5px, calc(var(--ccount) * 115px + var(--cpos) * -115px + 7px));
+	transform: translate(5px, calc(var(--ccount) * 115px + var(--cpos) * -115px + 7px));
 }
 
 deck[mode="strip-vd"] > card {
-    transform: translate(5px, calc(var(--cpos) * 115px + 7px));
+	transform: translate(5px, calc(var(--cpos) * 115px + 7px));
 }
 
 deck[mode="strip-vu"], deck[mode="strip-vd"] {
-    height: calc(var(--ccount) * 115px + 240px);
-    top: calc(var(--y) * (100vh - (var(--ccount) * 115px + 240px)));
+	height: calc(var(--ccount) * 115px + 240px);
+	top: calc(var(--y) * (100vh - (var(--ccount) * 115px + 240px)));
 }
diff --git a/styles/client/desktop.css b/styles/client/desktop.css
index 10caa15..410b516 100644
--- a/styles/client/desktop.css
+++ b/styles/client/desktop.css
@@ -1,149 +1,149 @@
 @media (min-width: 600px) and (min-height: 501px) {
-    body {
-        display: flex;
-    
-        align-items: center;
-        justify-content: center;
-    }
-
-    /*
-        TopBar rules
-    */
-
-    button#newgame:before{
-        content: "Create Game";
-    }
-
-    button#settings {
-        display: none;
-    }
-
-    button#reset:before{
-        content: "Reset Connection";
-    }
-
-    /*
-        Lobby rules
-    */
-    div.lobby {
-        min-width: 70vw;
-        min-height: 70vh;
-        max-height: 70vh;
-    
-        display: flex;
-        text-align: center;
-        flex-direction: column;
-    
-        align-items: center;
-    }
-
-    div.server {
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-        margin-bottom: 10px;
-        box-sizing: border-box;
-    }
-
-    span.status {
-        box-sizing: border-box;
-        font-size: larger;
-
-        margin-right: 10px;
-        padding: 10px;
-        border-radius: 10px;
-        flex-basis: content;
-
-        background-color: var(--server-bg-loading);
-        color: var(--server-color-loading);
-    }
-
-    span.status[s=loading] {
-        background-color: var(--server-bg-loading);
-        color: var(--server-color-loading);
-    }
-    
-    span.status[s=ok] {
-        background-color: var(--server-bg-ok);
-        color: var(--server-color-ok);
-    }
-    
-    span.status[s=closed] {
-        background-color: var(--server-bg-closed);
-        color: var(--server-color-closed);
-    }
-
-    span.addr {
-        font-size: larger;
-        padding: 10px;
-        border-radius: 10px;
-
-        background-color: var(--gui-bg-main);
-
-        flex: 1;
-    }
-
-    div.content {
-        min-width: 70vw;
-        min-height: 70vh;
-    
-        display: flex;
-        flex-direction: row;
-
-        box-sizing: border-box;
-    }
-
-    div.info {
-        display: flex;
-        text-align: center;
-        flex-direction: column;
-
-        flex: 1;
-
-        margin-left: 10px;
-
-        box-sizing: border-box;
-    }
-
-    div.games {
-        box-sizing: border-box;
-        overflow-y: auto;
-        overflow-x: hidden;
-        padding: 10px;
-        border-radius: 10px;
-        background-color: var(--gui-bg-main);
-        flex: 2;
-
-        border: 5px solid var(--gui-bg-main);
-    }
-
-    div.stats, div.settings {
-        border-radius: 10px;
-        background-color: var(--gui-bg-main);
-
-        box-sizing: border-box;
-
-        flex: 1;
-
-        height: auto;
-        width: 100%;
-
-        text-align: left;
-    }
-
-    div.settings {
-        margin-top: 10px;
-    }
-
-    div.game {
-        height: 20%;
-    }
-
-    /*
-        Table rules
-    */
-
-    /*
-        Chat
-    */
+	body {
+		display: flex;
+
+		align-items: center;
+		justify-content: center;
+	}
+
+	/*
+		TopBar rules
+	*/
+
+	button#newgame:before{
+		content: "Create Game";
+	}
+
+	button#settings {
+		display: none;
+	}
+
+	button#reset:before{
+		content: "Reset Connection";
+	}
+
+	/*
+		Lobby rules
+	*/
+	div.lobby {
+		min-width: 70vw;
+		min-height: 70vh;
+		max-height: 70vh;
+
+		display: flex;
+		text-align: center;
+		flex-direction: column;
+
+		align-items: center;
+	}
+
+	div.server {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		margin-bottom: 10px;
+		box-sizing: border-box;
+	}
+
+	span.status {
+		box-sizing: border-box;
+		font-size: larger;
+
+		margin-right: 10px;
+		padding: 10px;
+		border-radius: 10px;
+		flex-basis: content;
+
+		background-color: var(--server-bg-loading);
+		color: var(--server-color-loading);
+	}
+
+	span.status[s=loading] {
+		background-color: var(--server-bg-loading);
+		color: var(--server-color-loading);
+	}
+
+	span.status[s=ok] {
+		background-color: var(--server-bg-ok);
+		color: var(--server-color-ok);
+	}
+
+	span.status[s=closed] {
+		background-color: var(--server-bg-closed);
+		color: var(--server-color-closed);
+	}
+
+	span.addr {
+		font-size: larger;
+		padding: 10px;
+		border-radius: 10px;
+
+		background-color: var(--gui-bg-main);
+
+		flex: 1;
+	}
+
+	div.content {
+		min-width: 70vw;
+		min-height: 70vh;
+
+		display: flex;
+		flex-direction: row;
+
+		box-sizing: border-box;
+	}
+
+	div.info {
+		display: flex;
+		text-align: center;
+		flex-direction: column;
+
+		flex: 1;
+
+		margin-left: 10px;
+
+		box-sizing: border-box;
+	}
+
+	div.games {
+		box-sizing: border-box;
+		overflow-y: auto;
+		overflow-x: hidden;
+		padding: 10px;
+		border-radius: 10px;
+		background-color: var(--gui-bg-main);
+		flex: 2;
+
+		border: 5px solid var(--gui-bg-main);
+	}
+
+	div.stats, div.settings {
+		border-radius: 10px;
+		background-color: var(--gui-bg-main);
+
+		box-sizing: border-box;
+
+		flex: 1;
+
+		height: auto;
+		width: 100%;
+
+		text-align: left;
+	}
+
+	div.settings {
+		margin-top: 10px;
+	}
+
+	div.game {
+		height: 20%;
+	}
+
+	/*
+		Table rules
+	*/
+
+	/*
+		Chat
+	*/
 }
diff --git a/styles/client/mobile.css b/styles/client/mobile.css
index ed2e19d..70e17dd 100644
--- a/styles/client/mobile.css
+++ b/styles/client/mobile.css
@@ -1,85 +1,85 @@
 @media (max-width: 599px), (max-height: 500px) {
-    /*
-        Hide stuff
-    */
-    div.server {
-        display: none;
-    }
-
-    div.info {
-        display: none;
-    }
-
-    div.chat {
-        display: none;
-    }
-
-    /*
-        TopBar for mobile
-    */
-
-    div.topbar > div.status {
-        height: 10px;
-    }
-
-    div.top-buttons {
-        height: 50px;
-    }
-
-    button.top-button {
-        padding: 5px;
-    }
-
-    button#reset:before, button#newgame:before, button#settings:before {
-        font-family: "IcoFont";
-        font-size: xx-large;
-    }
-    
-    button#newgame:before{
-        content: "\efc2";
-    }
-
-    button#settings {
-        display: inline-block;
-    }
-
-    button#settings:before {
-        content: "\ef3a";
-    }
-
-    button#reset:before{
-        content: "\efd1";
-    }
-
-    /*
-        Mobile lobby
-    */
-
-    div.lobby {
-        display: flex;
-        flex-direction: column;
-        height: 100vh;
-    }
-
-    div.content {
-        margin-top: 60px;
-        box-sizing: border-box;
-        flex: 1;
-    }
-
-    div.games {
-        height: 100%;
-        width: 100%;
-        overflow-x: hidden;
-        overflow-y: auto;
-
-        background-color: var(--gui-bg-main);
-        padding: 5px;
-        box-sizing: border-box;
-
-    }
-
-    div.game {
-        height: 12.5%;
-    }
+	/*
+		Hide stuff
+	*/
+	div.server {
+		display: none;
+	}
+
+	div.info {
+		display: none;
+	}
+
+	div.chat {
+		display: none;
+	}
+
+	/*
+		TopBar for mobile
+	*/
+
+	div.topbar > div.status {
+		height: 10px;
+	}
+
+	div.top-buttons {
+		height: 50px;
+	}
+
+	button.top-button {
+		padding: 5px;
+	}
+
+	button#reset:before, button#newgame:before, button#settings:before {
+		font-family: "IcoFont";
+		font-size: xx-large;
+	}
+
+	button#newgame:before{
+		content: "\efc2";
+	}
+
+	button#settings {
+		display: inline-block;
+	}
+
+	button#settings:before {
+		content: "\ef3a";
+	}
+
+	button#reset:before{
+		content: "\efd1";
+	}
+
+	/*
+		Mobile lobby
+	*/
+
+	div.lobby {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+	}
+
+	div.content {
+		margin-top: 60px;
+		box-sizing: border-box;
+		flex: 1;
+	}
+
+	div.games {
+		height: 100%;
+		width: 100%;
+		overflow-x: hidden;
+		overflow-y: auto;
+
+		background-color: var(--gui-bg-main);
+		padding: 5px;
+		box-sizing: border-box;
+
+	}
+
+	div.game {
+		height: 12.5%;
+	}
 }
diff --git a/styles/client/tablet.css b/styles/client/tablet.css
index b9b5bd1..a4f135d 100644
--- a/styles/client/tablet.css
+++ b/styles/client/tablet.css
@@ -1,45 +1,45 @@
 @media (min-width: 600px) and (orientation: portrait) {
-    body {
-        display: flex;
-    
-        align-items: center;
-        justify-content: center;
-    }
-
-    div.lobby {
-        max-width: 500px;
-    
-        display: flex;
-        text-align: center;
-        flex-direction: column;
-    
-        align-items: center;
-    }
-
-    div.content {
-        min-width: 70vw;
-        min-height: 70vh;
-    
-        display: flex;
-        flex-direction: column;
-    }
-
-    div.info {
-        flex-direction: row;
-        margin-left: 0px;
-        margin-top: 10px;
-    }
-
-    div.settings, div.stats {
-        width: auto;
-    }
-
-    div.settings {
-        margin-top: 0px;
-        margin-left: 10px;
-    }
-
-    div.games {
-        flex: 4;
-    }
+	body {
+		display: flex;
+
+		align-items: center;
+		justify-content: center;
+	}
+
+	div.lobby {
+		max-width: 500px;
+
+		display: flex;
+		text-align: center;
+		flex-direction: column;
+
+		align-items: center;
+	}
+
+	div.content {
+		min-width: 70vw;
+		min-height: 70vh;
+
+		display: flex;
+		flex-direction: column;
+	}
+
+	div.info {
+		flex-direction: row;
+		margin-left: 0px;
+		margin-top: 10px;
+	}
+
+	div.settings, div.stats {
+		width: auto;
+	}
+
+	div.settings {
+		margin-top: 0px;
+		margin-left: 10px;
+	}
+
+	div.games {
+		flex: 4;
+	}
 }
diff --git a/styles/home/base.css b/styles/home/base.css
index bfd7b46..8daae31 100644
--- a/styles/home/base.css
+++ b/styles/home/base.css
@@ -1,58 +1,58 @@
 * {
-    font-family: 'Montserrat', sans-serif;
+	font-family: 'Montserrat', sans-serif;
 	transition-duration: 0.2s;
 }
 
 html, body {
-    margin: 0;
-    padding: 0;
+	margin: 0;
+	padding: 0;
 
-    min-width: 100vw;
-    min-height: 100vh;
+	min-width: 100vw;
+	min-height: 100vh;
 
-    display: block;
+	display: block;
 }
 
 body {
-    display: flex;
+	display: flex;
 
-    align-items: center;
-    justify-content: center;
+	align-items: center;
+	justify-content: center;
 
-    background-color: var(--main-bg);
+	background-color: var(--main-bg);
 }
 
 div.content {
-    padding: 20px;
+	padding: 20px;
 
-    background-color: var(--gui-bg-main);
+	background-color: var(--gui-bg-main);
 	color: var(--main-color);
-    border-radius: 10px;
+	border-radius: 10px;
 
-    display: flex;
-    text-align: center;
-    flex-direction: column;
+	display: flex;
+	text-align: center;
+	flex-direction: column;
 
-    align-items: center;
+	align-items: center;
 
-    width: min-content;
+	width: min-content;
 }
 
 a, button {
-    font-size: 1em;
-    display: block;
-    color: white;
-    box-sizing: border-box;
+	font-size: 1em;
+	display: block;
+	color: white;
+	box-sizing: border-box;
 
-    border-radius: 5px;
-    border: none;
-    padding: 5px;
+	border-radius: 5px;
+	border: none;
+	padding: 5px;
 
-    background-color: #0084ff;
-    
-    transition-duration: 0.2s;
+	background-color: #0084ff;
 
-    text-decoration: none;
+	transition-duration: 0.2s;
+
+	text-decoration: none;
 
 	margin: 5px;
 }
@@ -60,53 +60,53 @@ a, button {
 
 
 div.content > div.prev {
-    width: 100%;
-    margin: 10px;
+	width: 100%;
+	margin: 10px;
 
-    display: block;
+	display: block;
 
-    padding: 0;
+	padding: 0;
 }
 
 div.prev > a{
-    display: inline-block;
-    width: 80%;
-    margin: 0;
-    padding: 5px;
-    border-radius: 0;
+	display: inline-block;
+	width: 80%;
+	margin: 0;
+	padding: 5px;
+	border-radius: 0;
 
-    text-align: left;
+	text-align: left;
 }
 
 div.prev > a:first-of-type {
-    border-top-left-radius: 5px;
+	border-top-left-radius: 5px;
 }
 
 div.prev > a:last-of-type {
-    border-bottom-left-radius: 5px;
+	border-bottom-left-radius: 5px;
 }
 
 div.prev > button {
-    display: inline-block;
-    width: 20%;
-    margin: 0;
-    background-color: #ff1e00;
-    padding: 5px;
-    border-radius: 0;
+	display: inline-block;
+	width: 20%;
+	margin: 0;
+	background-color: #ff1e00;
+	padding: 5px;
+	border-radius: 0;
 }
 
 div.prev > button:first-of-type {
-    border-top-right-radius: 5px;
+	border-top-right-radius: 5px;
 }
 
 div.prev > button:last-of-type {
-    border-bottom-right-radius: 5px;
+	border-bottom-right-radius: 5px;
 }
 
 div.prev > button:hover {
-    background-color: #ff5741;
+	background-color: #ff5741;
 }
 
 div.prev > button:active {
-    background-color: #9c1200;
+	background-color: #9c1200;
 }
 \ No newline at end of file
diff --git a/styles/home/desktop.css b/styles/home/desktop.css
index 64ca05f..9860f9a 100644
--- a/styles/home/desktop.css
+++ b/styles/home/desktop.css
@@ -1,6 +1,6 @@
 @media (min-width: 900px) {
-    div.content > div {
-        display: flex;
-        flex-direction: row;
-    }
+	div.content > div {
+		display: flex;
+		flex-direction: row;
+	}
 }
 \ No newline at end of file
diff --git a/styles/home/mobile.css b/styles/home/mobile.css
index a57a988..1334ac1 100644
--- a/styles/home/mobile.css
+++ b/styles/home/mobile.css
@@ -1,12 +1,12 @@
 @media (max-width: 899px) {
-    div.content > div {
-        display: flex;
-        flex-direction: column;
-    }
+	div.content > div {
+		display: flex;
+		flex-direction: column;
+	}
 
-    div.content {
-        border-radius: 0px;
-        width:100%;
-        height: 100%;
-    }
+	div.content {
+		border-radius: 0px;
+		width:100%;
+		height: 100%;
+	}
 }
 \ No newline at end of file
diff --git a/styles/icofont.css b/styles/icofont.css
index 3bc40e5..6e214a6 100644
--- a/styles/icofont.css
+++ b/styles/icofont.css
@@ -1,25 +1,25 @@
 @font-face
 {
-    font-family: "IcoFont";
-    font-weight: 400;
-    font-style: normal;
-    src:    url("../fonts/icofont.woff2") format("woff2"),
-            url("../fonts/icofont.woff") format("woff");
+	font-family: "IcoFont";
+	font-weight: 400;
+	font-style: normal;
+	src:    url("../fonts/icofont.woff2") format("woff2"),
+			url("../fonts/icofont.woff") format("woff");
 }
 
 .icofont {
-    font-family: 'IcoFont' !important;
-    speak: none;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    line-height: 1;
-    /* Better Font Rendering =========== */
-    font-feature-settings: "liga";
-    -webkit-font-feature-settings: "liga";
-    -webkit-font-smoothing: antialiased;
+	font-family: 'IcoFont' !important;
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	white-space: nowrap;
+	word-wrap: normal;
+	direction: ltr;
+	line-height: 1;
+	/* Better Font Rendering =========== */
+	font-feature-settings: "liga";
+	-webkit-font-feature-settings: "liga";
+	-webkit-font-smoothing: antialiased;
 }
 \ No newline at end of file
diff --git a/styles/input.css b/styles/input.css
index 8101ae2..0b56982 100644
--- a/styles/input.css
+++ b/styles/input.css
@@ -4,14 +4,14 @@
 
 input, select
 {
-    -webkit-appearance: none;
+	-webkit-appearance: none;
 	-moz-appearance: none;
 	appearance: none;
 
 	margin: 5px;
-	
+
 	display: block;
-	
+
 	box-sizing: border-box;
 }
 
@@ -19,19 +19,19 @@ input, select
 
 input[type=button], input[type=submit], button, a
 {
-    padding: 10px;
+	padding: 10px;
 
-    border: none;
-    border-radius: 5px;
+	border: none;
+	border-radius: 5px;
 
-    background-color: var(--input-bg-button);
+	background-color: var(--input-bg-button);
 	color: var(--input-color-button);
-	
-    font-size: medium;
 
-    transition-duration: 0.2s;
+	font-size: medium;
 
-    cursor: pointer;
+	transition-duration: 0.2s;
+
+	cursor: pointer;
 }
 
 input[type=button]:hover, input[type=submit]:hover, button:hover, a:hover
@@ -72,14 +72,14 @@ input[type=radio]
 {	
 	width: 20px;
 	height: 20px;
-	
+
 	border: 3px solid var(--input-border-bool);
 	border-radius: 50%;
-	
+
 	transition-duration: 0.2s;
-	
+
 	background-color: var(--input-bg-bool);
-	
+
 	cursor: pointer;
 
 	display: inline-block;
@@ -115,21 +115,21 @@ input[type=checkbox]
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	appearance: none;
-	
+
 	display: inline-block;
 	vertical-align: middle;
-	
+
 	width: 20px;
 	height: 20px;
-	
+
 	border: 3px solid var(--input-border-bool);
-	
+
 	border-radius: 2px;
-	
+
 	transition-duration: 0.2s;
-	
+
 	background-color: var(--input-bg-bool);
-	
+
 	cursor: pointer;
 }
 
@@ -156,23 +156,23 @@ input[type=checkbox]::after
 {
 	height: 15px;
 	width: 10px;
-	
+
 	box-sizing: border-box;
-	
+
 	position: relative;
-	
+
 	display: block;
-	
+
 	border-color: var(--input-bg-bool-true);
 	border-style: solid;
 	border-width: 0px 0px 0px 0px;
-	
+
 	top: calc(50% - 10px);
 	left: calc(50% - 5px);
-	
+
 	transform-origin: center;
 	transform: rotate(45deg);
-	
+
 	content: '';
 }
 
@@ -186,17 +186,17 @@ input[type=checkbox]:checked::after
 input[type=color]
 {	
 	display: inline-block;
-	
+
 	vertical-align: middle;
-	
+
 	height: 20px;
 	width: 20px;
-	
+
 	margin: 0;
 	padding: 0;
-	
+
 	border: 0;
-	
+
 	cursor: pointer;
 }
 
@@ -216,7 +216,7 @@ div.input-select
 	display: block;
 	position: absolute;
 	z-index: 0;
-	
+
 	pointer-events: none;
 
 	overflow-y: auto;
@@ -286,23 +286,23 @@ div.input-container:focus > div.input-select > div[selected=true]:after
 div.input-container[type=color]
 {
 	text-align: center;
-	
+
 	background-color: var(--input-bg-button);
 	color: var(--input-color-button);
 
 	transition-duration: 0.2s;
-	
+
 	cursor: pointer;
-	
+
 	width: max-content;
 }
 
 div.input-container[type=color]::after
 {
 	display: inline;
-	
+
 	vertical-align: middle;
-	
+
 	content: ' Pick a color';
 }
 
@@ -322,11 +322,11 @@ div.input-container[type=file]
 {
 	background-color: var(--input-bg-button);
 	color: var(--input-color-button);
-	
+
 	transition-duration: 0.2s;
 
 	cursor: pointer;
-	
+
 	text-align: center;
 
 	width: max-content;
@@ -346,9 +346,9 @@ div.input-container[type=file]:active
 div.input-container[type=file]::after
 {
 	display: inline;
-	
+
 	vertical-align: middle;
-	
+
 	content: attr(data-files);
 }
 
diff --git a/styles/themes/colors-base.css b/styles/themes/colors-base.css
index 56b06d8..86e6483 100644
--- a/styles/themes/colors-base.css
+++ b/styles/themes/colors-base.css
@@ -1,98 +1,98 @@
 * {
-    /*  Main  */
-    --main-bg: white;
-    --main-color: black;
-
-    /*  Server  */
-    --server-bg-ok: #0C0;
-    --server-bg-loading: #DA0;
-    --server-bg-closed: #D00;
-    --server-color-ok: white;
-    --server-color-loading: white;
-    --server-color-closed: white;
-
-    /*  Gui and topbar  */
-    --gui-bg-main: #ddd;
-    --gui-bg-game: white;
-    --gui-color-game: black;
-    --gui-shadow-game: gray;
-
-    --top-border: black;
-    --top-bg: #eee;
-    --top-bg-button: #eee;
-    --top-bg-button-hover: #ccc;
-    --top-bg-button-active: white;
-    --top-color-button: black;
-    --top-color-button-hover: black;
-    --top-color-button-active: black;
-
-    /*  Table  */
-    --table-bg: rgb(20, 110, 50);
-
-    /*  Card defaults  */
-    --card-color: black;
-    --card-bg: white;
-    --card-border: #bbb;
-    --card-hover: #0f0;
-
-    --deck-shadow: #2696ff;
-    --deck-hover: #73bbff;
-
-    /*  Input  */
-    
-    --input-color-text: black;
-    --input-color-text-hover: black;
-    --input-color-text-active: black;
-    --input-bg-text: white;
-    --input-bg-text-hover: white;
-    --input-bg-text-active: white;
-    --input-border-text: #555;
-    --input-border-text-hover: black;
-    --input-border-text-active: #0084ff;
-
-    --input-color-button: white;
-    --input-color-button-hover: white;
-    --input-color-button-active: white;
-    --input-bg-button: #0084ff;
-    --input-bg-button-hover: #3ea2ff;
-    --input-bg-button-active:#0056a7;
-
-    --input-bg-bool: white;
-    --input-bg-bool-hover: white;
-    --input-bg-bool-active: white;
-    --input-border-bool: black;
-    --input-border-bool-hover: #3ea2ff;
-    --input-border-bool-active: black;
-    --input-border-bool-true: #0084ff;
-
-    --input-color-select: black;
-    --input-color-select-hover: black;
-    --input-color-select-active: #555;
-    --input-bg-select: white;
-    --input-bg-select-hover: white;
-    --input-bg-select-active: white;
-    --input-border-select: #555;
-    --input-border-select-hover: black;
-    --input-border-select-active: #0084ff;
-
-    --input-bg-multi: rgba(30, 30, 30, 0.3);
-    --input-bg-multi-hover: rgba(200, 200, 200, 0.3);
-
-    /*  Chat  */
-    --chat-color: black;
-    --chat-bg: white;
-
-    --chat-bg-text: rgba(0, 0, 0, 0.2);
-
-    --chat-bg-input: rgb(220, 220, 220);
-    --chat-bg-input-hover: rgb(220, 220, 220);
-    --chat-bg-input-active: rgb(220, 220, 220);
-    
-    --chat-bg-inactive: rgb(80, 80, 80);
-    --chat-bg-inactive-hover: rgb(130, 130, 130);
-    --chat-bg-inactive-active: rgb(40, 40, 40);
-
-    --chat-bg-active: #0084ff;
-    --chat-bg-active-hover: #3ea2ff;
-    --chat-bg-active-active:#0056a7;
+	/*  Main  */
+	--main-bg: white;
+	--main-color: black;
+
+	/*  Server  */
+	--server-bg-ok: #0C0;
+	--server-bg-loading: #DA0;
+	--server-bg-closed: #D00;
+	--server-color-ok: white;
+	--server-color-loading: white;
+	--server-color-closed: white;
+
+	/*  Gui and topbar  */
+	--gui-bg-main: #ddd;
+	--gui-bg-game: white;
+	--gui-color-game: black;
+	--gui-shadow-game: gray;
+
+	--top-border: black;
+	--top-bg: #eee;
+	--top-bg-button: #eee;
+	--top-bg-button-hover: #ccc;
+	--top-bg-button-active: white;
+	--top-color-button: black;
+	--top-color-button-hover: black;
+	--top-color-button-active: black;
+
+	/*  Table  */
+	--table-bg: rgb(20, 110, 50);
+
+	/*  Card defaults  */
+	--card-color: black;
+	--card-bg: white;
+	--card-border: #bbb;
+	--card-hover: #0f0;
+
+	--deck-shadow: #2696ff;
+	--deck-hover: #73bbff;
+
+	/*  Input  */
+
+	--input-color-text: black;
+	--input-color-text-hover: black;
+	--input-color-text-active: black;
+	--input-bg-text: white;
+	--input-bg-text-hover: white;
+	--input-bg-text-active: white;
+	--input-border-text: #555;
+	--input-border-text-hover: black;
+	--input-border-text-active: #0084ff;
+
+	--input-color-button: white;
+	--input-color-button-hover: white;
+	--input-color-button-active: white;
+	--input-bg-button: #0084ff;
+	--input-bg-button-hover: #3ea2ff;
+	--input-bg-button-active:#0056a7;
+
+	--input-bg-bool: white;
+	--input-bg-bool-hover: white;
+	--input-bg-bool-active: white;
+	--input-border-bool: black;
+	--input-border-bool-hover: #3ea2ff;
+	--input-border-bool-active: black;
+	--input-border-bool-true: #0084ff;
+
+	--input-color-select: black;
+	--input-color-select-hover: black;
+	--input-color-select-active: #555;
+	--input-bg-select: white;
+	--input-bg-select-hover: white;
+	--input-bg-select-active: white;
+	--input-border-select: #555;
+	--input-border-select-hover: black;
+	--input-border-select-active: #0084ff;
+
+	--input-bg-multi: rgba(30, 30, 30, 0.3);
+	--input-bg-multi-hover: rgba(200, 200, 200, 0.3);
+
+	/*  Chat  */
+	--chat-color: black;
+	--chat-bg: white;
+
+	--chat-bg-text: rgba(0, 0, 0, 0.2);
+
+	--chat-bg-input: rgb(220, 220, 220);
+	--chat-bg-input-hover: rgb(220, 220, 220);
+	--chat-bg-input-active: rgb(220, 220, 220);
+
+	--chat-bg-inactive: rgb(80, 80, 80);
+	--chat-bg-inactive-hover: rgb(130, 130, 130);
+	--chat-bg-inactive-active: rgb(40, 40, 40);
+
+	--chat-bg-active: #0084ff;
+	--chat-bg-active-hover: #3ea2ff;
+	--chat-bg-active-active:#0056a7;
 }
 \ No newline at end of file
diff --git a/styles/themes/colors-dark.css b/styles/themes/colors-dark.css
index f630ac0..e294889 100644
--- a/styles/themes/colors-dark.css
+++ b/styles/themes/colors-dark.css
@@ -1,103 +1,103 @@
 * {
-    /*  Main  */
-    --main-bg: #333;
-    --main-color: white;
-
-    /*  Server  */
-    --server-bg-ok: #0B0;
-    --server-bg-loading: #DA0;
-    --server-bg-closed: #D00;
-    --server-color-ok: white;
-    --server-color-loading: white;
-    --server-color-closed: white;
-
-    /*  Gui and topbar  */
-    --gui-bg-main: #555;
-    --gui-bg-game: #777;
-    --gui-color-game: white;
-    --gui-shadow-game: #444;
-
-    --top-border: #999;
-    --top-bg: #333;
-    --top-bg-button: #555;
-    --top-bg-button-hover: #999;
-    --top-bg-button-active: #777;
-    --top-color-button: white;
-    --top-color-button-hover: white;
-    --top-color-button-active: white;
-
-    /*  Table  */
-    --table-bg: rgb(20, 110, 50);
-
-    /*  Card defaults  */
-    --card-color: black;
-    --card-bg: white;
-    --card-border: #bbb;
-    --card-hover: #0f0;
-
-    --deck-shadow: #2696ff;
-    --deck-hover: #3ea2ff;
-
-    /*  Input  */
-    
-    --input-color-text: white;
-    --input-color-text-hover: white;
-    --input-color-text-active: white;
-    --input-bg-text: #777;
-    --input-bg-text-hover: #777;
-    --input-bg-text-active: #777;
-    --input-border-text: #222;
-    --input-border-text-hover: #AAA;
-    --input-border-text-active: #3ea2ff;
-
-    --input-color-button: white;
-    --input-color-button-hover: white;
-    --input-color-button-active: white;
-    --input-bg-button: #0084ff;
-    --input-bg-button-hover: #3ea2ff;
-    --input-bg-button-active:#0056a7;
-
-    --input-bg-bool: #555;
-    --input-bg-bool-hover: #999;
-    --input-bg-bool-active: #777;
-    --input-bg-bool-true: white;
-    --input-border-bool: #999;
-    --input-border-bool-hover: #999;
-    --input-border-bool-active: #999;
-    --input-border-bool-true: #999;
-
-    --input-color-select: white;
-    --input-color-select-hover: white;
-    --input-color-select-active: white;
-    --input-bg-select: #777;
-    --input-bg-select-hover: #888;
-    --input-bg-select-active: #777;
-    --input-border-select: #222;
-    --input-border-select-hover: #AAA;
-    --input-border-select-active: #3ea2ff;
-
-    --input-bg-multi: rgba(30, 30, 30, 0.3);
-    --input-bg-multi-hover: rgba(200, 200, 200, 0.3);
-
-    /*  Chat  */
-    --chat-color: white;
-    --chat-bg: #555;
-
-    --chat-bg-text: #444;
-
-    --chat-bg-input: #555;
-    --chat-bg-input-hover: #777;
-    --chat-bg-input-active: #444;
-
-    --chat-bg-select: #444;
-    --chat-bg-select-hover: #777;
-    --chat-bg-select-active: #333;
-
-    --chat-bg-inactive: #444;
-    --chat-bg-inactive-hover: #777;
-    --chat-bg-inactive-active: #333;
-
-    --chat-bg-active: rgb(255, 133, 34);
-    --chat-bg-active-hover: rgb(255, 165, 92);
-    --chat-bg-active-active: rgb(226, 102, 0);
+	/*  Main  */
+	--main-bg: #333;
+	--main-color: white;
+
+	/*  Server  */
+	--server-bg-ok: #0B0;
+	--server-bg-loading: #DA0;
+	--server-bg-closed: #D00;
+	--server-color-ok: white;
+	--server-color-loading: white;
+	--server-color-closed: white;
+
+	/*  Gui and topbar  */
+	--gui-bg-main: #555;
+	--gui-bg-game: #777;
+	--gui-color-game: white;
+	--gui-shadow-game: #444;
+
+	--top-border: #999;
+	--top-bg: #333;
+	--top-bg-button: #555;
+	--top-bg-button-hover: #999;
+	--top-bg-button-active: #777;
+	--top-color-button: white;
+	--top-color-button-hover: white;
+	--top-color-button-active: white;
+
+	/*  Table  */
+	--table-bg: rgb(20, 110, 50);
+
+	/*  Card defaults  */
+	--card-color: black;
+	--card-bg: white;
+	--card-border: #bbb;
+	--card-hover: #0f0;
+
+	--deck-shadow: #2696ff;
+	--deck-hover: #3ea2ff;
+
+	/*  Input  */
+
+	--input-color-text: white;
+	--input-color-text-hover: white;
+	--input-color-text-active: white;
+	--input-bg-text: #777;
+	--input-bg-text-hover: #777;
+	--input-bg-text-active: #777;
+	--input-border-text: #222;
+	--input-border-text-hover: #AAA;
+	--input-border-text-active: #3ea2ff;
+
+	--input-color-button: white;
+	--input-color-button-hover: white;
+	--input-color-button-active: white;
+	--input-bg-button: #0084ff;
+	--input-bg-button-hover: #3ea2ff;
+	--input-bg-button-active:#0056a7;
+
+	--input-bg-bool: #555;
+	--input-bg-bool-hover: #999;
+	--input-bg-bool-active: #777;
+	--input-bg-bool-true: white;
+	--input-border-bool: #999;
+	--input-border-bool-hover: #999;
+	--input-border-bool-active: #999;
+	--input-border-bool-true: #999;
+
+	--input-color-select: white;
+	--input-color-select-hover: white;
+	--input-color-select-active: white;
+	--input-bg-select: #777;
+	--input-bg-select-hover: #888;
+	--input-bg-select-active: #777;
+	--input-border-select: #222;
+	--input-border-select-hover: #AAA;
+	--input-border-select-active: #3ea2ff;
+
+	--input-bg-multi: rgba(30, 30, 30, 0.3);
+	--input-bg-multi-hover: rgba(200, 200, 200, 0.3);
+
+	/*  Chat  */
+	--chat-color: white;
+	--chat-bg: #555;
+
+	--chat-bg-text: #444;
+
+	--chat-bg-input: #555;
+	--chat-bg-input-hover: #777;
+	--chat-bg-input-active: #444;
+
+	--chat-bg-select: #444;
+	--chat-bg-select-hover: #777;
+	--chat-bg-select-active: #333;
+
+	--chat-bg-inactive: #444;
+	--chat-bg-inactive-hover: #777;
+	--chat-bg-inactive-active: #333;
+
+	--chat-bg-active: rgb(255, 133, 34);
+	--chat-bg-active-hover: rgb(255, 165, 92);
+	--chat-bg-active-active: rgb(226, 102, 0);
 }
 \ No newline at end of file
author	Kyle Gunger <kgunger12@gmail.com>	2021-10-16 17:12:32 -0400
committer	Kyle Gunger <kgunger12@gmail.com>	2021-10-16 17:12:32 -0400
commit	b8c91f08adc7bdb0095fb61a59bc03f0d568f478 (patch)
tree	1c9f39c2d2c2279593d2117ef64274b561981db6
parent	8f71df8341224a0898984a9bc67005fdbea9ee30 (diff)