Add transform to drags

2 files changed, 53 insertions, 22 deletions

diff --git a/scripts/gui/lobby.js b/scripts/gui/lobby.js
index a32c47f..f790a31 100644
--- a/scripts/gui/lobby.js
+++ b/scripts/gui/lobby.js
@@ -158,7 +158,6 @@ class Lobby {
 		while (this.e.games.firstChild != null) {
 			this.e.games.removeChild(this.e.games.firstChild)
 		}
-		console.log("eheh")
 
 		for (let i of data.games) {
 			if(typeof i != "object")
@@ -207,7 +206,7 @@ class Lobby {
 	// Called when a new public game is removed on the server
 	// { data string } the uuid of the game to delete
 	deleteGame (data) {
-
+		delete this.games[data];
 	}
 
 	// Called when the client wants to toggle the new game screen
@@ -240,6 +239,7 @@ class Lobby {
 		while (this.e.games.firstElementChild != null) {
 			this.e.games.removeChild(this.e.games.firstElementChild)
 		}
+		this.games = {};
 
 		this.setState("Connecting", "loading", this.e.addr.innerText);
 		this.init = false;
diff --git a/scripts/gui/table.js b/scripts/gui/table.js
index f17abb1..51ed4b3 100644
--- a/scripts/gui/table.js
+++ b/scripts/gui/table.js
@@ -1,12 +1,13 @@
 'use strict';
 
-const TABLE_RPC = ["newDeck", "newCard", "deleteDeck", "deleteCard", "moveByID", "swapCard"]
+const TABLE_RPC = ["newDeck", "newCard", "deleteDeck", "deleteCard", "moveCard", "swapCard"]
 
 // 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;
+		this.drag.transform = this.getTransform.bind(this);
 
 		drag.addEventListener("dragstart", (e) => {console.log(e)});
 		drag.addEventListener("dragstop", this.dragMsg.bind(this));
@@ -57,8 +58,11 @@ class Table{
 	// Should reset all internal objects and delete all dangling decks and cards.
 	reset ()
 	{
-		while(this.root.firstElementChild != null)
-			this.root.firstElementChild.remove();
+		for (let e of this.root.children) {
+			if(e.tagName !== "DRAG") {
+				e.remove();
+			}
+		}
 		
 		this.decks = {};
 		this.cards = {};
@@ -117,29 +121,32 @@ class Table{
 
 	// Move a card from one deck to another
 	// {data object} data from the server
-	// {data.cardID any} ID of the card to move
-	// {data.deckID any} ID of the deck to move the card to
+	// {data.card any} ID of the card to move
+	// {data.deck any} ID of the deck to move the card to
 	// {data.index number} card index in the new deck
-	moveByID(data)
+	moveCard(data)
 	{
-		this.cards[data.cardID].getDeck().removeCardByID(data.cardID);
-		this.decks[data.deckID].addCardAt(this.cards[data.cardID], data.index);
+		let c = this.cards[data.card];
+		this.decks[c.getDeck()].removeCardByID(data.card);
+		this.decks[data.deck].addCardAt(c, data.index);
+		c.resetPos();
+		c.e.className = "";
 	}
 
 	// Swap card data with new data
 	// {data object} data from the server
-	// {data.cardID any} ID of the card to swap
-	// {data.newID any} New ID for the card
+	// {data.card any} ID of the card to swap
+	// {data.id any} New ID for the card
 	// {data.data object} visualization data
 	swapCard(data)
 	{
 		// Can't swap a card into a an id of a pre-existing card.
-		if (this.cards[data.newID] != null) {
+		if (this.cards[data.id] != null) {
 			return false;
 		}
-		this.cards[data.newID] = this.cards[data.cardID];
-		delete this.cards[data.cardID];
-		this.cards[data.newID].generateElements(data.data);
+		this.cards[data.id] = this.cards[data.card];
+		delete this.cards[data.card];
+		this.cards[data.id].generateElements(data.data);
 	}
 
 
@@ -162,6 +169,27 @@ class Table{
 		this.socket.send("move", {card: cardID, deck: deckID, index: index});
 	}
 
+	getTransform(x, y)
+	{
+		let rot = 0, scale = 0, dtot = 0;
+
+		for(let d in this.decks ) {
+			let r = parseFloat(this.decks[d].e.style.getPropertyValue("--rot"));
+			let s = parseFloat(this.decks[d].e.style.getPropertyValue("--scale"));
+
+			//
+			//TODO: Some code to properly weight the importance of scale and rotation
+			// Hopefully this can be done in one pass
+			let f = 1/this.decks[d].dist(x, y);
+			let tot = dtot + f;
+			rot = rot*(dtot/tot) + r*(f/tot);
+			scale = scale*(dtot/tot) + s*(f/tot);
+			dtot += tot;
+		}
+
+		return [rot, scale];
+	}
+
 
 	// DRAG DEBUGGING
 
@@ -177,15 +205,18 @@ class Table{
 		if(event.drag.length < 1)
 			return;
 
-		let c = event.drag[0].e.card;
+		let c = event.drag[0];
 		let d = this.checkDeck(event.x, event.y);
 
-		if(c !== null)
+		if(c.e.card !== null)
 		{
-			if(d !== null && !this.decks[d].hasCard(c.id))
-				this.checkMove(c.id, d);
-			else
-				c.resetPos();
+			let id = c.e.card.id;
+			if(d !== null && !this.decks[d].hasCard(id))
+				this.checkMove(id, d);
+			else {
+				c.ep.appendChild(c.e)
+				c.e.card.resetPos();
+			}
 		}
 	}
 }