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

various changes

Browse Source
This commit is contained in:
chris 2023-04-15 20:28:38 -04:00
parent 5222af6ad6
commit f4d2572e5a
20 changed files with 13847 additions and 316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.vscode/settings.json vendored
View File

@ -1,4 +1,4 @@
{ {
"liveServer.settings.port": 5503, "liveServer.settings.port": 5505,
"liveServer.settings.NoBrowser": true "liveServer.settings.NoBrowser": true
} }

459
MTG/index.html
View File

@ -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
.then((registration) => { .register("sw.js")
console.log(`service worker registered succesfully ${registration}`) .then((registration) => {
}) console.log(
.catch((err) => { `service worker registered succesfully ${registration}`
console.log(`Error registring ${err}`) );
}) })
}) .catch((err) => {
} else { console.log(`Error registring ${err}`);
console.log(`Service worker is not supported in this browser.`) });
} });
</script> } 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> <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 id="player1" class="player">
<div class="name" id="name2" contenteditable="true"> <div class="name" id="name1" contenteditable="true">Player 1</div>
Player 2</div> <div class="life">
<div class="life"> <span class="vert">
<span class="vert"> <div onclick="lifeIncrease5(1)" class="lifeUp" class="fiveLife">
<div onclick="lifeIncrease5(2)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div> <i class="fas fa-arrow-circle-up"></i>
<div onclick="lifeIncrease(2)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div> </div>
</span> <div onclick="lifeIncrease(1)" class="lifeUp">
<div id="lifeCount2">20</div> <i class="fas fa-chevron-circle-up"></i>
<span class="vert"> </div>
<div onclick="lifeDecrease5(2)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div> </span>
<div onclick="lifeDecrease(2)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div> <div id="lifeCount1">20</div>
</span> <span class="vert">
</div> <div onclick="lifeDecrease5(1)" class="lifeDown" class="fiveLife">
</div> <i class="fas fa-arrow-circle-down"></i>
<div id="player3" class="player"> </div>
<div class="name" id="name3" contenteditable="true"> <div onclick="lifeDecrease(1)" class="lifeDown">
Player 3</div> <i class="fas fa-chevron-circle-down"></i>
<div class="life"> </div>
<span class="vert"> </span>
<div onclick="lifeIncrease5(3)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div> </div>
<div onclick="lifeIncrease(3)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div> </div>
</span>
<div id="lifeCount3">20</div> <div id="player2" class="player">
<span class="vert"> <div class="name" id="name2" contenteditable="true">Player 2</div>
<div onclick="lifeDecrease5(3)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div> <div class="life">
<div onclick="lifeDecrease(3)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div> <span class="vert">
</span> <div onclick="lifeIncrease5(2)" class="lifeUp" class="fiveLife">
</div> <i class="fas fa-arrow-circle-up"></i>
</div> </div>
<div id="player4" class="player"> <div onclick="lifeIncrease(2)" class="lifeUp">
<div class="name" id="name4" contenteditable="true"> <i class="fas fa-chevron-circle-up"></i>
Player 4</div> </div>
<div class="life"> </span>
<span class="vert"> <div id="lifeCount2">20</div>
<div onclick="lifeIncrease5(4)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div> <span class="vert">
<div onclick="lifeIncrease(4)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div> <div onclick="lifeDecrease5(2)" class="lifeDown" class="fiveLife">
</span> <i class="fas fa-arrow-circle-down"></i>
<div id="lifeCount4">20</div> </div>
<span class="vert"> <div onclick="lifeDecrease(2)" class="lifeDown">
<div onclick="lifeDecrease5(4)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div> <i class="fas fa-chevron-circle-down"></i>
<div onclick="lifeDecrease(4)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div> </div>
</span> </span>
</div> </div>
</div> </div>
<div id="player5" class="player"> <div id="player3" class="player">
<div class="name" id="name5" contenteditable="true"> <div class="name" id="name3" contenteditable="true">Player 3</div>
Player 5</div> <div class="life">
<div class="life"> <span class="vert">
<span class="vert"> <div onclick="lifeIncrease5(3)" class="lifeUp" class="fiveLife">
<div onclick="lifeIncrease5(5)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div> <i class="fas fa-arrow-circle-up"></i>
<div onclick="lifeIncrease(5)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div> </div>
</span> <div onclick="lifeIncrease(3)" class="lifeUp">
<div id="lifeCount5">20</div> <i class="fas fa-chevron-circle-up"></i>
<span class="vert"> </div>
<div onclick="lifeDecrease5(5)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div> </span>
<div onclick="lifeDecrease(5)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div> <div id="lifeCount3">20</div>
</span> <span class="vert">
</div> <div onclick="lifeDecrease5(3)" class="lifeDown" class="fiveLife">
</div> <i class="fas fa-arrow-circle-down"></i>
<div id="player6" class="player"> </div>
<div class="name" id="name6" contenteditable="true"> <div onclick="lifeDecrease(3)" class="lifeDown">
Player 6</div> <i class="fas fa-chevron-circle-down"></i>
<div class="life"> </div>
<span class="vert"> </span>
<div onclick="lifeIncrease5(6)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div> </div>
<div onclick="lifeIncrease(6)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div> </div>
</span> <div id="player4" class="player">
<div id="lifeCount6">20</div> <div class="name" id="name4" contenteditable="true">Player 4</div>
<span class="vert"> <div class="life">
<div onclick="lifeDecrease5(6)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div> <span class="vert">
<div onclick="lifeDecrease(6)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div> <div onclick="lifeIncrease5(4)" class="lifeUp" class="fiveLife">
</span> <i class="fas fa-arrow-circle-up"></i>
</div> </div>
</div> <div onclick="lifeIncrease(4)" class="lifeUp">
<div id="player7" class="player"> <i class="fas fa-chevron-circle-up"></i>
<div class="name" id="name7" contenteditable="true"> </div>
Player 7</div> </span>
<div class="life"> <div id="lifeCount4">20</div>
<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="lifeDecrease5(4)" class="lifeDown" class="fiveLife">
<div onclick="lifeIncrease(7)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div> <i class="fas fa-arrow-circle-down"></i>
</span> </div>
<div id="lifeCount7">20</div> <div onclick="lifeDecrease(4)" class="lifeDown">
<span class="vert"> <i class="fas fa-chevron-circle-down"></i>
<div onclick="lifeDecrease5(7)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div> </div>
<div onclick="lifeDecrease(7)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div> </span>
</span> </div>
</div> </div>
</div> <div id="player5" class="player">
<div id="player8" class="player"> <div class="name" id="name5" contenteditable="true">Player 5</div>
<div class="name" id="name8" contenteditable="true"> <div class="life">
Player 8</div> <span class="vert">
<div class="life"> <div onclick="lifeIncrease5(5)" class="lifeUp" class="fiveLife">
<span class="vert"> <i class="fas fa-arrow-circle-up"></i>
<div onclick="lifeIncrease5(8)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div> </div>
<div onclick="lifeIncrease(8)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div> <div onclick="lifeIncrease(5)" class="lifeUp">
</span> <i class="fas fa-chevron-circle-up"></i>
<div id="lifeCount8">20</div> </div>
<span class="vert"> </span>
<div onclick="lifeDecrease5(8)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div> <div id="lifeCount5">20</div>
<div onclick="lifeDecrease(8)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div> <span class="vert">
</span> <div onclick="lifeDecrease5(5)" class="lifeDown" class="fiveLife">
</div> <i class="fas fa-arrow-circle-down"></i>
</div> </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> </main>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="script.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</body> <script src="script.js"></script>
</html> </body>
</html>

