From 46aae06bd699b3ca396f7f5c750e1fb9fc9ff4bc Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Thu, 18 Aug 2022 02:17:23 -0400 Subject: Add transform to drags --- scripts/gui/lobby.js | 4 +-- scripts/gui/table.js | 71 +++++++++++++++++++++++++++++++++++++--------------- 2 files changed, 53 insertions(+), 22 deletions(-) (limited to 'scripts/gui') 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(); + } } } } -- cgit v1.2.3