Skip to content

Commit

Permalink
Add active card highlighting and toggle
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bill-the-dev
Bill-the-dev committed Feb 9, 2022
1 parent e065d55 commit 5b1485a
Show file tree
Hide file tree
Showing 7 changed files with 63 additions and 80 deletions.
36 changes: 15 additions & 21 deletions dist/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ body {
background: radial-gradient(circle, rgba(170, 168, 161, 0.942) 6%, rgb(241, 236, 225) 90%); */
/* background-color: #EEEE; */
/* background-image: linear-gradient( 90deg, #ECE9E6 10%, #94d0f8 100%); */
background-image: linear-gradient(to bottom right, #cad0d6 0%, white 100%);
background-image: linear-gradient(to bottom right, #faf4eb 0%, #f8f9f5 100%);
/* background-image: url('assets/sayagata-400px.png');
background-repeat: repeat;
background-size: 400px 400px; */
Expand All @@ -132,7 +132,7 @@ body {
position: relative;
border-radius: 4px;
margin: 2px;
box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.25);
/* box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, .25); */
}

.front,
Expand Down Expand Up @@ -172,37 +172,31 @@ body {
color: #FFF;
}

/* inverts opponent card view */
#back4, #back5 {
transform: scaleY(-1);
}

.back {
/* background: #EEEE; */
background-image: linear-gradient(to bottom, #d7d7c0 50%, #a5a599 110%);
z-index: 1;
transform: rotateX(180deg);
}

/* FLIP LOGIC HERE */
/* .move-card:hover {
transform: rotateX(180deg);
} */
.back.is_inverted {
transform: rotate(180deg);
}

/* Flip card on toggle */
.move-card.is_flipped {
transform: rotateX(180deg);
}

/* CSS
.card__inner.is-flipped {
transform: rotateX(180deg);
} */
/* JS
const card = document.querySelector('.card__inner');
/* Highlight card on select */
.move-card .active-card {
border: 2px solid #faf437;
box-shadow: 0px 3px 18px 3px rgba(249, 242, 45, 0.845);
}

card.addEventListener('click', function () {
card.classList.toggle('is-flipped');
});
*/
.move-card .inactive-card {
box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.25);
}
/*!********************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/styles/pieces.css ***!
\********************************************************************************************************************************************/
Expand Down
4 changes: 2 additions & 2 deletions dist/main.js
View file

Large diffs are not rendered by default.

12 changes: 5 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,29 +58,27 @@ <h1 class="title">Onitama</h1>
<div class="opponent-row">
<div class="move-card" data-card="5">
<div class="front">Onitama</div>
<div class="back" id="back5"></div>
<div class="back inactive-card" id="back5"></div>
</div>
<div class="move-card" data-card="4">
<div class="front">Onitama</div>
<div class="back" id="back4"></div>
<div class="back inactive-card" id="back4"></div>
</div>
</div>
<div class="on-deck-row">
<div class="move-card" data-card="3">
<div class="front">Onitama</div>
<div class="back" id="back3">
<img class="grid-graphic" src= >
</div>
<div class="back inactive-card" id="back3"></div>
</div>
</div>
<div class="player-row">
<div class="move-card" data-card="2">
<div class="front">Onitama</div>
<div class="back" id="back2"></div>
<div class="back inactive-card" id="back2"></div>
</div>
<div class="move-card" data-card="1">
<div class="front">Onitama</div>
<div class="back" id="back1"></div>
<div class="back inactive-card" id="back1"></div>
</div>
</div>
</div>
Expand Down
18 changes: 14 additions & 4 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ document.addEventListener("DOMContentLoaded", () => {
});
}

// let pawn = document.querySelectorAll("#pawn")

// select and highlight pawn
addGlobalEventListener("click", "#pawn", e => {
console.log("You clicked a pawn");
let allPawns = document.querySelectorAll("#pawn");
Expand All @@ -28,11 +28,21 @@ document.addEventListener("DOMContentLoaded", () => {
}
});
e.target.classList.remove("inactive-pawn");
e.target.classList.add("active-pawn");


e.target.classList.add("active-pawn");
});

addGlobalEventListener("click", ".back", e => {
console.log("You clicked a card");
let allCards = document.querySelectorAll(".back");
allCards.forEach(function (card) {
card.classList.remove("active-card");
card.classList.add("inactive-card");
});
e.target.classList.remove("inactive-card");
e.target.classList.add("active-card");
});


