various changes
This commit is contained in:
parent
5222af6ad6
commit
f4d2572e5a
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -1,4 +1,4 @@
|
|||||||
{
|
{
|
||||||
"liveServer.settings.port": 5503,
|
"liveServer.settings.port": 5505,
|
||||||
"liveServer.settings.NoBrowser": true
|
"liveServer.settings.NoBrowser": true
|
||||||
}
|
}
|
||||||
283
MTG/index.html
283
MTG/index.html
@ -1,192 +1,293 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
|
rel="apple-touch-icon"
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
|
sizes="180x180"
|
||||||
<link rel="manifest" href="site.webmanifest">
|
href="icons/apple-touch-icon.png"
|
||||||
<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#5bbad5">
|
/>
|
||||||
<meta name="msapplication-TileColor" content="#4C633C">
|
<link
|
||||||
<meta name="theme-color" content="#4C633C">
|
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>
|
<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="style.css" />
|
||||||
<link rel="stylesheet" href="/menu/menu.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://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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
|
||||||
|
/>
|
||||||
<link rel="manifest" href="site.webmainfest" />
|
<link rel="manifest" href="site.webmainfest" />
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<!-- <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>
|
<script defer src="/menu/menu.js"></script>
|
||||||
<!-- <div id="navContainer"></div> -->
|
<div id="navContainer"></div>
|
||||||
<script>
|
<script>
|
||||||
if('serviceWorker' in navigator) {
|
if ("serviceWorker" in navigator) {
|
||||||
window.addEventListener('load', () => {
|
window.addEventListener("load", () => {
|
||||||
navigator.serviceWorker.register('sw.js')
|
navigator.serviceWorker
|
||||||
|
.register("sw.js")
|
||||||
.then((registration) => {
|
.then((registration) => {
|
||||||
console.log(`service worker registered succesfully ${registration}`)
|
console.log(
|
||||||
|
`service worker registered succesfully ${registration}`
|
||||||
|
);
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.log(`Error registring ${err}`)
|
console.log(`Error registring ${err}`);
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
} else {
|
} else {
|
||||||
console.log(`Service worker is not supported in this browser.`)
|
console.log(`Service worker is not supported in this browser.`);
|
||||||
}
|
}
|
||||||
</script>
|
</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 id="buttonWrapper" class="is-justify-content-space-between">
|
||||||
<div onclick="reset()" id="reset" class="buttons1"><i class="fas fa-undo-alt"></i><span class="buttonText"></span></div>
|
<div class="buttons1">
|
||||||
<!-- <div onclick="resetName()" id="reset" class="buttons">↻<span class="buttonText">reset name</span></div> -->
|
<i class="fa-solid fa-arrow-up-from-bracket"></i>
|
||||||
<div onclick="addPlayer()" id="addPlayer" class="buttons1"><i class="fas fa-plus-circle"></i></div>
|
</div>
|
||||||
<div class="buttons1"><i id="full" onclick="fullscreen()" class="fas fa-expand"></i></div>
|
<div onclick="removePlayer()" id="removePlayer" class="buttons1">
|
||||||
<!-- <div class="buttons"><i id="roll" onclick="random()" class="fa-solid fa-dice-d20"></i></div> -->
|
<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()">
|
<div class="container" id="centerDiv" onclick="random()">
|
||||||
<img id="d20" src="img/dice.webp" >
|
<img id="d20" src="img/dice.webp" />
|
||||||
<div class="centered" id="center">1</div>
|
<div class="centered" id="center">1</div>
|
||||||
</div>
|
</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>
|
<main>
|
||||||
<iframe src="" frameborder="0"></iframe>
|
|
||||||
<div id="player1" class="player">
|
<div id="player1" class="player">
|
||||||
<div class="name" id="name1" contenteditable="true">
|
<div class="name" id="name1" contenteditable="true">Player 1</div>
|
||||||
Player 1</div>
|
|
||||||
<div class="life">
|
<div class="life">
|
||||||
<span class="vert">
|
<span class="vert">
|
||||||
<div onclick="lifeIncrease5(1)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
|
<div onclick="lifeIncrease5(1)" class="lifeUp" class="fiveLife">
|
||||||
<div onclick="lifeIncrease(1)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
|
<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>
|
||||||
<div id="lifeCount1">20</div>
|
<div id="lifeCount1">20</div>
|
||||||
<span class="vert">
|
<span class="vert">
|
||||||
<div onclick="lifeDecrease5(1)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
|
<div onclick="lifeDecrease5(1)" class="lifeDown" class="fiveLife">
|
||||||
<div onclick="lifeDecrease(1)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
|
<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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="player2" class="player">
|
<div id="player2" class="player">
|
||||||
<div class="name" id="name2" contenteditable="true">
|
<div class="name" id="name2" contenteditable="true">Player 2</div>
|
||||||
Player 2</div>
|
|
||||||
<div class="life">
|
<div class="life">
|
||||||
<span class="vert">
|
<span class="vert">
|
||||||
<div onclick="lifeIncrease5(2)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
|
<div onclick="lifeIncrease5(2)" class="lifeUp" class="fiveLife">
|
||||||
<div onclick="lifeIncrease(2)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
|
<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>
|
</span>
|
||||||
<div id="lifeCount2">20</div>
|
<div id="lifeCount2">20</div>
|
||||||
<span class="vert">
|
<span class="vert">
|
||||||
<div onclick="lifeDecrease5(2)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
|
<div onclick="lifeDecrease5(2)" class="lifeDown" class="fiveLife">
|
||||||
<div onclick="lifeDecrease(2)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
|
<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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="player3" class="player">
|
<div id="player3" class="player">
|
||||||
<div class="name" id="name3" contenteditable="true">
|
<div class="name" id="name3" contenteditable="true">Player 3</div>
|
||||||
Player 3</div>
|
|
||||||
<div class="life">
|
<div class="life">
|
||||||
<span class="vert">
|
<span class="vert">
|
||||||
<div onclick="lifeIncrease5(3)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
|
<div onclick="lifeIncrease5(3)" class="lifeUp" class="fiveLife">
|
||||||
<div onclick="lifeIncrease(3)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
|
<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>
|
</span>
|
||||||
<div id="lifeCount3">20</div>
|
<div id="lifeCount3">20</div>
|
||||||
<span class="vert">
|
<span class="vert">
|
||||||
<div onclick="lifeDecrease5(3)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
|
<div onclick="lifeDecrease5(3)" class="lifeDown" class="fiveLife">
|
||||||
<div onclick="lifeDecrease(3)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
|
<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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="player4" class="player">
|
<div id="player4" class="player">
|
||||||
<div class="name" id="name4" contenteditable="true">
|
<div class="name" id="name4" contenteditable="true">Player 4</div>
|
||||||
Player 4</div>
|
|
||||||
<div class="life">
|
<div class="life">
|
||||||
<span class="vert">
|
<span class="vert">
|
||||||
<div onclick="lifeIncrease5(4)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
|
<div onclick="lifeIncrease5(4)" class="lifeUp" class="fiveLife">
|
||||||
<div onclick="lifeIncrease(4)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
|
<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>
|
</span>
|
||||||
<div id="lifeCount4">20</div>
|
<div id="lifeCount4">20</div>
|
||||||
<span class="vert">
|
<span class="vert">
|
||||||
<div onclick="lifeDecrease5(4)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
|
<div onclick="lifeDecrease5(4)" class="lifeDown" class="fiveLife">
|
||||||
<div onclick="lifeDecrease(4)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
|
<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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="player5" class="player">
|
<div id="player5" class="player">
|
||||||
<div class="name" id="name5" contenteditable="true">
|
<div class="name" id="name5" contenteditable="true">Player 5</div>
|
||||||
Player 5</div>
|
|
||||||
<div class="life">
|
<div class="life">
|
||||||
<span class="vert">
|
<span class="vert">
|
||||||
<div onclick="lifeIncrease5(5)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
|
<div onclick="lifeIncrease5(5)" class="lifeUp" class="fiveLife">
|
||||||
<div onclick="lifeIncrease(5)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
|
<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>
|
</span>
|
||||||
<div id="lifeCount5">20</div>
|
<div id="lifeCount5">20</div>
|
||||||
<span class="vert">
|
<span class="vert">
|
||||||
<div onclick="lifeDecrease5(5)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
|
<div onclick="lifeDecrease5(5)" class="lifeDown" class="fiveLife">
|
||||||
<div onclick="lifeDecrease(5)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
|
<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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="player6" class="player">
|
<div id="player6" class="player">
|
||||||
<div class="name" id="name6" contenteditable="true">
|
<div class="name" id="name6" contenteditable="true">Player 6</div>
|
||||||
Player 6</div>
|
|
||||||
<div class="life">
|
<div class="life">
|
||||||
<span class="vert">
|
<span class="vert">
|
||||||
<div onclick="lifeIncrease5(6)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
|
<div onclick="lifeIncrease5(6)" class="lifeUp" class="fiveLife">
|
||||||
<div onclick="lifeIncrease(6)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
|
<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>
|
</span>
|
||||||
<div id="lifeCount6">20</div>
|
<div id="lifeCount6">20</div>
|
||||||
<span class="vert">
|
<span class="vert">
|
||||||
<div onclick="lifeDecrease5(6)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
|
<div onclick="lifeDecrease5(6)" class="lifeDown" class="fiveLife">
|
||||||
<div onclick="lifeDecrease(6)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
|
<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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="player7" class="player">
|
<div id="player7" class="player">
|
||||||
<div class="name" id="name7" contenteditable="true">
|
<div class="name" id="name7" contenteditable="true">Player 7</div>
|
||||||
Player 7</div>
|
|
||||||
<div class="life">
|
<div class="life">
|
||||||
<span class="vert">
|
<span class="vert">
|
||||||
<div onclick="lifeIncrease5(7)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
|
<div onclick="lifeIncrease5(7)" class="lifeUp" class="fiveLife">
|
||||||
<div onclick="lifeIncrease(7)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
|
<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>
|
</span>
|
||||||
<div id="lifeCount7">20</div>
|
<div id="lifeCount7">20</div>
|
||||||
<span class="vert">
|
<span class="vert">
|
||||||
<div onclick="lifeDecrease5(7)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
|
<div onclick="lifeDecrease5(7)" class="lifeDown" class="fiveLife">
|
||||||
<div onclick="lifeDecrease(7)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
|
<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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="player8" class="player">
|
<div id="player8" class="player">
|
||||||
<div class="name" id="name8" contenteditable="true">
|
<div class="name" id="name8" contenteditable="true">Player 8</div>
|
||||||
Player 8</div>
|
|
||||||
<div class="life">
|
<div class="life">
|
||||||
<span class="vert">
|
<span class="vert">
|
||||||
<div onclick="lifeIncrease5(8)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
|
<div onclick="lifeIncrease5(8)" class="lifeUp" class="fiveLife">
|
||||||
<div onclick="lifeIncrease(8)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
|
<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>
|
</span>
|
||||||
<div id="lifeCount8">20</div>
|
<div id="lifeCount8">20</div>
|
||||||
<span class="vert">
|
<span class="vert">
|
||||||
<div onclick="lifeDecrease5(8)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
|
<div onclick="lifeDecrease5(8)" class="lifeDown" class="fiveLife">
|
||||||
<div onclick="lifeDecrease(8)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
|
<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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|
||||||
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
1
MTG/menu/menu.html
Normal file
1
MTG/menu/menu.html
Normal file
@ -0,0 +1 @@
|
|||||||
|
ht
|
||||||
@ -9,13 +9,17 @@
|
|||||||
body {
|
body {
|
||||||
/* background-color: rgb(78, 69, 202); */
|
/* background-color: rgb(78, 69, 202); */
|
||||||
/* background: rgb(2,0,36); */
|
/* background: rgb(2,0,36); */
|
||||||
background: radial-gradient(circle, #792f22 0%, #4f644f 47%, rgb(108, 127, 131) 100%);
|
background: radial-gradient(
|
||||||
|
circle,
|
||||||
|
#792f22 0%,
|
||||||
|
#4f644f 47%,
|
||||||
|
rgb(108, 127, 131) 100%
|
||||||
|
);
|
||||||
/* background-color: #85640b; */
|
/* background-color: #85640b; */
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
/* height: 100vh; */
|
/* height: 100vh; */
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
html {
|
html {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
@ -23,7 +27,6 @@ html{
|
|||||||
}
|
}
|
||||||
#full {
|
#full {
|
||||||
color: rgb(165, 162, 162);
|
color: rgb(165, 162, 162);
|
||||||
|
|
||||||
}
|
}
|
||||||
main {
|
main {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -99,7 +102,6 @@ main {
|
|||||||
font-size: 4vh;
|
font-size: 4vh;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
/* margin-bottom: -50px; */
|
/* margin-bottom: -50px; */
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.life div {
|
.life div {
|
||||||
@ -107,7 +109,6 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.player {
|
.player {
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@ -117,10 +118,8 @@ main {
|
|||||||
/* width: clamp(min-content, max-content, max-content+1rem); */
|
/* width: clamp(min-content, max-content, max-content+1rem); */
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
/* max-width: 25%; */
|
/* max-width: 25%; */
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.buttons1 {
|
.buttons1 {
|
||||||
font-size: 4vh;
|
font-size: 4vh;
|
||||||
|
|
||||||
@ -134,12 +133,18 @@ color:rgb(141, 140, 140);
|
|||||||
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons:focus, .lifeDown:focus, .lifeUp:focus{ -webkit-animation: beat 1s ease-in-out backwards;
|
.buttons:focus,
|
||||||
|
.lifeDown:focus,
|
||||||
|
.lifeUp:focus {
|
||||||
|
-webkit-animation: beat 1s ease-in-out backwards;
|
||||||
animation: beat 1s ease-in-out backwards;
|
animation: beat 1s ease-in-out backwards;
|
||||||
}
|
}
|
||||||
.buttons:active, .lifeDown:active, .lifeUp:active{
|
.buttons:active,
|
||||||
|
.lifeDown:active,
|
||||||
|
.lifeUp:active {
|
||||||
-webkit-animation: none;
|
-webkit-animation: none;
|
||||||
animation: none;
|
animation: none;
|
||||||
}
|
}
|
||||||
@ -152,15 +157,15 @@ color:rgb(141, 140, 140);
|
|||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
position:absolute;
|
/* position: absolute; */
|
||||||
top: 5px;
|
/* top: 52px; */
|
||||||
right: 0;
|
/* right: 0; */
|
||||||
|
margin-top: 100px;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
}
|
}
|
||||||
.buttonText {
|
.buttonText {
|
||||||
font-size: 1.5vw;
|
font-size: 1.5vw;
|
||||||
|
|
||||||
}
|
}
|
||||||
#d20 {
|
#d20 {
|
||||||
width: 4vh;
|
width: 4vh;
|
||||||
@ -174,7 +179,6 @@ color:rgb(141, 140, 140);
|
|||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
/* font-size: 3rem; */
|
/* font-size: 3rem; */
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.lifeUp {
|
.lifeUp {
|
||||||
@ -183,7 +187,7 @@ color:rgb(141, 140, 140);
|
|||||||
}
|
}
|
||||||
.lifeDown {
|
.lifeDown {
|
||||||
font-size: 7vh;
|
font-size: 7vh;
|
||||||
color:#e60000
|
color: #e60000;
|
||||||
}
|
}
|
||||||
.vert {
|
.vert {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -191,7 +195,7 @@ color:rgb(141, 140, 140);
|
|||||||
}
|
}
|
||||||
|
|
||||||
.lifeFlex {
|
.lifeFlex {
|
||||||
flex-direction: column
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Container holding the image and the text */
|
/* Container holding the image and the text */
|
||||||
@ -201,10 +205,8 @@ color:rgb(141, 140, 140);
|
|||||||
position: relative;
|
position: relative;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
/* text-align: center; */
|
/* text-align: center; */
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Centered text */
|
/* Centered text */
|
||||||
.centered {
|
.centered {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -314,16 +316,28 @@ button{
|
|||||||
animation-duration: 0.3s;
|
animation-duration: 0.3s;
|
||||||
}
|
}
|
||||||
@-webkit-keyframes spin {
|
@-webkit-keyframes spin {
|
||||||
0%{-webkit-transform: rotate(0deg);}
|
0% {
|
||||||
100%{-webkit-transform: rotate(120deg);}
|
-webkit-transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(120deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@-moz-keyframes spin {
|
@-moz-keyframes spin {
|
||||||
0%{-moz-transform: rotate(0deg);}
|
0% {
|
||||||
100%{-moz-transform: rotate(120deg);}
|
-moz-transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-moz-transform: rotate(120deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
0%{transform: rotate(0deg);}
|
0% {
|
||||||
100%{transform: rotate(120deg);}
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(120deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media only screen and (max-width: 460px) {
|
@media only screen and (max-width: 460px) {
|
||||||
h1 {
|
h1 {
|
||||||
|
|||||||
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>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en" style="height: 100%">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
@ -53,6 +53,6 @@
|
|||||||
|
|
||||||
<script defer src="/menu/menu.js"></script>
|
<script defer src="/menu/menu.js"></script>
|
||||||
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -1,36 +1,18 @@
|
|||||||
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
|
<!DOCTYPE html>
|
||||||
<div class="navbar-brand"> <a class="navbar-item" href="/index.html"> <img src="/cetechwhite.png" width="50"
|
<html lang="en">
|
||||||
height="50"> </a> <a role="button" class="navbar-burger is-dark" aria-label="menu" aria-expanded="false"
|
<head>
|
||||||
data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span
|
<meta charset="UTF-8" />
|
||||||
aria-hidden="true"></span> </a> </div>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<div id="navbarBasicExample" class="navbar-menu is-dark">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<div class="navbar-start is-dark">
|
<title>Document</title>
|
||||||
<a class="navbar-item is-dark" href="/index.html"> Home </a>
|
<link
|
||||||
<a class="navbar-item" href="/resume/"> Resume </a>
|
rel="stylesheet"
|
||||||
<div class="navbar-item has-dropdown is-hoverable">
|
href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"
|
||||||
<a class="navbar-link"> Games </a>
|
/>
|
||||||
<div class="navbar-dropdown">
|
<link rel="stylesheet" type="text/css" href="/menu/menu.css" />
|
||||||
|
</head>
|
||||||
<a class="navbar-item" href="/yatzee/"> Yatzee </a>
|
<body>
|
||||||
<a class="navbar-item" href="/tictac/"> Tic Tac Toe </a>
|
<div id="navContainer"></div>
|
||||||
<a class="navbar-item" href="/bingo/"> Bingo </a>
|
<script defer src="/menu/menu.js"></script>
|
||||||
<a class="navbar-item" href="/memory/"> Memory </a>
|
</body>
|
||||||
<a class="navbar-item" href="https://mtg.chrisedwards.tech"> MTG Life Counter </a>
|
</html>
|
||||||
|
|
||||||
</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>
|
|
||||||
|
|||||||
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;
|
padding: 2rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.score_die{
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
.numberOfDiceSelection{
|
.numberOfDiceSelection{
|
||||||
/* padding-top: 5%; */
|
/* padding-top: 5%; */
|
||||||
/* padding-right: 2%; */
|
/* padding-right: 2%; */
|
||||||
|
|||||||
@ -55,7 +55,7 @@
|
|||||||
|
|
||||||
<div id="numbers" style="display: none"></div>
|
<div id="numbers" style="display: none"></div>
|
||||||
|
|
||||||
<div class="wrapper">
|
<div class="wrapper" id="show">
|
||||||
<button id="math" onclick="showMath()">
|
<button id="math" onclick="showMath()">
|
||||||
Show Math
|
Show Math
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@ -17,13 +17,18 @@
|
|||||||
<body>
|
<body>
|
||||||
<div id="navContainer"></div>
|
<div id="navContainer"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script src="/menu/menu.js"></script>
|
||||||
|
|
||||||
|
<div id="main">
|
||||||
|
<div id="highscore"></div>
|
||||||
|
|
||||||
<div id="full" onclick="fullscreen()">
|
<div id="full" onclick="fullscreen()">
|
||||||
<i class="fas fa-expand"></i>
|
<i class="fas fa-expand"></i>
|
||||||
</div>
|
</div>
|
||||||
<script src="/menu/menu.js"></script>
|
|
||||||
|
|
||||||
<div id="highscore"></div>
|
|
||||||
<div id="main">
|
|
||||||
<div id="scorecard"></div>
|
<div id="scorecard"></div>
|
||||||
<div id="button_dice">
|
<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%; */
|
||||||
|
}
|
||||||
@ -6,10 +6,10 @@ body {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
html {
|
html {
|
||||||
height: 100%;
|
height: 200vh;
|
||||||
}
|
}
|
||||||
.cells {
|
.cells {
|
||||||
padding: 4%
|
padding: 4%;
|
||||||
}
|
}
|
||||||
#score {
|
#score {
|
||||||
border: 2px solid black;
|
border: 2px solid black;
|
||||||
@ -27,47 +27,53 @@ height: 100%;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cells {
|
.cells {
|
||||||
text-align: center;
|
text-align: center !important;
|
||||||
|
margin: auto;
|
||||||
border-bottom: 4px solid #33505d;
|
border-bottom: 4px solid #33505d;
|
||||||
border-right: 2px solid gray;
|
border-right: 2px solid gray;
|
||||||
padding-top: 4%;
|
padding-top: 4%;
|
||||||
padding-bottom: 4%;
|
padding-bottom: 4%;
|
||||||
width: 1000px;
|
width: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cells1 {
|
.cells1 {
|
||||||
|
text-align: center !important;
|
||||||
background-color: #d86e60;
|
background-color: #d86e60;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 4%;
|
padding-top: 4%;
|
||||||
padding-bottom: 4%;
|
padding-bottom: 4%;
|
||||||
}
|
}
|
||||||
|
main {
|
||||||
#main {
|
|
||||||
margin-top: 10%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dice {
|
.dice {
|
||||||
border: 5px solid black;
|
border: 5px solid black;
|
||||||
width: 80%;
|
/* width: 85%; */
|
||||||
|
min-width: 80%;
|
||||||
|
min-height: 400px;
|
||||||
background-color: #56667e;
|
background-color: #56667e;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
margin-top: 7%;
|
margin-top: 7%;
|
||||||
padding: 12px;
|
/* padding: 50px; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.dice_pic {
|
.dice_pic {
|
||||||
height: 70px;
|
height: 4rem;
|
||||||
width: 70px;
|
width: 4rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-self: start;
|
justify-self: start;
|
||||||
|
padding: 3px;
|
||||||
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dice_pic_hold {
|
.dice_pic_hold {
|
||||||
height: 70px;
|
height: 4rem;
|
||||||
width: 70px;
|
width: 4rem;
|
||||||
float: right;
|
float: right;
|
||||||
/* margin-right: 15px; */
|
/* margin-right: 15px; */
|
||||||
display: flex;
|
display: flex;
|
||||||
|
padding: 3px;
|
||||||
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#center {
|
#center {
|
||||||
@ -85,6 +91,7 @@ height: 100%;
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
margin-left: 10%;
|
margin-left: 10%;
|
||||||
|
width: 50%
|
||||||
}
|
}
|
||||||
|
|
||||||
#btn {
|
#btn {
|
||||||
@ -100,9 +107,10 @@ height: 100%;
|
|||||||
}
|
}
|
||||||
|
|
||||||
#full {
|
#full {
|
||||||
position: absolute;
|
/* position: absolute;
|
||||||
/* top: 5px; */
|
top: 40px;
|
||||||
right: 0;
|
right: 0; */
|
||||||
|
float: right;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
color: rgb(165, 162, 162);
|
color: rgb(165, 162, 162);
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
@ -170,12 +178,12 @@ height: 100%;
|
|||||||
font-size: medium;
|
font-size: medium;
|
||||||
}
|
}
|
||||||
.dice_pic {
|
.dice_pic {
|
||||||
width: 50px;
|
width: 4rem;
|
||||||
height: 50px;
|
height: 4rem;
|
||||||
}
|
}
|
||||||
.dice_pic_hold {
|
.dice_pic_hold {
|
||||||
width: 50px;
|
width: 4rem;
|
||||||
height: 50px;
|
height: 4rem;
|
||||||
}
|
}
|
||||||
.dice {
|
.dice {
|
||||||
/* width: 70%; */
|
/* width: 70%; */
|
||||||
@ -184,7 +192,7 @@ height: 100%;
|
|||||||
|
|
||||||
@media only screen and (min-width: 1200px) {
|
@media only screen and (min-width: 1200px) {
|
||||||
#main {
|
#main {
|
||||||
margin-top: 8%;
|
margin-top: 1%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -192,7 +200,7 @@ height: 100%;
|
|||||||
|
|
||||||
@media only screen and (min-width: 992px) {
|
@media only screen and (min-width: 992px) {
|
||||||
#main {
|
#main {
|
||||||
margin-top: 8%;
|
margin-top: 1%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -200,6 +208,6 @@ height: 100%;
|
|||||||
|
|
||||||
@media only screen and (min-width: 768px) {
|
@media only screen and (min-width: 768px) {
|
||||||
#main {
|
#main {
|
||||||
margin-top: 8%;
|
margin-top: 1%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -138,12 +138,12 @@ function drawboard() {
|
|||||||
document.getElementById("cell15").onclick = "";
|
document.getElementById("cell15").onclick = "";
|
||||||
document.getElementById("cell31").onclick = "";
|
document.getElementById("cell31").onclick = "";
|
||||||
//top row
|
//top row
|
||||||
document.getElementById("cell0").innerHTML = "Ones";
|
document.getElementById("cell0").innerHTML = '<img class="score_die" style="height: 2rem" src="dice/die1.png" alt="one">';
|
||||||
document.getElementById("cell2").innerHTML = "Twos";
|
document.getElementById("cell2").innerHTML = '<img class="score_die" style="height: 2rem" src="dice/die2.png" alt="two">';
|
||||||
document.getElementById("cell4").innerHTML = "Threes";
|
document.getElementById("cell4").innerHTML = '<img class="score_die" style="height: 2rem" src="dice/die3.png" alt="three">';
|
||||||
document.getElementById("cell6").innerHTML = "Fours";
|
document.getElementById("cell6").innerHTML = '<img class="score_die" style="height: 2rem" src="dice/die4.png" alt="four">';
|
||||||
document.getElementById("cell8").innerHTML = "Fives";
|
document.getElementById("cell8").innerHTML = '<img class="score_die" style="height: 2rem" src="dice/die5.png" alt="five">';
|
||||||
document.getElementById("cell10").innerHTML = "Sixes";
|
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("cell12").innerHTML = "Sub-total";
|
||||||
document.getElementById("cell14").innerHTML = "Bonus";
|
document.getElementById("cell14").innerHTML = "Bonus";
|
||||||
document.getElementById("cell16").innerHTML = "3 of a Kind";
|
document.getElementById("cell16").innerHTML = "3 of a Kind";
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user