nathan
/
cardGame
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add realDeck element and remove clickables

Browse Source
develop
Nathan Steel 1 year ago
parent 9fac1d3dcc
commit b2da688cf8
1 changed files with 98 additions and 130 deletions
Show Stats Download Patch File Download Diff File

222
public/board.js
Unescape Escape View File

@ -8,13 +8,10 @@ const cardHeight = 120;
const cards = new Image();
const back = new Image();
// TODO: Remove once decks are migrated to ECS
let clickableItems = [];
// 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?
let elements = ['deck','board','hand','mana','shield', 'grave'];
let elements = ['realDeck', 'deck','board','hand','mana','shield', 'grave'];
let elementsSizes = {}; // TODO: May need to have the base XY WH of board, hand, etc. stored for loop draw
// Array of items, the 'Entity Manager' as such
let item = [];
@ -70,8 +67,6 @@ class Board{
// Room Name
ctx.fillText(name, 0, 10);
this.drawDecks();
this.drawPlayerNames('Nathan', 'Evil Nathan');
this.drawCardsECS(); // Atop most everything atm for testing
@ -158,10 +153,14 @@ class Board{
if(cardStatus[itemKey] == 'attacking'){border = '#C92D22';}
// Set the card 'cardboard' colour based on the card colour type
let colourId = cardData[itemKey].colour;
let fill = null;
if(boardElement[itemKey] != 'realDeck'){ // TODO: Change these to isset checks instead...
let colourId = cardData[itemKey].colour;
if(colourId == 0){ fill = '#EEE'; }
else if(colourId == 1){ fill = '#0033EE'; }
}else{
fill = '#B0B0B0';
}
let name = itemKey; // Not needed really anymore, but keeping for now
let positionX = position[itemKey][0];
@ -181,9 +180,36 @@ class Board{
});
shape.draw();
if(boardElement[itemKey] != 'realDeck'){ // TODO: isset, or differ between types
this.printCardImage(itemKey);
this.printCardDetails(itemKey);
}else{
// TODO: For realDeck only atm, also janked in. Seperate this...
let counterx= positionX;
let countery= positionY;
let counterwidth= cardWidth*.375;
let counterheight= cardHeight*.375;
// TODO: Center in the circle
let deckLength = getCurrentPositionAndLength('deck', player[itemKey])[1];
let textx=positionX - (ctx.measureText(deckLength).width/2);
let texty=positionY + (ctx.measureText(deckLength).width/2);
// Draw circle for deck count to sit in
let deckCounterSprite = new Shape({
shape: 'circle',
name: 'deckCountererer',
x: counterx,
y: countery,
width: counterwidth,
height: counterheight,
fillStyle: '#DCDCDC'
});
deckCounterSprite.draw();
// Draw deck count text
ctx.fillStyle = '#000';
ctx.fillText(deckLength, textx, texty);
}
}
@ -344,101 +370,6 @@ class Board{
ctx.font = "10pt Arial";
}
drawDecks(){
// Draw all decks belonging to players (currently 2, could be 3-5 in future, for PvE raids)
// TODO: Probably add this as an item of boardElement 'realDeck', as 'deck' is cards in deck
// actually, maybe change current 'deck' to 'inDeck', reads better
let name = null;
let countername = null;
let x = null;
let counterx = null;
let y = null;
let countery = null;
let width = null;
let counterwidth = null;
let height = null;
let counterheight = null;
let fill = null;
let counterfill = '#FFF';
let textx = null;
let texty = null;
let deckLength = 0;
for(let playerId = 0; playerId < players; playerId++){
if(playerId == 0){
// Deck
name= 'deck';
x= canvas.width-cardWidth*1.5-40;
y= canvas.height-cardHeight*1.5-60;
width= cardWidth*1.5;
height= cardHeight*1.5;
fill= "#0000FF";
countername= 'deckCounter';
counterx= canvas.width-cardWidth*.6;
countery= canvas.height-cardHeight*.6;
counterwidth= cardWidth*.375;
counterheight= cardHeight*.375;
// TODO: Center in the circle
deckLength = getCurrentPositionAndLength('deck', 0)[1];
textx = canvas.width-cardWidth*.6 - (ctx.measureText(deckLength).width) + 7;
texty = canvas.height-cardHeight*.6 + 5;
}
if(playerId == 1){
// Opponent's Deck
name= 'deckOpponent';
x= 40;
y= 60;
width= cardWidth*1.5;
height= cardHeight*1.5;
fill= "#FF0000";
countername= 'deckCounterOpponent';
counterx= cardWidth*1.5+(cardWidth*.375);
countery= cardHeight*1.5+(cardHeight*.375);
counterwidth= cardWidth*.375;
counterheight= cardHeight*.375;
counterfill= "#FFF";
deckLength = getCurrentPositionAndLength('deck', 1)[1];
textx=cardWidth*1.5 + (ctx.measureText(deckLength).width) + 10;
texty=cardHeight*1.9;
}
// Actually draw the decks base on the size/position, etc.
clickableItems[name+'Sprite'] = new Shape({
name: name,
x: x,
y: y,
width: width,
height: height,
fillStyle: fill
});
//ctx.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2);
clickableItems[name+'Sprite'].draw();
// Draw circle for deck count to sit in
let deckCounterSprite = new Shape({
shape: 'circle',
name: countername,
x: counterx,
y: countery,
width: counterwidth,
height: counterheight,
fillStyle: counterfill
});
deckCounterSprite.draw();
// Draw deck count text
// TODO: Center in the circle
ctx.fillStyle = '#000';
ctx.fillText(deckLength, textx, texty);
}
}
// boardElement, cardData?, position?, size?, cardStatus, player, listPosition
ECSLoop(boardElementId = null, playerId = null, cardStatusId = null, listPositionId = null){
// So, the intent here is to normalise my nested loop I keep duping (parts of)
@ -909,6 +840,7 @@ class Board{
let board = new Board;
// TODO: TEMP!! Replace soon
createDeck();
createDeckList(playerDeck, deckCount, 0);
createDeckList(opponentDeck, deckCountOpponent, 1);
@ -983,12 +915,14 @@ canvas.addEventListener('click', function(event) {
// Will be the new way
// TODO:Maybe write this into a function? If XY WH is hit return true, and the itemKey
// then it can be re-used in contextclick, hover, etc without rewrite
//console.log('X: '+x+' Y: '+y);
console.log('X: '+x+' Y: '+y);
// TODO: Normalise this too
for(let itemKey = 0; itemKey < item.length; itemKey++){
if(elements[itemKey] == 'deck'){
if(boardElement[itemKey] == 'deck'){
continue;
}else{
//printECSData([itemKey]);
}
// Check the item has a size and position
@ -1007,6 +941,9 @@ canvas.addEventListener('click', function(event) {
// Check item location, and trigger events based on it
// TODO: Change inEvent locations, and checks elsewhere?
// TODO: Make existing mechanics ECSey
case 'realDeck':
board.drawACard(playerId, 1);
break;
case 'board':
// player/opponentBoard not seperated, as want to have
// each player able to have effects, etc. to make others attack
@ -1059,21 +996,6 @@ canvas.addEventListener('click', function(event) {
}
}
// Decks kept as-is for now
// TODO: boardElement realDeck, or smth and add these to the loop
// # PLAYER DECK
clickable = clickableItems['deckSprite'];
if(clickableCheck(x,y,clickable) && !inEvent){
board.drawACard(0);
}
// TODO:
// # OPPONENT DECK
clickable = clickableItems['deckOpponentSprite'];
if(clickableCheck(x,y,clickable) && !inEvent){
board.drawACard(1);
}
}, false);
function clickableCheck(x,y,clickable=false,itemKey=false){
@ -1112,12 +1034,29 @@ function clickableCheck(x,y,clickable=false,itemKey=false){
}
function createDeck(){
// Create a 'realDeck' element for each player
for(let i = 0; i < players; i++){
item.push(itemCount);
boardElement[itemCount] = 'realDeck';
player[itemCount] = i;
// TODO: Added these in to prevent error
// In future want to remove, and add isset checks for non-used data
cardStatus[itemCount] = null;
listPosition[itemCount] = null;
itemCount++;
}
console.log(item.length); // createDeckList will need to continue from here, not 0
}
// TEMP: Create a deck of X different cards that can be drawn/played
// for UI development, will be done on server and not shown to clients
// TODO: Randomly create a deck from objects stored in file (for now) then DB
// 3 of each card max, and likely one colour too for time being
function createDeckList(deck, deckCount, playerId){
for(let i = 0; i < deckCount; i++){
let i = item.length; // Continue from the last item, don't overwrite
deckCount = deckCount + i;
for(i; i < deckCount; i++){
// Randomise colour
let colour = Math.floor(Math.random() * 2);
let effect = Math.floor(Math.random() * 5);
@ -1168,12 +1107,12 @@ function shuffleDeck(playerId){
let items = board.ECSLoop('deck', playerId, null, null);
for(let item = 0; item < items.length; item++){
let itemKey = items[item];
console.log('ITEM KEY: '+itemKey);
console.log('OLD LIST POSITION: '+listPosition[itemKey]);
//console.log('ITEM KEY: '+itemKey);
//console.log('OLD LIST POSITION: '+listPosition[itemKey]);
listPosition[itemKey] = tempDeck[item];
console.log('NEW LIST POSITION: '+listPosition[itemKey]);
//console.log('NEW LIST POSITION: '+listPosition[itemKey]);
}
console.log(getCurrentPositionAndLength('deck', playerId)[1]);
@ -1245,6 +1184,20 @@ function calculateItemSizePosition(itemKey){
let i = listPosition[itemKey];
//console.log('cardName: '+cardData[itemKey].name+' listPosition/i: '+i);
if(itemPlayer == 1 && itemElement == 'realDeck'){
positionX = 40;
positionY = 60;
width = cardWidth*1.5;
height = cardHeight*1.5;
}
if(itemPlayer == 0 && itemElement == 'realDeck'){
positionX = canvas.width-cardWidth*1.5-40;
positionY = canvas.height-cardHeight*1.5-60;
width = cardWidth*1.5;
height = cardHeight*1.5;
}
if(itemPlayer == 1 && itemElement == 'board'){
positionX = canvas.width/2 - (cardWidth * (itemListLength - i) - (cardMargin * i));
positionY = cardHeight + 30;
@ -1336,12 +1289,27 @@ function calculateItemSizePosition(itemKey){
function ECSLoopTest(){
// boardElement, player, cardStatus, listPosition
// TODO: ?cardData?, position?, size?
let boardElementId = 'board';
let playerId = 0;
let boardElementId = 'realDeck';
let playerId = null;
let cardStatusId = null;
let listPositionId = null;
let items = board.ECSLoop(boardElementId, playerId, cardStatusId, listPositionId);
console.log('Items in boardElement: '+boardElementId+' player: '+playerId+' cardStatus: '+cardStatusId+' listPosition: '+listPositionId);
console.log(items);
printECSData(items);
}
function printECSData(items){
for(let item = 0; item < items.length; item++){
let itemKey = items[item];
console.log(
'boardElement: '+boardElement[itemKey]+"\n"+
'cardData: '+cardData[itemKey]+"\n"+
'position: '+position[itemKey]+"\n"+
'size: '+size[itemKey]+"\n"+
'cardStatus: '+cardStatus[itemKey]+"\n"+
'player: '+player[itemKey]+"\n"+
'listPosition: '+listPosition[itemKey]
);
}
}

Write Preview
Loading…
Cancel
Save