|
|
@ -1,47 +1,60 @@ |
|
|
|
export default class Style{ |
|
|
|
export default class Style { |
|
|
|
|
|
|
|
constructor(gameInstanz) { |
|
|
|
this._game = gameInstanz; |
|
|
|
|
|
|
|
this._cardOnDeck = null; |
|
|
|
|
|
|
|
this._firstdraw = $('#first-draw'); |
|
|
|
this._firstDraw = $('#first-draw'); |
|
|
|
|
|
|
|
$('#drawCard').on('click', ()=>{ |
|
|
|
this._firstPut = $('#first-put'); |
|
|
|
|
|
|
|
this._firstPutAnim = $('#first-put-anim'); |
|
|
|
|
|
|
|
$('#drawCard').on('click', () => { |
|
|
|
this.game.currentPlayerInstanz.drawCard(1); |
|
|
|
this.refreshDebug(); |
|
|
|
}); |
|
|
|
|
|
|
|
this.firstDraw.on('mouseenter', ()=>{this.drawCardAnim(true);}); |
|
|
|
this.firstDraw.on('mouseleave', ()=>{this.drawCardAnim(false);}); |
|
|
|
this.firstDraw.on('click', ()=>{ |
|
|
|
this.firstDraw.on('mouseenter', () => { |
|
|
|
this.drawCardAnim(true, false); |
|
|
|
}); |
|
|
|
this.firstDraw.on('mouseleave', () => { |
|
|
|
this.drawCardAnim(false, false); |
|
|
|
}); |
|
|
|
this.firstDraw.on('click', () => { |
|
|
|
|
|
|
|
this.game.currentPlayerInstanz.drawCard(1); |
|
|
|
this.refreshHtml(); |
|
|
|
|
|
|
|
this.drawCardAnim(false); |
|
|
|
this.drawCardAnim(false, true); |
|
|
|
|
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
refreshHtml(){ |
|
|
|
if(this._cardOnDeck !== this.game.cardOnDeck){ |
|
|
|
|
|
|
|
refreshHtml() { |
|
|
|
if (this._cardOnDeck !== this.game.cardOnDeck) { |
|
|
|
console.log(" ewfw") |
|
|
|
this.putCardAnim(); |
|
|
|
this._cardOnDeck = this.game.cardOnDeck; |
|
|
|
} else { |
|
|
|
this.firstPut.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png'); |
|
|
|
this.firstPutAnim.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png'); |
|
|
|
} |
|
|
|
$('#first-put').attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png'); |
|
|
|
|
|
|
|
|
|
|
|
this.refreshDebug(); |
|
|
|
} |
|
|
|
|
|
|
|
refreshDebug(){ |
|
|
|
refreshDebug() { |
|
|
|
$('#drawCard').css('background-color', 'white'); |
|
|
|
|
|
|
|
$("#player").html("Spieler: " + this.game.currentPlayerInstanz.name); |
|
|
|
$("#playerCards").html("Karten: "); |
|
|
|
for (let i = 0; i < this.game.currentPlayerInstanz.hand.length; i++){ |
|
|
|
for (let i = 0; i < this.game.currentPlayerInstanz.hand.length; i++) { |
|
|
|
$('#playerCards').append(this.game.currentPlayerInstanz.hand[i].name + " - " + this.game.currentPlayerInstanz.hand[i].color); |
|
|
|
$('#playerCards').append('<button id="button' + i + '">+</button> | '); |
|
|
|
$('#button' + i).on('click', () =>{ |
|
|
|
$('#button' + i).on('click', () => { |
|
|
|
this.game.currentPlayerInstanz.putCard(i); |
|
|
|
this.refreshHtml(); |
|
|
|
}); |
|
|
@ -52,39 +65,89 @@ export default class Style{ |
|
|
|
$("#cardOnDeck").html("Karte auf dem Tisch: " + this.game.cardOnDeck.name + " - " + this.game.cardOnDeck.color); |
|
|
|
$("#playerInGame").html("Spieler im Spiel: " + this.game.players.length); |
|
|
|
|
|
|
|
if(!this.game.currentPlayerInstanz.canPlay) |
|
|
|
if (!this.game.currentPlayerInstanz.canPlay) |
|
|
|
$('#drawCard').css('background-color', 'red'); |
|
|
|
} |
|
|
|
|
|
|
|
drawCardAnim(enable){ |
|
|
|
putCardAnim() { |
|
|
|
this.firstPutAnim.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png'); |
|
|
|
|
|
|
|
this.firstPutAnim.css('transition', 'top 0.5s, opacity 0.3s'); |
|
|
|
this.firstPutAnim.css('top', '47vh'); |
|
|
|
this.firstPutAnim.css('opacity', '1'); |
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
this.firstPutAnim.css('transition', ''); |
|
|
|
this.firstPutAnim.css('top', '30vh'); |
|
|
|
this.firstPutAnim.css('opacity', '0'); |
|
|
|
this.firstPut.attr('src', './img/stackCards/' + this.game.cardOnDeck.color + '/' + this.game.cardOnDeck.name + '.png'); |
|
|
|
this.firstPut.css('opacity', '1'); |
|
|
|
}, 500); |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
drawCardAnim(enable, playerDraw) { |
|
|
|
|
|
|
|
if(enable){ |
|
|
|
this.firstDraw.css('transition', 'min-width 0.3s, top 0.5s'); |
|
|
|
if (playerDraw) { |
|
|
|
|
|
|
|
this.firstDraw.css('transition', 'min-width 0.5s, top 0.5s, opacity 0.5s'); |
|
|
|
this.firstDraw.css('min-width', '35vh'); |
|
|
|
this.firstDraw.css('top', '60vh'); |
|
|
|
this.firstDraw.css('opacity', 0); |
|
|
|
|
|
|
|
setTimeout(()=>{ |
|
|
|
this.firstDraw.css('transition', ''); |
|
|
|
this.firstDraw.css('top', '47vh'); |
|
|
|
this.firstDraw.css('min-width', '20vh'); |
|
|
|
this.firstDraw.css('opacity', '1'); |
|
|
|
}, 500); |
|
|
|
|
|
|
|
} else { |
|
|
|
if (enable) { |
|
|
|
this.firstDraw.css('transition', 'min-width 0.35s, top 0.5s'); |
|
|
|
this.firstDraw.css('min-width', '27vh'); |
|
|
|
this.firstDraw.css('top', '50vh'); |
|
|
|
}else{ |
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
this.firstDraw.css('transition', '') |
|
|
|
}, 500); |
|
|
|
} else { |
|
|
|
this.firstDraw.css('transition', 'min-width 1s, top 0.5s'); |
|
|
|
this.firstDraw.css('top', '47vh'); |
|
|
|
this.firstDraw.css('min-width', '20vh'); |
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
this.firstDraw.css('transition', '') |
|
|
|
}, 1000); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
showDebug(){ |
|
|
|
showDebug() { |
|
|
|
$('#debug').show(); |
|
|
|
this.refreshDebug(); |
|
|
|
} |
|
|
|
|
|
|
|
hideDebug(){ |
|
|
|
hideDebug() { |
|
|
|
$('#debug').hide(); |
|
|
|
} |
|
|
|
|
|
|
|
get game(){ |
|
|
|
get game() { |
|
|
|
return this._game; |
|
|
|
} |
|
|
|
|
|
|
|
get firstDraw(){ |
|
|
|
return this._firstdraw; |
|
|
|
get firstDraw() { |
|
|
|
return this._firstDraw; |
|
|
|
} |
|
|
|
|
|
|
|
get firstPut() { |
|
|
|
return this._firstPut; |
|
|
|
} |
|
|
|
|
|
|
|
get firstPutAnim() { |
|
|
|
return this._firstPutAnim; |
|
|
|
} |
|
|
|
|
|
|
|
} |