<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MTG Duel Life Total</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
user-select: none;
text-decoration: none;
overflow: hidden;
background-color: rgba(0, 0, 0, 0);
background-size: calc(6vmax + 12px) auto;
border-radius: 10%;
font-size: calc(6px + 20vmax);
}
*:focus {
outline: none;
}
body {
width: 100%;
height: 100vh;
color: #fff;
position: relative;
text-align: center;
background-color: rgb(0, 0, 0);
border-radius: 0;
}
.box {
width: 100%;
height: 100%;
position: fixed;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
border-radius: 0;
}
button {
border: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0);
transition: 0.1s;
}
div.boxBGpan>button {
transition: 0s;
}
div.boxBGpan>button:active,
div.boxBGpan>button:focus {
background-image: url(https://i.ibb.co/qRdws1x/lands-full-kopia.jpg);
background-size: auto 100%;
background-repeat: no-repeat;
-webkit-box-shadow: inset 0px 0px 8px 8px rgba(0, 0, 0, .5);
-moz-box-shadow: inset 0px 0px 8px 8px rgba(0, 0, 0, .5);
box-shadow: inset 0px 0px 8px 8px rgba(0, 0, 0, .5);
}
div.boxBGpan>button:nth-child(1):active div.boxBGpan>button:nth-child(1):focus {
background-Position: left 0% bottom 0;
}
div.boxBGpan>button:nth-child(2):active,
div.boxBGpan>button:nth-child(2):focus {
background-Position: left 25% bottom 0;
}
div.boxBGpan>button:nth-child(3):active,
div.boxBGpan>button:nth-child(3):focus {
background-Position: left 50% bottom 0;
}
div.boxBGpan>button:nth-child(4):active,
div.boxBGpan>button:nth-child(4):focus {
background-Position: left 70% bottom 0;
}
div.boxBGpan>button:nth-child(5):active,
div.boxBGpan>button:nth-child(5):focus {
background-Position: left 93% bottom 0;
}
.mainBox {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-gap: 10px;
-webkit-box-shadow: inset 0px 0px 10px 10px rgba(0, 0, 0, 1);
-moz-box-shadow: inset 0px 0px 10px 10px rgba(0, 0, 0, 1);
box-shadow: inset 0px 0px 10px 10px rgba(0, 0, 0, 1);
transition: 1s linear;
border-radius: 0;
}
button:active {
-webkit-box-shadow: inset 0px 0px 8px 8px rgba(0, 0, 0, .5);
-moz-box-shadow: inset 0px 0px 8px 8px rgba(0, 0, 0, .5);
box-shadow: inset 0px 0px 8px 8px rgba(0, 0, 0, .5);
}
.goFS:active,
.plus1:active,
.min1:active,
.rottator1:active,
.rottator2:active,
.LifeTotal20:active,
.LifeTotal40:active {
-webkit-box-shadow: inset 0px 0px 8px 8px rgba(255, 255, 255, 0.5);
-moz-box-shadow: inset 0px 0px 8px 8px rgba(255, 255, 255, 0.5);
box-shadow: inset 0px 0px 8px 8px rgba(255, 255, 255, 0.5);
}
nav {
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
z-index: 110;
background-color: #000;
transition: 0.5s linear;
overflow: hidden;
border-radius: 0;
}
nav.on {
display: none;
}
button.on {
display: none;
}
.bgcArt {
background-image: url(https://i.ibb.co/qRdws1x/lands-full-kopia.jpg);
background-size: cover;
background-repeat: no-repeat;
transition: 1s;
}
.bgcNone {
background-color: rgba(0, 0, 0, 0.0);
}
.boxBGpan {
grid-column: 1/9;
grid-row: 1/3;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
border-radius: 0;
z-index: 200;
}
.player1 {
grid-column: 1/3;
grid-row: 1/2;
}
.player2 {
grid-column: 1/3;
grid-row: 2/3;
}
div.rot180 {
transform: rotate(180deg);
}
span.LifeDisp {
grid-column: 1/9;
grid-row: 1/7;
justify-self: center;
align-self: center;
font-size: 1.4em;
text-shadow: 0 0 10px #000;
z-index: 0;
border-radius: 10%;
}
.plus1 {
grid-column: 1/5;
grid-row: 1/9;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Plus_font_awesome.svg/480px-Plus_font_awesome.svg.png);
background-position: 50% 75%;
filter: invert(1);
background-repeat: no-repeat;
z-index: 500;
}
.min1 {
grid-column: 5/9;
grid-row: 1/9;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Minus_font_awesome.svg/480px-Minus_font_awesome.svg.png);
background-position: 50% 75%;
filter: invert(1);
z-index: 500;
background-repeat: no-repeat;
}
.LifeLink {
grid-column: 1/5;
grid-row: 3/9;
background-image: url(https://i.imgur.com/RuNq7EG.png);
background-position: 50% 80%;
background-repeat: no-repeat;
background-size: calc(12vmax + 24px) auto;
border-radius: 10%
}
.LifeTotal {
position: fixed;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 1fr;
z-index: 400;
top: calc(46.5% - 10px);
right: 0;
height: calc(7% + 20px);
width: calc(100%);
border-radius: 0;
}
.rottator1,
.rottator2 {
grid-column: 1/3;
grid-row: 1/2;
background-position: 50% 50%;
background-repeat: no-repeat;
border-radius: 10%;
}
.rottator2 {
grid-column: 5/7;
grid-row: 1/2;
}
.rottator1:focus,
.rottator2:focus {
background-image: url(https://www.svgrepo.com/show/21274/refresh.svg);
filter: invert(1);
}
.goFS {
grid-column: 1/3;
grid-row: 1/2;
font-size: .15em;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.goFS:focus {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Fullscreen_font_awesome.svg/512px-Fullscreen_font_awesome.svg.png);
filter: invert(1);
}
.LifeTotal20,
.LifeTotal40 {
grid-row: 1/2;
font-size: .15em;
background-repeat: no-repeat;
background-position: 50% 50%;
opacity: 0.1;
}
.LifeTotal20 {
grid-column: 5/6;
}
.LifeTotal40 {
grid-column: 6/7;
}
.LifeTotal20:focus,
.LifeTotal40:focus {
background-image: url(https://www.svgrepo.com/show/21103/heart.svg);
filter: invert(1);
opacity: 1;
}
.burger {
position: fixed;
overflow: visible;
z-index: 700;
top: calc(50% - 5px - 4vmax);
right: calc(50% - 8px - 4vmax);
height: calc(10px + 8vmax);
width: calc(16px + 8vmax);
transition: .1s;
}
.burger span {
position: absolute;
width: 100%;
height: 20%;
background-color: rgb(255, 255, 255);
left: 0;
transition: top .1s .1s, bottom .1s .1s, opacity .1s .1s, transform .15s .1s;
}
.burger span:nth-child(1) {
top: 0;
border-radius: 10px;
}
.burger.on span:nth-child(1) {
top: 40%;
transform: rotate(45deg);
border-radius: 10px;
}
.burger span:nth-child(2) {
top: 40%;
border-radius: 10px;
}
.burger.on span:nth-child(2) {
transform: rotate(135deg);
border-radius: 10px;
}
.burger span:nth-child(3) {
bottom: 0;
border-radius: 10px;
}
.burger.on span:nth-child(3) {
bottom: 40%;
transform: rotate(45deg);
border-radius: 10px;
}
@media (orientation: landscape) {
.player1 {
grid-column: 1/2;
grid-row: 1/3;
}
.player2 {
grid-column: 2/3;
grid-row: 1/3;
}
.LifeTotal {
grid-template-columns: 1fr;
grid-template-rows: repeat(6, 1fr);
top: 0;
right: calc(46.5% - 10px);
height: 100%;
width: calc(7% + 20px);
}
.rottator1 {
grid-column: 1/2;
grid-row: 1/3;
}
.rottator2 {
grid-column: 1/2;
grid-row: 5/7;
}
.LifeTotal20 {
grid-column: 1/2;
grid-row: 5/6;
}
.LifeTotal40 {
grid-column: 1/2;
grid-row: 6/7;
}
.goFS {
grid-column: 1/2;
grid-row: 1/3;
}
}
</style>
<body>
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
<nav class="on box bgcNone">
<div class="boxN1 player1 mainBox rot180">
<button class="ONE LifeLink"></button>
<div class="boxBGpan">
<button ondblclick="bgP11()"></button>
<button ondblclick="bgP12()"></button>
<button ondblclick="bgP13()"></button>
<button ondblclick="bgP14()"></button>
<button ondblclick="bgP15()"></button>
</div>
</div>
</div>
<div class="boxN2 player2 mainBox">
<button class="TWO LifeLink"></button>
<div class="boxBGpan">
<button ondblclick="bgP21()"></button>
<button ondblclick="bgP22()"></button>
<button ondblclick="bgP23()"></button>
<button ondblclick="bgP24()"></button>
<button ondblclick="bgP25()"></button>
</div>
</div>
</nav>
<div class="box">
<div class="box1 player1 mainBox bgcArt bgP1 rot180">
<span Class="ONE LifeDisp">20</span>
<button class="ONE plus1"></button>
<button class="ONE min1"></button>
</div>
<div class="box2 player2 mainBox bgcArt bgP2">
<span Class="TWO LifeDisp">20</span>
<button class="TWO plus1"></button>
<button class="TWO min1"></button>
</div>
</div>
<div class="LifeTotal">
<button class="rottator1"></button>
<button class="rottator2"></button>
<button class="on LifeTotal20">20</button>
<button class="on LifeTotal40">40</button>
<button class="on goFS"></button>
</div>
<script>
const goFS = document.querySelector(".goFS");
goFS.addEventListener("dblclick", () => {
if (document.fullscreenElement) {
document.exitFullscreen()
.then(() => console.log("Document Exited form Full screen mode"))
.catch((err) => console.error(err))
} else {
document.documentElement.requestFullscreen()
}
}, );
const burger = document.querySelector(".burger");
const nav = document.querySelector("nav");
function bgP11() {
document.querySelector(".bgP1").style.backgroundPosition = "0 0";
}
function bgP12() {
document.querySelector(".bgP1").style.backgroundPosition = "25% 0";
}
function bgP13() {
document.querySelector(".bgP1").style.backgroundPosition = "50% 0";
}
function bgP14() {
document.querySelector(".bgP1").style.backgroundPosition = "73% 0";
}
function bgP15() {
document.querySelector(".bgP1").style.backgroundPosition = "100% 0";
}
function bgP21() {
document.querySelector(".bgP2").style.backgroundPosition = "0 0";
}
function bgP22() {
document.querySelector(".bgP2").style.backgroundPosition = "25% 0";
}
function bgP23() {
document.querySelector(".bgP2").style.backgroundPosition = "50% 0";
}
function bgP24() {
document.querySelector(".bgP2").style.backgroundPosition = "73% 0";
}
function bgP25() {
document.querySelector(".bgP2").style.backgroundPosition = "100% 0";
}
const box1 = document.querySelector(".box1");
const box2 = document.querySelector(".box2");
const boxN1 = document.querySelector(".boxN1");
const boxN2 = document.querySelector(".boxN2");
const Life1 = document.querySelector(".ONE.LifeDisp");
const life1plus1 = document.querySelector(".ONE.plus1");
const life1min1 = document.querySelector(".ONE.min1");
const lifeLink1 = document.querySelector(".ONE.LifeLink");
const Life2 = document.querySelector(".TWO.LifeDisp");
const life2plus1 = document.querySelector(".TWO.plus1");
const life2min1 = document.querySelector(".TWO.min1");
const lifeLink2 = document.querySelector(".TWO.LifeLink");
const rottator1 = document.querySelector(".rottator1");
const rottator2 = document.querySelector(".rottator2");
const LifeTotal20 = document.querySelector(".LifeTotal20");
const LifeTotal40 = document.querySelector(".LifeTotal40");
let counter1 = 20;
let counter2 = 20;
let pcounter1 = 0;
let pcounter2 = 0;
burger.addEventListener("click", () => {
burger.classList.toggle("on");
nav.classList.toggle("on");
LifeTotal20.classList.toggle("on");
LifeTotal40.classList.toggle("on");
life1plus1.classList.toggle("on");
life2plus1.classList.toggle("on");
life1min1.classList.toggle("on");
life2min1.classList.toggle("on");
goFS.classList.toggle("on");
})
rottator1.addEventListener("dblclick", () => {
box1.classList.toggle("rot180");
boxN1.classList.toggle("rot180");
})
life1plus1.addEventListener("click", () => {
counter1 = counter1 + 1;
Life1.textContent = counter1;
})
life1min1.addEventListener("click", () => {
counter1 = counter1 - 1;
Life1.textContent = counter1;
})
lifeLink1.addEventListener("click", () => {
counter1 = counter1 + 1;
Life1.textContent = counter1;
counter2 = counter2 - 1;
Life2.textContent = counter2;
})
rottator2.addEventListener("dblclick", () => {
box2.classList.toggle("rot180");
boxN2.classList.toggle("rot180");
})
life2plus1.addEventListener("click", () => {
counter2 = counter2 + 1;
Life2.textContent = counter2;
})
life2min1.addEventListener("click", () => {
counter2 = counter2 - 1;
Life2.textContent = counter2;
})
lifeLink2.addEventListener("click", () => {
counter1 = counter1 - 1;
Life1.textContent = counter1;
counter2 = counter2 + 1;
Life2.textContent = counter2;
})
LifeTotal20.addEventListener("dblclick", () => {
counter1 = 20;
Life1.textContent = counter1;
counter2 = 20;
Life2.textContent = counter2;
})
LifeTotal40.addEventListener("dblclick", () => {
counter1 = 40;
Life1.textContent = counter1;
counter2 = 40;
Life2.textContent = counter2;
})
</script>
</body>
</html>