1
MTG/menu/menu.html Normal file
View File

@ -0,0 +1 @@
ht

134
MTG/style.css
View File

@ -9,32 +9,35 @@
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(
/* background-color: #85640b; */ circle,
#792f22 0%,
#4f644f 47%,
rgb(108, 127, 131) 100%
);
/* 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;
font-size:110%; font-size: 110%;
} }
#full{ #full {
color:rgb(165, 162, 162); color: rgb(165, 162, 162);
} }
main { main {
display: flex; display: flex;
flex-shrink: 1; flex-shrink: 1;
justify-content:center; justify-content: center;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva,
Verdana, sans-serif; Verdana, sans-serif;
flex-wrap: wrap; flex-wrap: wrap;
align-content: center; align-content: center;
width: 100vw; width: 100vw;
/* height: 100vh; */ /* height: 100vh; */
position: relative; position: relative;
margin-top: 70px; margin-top: 70px;
} }
@ -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;
@ -115,57 +116,61 @@ main {
/* margin-bottom: -100px; */ /* margin-bottom: -100px; */
/* max-width: max-content; */ /* max-width: max-content; */
/* 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;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva,
Verdana, sans-serif; Verdana, sans-serif;
/* color: #333; */ /* color: #333; */
color:rgb(141, 140, 140); color: rgb(141, 140, 140);
text-shadow: 0 1px 0 #eee; text-shadow: 0 1px 0 #eee;
margin-top: 3px; margin-top: 3px;
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,
animation: beat 1s ease-in-out backwards; .lifeDown:focus,
} .lifeUp:focus {
.buttons:active, .lifeDown:active, .lifeUp:active{ -webkit-animation: beat 1s ease-in-out backwards;
-webkit-animation: none; animation: beat 1s ease-in-out backwards;
animation: none; }
.buttons:active,
.lifeDown:active,
.lifeUp:active {
-webkit-animation: none;
animation: none;
} }
#buttonWrapper { #buttonWrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content:space-evenly; justify-content: space-evenly;
/* z-index: 100; */ /* z-index: 100; */
width: 75%; width: 75%;
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;
} }
#center{ #center {
color: red; color: red;
} }
@ -174,37 +179,34 @@ color:rgb(141, 140, 140);
position: relative; position: relative;
z-index: 10; z-index: 10;
/* font-size: 3rem; */ /* font-size: 3rem; */
} }
.lifeUp{ .lifeUp {
font-size: 7vh; font-size: 7vh;
color: #00cc00; color: #00cc00;
} }
.lifeDown{ .lifeDown {
font-size: 7vh; font-size: 7vh;
color:#e60000 color: #e60000;
} }
.vert{ .vert {
flex-direction: column; flex-direction: column;
/* font-size: 2rem ; */ /* font-size: 2rem ; */
} }
.lifeFlex{ .lifeFlex {
flex-direction: column flex-direction: column;
} }
/* Container holding the image and the text */ /* Container holding the image and the text */
.container { .container {
margin-top: 3px; margin-top: 3px;
/* display: flex; */ /* display: flex; */
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;
@ -213,7 +215,7 @@ color:rgb(141, 140, 140);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color: #792f22; color: #792f22;
font-size: 1.5vh; font-size: 1.5vh;
} }
/* /*
:root{ :root{
@ -307,29 +309,41 @@ button{
transition: ease 0.3s; transition: ease 0.3s;
} }
*/ */
.spin{ .spin {
-webkit-animation: spin 0.3s linear; -webkit-animation: spin 0.3s linear;
-moz-animation: spin 0.3s linear; -moz-animation: spin 0.3s linear;
animation: spin 0.3s linear; animation: spin 0.3s linear;
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);
}
@-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{ 100% {
font-size: 20px; -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
View 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
View 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
View File

4
index.html
View 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>

54
menu/test.html
View File

@ -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
View 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
View File

File diff suppressed because one or more lines are too long

12701
pdf/sean.pdf Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
pdf/sean.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

3
rollDice/dice.css
View File

@ -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%; */

2
rollDice/index.html
View File

@ -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>

13
yatzee/index.html
View File

@ -17,13 +17,18 @@
<body> <body>
<div id="navContainer"></div> <div id="navContainer"></div>
</div> </div>
<div id="full" onclick="fullscreen()">
<i class="fas fa-expand"></i>
</div>
<script src="/menu/menu.js"></script> <script src="/menu/menu.js"></script>
<div id="highscore"></div>
<div id="main"> <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="scorecard"></div>
<div id="button_dice"> <div id="button_dice">

46
yatzee/script.js Normal file
View 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
View 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%; */
}

58
yatzee/yatzee.css
View File

@ -5,11 +5,11 @@ body {
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
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%;
} }
} }

12
yatzee/yatzee.js
View File

@ -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";