From 08df4d4552d0b7f76dc2476d39c08d4eb493696a Mon Sep 17 00:00:00 2001 From: Nathan Date: Thu, 31 Oct 2024 14:25:16 +0000 Subject: [PATCH] Move js files and start split/board redo --- public/index.html | 18 +++++++++++------- public/{ => js}/board.js | 26 -------------------------- public/js/canvas/draw.js | 19 +++++++++++++++++++ public/js/canvas/main.js | 10 ++++++++++ public/{ => js}/cards.js | 0 public/{ => js}/debug.js | 0 public/{ => js}/effect.js | 0 public/js/global.js | 22 ++++++++++++++++++++++ public/{ => js}/helper.js | 0 public/{ => js}/main.js | 5 +++++ public/{ => js}/shapes.js | 0 11 files changed, 67 insertions(+), 33 deletions(-) rename public/{ => js}/board.js (98%) create mode 100644 public/js/canvas/draw.js create mode 100644 public/js/canvas/main.js rename public/{ => js}/cards.js (100%) rename public/{ => js}/debug.js (100%) rename public/{ => js}/effect.js (100%) create mode 100644 public/js/global.js rename public/{ => js}/helper.js (100%) rename public/{ => js}/main.js (95%) rename public/{ => js}/shapes.js (100%) diff --git a/public/index.html b/public/index.html index c90e939..8c86aa5 100644 --- a/public/index.html +++ b/public/index.html @@ -120,13 +120,17 @@ - - - - - - - + + + + + + + + + + + diff --git a/public/board.js b/public/js/board.js similarity index 98% rename from public/board.js rename to public/js/board.js index 5286186..06783cc 100644 --- a/public/board.js +++ b/public/js/board.js @@ -1,20 +1,3 @@ -const ctx = canvas.getContext('2d'); -const canvasLeft = canvas.offsetLeft + canvas.clientLeft; -const canvasTop = canvas.offsetTop + canvas.clientTop; - -const cardWidth = 80; -const cardHeight = 120; - -const cardArt = new Image(); -const cardBackArt = new Image(); - -// Colours -const COLOUR = { - 'white':{'id': 1, 'name':'White','colour':'#EEE'}, - 'blue':{'id':2, 'name':'Blue','colour':'#0033EE'}, - 'red':{'id':3, 'name':'Red','colour':'#ED344A'}, -}; - // Counters to keep track of players, and boardElements, may be changed in future // But once game starts, will be const anyway, so shouldn't need passing let players = 2; // Player, Opponent for now, but will be up to 6 players for 5v1 boss raids? @@ -44,15 +27,6 @@ let cardEffect = {}; let inEvent = null; let roomId = null; -// To disable drawing each time something changes -let drawEachEvent = true; // For disabling draw each time and only occuring where I want to test -let yourPlayerId = 0; // To compare click events of your/opponents cards -let viewingPlayerId = 0; // To show the board from your/opponent/teammates perspective, etc. without play permission - -const maxHandSize = 4; -const maxBoardSize = 3; -const maxShield = 2; - // Gonna need lots of refactoring, and sorting class Board{ constructor(){ diff --git a/public/js/canvas/draw.js b/public/js/canvas/draw.js new file mode 100644 index 0000000..e3cb713 --- /dev/null +++ b/public/js/canvas/draw.js @@ -0,0 +1,19 @@ +function drawGameBoard(){ + + // Reset board + ctx.clearRect(0, 0, canvas.width, canvas.height); + + drawPlayerNames(); + +} + +function drawPlayerNames(){ + + // Player Name + //ctx.fillText(playerName, 50, canvas.height - 50); + + // Opponent Name + //ctx.fillText(opponentName, canvas.width - (ctx.measureText(opponentName).width + 50), 50); + +} + diff --git a/public/js/canvas/main.js b/public/js/canvas/main.js new file mode 100644 index 0000000..f405530 --- /dev/null +++ b/public/js/canvas/main.js @@ -0,0 +1,10 @@ +const ctx = canvas.getContext('2d'); +const canvasLeft = canvas.offsetLeft + canvas.clientLeft; +const canvasTop = canvas.offsetTop + canvas.clientTop; + +ctx.font = "12px Arial"; +canvas.style.backgroundColor = 'rgb(143 153 150)'; +cardArt.src = '/images/cardArt.jpg'; +cardBackArt.src = '/images/cardBack.jpg'; +ctx.fillStyle = '#000'; + diff --git a/public/cards.js b/public/js/cards.js similarity index 100% rename from public/cards.js rename to public/js/cards.js diff --git a/public/debug.js b/public/js/debug.js similarity index 100% rename from public/debug.js rename to public/js/debug.js diff --git a/public/effect.js b/public/js/effect.js similarity index 100% rename from public/effect.js rename to public/js/effect.js diff --git a/public/js/global.js b/public/js/global.js new file mode 100644 index 0000000..cbcbaa9 --- /dev/null +++ b/public/js/global.js @@ -0,0 +1,22 @@ +const cardWidth = 80; +const cardHeight = 120; + +const cardArt = new Image(); +const cardBackArt = new Image(); + +const COLOUR = { + 'white':{'id': 1, 'name':'White','colour':'#EEE'}, + 'blue':{'id':2, 'name':'Blue','colour':'#0033EE'}, + 'red':{'id':3, 'name':'Red','colour':'#ED344A'}, +}; + +// To disable drawing each time something changes +let drawEachEvent = true; // For disabling draw each time and only occuring where I want to test + +let yourPlayerId = 0; // To compare click events of your/opponents cards +let viewingPlayerId = 0; // To show the board from your/opponent/teammates perspective, etc. without play permission + +const maxHandSize = 4; +const maxBoardSize = 3; +const maxShield = 2; + diff --git a/public/helper.js b/public/js/helper.js similarity index 100% rename from public/helper.js rename to public/js/helper.js diff --git a/public/main.js b/public/js/main.js similarity index 95% rename from public/main.js rename to public/js/main.js index 7ebcf74..a2a3dab 100644 --- a/public/main.js +++ b/public/js/main.js @@ -180,6 +180,11 @@ socket.on('responseStartGame', function (data) { } // Pass only the data to loadBoard loadBoard(data.message); + + // Draw the new/simplified board over the top of the working board + // TEMP until the new board is working as the old board did. + console.log('EXISTING BOARD STILL EXISTS! JUST NEED TO COMMENT drawGameBoard() in main.js'); + drawGameBoard(); }); // ALERTS diff --git a/public/shapes.js b/public/js/shapes.js similarity index 100% rename from public/shapes.js rename to public/js/shapes.js