From 03b7e2d4cb001cef990efef61d9ce499c8e4f878 Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Thu, 28 Jul 2022 22:27:39 -0400 Subject: Fix button input, add rotation and scale to decks --- scripts/cards/deck.js | 4 +++- scripts/client.js | 17 +++++++++++++++++ scripts/gui/input.js | 8 +++++--- styles/client/card.css | 2 ++ 4 files changed, 27 insertions(+), 4 deletions(-) diff --git a/scripts/cards/deck.js b/scripts/cards/deck.js index 8c8e3a7..f1e2689 100644 --- a/scripts/cards/deck.js +++ b/scripts/cards/deck.js @@ -13,7 +13,7 @@ class Deck { y = 0; e = null; - constructor(id, options = {mode: "stack", smode: "one", sct: 0, pos: [0, 0]}) + constructor(id, options = {mode: "stack", smode: "one", sct: 0, pos: [0, 0, 0, 1]}) { // View mode // infdraw - infinite draw. always appears as if there are multiple cards @@ -50,6 +50,8 @@ class 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.style.setProperty("--rot", options.pos[2]); + this.e.style.setProperty("--scale", options.pos[3] + "deg"); this.e.setAttribute("mode", options.mode); diff --git a/scripts/client.js b/scripts/client.js index e158cef..bceb7a4 100644 --- a/scripts/client.js +++ b/scripts/client.js @@ -105,6 +105,14 @@ class Client{ console.error(m.data); return; + case "err": + this.socket.close(); + + alert(`Error connecting to server: ${m.data}`); + + console.error(`Error connecting to server: ${m.data}`); + + return; case "ready": console.log(`Handshake with server OK. Running client version ${VERSION}`); @@ -117,7 +125,16 @@ class Client{ this.settings = new Settings(m.data.user); this.settings.addEventListener("change", (() => {this.socket.send("options", this.settings.getSettings())}).bind(this)); + m.data.game.new = { + type: "button", + title: "", + args: ["Create and Join"] + } this.gameOptions = new Settings(m.data.game); + this.gameOptions.addEventListener("click", ((e) => { + if(e.detail == "new") + this.socket.send("create", this.gameOptions.getSettings()); + }).bind(this)); this.gameOptions.putSettings(this.lobby.top.newGame); diff --git a/scripts/gui/input.js b/scripts/gui/input.js index 24450f0..45f145f 100644 --- a/scripts/gui/input.js +++ b/scripts/gui/input.js @@ -51,7 +51,7 @@ class MakeInput { static buttonInput (text) { let el = MakeInput.createInput("button", false, false); - el.textContent = text; + el.value = text; return el; } @@ -333,8 +333,10 @@ class Settings extends EventTarget { { let out = {}; - for(let key in this.settings) - out[key] = this.settings[key].el.getValue(); + for(let key in this.settings) { + if (this.settings[key].el.getAttribute("type") != "button") + out[key] = this.settings[key].el.getValue(); + } return out; } diff --git a/styles/client/card.css b/styles/client/card.css index f8c6438..8b82fec 100644 --- a/styles/client/card.css +++ b/styles/client/card.css @@ -136,6 +136,8 @@ deck { top: calc(var(--y) * (100vh - 250px)); left: calc(var(--x) * (100vw - 166px)); + transform: scale(var(--size)) rotate(var(--rot)); + overflow: visible; border-radius: 10px; -- cgit v1.2.3