Retoque visual y arreglo visor__main

vvaldesc · Nov 10, 2023 · d572250 · d572250
1 parent 0fbf474
commit d572250
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 23 deletions.
diff --git a/css/bolasFrascos.css b/css/bolasFrascos.css
@@ -29,7 +29,7 @@
     min-height: 20px;
     width: 70px;
     height: fit-content;
-    border: 4px solid black;
+    border: 6px solid black;
     border-top: 0;
     position: relative;
     top: 140px;
@@ -41,11 +41,18 @@
     align-items: center;
     border-bottom-left-radius: 10%;
     border-bottom-right-radius: 10%;
+    transition: 100ms;
+    background-color: rgba(0, 174, 255, 0.151);
+    padding-bottom: 7px;
+    padding-top: 7px;
+    transition: 200ms;
 
 }
 
 .visor__frasco:hover{
-    box-shadow: 4px 4px white;
+    box-shadow: 0px 3px 2px 1px black;
+    background-color: rgba(0, 174, 255, 0.075);
+    transition: 200ms;
 }
 
 .pixel-ball {

diff --git a/css/responsive.css b/css/responsive.css
@@ -19,26 +19,33 @@
     grid-area: footer;
 }
 
-@media screen and (min-width: 600px){
-    .container{
-        transform: scale(0.4);
+/*
+@media screen and (min-width: 200px){
+    body{
+        transform: scaleX(0.2);
+        transform: scaleY(0.2);
     }
 }
 
-@media screen and (min-width: 1024px){
+@media screen and (min-width: 600px){
     body{
         transform: scale(0.5);
+        transform: ;
     }
-    .container{
-        transform: scale(0.5);
+}
+
+@media screen and (min-width: 1024px){
+    body{
+        transform: scale(0.7);
     }
 }
 
-@media screen and (min-width: 1200px){
+@media screen and (min-width: 1330px){
     .container{
-        transform: scale(0.9);
+        transform: scale(1);
     }
     body{
         transform: scale(1);
     }
 }
+*/
diff --git a/css/style.css b/css/style.css
@@ -6,7 +6,6 @@
 body{
     display: flex;
     justify-content: center;
-    border: 1px solid red;
 }
 
 @font-face {
@@ -28,7 +27,6 @@ body{
     background-size: 370px;
 
     width: 1300px;
-    border: 3px solid blue;
 
     grid-template-columns: 1fr 8fr 1fr;
     grid-template-rows: 100px 700px 100px;
@@ -38,6 +36,7 @@ body{
     "asidel visor asider"
     "footer footer footer"
     ;
+    border: 10px solid black;
 
 
 }

diff --git a/css/visor.css b/css/visor.css
@@ -9,7 +9,6 @@
     left: 0;
     width: 100%;
     height: 100%;
-    border: 1px solid green;
 }
 
 .fondoGris1{
@@ -61,7 +60,7 @@
     z-index: 0;
     background-color: rgb(175, 226, 255);
     /* podriía ser overflow:hidden y alomejor inherit */
-
+    border: 10px solid black;
 }
 
 
@@ -160,9 +159,8 @@
 .visor__main{
     /*display: flex;*/
     width: 100%;
-    height: 100%;
+    height: 80%;
     position: relative;
-    border: 1px solid red;
     overflow: hidden;
 }
 

diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1 user-scalable=no"" />
 
     <link rel="stylesheet" href="./css/style.css" />
     <link rel="stylesheet" href="css/responsive.css" />
@@ -29,8 +29,6 @@
 
       <div id="container__visor" class="container__visor cieloInicial">
         <div class="visor_bg"></div>
-
-
         <header id="visor__header" class="visor__header">
           <div id="visorHeader__div__temporizador" class="visorHeader__div__temporizador">
             <img

diff --git a/js/script.js b/js/script.js
@@ -367,9 +367,21 @@ const cieloColor = (nivel) => {
   const bg = cielo.firstChild.nextSibling;
   switch (nivel) {
     case 0:
+
+
+      /*if (cielo.classList.length>0) {
+        cielo.classList[0].remove()
+      }*/
+
+
       cielo.classList.remove("cieloInicial")
       cielo.classList.add("cieloGris");
 
+
+      /*if (cielo.classList.length>1) {
+        cielo.classList[1].remove()
+      }*/
+
       bg.classList.add("fondoGris1");
     break;
     case 1:
@@ -408,7 +420,12 @@ const accionFrasco = (e) => {
       if (click) {
         audioSacaBola();
         posAnterior = parseInt(e.target.parentNode.id.slice(6));
-        e.target.parentNode.firstChild.style.top = "-75px";
+
+
+        let numeroBolas=arrayFrascos[posAnterior].length; //Cada bola mide 40px
+        //La bola ha de estar 75 px encima del frasco aprox (sin contar posible margin o padding)
+        e.target.parentNode.firstChild.style.top = "-" + ((MAXbolas - numeroBolas) * 40 + 75) . toString() +"px";
+
         click = false;
       } else {
         posicionMeter = parseInt(e.target.parentNode.id.slice(6));
@@ -461,7 +478,12 @@ const accionFrasco = (e) => {
         audioSacaBola();
         //bolaCambio = e.target.parentNode.firstChild.classList[1].slice(5);
         posAnterior = parseInt(e.target.id.slice(6));
-        e.target.firstChild.style.top = "-75px";
+
+        let numeroBolas=arrayFrascos[posAnterior].length; //Cada bola mide 40px
+        //La bola ha de estar 75 px encima del frasco aprox (sin contar posible margin o padding)
+        e.target.firstChild.style.top = "-" + ((MAXbolas - numeroBolas) * 40 + 75) . toString() +"px";
+
+
         click = false;
       } else {
         posicionMeter = parseInt(e.target.id.slice(6));
@@ -529,7 +551,6 @@ function recorridoGanado() {
 }
 
 function inicioFin(ganado) {
-  debugger
 
   apagarTemporizador();
 
@@ -542,7 +563,6 @@ function inicioFin(ganado) {
   }
 
   setTimeout(() => {
-    debugger;
 
     visor__div__texto.remove();