Compare commits
2 Commits
ebf6f10ead
...
bc6007c55e
| Author | SHA1 | Date | |
|---|---|---|---|
| bc6007c55e | |||
| f4d2572e5a |
6
.vscode/settings.json
vendored
6
.vscode/settings.json
vendored
@ -1,4 +1,4 @@
|
||||
{
|
||||
"liveServer.settings.port": 5503,
|
||||
"liveServer.settings.NoBrowser": true
|
||||
}
|
||||
"liveServer.settings.port": 5505,
|
||||
"liveServer.settings.NoBrowser": true
|
||||
}
|
||||
|
||||
459
MTG/index.html
459
MTG/index.html
@ -1,192 +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">
|
||||
<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>
|
||||
<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="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>
|
||||
</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="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">
|
||||
<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 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>
|
||||
<iframe src="" frameborder="0"></iframe>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
<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="script.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
MTG/menu/menu.html
Normal file
1
MTG/menu/menu.html
Normal file
@ -0,0 +1 @@
|
||||
ht
|
||||
134
MTG/style.css
134
MTG/style.css
@ -9,32 +9,35 @@
|
||||
body {
|
||||
/* background-color: rgb(78, 69, 202); */
|
||||
/* background: rgb(2,0,36); */
|
||||
background: radial-gradient(circle, #792f22 0%, #4f644f 47%, rgb(108, 127, 131) 100%);
|
||||
/* background-color: #85640b; */
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
#792f22 0%,
|
||||
#4f644f 47%,
|
||||
rgb(108, 127, 131) 100%
|
||||
);
|
||||
/* background-color: #85640b; */
|
||||
margin: 0;
|
||||
display: flex;
|
||||
/* height: 100vh; */
|
||||
height:100%;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
html{
|
||||
html {
|
||||
height: 100vh;
|
||||
font-size:110%;
|
||||
font-size: 110%;
|
||||
}
|
||||
#full{
|
||||
color:rgb(165, 162, 162);
|
||||
|
||||
#full {
|
||||
color: rgb(165, 162, 162);
|
||||
}
|
||||
main {
|
||||
display: flex;
|
||||
flex-shrink: 1;
|
||||
justify-content:center;
|
||||
justify-content: center;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva,
|
||||
Verdana, sans-serif;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
width: 100vw;
|
||||
/* height: 100vh; */
|
||||
/* height: 100vh; */
|
||||
position: relative;
|
||||
margin-top: 70px;
|
||||
}
|
||||
@ -99,7 +102,6 @@ main {
|
||||
font-size: 4vh;
|
||||
user-select: none;
|
||||
/* margin-bottom: -50px; */
|
||||
|
||||
}
|
||||
|
||||
.life div {
|
||||
@ -107,7 +109,6 @@ main {
|
||||
}
|
||||
|
||||
.player {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
@ -115,57 +116,61 @@ main {
|
||||
/* margin-bottom: -100px; */
|
||||
/* max-width: max-content; */
|
||||
/* width: clamp(min-content, max-content, max-content+1rem); */
|
||||
width:fit-content;
|
||||
width: fit-content;
|
||||
/* max-width: 25%; */
|
||||
|
||||
}
|
||||
|
||||
|
||||
.buttons1 {
|
||||
font-size: 4vh;
|
||||
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva,
|
||||
Verdana, sans-serif;
|
||||
/* color: #333; */
|
||||
color:rgb(141, 140, 140);
|
||||
color: rgb(141, 140, 140);
|
||||
|
||||
text-shadow: 0 1px 0 #eee;
|
||||
margin-top: 3px;
|
||||
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.buttons:focus, .lifeDown:focus, .lifeUp:focus{ -webkit-animation: beat 1s ease-in-out backwards;
|
||||
animation: beat 1s ease-in-out backwards;
|
||||
}
|
||||
.buttons:active, .lifeDown:active, .lifeUp:active{
|
||||
-webkit-animation: none;
|
||||
animation: none;
|
||||
.buttons:focus,
|
||||
.lifeDown:focus,
|
||||
.lifeUp:focus {
|
||||
-webkit-animation: beat 1s ease-in-out backwards;
|
||||
animation: beat 1s ease-in-out backwards;
|
||||
}
|
||||
.buttons:active,
|
||||
.lifeDown:active,
|
||||
.lifeUp:active {
|
||||
-webkit-animation: none;
|
||||
animation: none;
|
||||
}
|
||||
#buttonWrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content:space-evenly;
|
||||
justify-content: space-evenly;
|
||||
/* z-index: 100; */
|
||||
width: 75%;
|
||||
border-radius: 30px;
|
||||
opacity: 0.6;
|
||||
background-color: #eee;
|
||||
position:absolute;
|
||||
top: 5px;
|
||||
right: 0;
|
||||
/* position: absolute; */
|
||||
/* top: 52px; */
|
||||
/* right: 0; */
|
||||
margin-top: 100px;
|
||||
padding-right: 5px;
|
||||
align-content: center;
|
||||
}
|
||||
.buttonText {
|
||||
font-size: 1.5vw;
|
||||
|
||||
}
|
||||
#d20 {
|
||||
width: 4vh;
|
||||
}
|
||||
#center{
|
||||
#center {
|
||||
color: red;
|
||||
}
|
||||
|
||||
@ -174,37 +179,34 @@ color:rgb(141, 140, 140);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
/* font-size: 3rem; */
|
||||
|
||||
}
|
||||
|
||||
.lifeUp{
|
||||
.lifeUp {
|
||||
font-size: 7vh;
|
||||
color: #00cc00;
|
||||
}
|
||||
.lifeDown{
|
||||
.lifeDown {
|
||||
font-size: 7vh;
|
||||
color:#e60000
|
||||
color: #e60000;
|
||||
}
|
||||
.vert{
|
||||
.vert {
|
||||
flex-direction: column;
|
||||
/* font-size: 2rem ; */
|
||||
}
|
||||
|
||||
.lifeFlex{
|
||||
flex-direction: column
|
||||
.lifeFlex {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Container holding the image and the text */
|
||||
.container {
|
||||
/* Container holding the image and the text */
|
||||
.container {
|
||||
margin-top: 3px;
|
||||
/* display: flex; */
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
/* text-align: center; */
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Centered text */
|
||||
.centered {
|
||||
position: absolute;
|
||||
@ -213,7 +215,7 @@ color:rgb(141, 140, 140);
|
||||
transform: translate(-50%, -50%);
|
||||
color: #792f22;
|
||||
font-size: 1.5vh;
|
||||
}
|
||||
}
|
||||
/*
|
||||
|
||||
:root{
|
||||
@ -307,29 +309,41 @@ button{
|
||||
transition: ease 0.3s;
|
||||
}
|
||||
*/
|
||||
.spin{
|
||||
.spin {
|
||||
-webkit-animation: spin 0.3s linear;
|
||||
-moz-animation: spin 0.3s linear;
|
||||
animation: spin 0.3s linear;
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
@-webkit-keyframes spin{
|
||||
0%{-webkit-transform: rotate(0deg);}
|
||||
100%{-webkit-transform: rotate(120deg);}
|
||||
}
|
||||
@-moz-keyframes spin{
|
||||
0%{-moz-transform: rotate(0deg);}
|
||||
100%{-moz-transform: rotate(120deg);}
|
||||
}
|
||||
@keyframes spin{
|
||||
0%{transform: rotate(0deg);}
|
||||
100%{transform: rotate(120deg);}
|
||||
}
|
||||
@media only screen and (max-width: 460px){
|
||||
h1{
|
||||
font-size: 26px;
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
p{
|
||||
font-size: 20px;
|
||||
100% {
|
||||
-webkit-transform: rotate(120deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@-moz-keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: rotate(120deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 460px) {
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
}
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
100
alyssa/puzzle/index.html
Normal file
100
alyssa/puzzle/index.html
Normal file
@ -0,0 +1,100 @@
|
||||
<!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>
|
||||
|
||||
<style>
|
||||
table {
|
||||
border: 2px black solid;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="puzzle">
|
||||
<table id="grid"></table>
|
||||
</div>
|
||||
<div id="words"></div>
|
||||
|
||||
<script src="script.js" defer></script>
|
||||
|
||||
<script>
|
||||
let rows, cols;
|
||||
let str = "";
|
||||
// function makeTable(inputRows, inputColumns) {
|
||||
// rows = inputRows;
|
||||
// console.log(rows + " rows");
|
||||
// cols = inputColumns;
|
||||
// for (i = 0; i < rows; i++) {
|
||||
// console.log("pass " + i);
|
||||
// str += '<tr><td class="cells" id="cell' + i + '">' + i + "</td>";
|
||||
// //i++;
|
||||
// // str += '<td class="cells" onclick="" id="cell' + q + '"></td></tr>';
|
||||
// }
|
||||
// console.log(str);
|
||||
// }
|
||||
|
||||
function tableCreate(inputRows, inputColumns) {
|
||||
const body = document.body,
|
||||
tbl = document.createElement("table");
|
||||
tbl.style.width = "100px";
|
||||
tbl.style.border = "1px solid black";
|
||||
tbl.style.borderCollapse = "collapse";
|
||||
rows = inputRows;
|
||||
cols = inputColumns;
|
||||
for (let i = 0; i < rows; i++) {
|
||||
const tr = tbl.insertRow();
|
||||
for (let j = 0; j < cols; j++) {
|
||||
if (i === 2 && j === 1) {
|
||||
break;
|
||||
} else {
|
||||
const td = tr.insertCell();
|
||||
td.appendChild(document.createTextNode(`Cell ${i}`));
|
||||
td.style.border = "1px solid black";
|
||||
td.style.borderCollapse = "collapse";
|
||||
if (i === 1 && j === 1) {
|
||||
td.setAttribute("rowSpan", "2");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
body.appendChild(tbl);
|
||||
}
|
||||
|
||||
function addTable(inputRows, inputColumns) {
|
||||
rows = inputRows;
|
||||
cols = inputColumns;
|
||||
|
||||
var myTableDiv = document.getElementById("puzzle");
|
||||
myTableDiv.style.borderCollapse = "collapse";
|
||||
var table = document.createElement("TABLE");
|
||||
table.border = "1";
|
||||
|
||||
var tableBody = document.createElement("TBODY");
|
||||
table.appendChild(tableBody);
|
||||
|
||||
for (var i = 0; i < rows; i++) {
|
||||
var tr = document.createElement("TR");
|
||||
tableBody.appendChild(tr);
|
||||
|
||||
for (var j = 0; j < cols; j++) {
|
||||
var td = document.createElement("TD");
|
||||
// td.width = "50";
|
||||
td.appendChild(document.createTextNode("A"));
|
||||
tr.appendChild(td);
|
||||
}
|
||||
}
|
||||
myTableDiv.appendChild(table);
|
||||
}
|
||||
addTable(15, 15);
|
||||
|
||||
// tableCreate(5, 5);
|
||||
// makeTable(5, 5);
|
||||
|
||||
// document.getElementById("grid").innerHTML = str;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
7
alyssa/puzzle/script.js
Normal file
7
alyssa/puzzle/script.js
Normal file
@ -0,0 +1,7 @@
|
||||
// let rows, cols;
|
||||
|
||||
// for (q = 0; q < rows; q++) {
|
||||
// str += '<tr><td class="cells" id="cell' + q + '"></td>';
|
||||
// q++;
|
||||
// str += '<td class="cells" onclick="" id="cell' + q + '"></td></tr>';
|
||||
// }
|
||||
0
alyssa/puzzle/style.css
Normal file
0
alyssa/puzzle/style.css
Normal file
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" style="height: 100%">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
@ -52,6 +52,6 @@
|
||||
|
||||
<script defer src="/menu/menu.js"></script>
|
||||
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
|
||||
<script src="script.js" defer></script>
|
||||
<script defer src="script.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,36 +1,18 @@
|
||||
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand"> <a class="navbar-item" href="/index.html"> <img src="/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">
|
||||
<a class="navbar-item is-dark" href="/index.html"> Home </a>
|
||||
<a class="navbar-item" href="/resume/"> Resume </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Games </a>
|
||||
<div class="navbar-dropdown">
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable is-dark"> <a class="navbar-link"> Ultilities </a>
|
||||
<div class="navbar-dropdown">
|
||||
|
||||
<a class="navbar-item" href="/speak"> Speak </a>
|
||||
<a class="navbar-item" href="/binary/"> Binary to ASCII </a>
|
||||
<a class="navbar-item" href="/youtube_convert/"> YouTube Converter </a>
|
||||
<a class="navbar-item" href="/nato/"> NATO Alpha </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</nav>
|
||||
<!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>
|
||||
|
||||
44
pdf/index.html
Normal file
44
pdf/index.html
Normal file
@ -0,0 +1,44 @@
|
||||
<!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>Happy Valentine's Day</title>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.3.122/pdf.min.js"
|
||||
integrity="sha512-CGtesFWoCAxW8xV1S4wdev6uWmGhkEBtTGJsQLkT75ab0eVyx0RTOdGxHk9hFVV/OlF6ZyCoukfPdiZPpAiUtw=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
></script>
|
||||
|
||||
<style>
|
||||
#id {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
max-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- <img id="puzzle" src="sean.png" alt="fuckyou" srcset="" /> -->
|
||||
<!-- <iframe src="sean.pdf" width="100%" height="800px"></iframe> -->
|
||||
<iframe
|
||||
id="pdfviewer"
|
||||
src="sean.html"
|
||||
frameborder="0"
|
||||
width="100%"
|
||||
height="800px"
|
||||
></iframe>
|
||||
<!-- <a href="sean.pdf">Open Full Screen PDF.js Viewer</a> -->
|
||||
<!-- <iframe
|
||||
id="pdf-js-viewer"
|
||||
src="sean.pdf"
|
||||
title="webviewer"
|
||||
frameborder="0"
|
||||
width="500"
|
||||
height="600"
|
||||
></iframe> -->
|
||||
<!-- <embed id="puzzle" src="sean.pdf" width="800px" height="800px" /> -->
|
||||
</body>
|
||||
</html>
|
||||
451
pdf/sean.html
Normal file
451
pdf/sean.html
Normal file
File diff suppressed because one or more lines are too long
12701
pdf/sean.pdf
Normal file
12701
pdf/sean.pdf
Normal file
File diff suppressed because it is too large
Load Diff
BIN
pdf/sean.png
Normal file
BIN
pdf/sean.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
@ -28,6 +28,9 @@ body{
|
||||
padding: 2rem;
|
||||
|
||||
}
|
||||
.score_die{
|
||||
height: 20px;
|
||||
}
|
||||
.numberOfDiceSelection{
|
||||
/* padding-top: 5%; */
|
||||
/* padding-right: 2%; */
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
|
||||
<div id="numbers" style="display: none"></div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="wrapper" id="show">
|
||||
<button id="math" onclick="showMath()">
|
||||
Show Math
|
||||
</button>
|
||||
|
||||
@ -17,13 +17,18 @@
|
||||
<body>
|
||||
<div id="navContainer"></div>
|
||||
</div>
|
||||
<div id="full" onclick="fullscreen()">
|
||||
<i class="fas fa-expand"></i>
|
||||
</div>
|
||||
|
||||
<script src="/menu/menu.js"></script>
|
||||
|
||||
<div id="highscore"></div>
|
||||
<div id="main">
|
||||
<div id="highscore"></div>
|
||||
|
||||
<div id="full" onclick="fullscreen()">
|
||||
<i class="fas fa-expand"></i>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="scorecard"></div>
|
||||
<div id="button_dice">
|
||||
|
||||
|
||||
46
yatzee/script.js
Normal file
46
yatzee/script.js
Normal file
@ -0,0 +1,46 @@
|
||||
let die_value = [];
|
||||
for (i = 0; i < 5; i++) {
|
||||
die_value[i] = new Array(2);
|
||||
}
|
||||
for (i = 0, j = 1; i < 5; i++, j++) {
|
||||
die_value[i][0] = "<img src='dice/die" + j + ".png' />";
|
||||
die_value[i][1] = false;
|
||||
}
|
||||
// let cellOrder = 0;
|
||||
function hold(cell) {
|
||||
let length = document.getElementsByClassName("dice_pic").length;
|
||||
let length_hold = document.getElementsByClassName("dice_pic_hold").length;
|
||||
cellOrder = cell.style.order;
|
||||
console.log(length);
|
||||
if (cell.className == "dice_pic") {
|
||||
cell.className = "dice_pic_hold";
|
||||
// cell.style.order = cellOrder + 1;
|
||||
// console.log(`order${cell.style.order}`)
|
||||
} else {
|
||||
cell.className = "dice_pic"
|
||||
}
|
||||
// cellOrder = 0;
|
||||
}
|
||||
|
||||
function rollDice() {
|
||||
let dice = document.getElementsByClassName('dice_pic');
|
||||
let dice_hold = document.getElementsByClassName('dice_pic_hold');
|
||||
document.getElementById('roll').removeAttribute('onclick');
|
||||
function shuffDice() {
|
||||
for ( i = 0; i < dice.length; i++) {
|
||||
var rand = Math.floor(Math.random() * 6) + 1;
|
||||
|
||||
dice[i].src = 'dice/die' + rand + '.png';
|
||||
dice[i].setAttribute('onclick', 'hold(this)');
|
||||
}
|
||||
}
|
||||
for (i = 0, j= 1; i < dice.length; i++, j++) {
|
||||
dice[i].removeAttribute('onclick');
|
||||
dice[i].src = 'dice/die' + j + '.gif';
|
||||
console.log('gif')
|
||||
setTimeout(shuffDice, 700)
|
||||
|
||||
}
|
||||
document.getElementById('roll').setAttribute('onclick', 'rollDice()');
|
||||
}
|
||||
|
||||
68
yatzee/style.css
Normal file
68
yatzee/style.css
Normal file
@ -0,0 +1,68 @@
|
||||
#highScore{
|
||||
text-align: center;
|
||||
}
|
||||
header{
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
#diceBoard{
|
||||
width: 85%;
|
||||
height: 150px;
|
||||
background-color: blueviolet;
|
||||
border: 2px solid black;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
padding: .5rem;
|
||||
flex-wrap: nowrap;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#scoreBoard{
|
||||
width: 85%;
|
||||
height: 300px;
|
||||
background-color: rgb(226, 192, 43);
|
||||
border: 3px dotted black;
|
||||
margin: auto;
|
||||
}
|
||||
#diceBoard img{
|
||||
height: 3rem;
|
||||
}
|
||||
.dice_pic_hold{
|
||||
align-self: flex-end;
|
||||
order: -1;
|
||||
}
|
||||
#game{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
#roll{
|
||||
padding: 2rem;
|
||||
color: white;
|
||||
background-color: rgb(50, 68, 83);
|
||||
border-radius: 25%;
|
||||
box-shadow: 2px 2px gray;
|
||||
}
|
||||
|
||||
#upper{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items:center;
|
||||
width: 100%;
|
||||
border: 1px solid black;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.upperScore{
|
||||
height: 30px;
|
||||
background-color: brown;
|
||||
/* border: 2px solid black; */
|
||||
width: 16.66px;
|
||||
/* display: none; */
|
||||
}
|
||||
.upperLable{
|
||||
flex-wrap: wrap;
|
||||
/* width: 100%; */
|
||||
}
|
||||
@ -5,11 +5,11 @@ body {
|
||||
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
|
||||
height: 100%;
|
||||
}
|
||||
html{
|
||||
height: 100%;
|
||||
html {
|
||||
height: 200vh;
|
||||
}
|
||||
.cells{
|
||||
padding: 4%
|
||||
.cells {
|
||||
padding: 4%;
|
||||
}
|
||||
#score {
|
||||
border: 2px solid black;
|
||||
@ -27,47 +27,53 @@ height: 100%;
|
||||
}
|
||||
|
||||
.cells {
|
||||
text-align: center;
|
||||
text-align: center !important;
|
||||
margin: auto;
|
||||
border-bottom: 4px solid #33505d;
|
||||
border-right: 2px solid gray;
|
||||
padding-top: 4%;
|
||||
padding-bottom: 4%;
|
||||
width: 1000px;
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.cells1 {
|
||||
text-align: center !important;
|
||||
background-color: #d86e60;
|
||||
text-align: center;
|
||||
padding-top: 4%;
|
||||
padding-bottom: 4%;
|
||||
}
|
||||
|
||||
#main {
|
||||
margin-top: 10%;
|
||||
main {
|
||||
}
|
||||
|
||||
.dice {
|
||||
border: 5px solid black;
|
||||
width: 80%;
|
||||
/* width: 85%; */
|
||||
min-width: 80%;
|
||||
min-height: 400px;
|
||||
background-color: #56667e;
|
||||
align-self: center;
|
||||
margin-top: 7%;
|
||||
padding: 12px;
|
||||
/* padding: 50px; */
|
||||
}
|
||||
|
||||
.dice_pic {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
display: flex;
|
||||
justify-self: start;
|
||||
padding: 3px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.dice_pic_hold {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
float: right;
|
||||
/* margin-right: 15px; */
|
||||
display: flex;
|
||||
padding: 3px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#center {
|
||||
@ -85,6 +91,7 @@ height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
margin-left: 10%;
|
||||
width: 50%
|
||||
}
|
||||
|
||||
#btn {
|
||||
@ -100,9 +107,10 @@ height: 100%;
|
||||
}
|
||||
|
||||
#full {
|
||||
position: absolute;
|
||||
/* top: 5px; */
|
||||
right: 0;
|
||||
/* position: absolute;
|
||||
top: 40px;
|
||||
right: 0; */
|
||||
float: right;
|
||||
z-index: 1;
|
||||
color: rgb(165, 162, 162);
|
||||
font-size: 3rem;
|
||||
@ -170,12 +178,12 @@ height: 100%;
|
||||
font-size: medium;
|
||||
}
|
||||
.dice_pic {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
.dice_pic_hold {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
.dice {
|
||||
/* width: 70%; */
|
||||
@ -184,7 +192,7 @@ height: 100%;
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
#main {
|
||||
margin-top: 8%;
|
||||
margin-top: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -192,7 +200,7 @@ height: 100%;
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
#main {
|
||||
margin-top: 8%;
|
||||
margin-top: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -200,6 +208,6 @@ height: 100%;
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
#main {
|
||||
margin-top: 8%;
|
||||
margin-top: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -138,12 +138,12 @@ function drawboard() {
|
||||
document.getElementById("cell15").onclick = "";
|
||||
document.getElementById("cell31").onclick = "";
|
||||
//top row
|
||||
document.getElementById("cell0").innerHTML = "Ones";
|
||||
document.getElementById("cell2").innerHTML = "Twos";
|
||||
document.getElementById("cell4").innerHTML = "Threes";
|
||||
document.getElementById("cell6").innerHTML = "Fours";
|
||||
document.getElementById("cell8").innerHTML = "Fives";
|
||||
document.getElementById("cell10").innerHTML = "Sixes";
|
||||
document.getElementById("cell0").innerHTML = '<img class="score_die" style="height: 2rem" src="dice/die1.png" alt="one">';
|
||||
document.getElementById("cell2").innerHTML = '<img class="score_die" style="height: 2rem" src="dice/die2.png" alt="two">';
|
||||
document.getElementById("cell4").innerHTML = '<img class="score_die" style="height: 2rem" src="dice/die3.png" alt="three">';
|
||||
document.getElementById("cell6").innerHTML = '<img class="score_die" style="height: 2rem" src="dice/die4.png" alt="four">';
|
||||
document.getElementById("cell8").innerHTML = '<img class="score_die" style="height: 2rem" src="dice/die5.png" alt="five">';
|
||||
document.getElementById("cell10").innerHTML = '<img class="score_die" style="height: 2rem" src="dice/die6.png" alt="six">';
|
||||
document.getElementById("cell12").innerHTML = "Sub-total";
|
||||
document.getElementById("cell14").innerHTML = "Bonus";
|
||||
document.getElementById("cell16").innerHTML = "3 of a Kind";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user