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

added MTG d20 roller

Browse Source
This commit is contained in:
HearMeWhisper 2022-08-22 09:17:37 -04:00
parent e77ed3df7c
commit 5a3dcb465d
15 changed files with 307 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
MTG/img/dice.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB

11
MTG/index.html
View File

@ -17,8 +17,7 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="/menu/menu.css" /> <link rel="stylesheet" type="text/css" href="/menu/menu.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">
t>
</head> </head>
<body> <body>
@ -32,7 +31,11 @@
<!-- <div onclick="resetName()" id="reset" class="buttons">↻<span class="buttonText">reset name</span></div> --> <!-- <div onclick="resetName()" id="reset" class="buttons">↻<span class="buttonText">reset name</span></div> -->
<div onclick="addPlayer()" id="addPlayer" class="buttons"><i class="fas fa-plus-circle"></i></div> <div onclick="addPlayer()" id="addPlayer" class="buttons"><i class="fas fa-plus-circle"></i></div>
<div class="buttons"><i id="full" onclick="fullscreen()" class="fas fa-expand"></i></div> <div class="buttons"><i id="full" onclick="fullscreen()" class="fas fa-expand"></i></div>
</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.png" >
<div class="centered" id="center">1</div>
</div>
</div> </div>
<script src="/menu/menu.js"></script> <script src="/menu/menu.js"></script>
<main> <main>
@ -165,5 +168,7 @@
<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>

35
MTG/script.js
View File

@ -136,3 +136,38 @@ function fullscreen() {
} }
} }
// let rand = Math.floor(Math.random() * 20 +1);
let random = () => {
spin();
let rand = Math.floor(Math.random() * 20 +1);
console.log(rand);
document.getElementById("center").innerHTML = rand;
}
// function rolar(){
// let rolagem = Math.floor(Math.random() * 20 +1);
// let valor = 1
// spin()
// document.getElementById("result").innerHTML = rolagem;
// document.getElementById("span").innerHTML = parseInt(valor)+rolagem;
// if (rolagem === 20){
// document.getElementById("result").style.color = "var(--green)";
// document.getElementById("body").style.backgroundColor = "var(--dark-green)";
// }
// else if(rolagem === 1){
// document.getElementById("result").style.color = "var(--red)";
// document.getElementById("body").style.backgroundColor = "var(--dark-red)";
// }
// else{
// document.getElementById("result").style.color = "black";
// document.getElementById("body").style.backgroundColor = "var(--black)";
// }
// }
function spin(){
document.getElementById("d20").classList.add("spin");
setTimeout(function(){document.getElementById("d20").classList.remove("spin");}, 500);
}

145
MTG/style.css
View File

@ -30,6 +30,9 @@ main {
position: relative; position: relative;
margin-top: 70px; margin-top: 70px;
}
#dice_div{
} }
.name { .name {
font-size: 3em; font-size: 3em;
@ -145,6 +148,9 @@ color:rgb(141, 140, 140);
font-size: 0.65rem; font-size: 0.65rem;
} }
#d20 {
width: 2.85rem;
}
.fiveLife { .fiveLife {
display: flex; display: flex;
@ -168,3 +174,142 @@ color:rgb(141, 140, 140);
.lifeFlex{ .lifeFlex{
flex-direction: column flex-direction: column
} }
/* Container holding the image and the text */
.container {
/* display: flex; */
position: relative;
flex-direction: row;
/* text-align: center; */
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: black;
font-size: 0.55rem;
}
/*
:root{
--black: rgb(28, 29, 36);
--white: whitesmoke;
--dark-red: #a8041d;
--dark-green: #174240;
--red: #eb0404;
--green: #01c321;
}
#centralizar{
position: relative;
left: 50%;
transform: translateX(-50%);
}
.container{
width: 70%;
max-width: 400px;
padding: 30px 50px;
position: absolute;
left: 50%;
top: 50%;
background-color: whitesmoke;
transform: translate(-50%,-50%);
border-radius: 8px;
}
*\
\*
#result{
position: absolute;
z-index: 2;
left: 50%;
top: 28%;
transform: translateX(-50%);
font-size: 40px;
}
img{
width: 50%;
margin-bottom: 5px;
position: relative;
left: 25%;
}
p{
text-align: center;
margin-bottom: 25px;
font-size: 18px;
}
.modificador{
width: 145px;
height: 46px;
display: flex;
margin-bottom: 25px;
border: 3px solid rgb(28, 29, 36);
border-radius: 5px;
}
input[type="number"]{
background-color: var(--white);
-moz-appearance: textfield;
text-align: center;
font-size: 30px;
border: none;
width: 80px;
pointer-events: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
button{
width: 30px;
color: #3264fe;
background-color: var(--white);
border: none;
font-size: 38px;
cursor: pointer;
}
.botao{
background-color: var(--black);
border: none;
outline: none;
color: whitesmoke;
font-size: 16px;
padding: 15px 0;
width: 150px;
border-radius: 5px;
}
.botao:hover{
cursor: pointer;
background-color: #08080c;
transition: ease 0.3s;
}
*/
.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;
}
p{
font-size: 20px;
}
}

