You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
3.4 KiB
JavaScript
151 lines
3.4 KiB
JavaScript
const ctx = canvas.getContext('2d');
|
|
const canvasLeft = canvas.offsetLeft + canvas.clientLeft;
|
|
const canvasTop = canvas.offsetTop + canvas.clientTop;
|
|
|
|
const cardWidth = 240;
|
|
const cardHeight = 360;
|
|
|
|
const cards = new Image();
|
|
const back = new Image();
|
|
|
|
|
|
let clickableItems = [];
|
|
console.log(clickableItems);
|
|
|
|
|
|
class Board{
|
|
constructor(){
|
|
console.log('initBoard');
|
|
ctx.font = "12px Arial";
|
|
canvas.style.backgroundColor = 'rgb(143 153 150)';
|
|
cards.src = 'images/deck.svg';
|
|
back.src = 'images/uno.svg';
|
|
ctx.fillStyle = '#000';
|
|
}
|
|
|
|
drawBoard(){
|
|
console.log('drawBoard');
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
// Room Name
|
|
ctx.fillText(name, 0, 10);
|
|
|
|
this.drawDeck();
|
|
this.drawDeckOpponent();
|
|
|
|
|
|
this.drawPlayerNames('Nathan', 'Evil Nathan');
|
|
}
|
|
|
|
drawPlayerNames(playerName, opponentName = false){
|
|
console.log('drawPlayerNames');
|
|
|
|
// Player Name
|
|
ctx.fillText(playerName, 50, canvas.height - 110);
|
|
|
|
// Opponent's Name
|
|
if(!opponentName){
|
|
// Just clear the name
|
|
}else{
|
|
ctx.fillText(opponentName, canvas.width - (ctx.measureText(opponentName).width + 50), 110);
|
|
}
|
|
}
|
|
|
|
drawDeck(){
|
|
// Deck
|
|
clickableItems['deckSprite'] = new Shape({
|
|
name: 'deck',
|
|
x: canvas.width-cardWidth/2-40,
|
|
y: canvas.height-cardHeight/2-60,
|
|
width: cardWidth/2,
|
|
height: cardHeight/2,
|
|
fillStyle: "#0000FF"
|
|
});
|
|
clickableItems['deckSprite'].draw();
|
|
let deckCounterSprite = new Shape({
|
|
shape: 'circle',
|
|
name: 'deckCounter',
|
|
x: canvas.width-cardWidth/5,
|
|
y: canvas.height-cardHeight/5,
|
|
width: cardWidth/8,
|
|
height: cardHeight/8,
|
|
fillStyle: "#FFF"
|
|
});
|
|
deckCounterSprite.draw();
|
|
let cardsInDeck = 60;
|
|
// TODO: Center in the circle
|
|
ctx.fillText(cardsInDeck, canvas.width-cardWidth/5 - (ctx.measureText(cardsInDeck).width) + 7, canvas.height-cardHeight/5 + 5);
|
|
//ctx.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2);
|
|
}
|
|
drawDeckOpponent(){
|
|
// Opponent's Deck
|
|
let deckSprite = new Shape({
|
|
name: 'deckOpponent',
|
|
x: 40,
|
|
y: 60,
|
|
width: cardWidth/2,
|
|
height: cardHeight/2,
|
|
fillStyle: "#FF0000"
|
|
});
|
|
deckSprite.draw();
|
|
let deckCounterSprite = new Shape({
|
|
shape: 'circle',
|
|
name: 'deckCounterOpponent',
|
|
x: cardWidth/2+(cardWidth/8),
|
|
y: cardHeight/2+(cardHeight/8),
|
|
width: cardWidth/8,
|
|
height: cardHeight/8,
|
|
fillStyle: "#FFF"
|
|
});
|
|
deckCounterSprite.draw();
|
|
let cardsInDeck = 60;
|
|
// TODO: Center in the circle
|
|
ctx.fillStyle = '#000';
|
|
ctx.strokeStyle = '#000';
|
|
ctx.fillText(cardsInDeck, cardWidth/2 + (ctx.measureText(cardsInDeck).width) + 10, cardHeight/1.58);
|
|
}
|
|
|
|
// Naming's getting awkward here...
|
|
// Draw the card
|
|
drawCardSprites(){
|
|
|
|
}
|
|
|
|
drawCardSpritesOpponent(){
|
|
|
|
}
|
|
// Draw a card, traditional TCG
|
|
drawACard(){
|
|
|
|
}
|
|
drawACardOpponent(){
|
|
|
|
}
|
|
}
|
|
|
|
// Run board commands here for testing
|
|
let board = new Board;
|
|
//board.initBoard();
|
|
|
|
board.drawBoard();
|
|
|
|
canvas.addEventListener('mousemove', function(event) {
|
|
var x = event.pageX - canvasLeft,
|
|
y = event.pageY - canvasTop;
|
|
|
|
console.log('X: '+x+' Y: '+y);
|
|
|
|
// Collision detection between clicked offset and clickableItems
|
|
// https://stackoverflow.com/a/9880302
|
|
clickable = clickableItems['deckSprite'];
|
|
console.log(clickableItems['deckSprite']);
|
|
|
|
if (
|
|
y > clickable.y && y < clickable.y + clickable.height
|
|
&& x > clickable.x && x < clickable.x + clickable.width
|
|
) {
|
|
console.log('HUUUH');
|
|
}
|
|
|
|
}, false);
|
|
|