chris/main_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added commander basic

Browse Source
This commit is contained in:
chris 2024-01-29 20:10:55 -05:00
parent d07d524085
commit b8200cb5c6
3 changed files with 47 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
MTG/index.html
View File

@ -12,7 +12,6 @@
/>
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<script defer src="script.js"></script>
@ -25,12 +24,15 @@
<span class="icon" onclick="reset()">
<i class="fa-solid fa-rotate-left"></i>
</span>
<span onclick="addPlayer()">
<span class="icon" onclick="addPlayer()">
<i class="fa-solid fa-circle-plus"></i>
</span>
<span class="icon" onclick="fullscreen()">
<i class="fa-solid fa-expand"></i>
</span>
<span class="icon" onclick="commander()">
<i class="fa-solid fa-crown"></i>
</span>
<span class="icon" onclick="fullscreen()">
<i class="fa-solid fa-expand"></i>
</span>
<span class="dice">
<img id="d20" src="img/dice.webp" onclick="random()" />
<div id="d20-face">1</div>
@ -40,18 +42,23 @@
<main>
<div id="player1" class="player">
<div class="name" id="name1" contenteditable="true">Player 1</div>
<div class="life">
<span class="vert">
<div onclick="lifeIncrease5(1)" class="lifeUp" class="fiveLife">
<div onclick="lifeIncrease5(1)" class="lifeUp fiveLife">
<i class="fas fa-arrow-circle-up"></i>
</div>
<div onclick="lifeIncrease(1)" class="lifeUp">
<i class="fas fa-chevron-circle-up"></i>
</div>
</span>
<!-- <span class="icon" style="font-size: 2vh" onclick="flip()">
<i class="fa-solid fa-arrow-right-arrow-left"></i>
</span> -->
<div id="lifeCount1">20</div>
<span class="vert">
<div onclick="lifeDecrease5(1)" class="lifeDown" class="fiveLife">
<div onclick="lifeDecrease5(1)" class="lifeDown fiveLife">
<i class="fas fa-arrow-circle-down"></i>
</div>
<div onclick="lifeDecrease(1)" class="lifeDown">

28
MTG/script.js
View File

@ -45,7 +45,7 @@ function isInstalled() {
// document.getElementById("remove").addEventListener("click", removePlayer);
// document.getElementById("reset").addEventListener("click", reset);
const startLife = 20;
let startLife = 20;
let playerCount;
if (!localStorage.getItem("playerCount")) {
playerCount = 1;
@ -107,6 +107,7 @@ let resetLife = () => {
for (i = 1; i < 9; i++) {
document.getElementById("lifeCount" + i).innerHTML = 20;
}
startLife = Number(20);
};
let resetName = () => {
@ -131,6 +132,31 @@ let removePlayer = () => {
}
};
let commander = () => {
Swal.fire({
title: "Start Commander Match? (life will be reset to 40)",
showDenyButton: true,
showCancelButton: false,
confirmButtonText: "yes",
denyButtonText: `no`,
}).then((result) => {
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
Swal.fire("Match started!", "", "success");
startCommander();
} else if (result.isDenied) {
return;
}
});
};
let startCommander = () => {
for (i = 1; i < 9; i++) {
document.getElementById("lifeCount" + i).innerHTML = 40;
}
startLife = Number(40);
};
function fullscreen() {
var elem = document.documentElement;

13
MTG/style.css
View File

@ -85,16 +85,19 @@ main {
background-image: -o-linear-gradient(top, #eee, #aaa);
background-image: linear-gradient(top, #eee, #aaa);
border: 1px solid #999;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(153, 153, 153);
border-bottom: 1px solid #bbb;
border-radius: 30px;
color: #333;
/* padding: 10px 0; */
padding: 10px 0;
text-shadow: 0 1px 0 #eee;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
/* height:2rem; */
/* height: 2rem; */
height: calc(100%-35px);
min-width: auto;
font-size: 4vh;
@ -116,7 +119,7 @@ main {
/* width: clamp(min-content, max-content, max-content+1rem); */
width: fit-content;
/* max-width: 25%; */
padding-top: 4%;
padding-top: 4%;/
}
.buttons1 {
@ -227,10 +230,6 @@ i {
/* font-size: 2rem ; */
}
.lifeFlex {
flex-direction: column;
}
/* Container holding the image and the text */
.container {
margin-top: 3px;