diff --git a/uno/css/uno.css b/uno/css/uno.css
index 30d75bf..75c132b 100644
--- a/uno/css/uno.css
+++ b/uno/css/uno.css
@@ -32,7 +32,13 @@ body
transform: translate(-50%, -50%);
}
-#first-put
+#first-put-anim
{
+ top: 30vh;
+ opacity: 0;
+}
+#first-put
+{
+ opacity: 0;
}
\ No newline at end of file
diff --git a/uno/index.html b/uno/index.html
index 45b7484..b6cf432 100644
--- a/uno/index.html
+++ b/uno/index.html
@@ -24,9 +24,12 @@
+
+
+
diff --git a/uno/web/Style.js b/uno/web/Style.js
index c39ded2..868db49 100644
--- a/uno/web/Style.js
+++ b/uno/web/Style.js
@@ -1,49 +1,62 @@
-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' + i).on('click', () =>{
- this.game.currentPlayerInstanz.putCard(i);
- this.refreshHtml();
+ $('#button' + i).on('click', () => {
+ this.game.currentPlayerInstanz.putCard(i);
+ this.refreshHtml();
});
if (this.game.currentPlayerInstanz.hand[i].canPut)
$('#button' + i).css('background-color', 'green');
@@ -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);
- if(enable){
- this.firstDraw.css('transition', 'min-width 0.3s, top 0.5s');
- this.firstDraw.css('min-width', '27vh');
- this.firstDraw.css('top', '50vh');
- }else{
- this.firstDraw.css('transition', 'min-width 1s, top 0.5s');
- this.firstDraw.css('top', '47vh');
- this.firstDraw.css('min-width', '20vh');
+
+ }
+
+ drawCardAnim(enable, playerDraw) {
+
+ 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');
+
+ 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;
}
}
\ No newline at end of file