addGlobalEventListener("click", "#start", e => {
if (game.activeGame === false) {
console.log("You clicked start");
Expand Down
26 changes: 12 additions & 14 deletions src/scripts/deck.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,27 +26,15 @@ export default class Deck {
}
return card;
}

// addGlobalEventListener("click", "#pawn", e => {
// console.log("You clicked a pawn");
// let allPawns = document.querySelectorAll("#pawn");
// allPawns.forEach(function (pawn) {
// if (pawn.classList.contains("active-pawn")) {
// pawn.classList.remove("active-pawn");
// pawn.classList.add("inactive-pawn");
// }
// });
// e.target.classList.remove("inactive-pawn");
// e.target.classList.add("active-pawn");

// toggles is_flipped on/off
viewToggleFlipAll() {
let allCards = document.querySelectorAll(".move-card");
allCards.forEach(function (card) {
card.classList.add("is_flipped")
card.classList.toggle("is_flipped")
})
}


viewDealCard(card) {
let name = card[0].toLowerCase();
for (let i = 0; i < imgSources.length; i++) {
Expand All @@ -59,6 +47,15 @@ export default class Deck {
}
}
}
// NOT WORKING
// flip opp cards, in last viewDealTo
viewInvertOppAll() {
let oppCard4 = document.querySelector("#back4");
let oppCard5 = document.querySelector("#back5");

oppCard4.classList.toggle("is_inverted");
oppCard5.classList.toggle("is_inverted");
}

viewDealTo() {
let cardL = this.currentCards.length;
Expand All @@ -75,6 +72,7 @@ export default class Deck {
return document.getElementById("back5")
// red 3 back5
} else if (cardL === 4) {
// this.viewInvertOppAll()
return document.getElementById("back3")
// on-deck back3
}
Expand Down
45 changes: 14 additions & 31 deletions src/styles/cards.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@
position: relative;
border-radius: 4px;
margin:2px;
box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, .25);


/* box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, .25); */
}

.front,
Expand All @@ -22,8 +20,7 @@
align-items: center;
/* border: 1px solid black; */
border-radius: 4px;
position: absolute;

position: absolute;
}

.front {
Expand All @@ -45,52 +42,38 @@
.opponent-row .move-card .front {
background-image: linear-gradient(to bottom left, #f8a7a6 0%, #ce0502 100%);
color: #FFF;


}

.on-deck-row .move-card .front {
background-image: linear-gradient(to top, #0099f7, #f11712);
color: #FFF;

}


/* inverts opponent card view */
#back4, #back5 {
transform: scaleY(-1)
}


.back {
/* background: #EEEE; */
background-image: linear-gradient(to bottom, #d7d7c0 50%, #a5a599 110%);
z-index: 1;
transform: rotateX(180deg);
}


/* FLIP LOGIC HERE */
/* .move-card:hover {
transform: rotateX(180deg);
} */
.back.is_inverted {
transform: rotate(180deg);
}


/* Flip card on toggle */
.move-card.is_flipped {
transform: rotateX(180deg);
}

/* Highlight card on select */
.move-card .active-card {
border: 2px solid #faf437;
box-shadow: 0px 3px 18px 3px rgba(249, 242, 45, 0.845)
}

.move-card .inactive-card {
box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, .25);
}

/* CSS
.card__inner.is-flipped {
transform: rotateX(180deg);
} */

/* JS
const card = document.querySelector('.card__inner');

card.addEventListener('click', function () {
card.classList.toggle('is-flipped');
});
*/
2 changes: 1 addition & 1 deletion src/styles/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ body {
background: radial-gradient(circle, rgba(170, 168, 161, 0.942) 6%, rgb(241, 236, 225) 90%); */
/* background-color: #EEEE; */
/* background-image: linear-gradient( 90deg, #ECE9E6 10%, #94d0f8 100%); */
background-image: linear-gradient(to bottom right, #cad0d6 0%, white 100%);
background-image: linear-gradient(to bottom right, #faf4eb 0%, rgb(248, 249, 245) 100%);
/* background-image: url('assets/sayagata-400px.png');
background-repeat: repeat;
background-size: 400px 400px; */
Expand Down

0 comments on commit 5b1485a

Please sign in to comment.