added MTG d20 roller

2022-08-22 09:17:37 -04:00 · 2022-08-22 09:17:37 -04:00 · 5a3dcb465d
commit 5a3dcb465d
parent e77ed3df7c
15 changed files with 307 additions and 15 deletions
--- a/MTG/img/dice.png
+++ b/MTG/img/dice.png
--- a/MTG/index.html
+++ b/MTG/index.html
@ -17,8 +17,7 @@
    <link rel="stylesheet" href="style.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">
-
-
+t>
 </head>
 <body>

@ -32,7 +31,11 @@
                                            <!-- <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 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>
   <script src="/menu/menu.js"></script>
    <main>
@ -165,5 +168,7 @@
    
 <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 <script src="script.js"></script>
+
+  
 </body>
 </html>
--- a/MTG/script.js
+++ b/MTG/script.js
@ -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);
+}
--- a/MTG/style.css
+++ b/MTG/style.css
@ -30,6 +30,9 @@ main {

  position: relative;
  margin-top: 70px;
+}
+#dice_div{
+
 }
 .name {
  font-size: 3em;
@ -145,6 +148,9 @@ color:rgb(141, 140, 140);
  font-size: 0.65rem;
  
 }
+#d20 {
+  width: 2.85rem;
+}

 .fiveLife {
  display: flex;
@ -168,3 +174,142 @@ color:rgb(141, 140, 140);
 .lifeFlex{
  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;
+  }
+} 
--- a/beach/img/assets/logo-sm.png
+++ b/beach/img/assets/logo-sm.png
--- a/beach/img/assets/logosmall_bpb.jpg
+++ b/beach/img/assets/logosmall_bpb.jpg
--- a/beach/img/assets/logosmall_bpb1.jpg
+++ b/beach/img/assets/logosmall_bpb1.jpg
--- a/beach/img/slideshow/img1.jpg
+++ b/beach/img/slideshow/img1.jpg
--- a/beach/img/slideshow/img2.jpg
+++ b/beach/img/slideshow/img2.jpg
--- a/beach/img/slideshow/img3.jpg
+++ b/beach/img/slideshow/img3.jpg
--- a/beach/index.html
+++ b/beach/index.html
@ -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>
--- a/beach/script.js
+++ b/beach/script.js
@ -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")
+  });
--- a/beach/style.css
+++ b/beach/style.css
@ -0,0 +1,9 @@
+body {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+  }
+
+  main {
+    flex: 1 0 auto;
+  }
--- a/tictac/index.html
+++ b/tictac/index.html
@ -10,6 +10,8 @@
    <link rel="stylesheet" type="text/css" href="tictac.css">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title> Tic Tac Toe Touch</title>
+    <script defer src="tictac.js">
+    </script>
 </head>

 <body>
@ -58,8 +60,7 @@ But husbanded through many a long campaign."
 - Wordsworth
 </pre>
 </main>
-    <script src="tictac.js">
-    </script>
+   
 </body>

 </html>
--- a/tictac/tictac.css
+++ b/tictac/tictac.css
@ -4,22 +4,29 @@ body {
 }
 td{
    border: 3px solid black;
-    height: 100px;
-    width: 100px;
+    height: 120px;
+    width: 120px;
 }
 #game {
+    justify-self: center;
+    align-content: center;
+    margin-top: 20px;
    background-color:#ce4949;
    text-align: center;
    box-shadow: 5px 5px 5px #888888;
-    height: 300px;
-    width: 300px;
+    /* height: 300px; */
+    width: 100%;
+/*     table-layout: fixed; */
    border-collapse: collapse;
    /* color:#1A1A1A; */

 }
+#tic{
+/*     width: 85%; */
+    margin:auto;
+}

-
-tr{
+tr{ width: 10vh;
   
 }
 #game:hover{
@ -27,12 +34,16 @@ tr{
 }

 #button {    
-    text-align: center
+    text-align: center;
+}
+button{
+    font-size: large;
+    padding: 2vh;
 }
-
 #score {
    text-align: center;
-    color: #1A1A1A
+    color: #1A1A1A;
+    font-size: larger;
 }

 #level {
@ -48,6 +59,8 @@ tr{
 }
 .cells{
    text-align: center;
+    font-size: 70pt
+        
 }
 #tic{
  display: flex;