Move js files and start split/board redo

public/index.html

@@ -120,13 +120,17 @@
 		</div>
 
 		<script src="/socket.io/socket.io.js"></script>
-		<script src="/cards.js"></script><!-- Temp until DB -->
+
-		<script src="/shapes.js"></script>
+		<script src="/js/global.js"></script>
-		<script src="/main.js"></script>
+		<script src="/js/canvas/main.js"></script>
-		<script src="/board.js"></script>
+		<script src="/js/canvas/draw.js"></script>
-		<script src="/helper.js"></script>
+
-		<script src="/effect.js"></script>
+		<script src="/js/shapes.js"></script>
-		<script src="/debug.js"></script>
+		<script src="/js/main.js"></script>
+		<script src="/js/board.js"></script>
+		<script src="/js/helper.js"></script>
+		<script src="/js/effect.js"></script>
+		<script src="/js/debug.js"></script>
 	</body>
 
 </html>

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(){

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);
+
+}
+

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';
+

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;
+

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