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

Draw all existing elements ECS-ey

Browse Source
develop
Nathan Steel 1 year ago
parent c89640e33a
commit 75aea0308b
1 changed files with 115 additions and 172 deletions
Show Stats Download Patch File Download Diff File

287
public/board.js
Unescape Escape View File

@ -84,11 +84,6 @@ class Board{
this.drawDecks(); this.drawDecks();
this.drawShield();
this.drawShieldOpponent();
this.drawMana();
this.drawPlayerNames('Nathan', 'Evil Nathan'); this.drawPlayerNames('Nathan', 'Evil Nathan');
this.drawCardsECS(); // Atop most everything atm for testing this.drawCardsECS(); // Atop most everything atm for testing
@ -590,34 +585,39 @@ class Board{
} }
// Currently only functionality in hand // Currently only functionality in hand
playCardToBoard(positionInHand, cardsToPlay = 1){ playCardToBoard(positionFrom, fromElement, toElement, fromPlayer, toPlayer = null, cardsToPlay = 1){
// TODO: if from hand, use mana according to the card cost + mana types
if(toPlayer === null){
toPlayer = fromPlayer;
}
console.log(positionInHand);
// Loop probably not needed, but may be for eg. 'play X cards from top of deck' // Loop probably not needed, but may be for eg. 'play X cards from top of deck'
for(let play = 0; play < cardsToPlay; play++){ for(let play = 0; play < cardsToPlay; play++){
// Check there's space on board TODO: change to locationTo // Check there's space on board TODO: change to locationTo
// TODO: Normalise this for all element/player combos // TODO: Normalise this for all element/player combos
let elementLength = getCurrentPositionAndLength('board', 0)[1]; let elementLength = getCurrentPositionAndLength(toElement, toPlayer)[1];
// TODO: Compare against the maxSize for the boardElement
// this is fine(ish) for now, as just using hand
if(elementLength >= maxHandSize){ if(elementLength >= maxHandSize){
alert('Board full '+elementLength+'/'+maxHandSize); alert('Board full '+elementLength+'/'+maxHandSize);
return 0; return 0;
} }
// When done remove false && // When done remove false &&
// TODO: Rewrite for ECS // TODO: Rewrite for ECS
// Mana cost required and mana tapping // Mana cost required and mana tapping for playing a card from hand, etc
if(false && cardPlayed.cost > playerMana.length){ if(false && cardPlayed.cost > playerMana.length){
alert('Not enough mana'); alert('Not enough mana');
return 0; return 0;
} }
// Move from player0, position 0 (top) of deck, to hand // Move from player0, position 0 (top) of deck, to hand, to pos(null/auto) for toPlayer
this.addFromBoardElement(0, positionInHand, 'hand', 'board', null, null); this.addFromBoardElement(fromPlayer, positionFrom, fromElement, toElement, null, toPlayer);
} }
// Needs doing for playing cards from hand
if(false){ if(false){
// Get the card data
let cardPlayed = playerHand[index];
let manaUsed = []; let manaUsed = [];
if(cardPlayed.cost > playerMana.length){ if(cardPlayed.cost > playerMana.length){
@ -650,43 +650,6 @@ class Board{
playerMana[cardKey].tapped = true; playerMana[cardKey].tapped = true;
}); });
console.log(playerMana);
// Remove from hand
playerHand.splice(index, 1);
// Add to board
playerBoard.push(cardPlayed);
}
this.drawBoard();
}
playCardToBoardFromDeckOpponent(){
if(opponentBoard.length >= maxBoardSize){
alert('No space on board to play card. '+opponentBoard.length+'/'+maxBoardSize);
return 0;
}
// Loop items for opponent deck. boardElement = deck, and player = 1
for(let itemKey = 0; itemKey < item.length; itemKey++){
// Check if item is in deck
// 'key' in 'object'
if(itemKey in boardElement && boardElement[itemKey] == 'deck'){
// Check if item belongs to opponent
if(itemKey in player && player[itemKey] == 1){
// Check list position for top of deck
if(listPosition[itemKey] == 0){
// Set the new position (on board)
listPosition[itemKey] = getCurrentPositionAndLength('board', 1)[0]+1
// Move from current item to board
boardElement[itemKey] = 'board';
}
else{
// Move all other items in deck down in position by 1 to get new 0
listPosition[itemKey]--;
}
}
}
} }
this.drawBoard(); this.drawBoard();
@ -771,7 +734,22 @@ class Board{
// Like everything else, need to consolidate into one function that // Like everything else, need to consolidate into one function that
// can work for both players, and even more for 2v2 3v1 combats, etc. // can work for both players, and even more for 2v2 3v1 combats, etc.
playShield(shieldsToPlay = 4){ playShield(fromPosition, fromElement, playerId, cardsToPlay = 1){
for(let shieldNo = 0; shieldNo < cardsToPlay; shieldNo++){
// Check there's space for shield TODO: change to locationTo
// TODO: Normalise this for all element/player combos
let elementLength = getCurrentPositionAndLength('shield', playerId)[1];
if(elementLength >= maxShield){
alert('Shield full '+elementLength+'/'+maxShield);
// Kill loop if there's too many shiled already, no need re-notifying
return 0;
}
// Move from player, position 0 (top) of deck, to hand (next available position)
this.addFromBoardElement(playerId, fromPosition, fromElement, 'shield', null, null);
}
if(false){
for(let shieldNo = 0; shieldNo < shieldsToPlay; shieldNo++){ for(let shieldNo = 0; shieldNo < shieldsToPlay; shieldNo++){
if(playerShield.length >= maxShield){ if(playerShield.length >= maxShield){
alert('Shield zone full '+playerShield.length+'/'+maxShield); alert('Shield zone full '+playerShield.length+'/'+maxShield);
@ -787,73 +765,16 @@ class Board{
playerShield.push(cardDrawn); playerShield.push(cardDrawn);
this.drawBoard(); this.drawBoard();
} }
}
playShieldOpponent(shieldsToPlay = 4){
for(let shieldNo = 0; shieldNo < shieldsToPlay; shieldNo++){
if(opponentShield.length >= maxShield){
alert('Shield zone full '+opponentShield.length+'/'+maxShield);
return 0;
}
// Random card from deck, remove from deck, add to hand
let cardToDraw = Math.floor(Math.random() * deckCount);
let cardDrawn = opponentDeck[cardToDraw];
// Remove from deck
opponentDeck.splice(cardToDraw, 1);
// Add to shield zone
opponentShield.push(cardDrawn);
this.drawBoard();
}
}
drawShield(){
for (let i = 0; i < playerShield.length; i++) {
let name = 'playerShield_'+(i+1);
let shieldMargin = 10;
let fromX = 60;
let fromY = 300;
let fill = '#'+i+i+'0000';
let cWidth = cardWidth*.8;
let cHeight = cardHeight*.8;
let split = 0;
if(i>=2){ split = 1; }
// i%2 0 = 0, 1 = 1, 2 = 0, 3 = 1 to prevent margin from X/Y axis, and just between cards
let positionX = (fromX+((i%2)*shieldMargin)) +(i%2*cWidth);
let positionY = canvas.height-fromY+(split*cHeight+(shieldMargin*split));
let width = cWidth;
let height = cHeight;
this.drawCard(playerShield, i, name, positionX, positionY, width, height, fill);
}
}
drawShieldOpponent(){
for (let i = 0; i < opponentShield.length; i++) {
let name = 'opponentShield_'+(i+1);
let shieldMargin = 10;
let fromX = canvas.width-60;
let fromY = 300;
let fill = '#'+i+i+'0000';
let cWidth = cardWidth*.8;
let cHeight = cardHeight*.8;
let split = 0;
if(i>=2){ split = 1; }
// i%2 0 = 0, 1 = 1, 2 = 0, 3 = 1 to prevent margin from X/Y axis, and just between cards
let positionX = (fromX+((i%2)*shieldMargin))+(i%2*cWidth)-(cWidth*2);
let positionY = fromY+(split*cHeight+(shieldMargin*split))-(cHeight*2 + shieldMargin);
let width = cWidth;
let height = cHeight;
//console.log('i: '+i+' X: '+positionX+' Y: '+positionY);
this.drawCard(opponentShield, i, name, positionX, positionY, width, height, fill);
} }
} }
playMana(index, fromDeck = 0){ playMana(fromPosition, fromElement, cardsToPlay = 1){
// Move from player0, fromPosition of hand (for now), to mana
// TODO: FOR ALL addFromBoardElements, if 'fromPosition' not passed get the
// fromPosition and boardElementFrom from the itemId (will need to change to pass this)
this.addFromBoardElement(0, fromPosition, fromElement, 'mana', null, null);
if(false){
let manaCard = null; let manaCard = null;
if(fromDeck){ if(fromDeck){
let cardToDraw = Math.floor(Math.random() * deckCount); let cardToDraw = Math.floor(Math.random() * deckCount);
@ -868,27 +789,6 @@ class Board{
playerMana.push(manaCard); playerMana.push(manaCard);
this.drawBoard(); this.drawBoard();
}
drawMana(){
for (let i = 0; i < playerMana.length; i++) {
let name = 'playerMana_'+(i+1);
let manaMargin = 10;
let fromX = 60;
let fromY = 60;
let fill = '#BBB';
let cWidth = cardWidth*.5;
let cHeight = cardHeight*.5;
let split = 0;
// i%2 0 = 0, 1 = 1, 2 = 0, 3 = 1 to prevent margin from X/Y axis, and just between cards
let positionX = (fromX+manaMargin)+(i*cWidth-manaMargin);
let positionY = canvas.height-fromY;
let width = cWidth;
let height = cHeight;
this.drawCard(playerMana, i, name, positionX, positionY, width, height, fill);
} }
} }
} }
@ -903,14 +803,14 @@ let board = new Board;
//shuffleDeck(0); //shuffleDeck(0);
//shuffleDeck(1); //shuffleDeck(1);
// TEMP: Play a card on opponents board (from their deck)
//board.playCardToBoardFromDeckOpponent();
//board.playCardToBoardFromDeckOpponent();
//board.drawBoard(); //board.drawBoard();
board.playShield(4); // Play 4 shield from position 0 (top) of deck, for player 0 (you)
board.playShieldOpponent(4); // TODO:May want to change this to play from opponents deck, or hand, etc. for future
// That will likely be a while though I assume?
board.playShield(0, 'deck', 0, 4);
board.playShield(0, 'deck', 1, 4);
//board.playShieldOpponent(4);
board.drawBoard(true); board.drawBoard(true);
//board.drawACard(3); //board.drawACard(3);
@ -940,19 +840,24 @@ canvas.addEventListener('contextmenu', function(event) {
// Only want to happen once (for now) // Only want to happen once (for now)
// Maybe in future add to hand would trigger another event if there's an effect? // Maybe in future add to hand would trigger another event if there's an effect?
console.log(boardElement[itemKey]);
// Check the location of element // Check the location of element
switch(boardElement[itemKey]){ switch(boardElement[itemKey]){
// Check item location, and trigger events based on it // Check item location, and trigger events based on it
case 'board': case 'board':
// Untap // Untap
cardStatus[itemKey] = null; cardStatus[itemKey] = null;
board.drawBoard();
break;
case 'hand': case 'hand':
// Can be played as mana (right click for now) // Can be played as mana (right click for now)
// Play item from boardElement hand. To boardElement mana (explanitory)
board.playMana(listPosition[itemKey], 'hand');
board.drawBoard();
break;
} }
} }
} }
board.drawBoard();
} }
// # PLAYER HAND // # PLAYER HAND
@ -1004,6 +909,10 @@ canvas.addEventListener('click', function(event) {
// Only want to happen once (for now) // Only want to happen once (for now)
// Maybe in future add to hand would trigger another event if there's an effect? // Maybe in future add to hand would trigger another event if there's an effect?
// Get the playerId of who the item belongs to
// TODO: Some other playerId may be needed to for 'mind control' cards
let playerId = player[itemKey];
// Check the location of element // Check the location of element
switch(boardElement[itemKey]){ switch(boardElement[itemKey]){
// Check item location, and trigger events based on it // Check item location, and trigger events based on it
@ -1012,15 +921,18 @@ canvas.addEventListener('click', function(event) {
// board.startAttack(index); // board.startAttack(index);
// Get tapped // Get tapped
cardStatus[itemKey] = 'tapped'; cardStatus[itemKey] = 'tapped';
board.drawBoard();
break;
case 'hand': case 'hand':
// Can be played // Can be played
// Play from item listPosition, 1 card // Play 1 item in listPosition, from hand, to board (case from leftmost, etc)
board.playCardToBoard(listPosition[itemKey], 1); // from playerId, to playerId
board.playCardToBoard(listPosition[itemKey], 'hand', 'board', playerId, playerId, 1);
board.drawBoard();
break;
} }
} }
} }
board.drawBoard();
} }
@ -1061,25 +973,6 @@ canvas.addEventListener('click', function(event) {
board.drawACardOpponent(); board.drawACardOpponent();
} }
// # PLAYER HAND
if(false){
playerHand.forEach(function(card, index){
let clickable = card.clickable;
if(clickableCheck(x,y,clickable) && !specialEvent){
board.playCardToBoard(index);
// This would actually fire off a socketIO doodad, that would then return
// data, and redraw. But for now (UI test)
// Add to board
board.drawBoard();
}
});
}
// # PLAYER BOARD // # PLAYER BOARD
playerBoard.forEach(function(card, index){ playerBoard.forEach(function(card, index){
let clickable = card.clickable; let clickable = card.clickable;
@ -1267,6 +1160,9 @@ function calculateItemSizePosition(itemKey){
// Calc position and size of the item // Calc position and size of the item
// Used for drawing and interacting // Used for drawing and interacting
// TODO: Make better calculations and positions for here (also rescaling in future)
// TODO: Maybe instead of checking each player/element combo in if, do some fancy loop?
let itemPlayer = player[itemKey]; let itemPlayer = player[itemKey];
let itemElement = boardElement[itemKey]; let itemElement = boardElement[itemKey];
@ -1275,7 +1171,7 @@ function calculateItemSizePosition(itemKey){
let itemListPositionNext = itemListPositionLength[0]; let itemListPositionNext = itemListPositionLength[0];
let itemListLength = itemListPositionLength[1]; let itemListLength = itemListPositionLength[1];
let cardPadding = 10; let cardMargin = 10;
let positionX = 0; let positionX = 0;
let positionY = 0; let positionY = 0;
let width = 0; let width = 0;
@ -1285,29 +1181,76 @@ function calculateItemSizePosition(itemKey){
//console.log('cardName: '+cardData[itemKey].name+' listPosition/i: '+i); //console.log('cardName: '+cardData[itemKey].name+' listPosition/i: '+i);
if(itemPlayer == 1 && itemElement == 'board'){ if(itemPlayer == 1 && itemElement == 'board'){
positionX = canvas.width/2 - (cardWidth * (itemListLength - i) - (cardPadding * i)); positionX = canvas.width/2 - (cardWidth * (itemListLength - i) - (cardMargin * i));
positionY = cardHeight + 30; positionY = cardHeight + 30;
width = cardWidth; width = cardWidth;
height = cardHeight; height = cardHeight;
} }
if(itemPlayer == 1 && itemElement == 'hand'){ if(itemPlayer == 1 && itemElement == 'hand'){
positionX = canvas.width/2 - (cardWidth * (itemListLength - (i+1)) - (cardPadding * (i+1))); positionX = canvas.width/2 - (cardWidth * (itemListLength - (i+1)) - (cardMargin * (i+1)));
positionY = 20; positionY = 20;
width = cardWidth; width = cardWidth;
height = cardHeight; height = cardHeight;
} }
if(itemPlayer == 1 && itemElement == 'mana'){
}
if(itemPlayer == 1 && itemElement == 'shield'){
let fromX = canvas.width-60;
let fromY = 300;
let cWidth = cardWidth*.8;
let cHeight = cardHeight*.8;
let split = 0;
// i-1 here as it's based on 0 being start, like array.
// If there's 2 in a row, split onto next row
// TODO: Not sure if I want to start elements at 1 (for clienty) or 0 (for programmy)
if(i-1>=2){ split = 1; }
// i%2 0 = 0, 1 = 1, 2 = 0, 3 = 1 to prevent margin from X/Y axis, and just between cards
positionX = (fromX+((i%2)*cardMargin))+(i%2*cWidth)-(cWidth*2);
positionY = fromY+(split*cHeight+(cardMargin*split))-(cHeight*2 + cardMargin);
width = cWidth;
height = cHeight;
}
if(itemPlayer == 0 && itemElement == 'board'){ if(itemPlayer == 0 && itemElement == 'board'){
positionX = canvas.width/2 - (cardWidth * (itemListLength - (i+1)) - (cardPadding * (i+1))); positionX = canvas.width/2 - (cardWidth * (itemListLength - (i+1)) - (cardMargin * (i+1)));
positionY = canvas.height - cardHeight-30-(cardHeight); positionY = canvas.height - cardHeight-30-(cardHeight);
width = cardWidth; width = cardWidth;
height = cardHeight; height = cardHeight;
} }
if(itemPlayer == 0 && itemElement == 'hand'){ if(itemPlayer == 0 && itemElement == 'hand'){
positionX = canvas.width/2 - (cardWidth * (itemListLength - (i+1)) - (cardPadding * (i+1))); positionX = canvas.width/2 - (cardWidth * (itemListLength - (i+1)) - (cardMargin * (i+1)));
positionY = canvas.height-cardWidth*1.5-20; positionY = canvas.height-cardWidth*1.5-20;
width = cardWidth; width = cardWidth;
height = cardHeight; height = cardHeight;
} }
if(itemPlayer == 0 && itemElement == 'mana'){
let fromX = 60;
let fromY = 60;
let cWidth = cardWidth*.5;
let cHeight = cardHeight*.5;
positionX = (fromX+cardMargin)+(i*cWidth-cardMargin);
positionY = canvas.height-fromY;
width = cWidth;
height = cHeight;
}
if(itemPlayer == 0 && itemElement == 'shield'){
let fromX = 60;
let fromY = 300;
let cWidth = cardWidth*.8;
let cHeight = cardHeight*.8;
let split = 0;
// i-1 here as it's based on 0 being start, like array.
// TODO: Not sure if I want to start elements at 1 (for clienty) or 0 (for programmy)
if(i-1>=2){ split = 1; }
positionX = (fromX+((i%2)*cardMargin)) +(i%2*cWidth);
positionY = canvas.height-fromY+(split*cHeight+(cardMargin*split));
width = cWidth;
height = cHeight;
}
//console.log('cardName: '+cardData[itemKey].name+', i/listPosition: '+i+', listPosition Length: '+itemListLength); //console.log('cardName: '+cardData[itemKey].name+', i/listPosition: '+i+', listPosition Length: '+itemListLength);

Write Preview
Loading…
Cancel
Save