BIN
beach/img/assets/logo-sm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
beach/img/assets/logosmall_bpb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
beach/img/assets/logosmall_bpb1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

BIN
beach/img/slideshow/img1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
beach/img/slideshow/img2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 497 KiB

BIN
beach/img/slideshow/img3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

71
beach/index.html Normal file
View File

@ -0,0 +1,71 @@
<!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>Beach Party Balloons</title>
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<!-- navbar -->
<div class="navbar-fixed ">
<nav>
<div class="nav-wrapper light-blue lighten-5">
<a href="#!" class="brand-logo"><img src="img/assets/logo-sm.png" height="55px" alt=""></a>
<ul class="right hide-on-med-and-down">
<li><a class="blue-grey-text darken-3" href="sass.html">Sass</a></li>
<li><a class="blue-grey-text darken-3" href="badges.html">Components</a></li>
</ul>
</div>
</nav>
</div>
<!-- Slideshow -->
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="img/slideshow/img1.jpg"></a>
<a class="carousel-item" href="#two!"><img src="img/slideshow/img2.jpg"></a>
<a class="carousel-item" href="#three!"><img src="img/slideshow/img3.jpg"></a>
</div>
<footer class="page-footer light-blue lighten-5">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="blue-grey-text darken-3">Footer Content</h5>
<p class="blue-grey-text darken-3">You can use rows and columns here to organize your footer content.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="blue-grey-text darken-3">Links</h5>
<ul>
<li><a class="blue-grey-text darken-3" href="#!">Link 1</a></li>
<li><a class="blue-grey-text darken-3" href="#!">Link 2</a></li>
<li><a class="blue-grey-text darken-3" href="#!">Link 3</a></li>
<li><a class="blue-grey-text darken-3" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container blue-grey-text darken-3">
© 2014 Copyright Text
<a class="blue-grey-text darken-3 right" href="#!">More Links</a>
</div>
</div>
</footer>
</body>
</html>

13
beach/script.js Normal file
View File

@ -0,0 +1,13 @@
// initialize navbar
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, options);
});
// init slideshow
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelector('.carousel');
var instances = M.Carousel.init(elems, options);
console.log("twst")
});

9
beach/style.css Normal file
View File

@ -0,0 +1,9 @@
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}

5
tictac/index.html
View File

@ -10,6 +10,8 @@
<link rel="stylesheet" type="text/css" href="tictac.css"> <link rel="stylesheet" type="text/css" href="tictac.css">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title> Tic Tac Toe Touch</title> <title> Tic Tac Toe Touch</title>
<script defer src="tictac.js">
</script>
</head> </head>
<body> <body>
@ -58,8 +60,7 @@ But husbanded through many a long campaign."
- Wordsworth - Wordsworth
</pre> </pre>
</main> </main>
<script src="tictac.js">
</script>
</body> </body>
</html> </html>

31
tictac/tictac.css
View File

@ -4,22 +4,29 @@ body {
} }
td{ td{
border: 3px solid black; border: 3px solid black;
height: 100px; height: 120px;
width: 100px; width: 120px;
} }
#game { #game {
justify-self: center;
align-content: center;
margin-top: 20px;
background-color:#ce4949; background-color:#ce4949;
text-align: center; text-align: center;
box-shadow: 5px 5px 5px #888888; box-shadow: 5px 5px 5px #888888;
height: 300px; /* height: 300px; */
width: 300px; width: 100%;
/* table-layout: fixed; */
border-collapse: collapse; border-collapse: collapse;
/* color:#1A1A1A; */ /* color:#1A1A1A; */
} }
#tic{
/* width: 85%; */
margin:auto;
}
tr{ width: 10vh;
tr{
} }
#game:hover{ #game:hover{
@ -27,12 +34,16 @@ tr{
} }
#button { #button {
text-align: center text-align: center;
}
button{
font-size: large;
padding: 2vh;
} }
#score { #score {
text-align: center; text-align: center;
color: #1A1A1A color: #1A1A1A;
font-size: larger;
} }
#level { #level {
@ -48,6 +59,8 @@ tr{
} }
.cells{ .cells{
text-align: center; text-align: center;
font-size: 70pt
} }
#tic{ #tic{
display: flex; display: flex;