fixed MTG with bulma - button bar
This commit is contained in:
parent
7c4ec67ab5
commit
7f0485ec04
126
MTG/index.html
Executable file → Normal file
126
MTG/index.html
Executable file → Normal file
@ -2,112 +2,44 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="icons/apple-touch-icon.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="icons/favicon-32x32.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="icons/favicon-16x16.png"
|
||||
/>
|
||||
<link rel="manifest" href="site.webmanifest" />
|
||||
<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#5bbad5" />
|
||||
<meta name="msapplication-TileColor" content="#4C633C" />
|
||||
<meta name="theme-color" content="#4C633C" />
|
||||
<title>MTG Life Counter</title>
|
||||
|
||||
<script
|
||||
defer
|
||||
data-domain="mtg.chrisedwards.tech"
|
||||
src="https://metric1.chrisedwards.tech/js/plausible.js"
|
||||
></script>
|
||||
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="stylesheet" href="/menu/menu.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||||
<link rel="stylesheet" href="menu/menu.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
|
||||
href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"
|
||||
/>
|
||||
<link rel="manifest" href="site.webmainfest" />
|
||||
</head>
|
||||
<!-- <body>
|
||||
<iframe
|
||||
src="/menu/test.html"
|
||||
width="100%"
|
||||
height="52px"
|
||||
style="display: block; z-index: 1"
|
||||
frameborder="0"
|
||||
></iframe> -->
|
||||
<!-- <script defer src="/menu/menu.js"></script> -->
|
||||
<body>
|
||||
<script defer src="script.js"></script>
|
||||
|
||||
<div id="navContainer"></div>
|
||||
<script>
|
||||
if ("serviceWorker" in navigator) {
|
||||
window.addEventListener("load", () => {
|
||||
navigator.serviceWorker
|
||||
.register("sw.js")
|
||||
.then((registration) => {
|
||||
console.log(
|
||||
`service worker registered succesfully ${registration}`
|
||||
);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(`Error registring ${err}`);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
console.log(`Service worker is not supported in this browser.`);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<!-- <div id="buttonWrapper" class="is-justify-content-space-between">
|
||||
<div class="buttons1">
|
||||
<i class="fa-solid fa-arrow-up-from-bracket"></i>
|
||||
</div>
|
||||
<div onclick="removePlayer()" id="removePlayer" class="buttons1">
|
||||
<i class="fas fa-minus-circle"></i>
|
||||
</div>
|
||||
<div onclick="reset()" id="reset" class="buttons1">
|
||||
<i class="fas fa-undo-alt"></i><span class="buttonText"></span>
|
||||
</div>
|
||||
<div onclick="resetName()" id="reset" class="buttons">↻<span class="buttonText">reset name</span></div>
|
||||
<div onclick="addPlayer()" id="addPlayer" class="buttons1">
|
||||
<i class="fas fa-plus-circle"></i>
|
||||
</div>
|
||||
<div class="buttons1">
|
||||
<i id="full" onclick="fullscreen()" class="fas fa-expand"></i>
|
||||
</div>
|
||||
<div class="buttons"><i id="roll" onclick="random()" class="fa-solid fa-dice-d20"></i></div>
|
||||
<div class="container" id="centerDiv" onclick="random()">
|
||||
<img id="d20" src="img/dice.webp" />
|
||||
<div class="centered" id="center">1</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="buttons1" id="buttonWrapper">
|
||||
<i class="buttons1" class="fa-solid fa-arrow-up-from-bracket"></i>
|
||||
<i class="buttons1" class="fas fa-minus-circle"></i>
|
||||
<i class="buttons1" class="fas fa-undo-alt"></i><span class="buttonText"></span>
|
||||
<i class="buttons1" class="fas fa-plus-circle"></i>
|
||||
<img class="buttons1" id="d20" src="img/dice.webp" />
|
||||
<div class="centered" id="center">1</div>
|
||||
<!-- <i class="fa-solid fa-arrow-up-from-bracket"></i> -->
|
||||
<span>
|
||||
<i
|
||||
id="remove"
|
||||
class="fa-solid fa-circle-minus"
|
||||
onclick="removePlayer()"
|
||||
></i>
|
||||
</span>
|
||||
<span>
|
||||
<i id="reset" class="fa-solid fa-rotate-left" onclick="reset()"></i>
|
||||
</span>
|
||||
|
||||
<!-- <span class="buttonText"></span> -->
|
||||
<span onclick="addPlayer()"
|
||||
><i id="add" class="fas fa-plus-circle"></i
|
||||
></span>
|
||||
|
||||
<span class="dice">
|
||||
<img id="d20" src="img/dice.webp" />
|
||||
<div id="d20-face">1</div>
|
||||
</span>
|
||||
</div>
|
||||
<main>
|
||||
|
||||
<main>
|
||||
<div id="player1" class="player">
|
||||
<div class="name" id="name1" contenteditable="true">Player 1</div>
|
||||
<div class="life">
|
||||
@ -287,7 +219,11 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://chrisedwards.tech/MTG/script.js"></script>
|
||||
<script defer src="menu/menu.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script
|
||||
src="https://kit.fontawesome.com/17513d4ff3.js"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
293
MTG/index.html.bk
Executable file
293
MTG/index.html.bk
Executable file
@ -0,0 +1,293 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="icons/apple-touch-icon.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="icons/favicon-32x32.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="icons/favicon-16x16.png"
|
||||
/>
|
||||
<link rel="manifest" href="site.webmanifest" />
|
||||
<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#5bbad5" />
|
||||
<meta name="msapplication-TileColor" content="#4C633C" />
|
||||
<meta name="theme-color" content="#4C633C" />
|
||||
<title>MTG Life Counter</title>
|
||||
|
||||
<script
|
||||
defer
|
||||
data-domain="mtg.chrisedwards.tech"
|
||||
src="https://metric1.chrisedwards.tech/js/plausible.js"
|
||||
></script>
|
||||
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="stylesheet" href="/menu/menu.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
|
||||
/>
|
||||
<link rel="manifest" href="site.webmainfest" />
|
||||
</head>
|
||||
<!-- <body>
|
||||
<iframe
|
||||
src="/menu/test.html"
|
||||
width="100%"
|
||||
height="52px"
|
||||
style="display: block; z-index: 1"
|
||||
frameborder="0"
|
||||
></iframe> -->
|
||||
<!-- <script defer src="/menu/menu.js"></script> -->
|
||||
<div id="navContainer"></div>
|
||||
<script>
|
||||
if ("serviceWorker" in navigator) {
|
||||
window.addEventListener("load", () => {
|
||||
navigator.serviceWorker
|
||||
.register("sw.js")
|
||||
.then((registration) => {
|
||||
console.log(
|
||||
`service worker registered succesfully ${registration}`
|
||||
);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(`Error registring ${err}`);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
console.log(`Service worker is not supported in this browser.`);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<!-- <div id="buttonWrapper" class="is-justify-content-space-between">
|
||||
<div class="buttons1">
|
||||
<i class="fa-solid fa-arrow-up-from-bracket"></i>
|
||||
</div>
|
||||
<div onclick="removePlayer()" id="removePlayer" class="buttons1">
|
||||
<i class="fas fa-minus-circle"></i>
|
||||
</div>
|
||||
<div onclick="reset()" id="reset" class="buttons1">
|
||||
<i class="fas fa-undo-alt"></i><span class="buttonText"></span>
|
||||
</div>
|
||||
<div onclick="resetName()" id="reset" class="buttons">↻<span class="buttonText">reset name</span></div>
|
||||
<div onclick="addPlayer()" id="addPlayer" class="buttons1">
|
||||
<i class="fas fa-plus-circle"></i>
|
||||
</div>
|
||||
<div class="buttons1">
|
||||
<i id="full" onclick="fullscreen()" class="fas fa-expand"></i>
|
||||
</div>
|
||||
<div class="buttons"><i id="roll" onclick="random()" class="fa-solid fa-dice-d20"></i></div>
|
||||
<div class="container" id="centerDiv" onclick="random()">
|
||||
<img id="d20" src="img/dice.webp" />
|
||||
<div class="centered" id="center">1</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="buttons1" id="buttonWrapper">
|
||||
<i class="buttons1" class="fa-solid fa-arrow-up-from-bracket"></i>
|
||||
<i class="buttons1" class="fas fa-minus-circle"></i>
|
||||
<i class="buttons1" class="fas fa-undo-alt"></i><span class="buttonText"></span>
|
||||
<i class="buttons1" class="fas fa-plus-circle"></i>
|
||||
<img class="buttons1" id="d20" src="img/dice.webp" />
|
||||
<div class="centered" id="center">1</div>
|
||||
|
||||
|
||||
</div>
|
||||
<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">
|
||||
<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>
|
||||
<div id="lifeCount1">20</div>
|
||||
<span class="vert">
|
||||
<div onclick="lifeDecrease5(1)" class="lifeDown" class="fiveLife">
|
||||
<i class="fas fa-arrow-circle-down"></i>
|
||||
</div>
|
||||
<div onclick="lifeDecrease(1)" class="lifeDown">
|
||||
<i class="fas fa-chevron-circle-down"></i>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="player2" class="player">
|
||||
<div class="name" id="name2" contenteditable="true">Player 2</div>
|
||||
<div class="life">
|
||||
<span class="vert">
|
||||
<div onclick="lifeIncrease5(2)" class="lifeUp" class="fiveLife">
|
||||
<i class="fas fa-arrow-circle-up"></i>
|
||||
</div>
|
||||
<div onclick="lifeIncrease(2)" class="lifeUp">
|
||||
<i class="fas fa-chevron-circle-up"></i>
|
||||
</div>
|
||||
</span>
|
||||
<div id="lifeCount2">20</div>
|
||||
<span class="vert">
|
||||
<div onclick="lifeDecrease5(2)" class="lifeDown" class="fiveLife">
|
||||
<i class="fas fa-arrow-circle-down"></i>
|
||||
</div>
|
||||
<div onclick="lifeDecrease(2)" class="lifeDown">
|
||||
<i class="fas fa-chevron-circle-down"></i>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="player3" class="player">
|
||||
<div class="name" id="name3" contenteditable="true">Player 3</div>
|
||||
<div class="life">
|
||||
<span class="vert">
|
||||
<div onclick="lifeIncrease5(3)" class="lifeUp" class="fiveLife">
|
||||
<i class="fas fa-arrow-circle-up"></i>
|
||||
</div>
|
||||
<div onclick="lifeIncrease(3)" class="lifeUp">
|
||||
<i class="fas fa-chevron-circle-up"></i>
|
||||
</div>
|
||||
</span>
|
||||
<div id="lifeCount3">20</div>
|
||||
<span class="vert">
|
||||
<div onclick="lifeDecrease5(3)" class="lifeDown" class="fiveLife">
|
||||
<i class="fas fa-arrow-circle-down"></i>
|
||||
</div>
|
||||
<div onclick="lifeDecrease(3)" class="lifeDown">
|
||||
<i class="fas fa-chevron-circle-down"></i>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="player4" class="player">
|
||||
<div class="name" id="name4" contenteditable="true">Player 4</div>
|
||||
<div class="life">
|
||||
<span class="vert">
|
||||
<div onclick="lifeIncrease5(4)" class="lifeUp" class="fiveLife">
|
||||
<i class="fas fa-arrow-circle-up"></i>
|
||||
</div>
|
||||
<div onclick="lifeIncrease(4)" class="lifeUp">
|
||||
<i class="fas fa-chevron-circle-up"></i>
|
||||
</div>
|
||||
</span>
|
||||
<div id="lifeCount4">20</div>
|
||||
<span class="vert">
|
||||
<div onclick="lifeDecrease5(4)" class="lifeDown" class="fiveLife">
|
||||
<i class="fas fa-arrow-circle-down"></i>
|
||||
</div>
|
||||
<div onclick="lifeDecrease(4)" class="lifeDown">
|
||||
<i class="fas fa-chevron-circle-down"></i>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="player5" class="player">
|
||||
<div class="name" id="name5" contenteditable="true">Player 5</div>
|
||||
<div class="life">
|
||||
<span class="vert">
|
||||
<div onclick="lifeIncrease5(5)" class="lifeUp" class="fiveLife">
|
||||
<i class="fas fa-arrow-circle-up"></i>
|
||||
</div>
|
||||
<div onclick="lifeIncrease(5)" class="lifeUp">
|
||||
<i class="fas fa-chevron-circle-up"></i>
|
||||
</div>
|
||||
</span>
|
||||
<div id="lifeCount5">20</div>
|
||||
<span class="vert">
|
||||
<div onclick="lifeDecrease5(5)" class="lifeDown" class="fiveLife">
|
||||
<i class="fas fa-arrow-circle-down"></i>
|
||||
</div>
|
||||
<div onclick="lifeDecrease(5)" class="lifeDown">
|
||||
<i class="fas fa-chevron-circle-down"></i>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="player6" class="player">
|
||||
<div class="name" id="name6" contenteditable="true">Player 6</div>
|
||||
<div class="life">
|
||||
<span class="vert">
|
||||
<div onclick="lifeIncrease5(6)" class="lifeUp" class="fiveLife">
|
||||
<i class="fas fa-arrow-circle-up"></i>
|
||||
</div>
|
||||
<div onclick="lifeIncrease(6)" class="lifeUp">
|
||||
<i class="fas fa-chevron-circle-up"></i>
|
||||
</div>
|
||||
</span>
|
||||
<div id="lifeCount6">20</div>
|
||||
<span class="vert">
|
||||
<div onclick="lifeDecrease5(6)" class="lifeDown" class="fiveLife">
|
||||
<i class="fas fa-arrow-circle-down"></i>
|
||||
</div>
|
||||
<div onclick="lifeDecrease(6)" class="lifeDown">
|
||||
<i class="fas fa-chevron-circle-down"></i>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="player7" class="player">
|
||||
<div class="name" id="name7" contenteditable="true">Player 7</div>
|
||||
<div class="life">
|
||||
<span class="vert">
|
||||
<div onclick="lifeIncrease5(7)" class="lifeUp" class="fiveLife">
|
||||
<i class="fas fa-arrow-circle-up"></i>
|
||||
</div>
|
||||
<div onclick="lifeIncrease(7)" class="lifeUp">
|
||||
<i class="fas fa-chevron-circle-up"></i>
|
||||
</div>
|
||||
</span>
|
||||
<div id="lifeCount7">20</div>
|
||||
<span class="vert">
|
||||
<div onclick="lifeDecrease5(7)" class="lifeDown" class="fiveLife">
|
||||
<i class="fas fa-arrow-circle-down"></i>
|
||||
</div>
|
||||
<div onclick="lifeDecrease(7)" class="lifeDown">
|
||||
<i class="fas fa-chevron-circle-down"></i>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="player8" class="player">
|
||||
<div class="name" id="name8" contenteditable="true">Player 8</div>
|
||||
<div class="life">
|
||||
<span class="vert">
|
||||
<div onclick="lifeIncrease5(8)" class="lifeUp" class="fiveLife">
|
||||
<i class="fas fa-arrow-circle-up"></i>
|
||||
</div>
|
||||
<div onclick="lifeIncrease(8)" class="lifeUp">
|
||||
<i class="fas fa-chevron-circle-up"></i>
|
||||
</div>
|
||||
</span>
|
||||
<div id="lifeCount8">20</div>
|
||||
<span class="vert">
|
||||
<div onclick="lifeDecrease5(8)" class="lifeDown" class="fiveLife">
|
||||
<i class="fas fa-arrow-circle-down"></i>
|
||||
</div>
|
||||
<div onclick="lifeDecrease(8)" class="lifeDown">
|
||||
<i class="fas fa-chevron-circle-down"></i>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://chrisedwards.tech/MTG/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
MTG/menu/3bar.png
Executable file
BIN
MTG/menu/3bar.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
MTG/menu/cetechwhite.png
Executable file
BIN
MTG/menu/cetechwhite.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
30
MTG/menu/menu.css
Executable file
30
MTG/menu/menu.css
Executable file
@ -0,0 +1,30 @@
|
||||
*,
|
||||
*:after,
|
||||
*:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.navbar-menu,
|
||||
.navbar-dropdown {
|
||||
background-color: rgb(24, 24, 24) !important;
|
||||
z-index: 100 !important;
|
||||
/* position: absolute !important; */
|
||||
}
|
||||
.navbar-item {
|
||||
color: white !important;
|
||||
}
|
||||
.navbar-item:hover {
|
||||
color: #363636 !important;
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
#navContainer {
|
||||
padding-bottom: 5.5rem !important;
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
ht
|
||||
61
MTG/menu/menu.js
Executable file
61
MTG/menu/menu.js
Executable file
@ -0,0 +1,61 @@
|
||||
let navString = "";
|
||||
let baseLinks = [
|
||||
'<a class="navbar-item is-dark" href="/index.html"> Home </a>',
|
||||
'<a class="navbar-item" href="/resume/"> Resume </a>',
|
||||
];
|
||||
let gameLinks = [
|
||||
'<a class="navbar-item" href="/yatzee/"> Yatzee </a>',
|
||||
'<a class="navbar-item" href="/tictac/"> Tic Tac Toe </a>',
|
||||
// '<a class="navbar-item" href="/bingo/"> Bingo </a>',
|
||||
'<a class="navbar-item" href="/memory/"> Memory </a>',
|
||||
'<a class="navbar-item" href="https://mtg.chrisedwards.tech"> MTG Life Counter </a>',
|
||||
];
|
||||
let utilLinks = [
|
||||
'<a class="navbar-item" href="/speak"> Speak </a>',
|
||||
'<a class="navbar-item" href="/binary/"> Binary to ASCII </a>',
|
||||
'<a class="navbar-item" href="https://ytdownload.chrisedwards.tech"> YouTube Converter </a>',
|
||||
'<a class="navbar-item" href="/nato/"> NATO Alpha </a> ',
|
||||
'<a class="navbar-item" href="/rollDice/"> Roll Dice </a> ',
|
||||
];
|
||||
|
||||
navString =
|
||||
'<nav class="navbar is-dark is-fixed-top" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/index.html"> <img src="menu/cetechwhite.png" width="50" height="50"> </a> <a role="button" class="navbar-burger is-dark" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu is-dark"> <div class="navbar-start is-dark"> ';
|
||||
for (i = 0; i < baseLinks.length; i++) {
|
||||
navString += baseLinks[i];
|
||||
}
|
||||
navString +=
|
||||
'<div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> Games </a> <div class="navbar-dropdown"> ';
|
||||
for (i = 0; i < gameLinks.length; i++) {
|
||||
navString += gameLinks[i];
|
||||
}
|
||||
navString +=
|
||||
' </div> </div> <div class="navbar-item has-dropdown is-hoverable is-dark"> <a class="navbar-link"> Ultilities </a> <div class="navbar-dropdown"> ';
|
||||
for (i = 0; i < utilLinks.length; i++) {
|
||||
navString += utilLinks[i];
|
||||
}
|
||||
navString += " </div> </div> </div> </div> </nav>";
|
||||
|
||||
document.getElementById("navContainer").innerHTML = navString;
|
||||
// document.getElementsByTagName('html').classList.add('has-navbar-fixed-top');
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Get all "navbar-burger" elements
|
||||
const $navbarBurgers = Array.prototype.slice.call(
|
||||
document.querySelectorAll(".navbar-burger"),
|
||||
0
|
||||
);
|
||||
|
||||
// Add a click event on each of them
|
||||
$navbarBurgers.forEach((el) => {
|
||||
el.addEventListener("click", () => {
|
||||
// Get the target from the "data-target" attribute
|
||||
const target = el.dataset.target;
|
||||
const $target = document.getElementById(target);
|
||||
|
||||
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
|
||||
el.classList.toggle("is-active");
|
||||
$target.classList.toggle("is-active");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// addHtmlClass();
|
||||
52
MTG/menu/menu.js.bak
Executable file
52
MTG/menu/menu.js.bak
Executable file
@ -0,0 +1,52 @@
|
||||
function slideout() {
|
||||
if (document.getElementById("ham").className == "ham-menu") {
|
||||
document.getElementById("ham").className = "ham-menu2";
|
||||
document.getElementById("ham").focus();
|
||||
document.getElementById("menu").onclick = null; // console.log("show");
|
||||
} else if (document.getElementById("ham").className == "ham-menu2") {
|
||||
document.getElementById("ham").className = "ham-menu";
|
||||
document.getElementById("menu").onclick = function() {
|
||||
slideout()
|
||||
}; // console.log("hide");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function closemenu1() {
|
||||
setTimeout(function() {
|
||||
document.getElementById("ham").className = "ham-menu";
|
||||
document.getElementById("menu").onclick = function() {
|
||||
slideout()
|
||||
}
|
||||
}, 250); //console.log("off click");
|
||||
}
|
||||
var sites = [
|
||||
["/", "Home"],
|
||||
["/resume/", "Resume"],
|
||||
["/tictac/", "Tic Tac Touch"],
|
||||
["/bingo/", "Bingo!"],
|
||||
["/memory/", "Memory"],
|
||||
["/yatzee/", "Yatzee!"],
|
||||
["/MTG/", "MTG"],
|
||||
["/youtube_convert/", "Youtube Converter"],
|
||||
["/binary/", "Binary Converter"],
|
||||
["/speak/", "Speak"],
|
||||
["/nato/", "NATO Phonetic Alphabet"],
|
||||
["/rollDice", "Dice"],
|
||||
["/be_mine/", "Be Mine!"],
|
||||
["/media/Movies", "Movies"],
|
||||
["/media/Tv%20Shows", "Tv Shows"]
|
||||
];
|
||||
var foobar = "";
|
||||
for (i = 0; i < sites.length; i++) {
|
||||
// console.log(i)
|
||||
foobar += '<ul> <li><a href="' + sites[i][0] + '">' + sites[i][1] + '</a></li> <br />';
|
||||
// console.log(foobar)
|
||||
foobar += "</ul>"
|
||||
}
|
||||
|
||||
//document.getElementById("ham").addEventListener('onmouseleave', function() {slideout(), alert('test')});
|
||||
var foo = '<div id="menu" onclick="slideout()" ><img id="bars" src="/menu/3bar.png" /></div><div id="ham" class="ham-menu" ><img id="bars" src="/menu/x.png" onclick="slideout()"/><div id="site"></div> </div>'
|
||||
|
||||
document.getElementById("nav_menu").innerHTML = foo;
|
||||
document.getElementById("site").innerHTML = foobar;
|
||||
18
MTG/menu/test.html
Executable file
18
MTG/menu/test.html
Executable file
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"
|
||||
/>
|
||||
<link rel="stylesheet" type="text/css" href="/menu/menu.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="navContainer"></div>
|
||||
<script defer src="/menu/menu.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
MTG/menu/x.png
Executable file
BIN
MTG/menu/x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
115
MTG/script.js
115
MTG/script.js
@ -1,61 +1,79 @@
|
||||
window.onunload = function () {
|
||||
localStorage.setItem('playerCount', playerCount);
|
||||
localStorage.setItem("playerCount", playerCount);
|
||||
for (i = 1; i < 9; i++) {
|
||||
localStorage.setItem('playerName'+i, document.getElementById('name'+i).innerHTML);
|
||||
localStorage.setItem('lifeCount'+i, document.getElementById('lifeCount'+i).innerHTML)
|
||||
localStorage.setItem(
|
||||
"playerName" + i,
|
||||
document.getElementById("name" + i).innerHTML
|
||||
);
|
||||
localStorage.setItem(
|
||||
"lifeCount" + i,
|
||||
document.getElementById("lifeCount" + i).innerHTML
|
||||
);
|
||||
}
|
||||
};
|
||||
window.onload = function () {
|
||||
localStorage.getItem('playerCount');
|
||||
localStorage.getItem("playerCount");
|
||||
for (i = 1; i < 9; i++) {
|
||||
if (localStorage.getItem('playerName'+i)){
|
||||
document.getElementById('name'+i).innerHTML = localStorage.getItem('playerName'+i);
|
||||
console.log(document.getElementById('name'+i).innerHTML)
|
||||
if (localStorage.getItem("playerName" + i)) {
|
||||
document.getElementById("name" + i).innerHTML = localStorage.getItem(
|
||||
"playerName" + i
|
||||
);
|
||||
console.log(document.getElementById("name" + i).innerHTML);
|
||||
}
|
||||
|
||||
if (localStorage.getItem('lifeCount'+i)){
|
||||
|
||||
document.getElementById('lifeCount'+i).innerHTML = localStorage.getItem('lifeCount'+i)
|
||||
if (localStorage.getItem("lifeCount" + i)) {
|
||||
document.getElementById("lifeCount" + i).innerHTML = localStorage.getItem(
|
||||
"lifeCount" + i
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
function isInstalled() {
|
||||
// For iOS
|
||||
if(window.navigator.standalone) return true
|
||||
document.getElementById("nav").style.display = "none"
|
||||
if (window.navigator.standalone) return true;
|
||||
document.getElementById("nav").style.display = "none";
|
||||
|
||||
// For Android
|
||||
if(window.matchMedia('(display-mode: standalone)').matches) return true
|
||||
document.getElementById("nav").style.display = "none"
|
||||
if (window.matchMedia("(display-mode: standalone)").matches) return true;
|
||||
document.getElementById("nav").style.display = "none";
|
||||
// If neither is true, it's not installed
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
// document.getElementById("add").addEventListener("click", addPlayer);
|
||||
// document.getElementById("remove").addEventListener("click", removePlayer);
|
||||
// document.getElementById("reset").addEventListener("click", reset);
|
||||
|
||||
const startLife = 20;
|
||||
let playerCount;
|
||||
if (!localStorage.getItem('playerCount')) {playerCount = 1; localStorage.setItem('playerCount', playerCount);}
|
||||
playerCount = localStorage.getItem('playerCount');
|
||||
if (!localStorage.getItem("playerCount")) {
|
||||
playerCount = 1;
|
||||
localStorage.setItem("playerCount", playerCount);
|
||||
}
|
||||
playerCount = localStorage.getItem("playerCount");
|
||||
let playerCount1 = Number(playerCount) + 1;
|
||||
for (i=playerCount1; i<9; i++){document.getElementById("player"+i).style.display = "none" }
|
||||
|
||||
|
||||
|
||||
for (i = playerCount1; i < 9; i++) {
|
||||
document.getElementById("player" + i).style.display = "none";
|
||||
}
|
||||
|
||||
let lifeIncrease = (playerNum) => {
|
||||
let counter = Number(this.document.getElementById("lifeCount"+playerNum).innerHTML);
|
||||
let counter = Number(
|
||||
this.document.getElementById("lifeCount" + playerNum).innerHTML
|
||||
);
|
||||
counter++;
|
||||
if (counter >= 0) document.getElementById("lifeCount"+playerNum).style.color = "black";
|
||||
if (counter >= 0)
|
||||
document.getElementById("lifeCount" + playerNum).style.color = "black";
|
||||
document.getElementById("lifeCount" + playerNum).innerHTML = counter;
|
||||
};
|
||||
|
||||
let lifeDecrease = (playerNum) => {
|
||||
let counter = Number(document.getElementById("lifeCount"+playerNum).innerHTML);
|
||||
let counter = Number(
|
||||
document.getElementById("lifeCount" + playerNum).innerHTML
|
||||
);
|
||||
counter--;
|
||||
if (counter <= 0) document.getElementById("lifeCount"+playerNum).style.color = "red";
|
||||
if (counter <= 0)
|
||||
document.getElementById("lifeCount" + playerNum).style.color = "red";
|
||||
document.getElementById("lifeCount" + playerNum).innerHTML = counter;
|
||||
};
|
||||
|
||||
@ -69,54 +87,49 @@ for (i=playerCount1; i<9; i++){document.getElementById("player"+i).style.display
|
||||
|
||||
let reset = () => {
|
||||
Swal.fire({
|
||||
title: 'What would you like to reset?',
|
||||
title: "What would you like to reset?",
|
||||
showDenyButton: true,
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Life',
|
||||
confirmButtonText: "Life",
|
||||
denyButtonText: `Names`,
|
||||
}).then((result) => {
|
||||
/* Read more about isConfirmed, isDenied below */
|
||||
if (result.isConfirmed) {
|
||||
Swal.fire('Life reset', '', 'success');
|
||||
Swal.fire("Life reset", "", "success");
|
||||
resetLife();
|
||||
} else if (result.isDenied) {
|
||||
Swal.fire('All player names reset', '', 'success');
|
||||
Swal.fire("All player names reset", "", "success");
|
||||
resetName();
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
let resetLife = () => {
|
||||
for (i = 1; i < 9; i++) {
|
||||
document.getElementById("lifeCount"+i).innerHTML = 20
|
||||
}
|
||||
|
||||
document.getElementById("lifeCount" + i).innerHTML = 20;
|
||||
}
|
||||
};
|
||||
|
||||
let resetName = () => {
|
||||
for (i = 1; i < 9; i++) {
|
||||
document.getElementById("name"+i).innerHTML = "Player " +i
|
||||
}
|
||||
|
||||
document.getElementById("name" + i).innerHTML = "Player " + i;
|
||||
}
|
||||
};
|
||||
|
||||
let addPlayer = () => {
|
||||
if (playerCount != 8) {
|
||||
playerCount++;
|
||||
document.getElementById("player" + playerCount).style.display = "";
|
||||
localStorage.setItem('playerCount', playerCount);
|
||||
}
|
||||
|
||||
localStorage.setItem("playerCount", playerCount);
|
||||
}
|
||||
};
|
||||
|
||||
let removePlayer = () => {
|
||||
if (playerCount != 1) {
|
||||
document.getElementById("player" + playerCount).style.display = "none";
|
||||
playerCount--;
|
||||
localStorage.setItem('playerCount', playerCount);
|
||||
}
|
||||
|
||||
localStorage.setItem("playerCount", playerCount);
|
||||
}
|
||||
};
|
||||
|
||||
function fullscreen() {
|
||||
var elem = document.documentElement;
|
||||
@ -154,11 +167,7 @@ let random = () => {
|
||||
let rand = Math.floor(Math.random() * 20 + 1);
|
||||
console.log(rand);
|
||||
document.getElementById("center").innerHTML = rand;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
// function rolar(){
|
||||
// let rolagem = Math.floor(Math.random() * 20 +1);
|
||||
@ -181,5 +190,7 @@ let random = () => {
|
||||
// }
|
||||
function spin() {
|
||||
document.getElementById("d20").classList.add("spin");
|
||||
setTimeout(function(){document.getElementById("d20").classList.remove("spin");}, 500);
|
||||
setTimeout(function () {
|
||||
document.getElementById("d20").classList.remove("spin");
|
||||
}, 500);
|
||||
}
|
||||
@ -121,10 +121,10 @@ main {
|
||||
}
|
||||
|
||||
.buttons1 {
|
||||
font-size: 4vh;
|
||||
font-size: 3vh;
|
||||
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva,
|
||||
Verdana, sans-serif;
|
||||
/* font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva,
|
||||
Verdana, sans-serif; */
|
||||
/* color: #333; */
|
||||
color: rgb(141, 140, 140);
|
||||
|
||||
@ -157,9 +157,9 @@ main {
|
||||
border-radius: 30px;
|
||||
opacity: 0.6;
|
||||
background-color: #eee;
|
||||
/* position: absolute; */
|
||||
/* top: 52px; */
|
||||
/* right: 0; */
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
right: 0;
|
||||
margin-top: 100px;
|
||||
padding-right: 5px;
|
||||
align-content: center;
|
||||
@ -168,11 +168,36 @@ main {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
#d20 {
|
||||
width: 4vh;
|
||||
width: 3vh;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#center {
|
||||
#d20-face {
|
||||
position: absolute;
|
||||
|
||||
top: 53%;
|
||||
|
||||
left: 50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
text-align: center;
|
||||
font-size: 0.75vh;
|
||||
/* width: 100%; */
|
||||
color: red;
|
||||
}
|
||||
.dice {
|
||||
position: relative;
|
||||
/* width: 100%; */
|
||||
}
|
||||
/* #center {
|
||||
color: red;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 10pt !important;
|
||||
} */
|
||||
|
||||
.fiveLife {
|
||||
display: flex;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="/menu/menu.css" />
|
||||
<link rel="stylesheet" type="text/css" href="menu/menu.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user