Merge pull request #110 from aleexnl/pre

update production

Documentation/Retrospective.md

@@ -0,0 +1,10 @@
+# Retrospective
+## Sprint 1
+Fallos en la implementación de la metodologia SCRUM (mover cosas a done sin estar en producción). Además nos falló la parte de testear correctamente los desarrollos.
+
+El trabajo en equipo ha sido adecuado y no ha habido ningun contratiempo importante; todos los componentes del grupo han asumido correctamente todas sus responsabilidades en el momento.
+## Sprint 2
+No prestamos la suficiente atención a las espeficiaciones, llevandonos a fallar una.
+
+El trabajo en equipo ha sido adecuado y no ha habido ningun contratiempo importante; todos los componentes del grupo han asumido correctamente todas sus responsabilidades en el momento.
+## Sprint 3

css/game.css

@@ -28,20 +28,23 @@ tbody tr td button {
 .container {
     text-align: center;
 }
+
 .container h1 {
     font-size: 80px;
     font-weight: bold;
     font-family: AmongUsFont;
     text-align: center;
     margin: 1rem 0 0 0;
 }
+
 #btn-start,
 #btn-resolve {
     font-size: 1.5rem;
     padding: 0.5rem 2rem;
     margin: 1rem 0;
     box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
 }
+
 #btn-start,
 #btn-resolve:hover {
     cursor: pointer;
@@ -54,6 +57,16 @@ tbody tr td button {
 
 #BarContent {
     text-align: -webkit-center;
+    text-align: -moz-center;
+}
+
+.countdown {
+    font-size: 25px;
+    font-weight: bold;
+}
+
+.color-red {
+    color: red;
 }
 
 #Bar {
@@ -69,9 +82,20 @@ tbody tr td button {
     background-color: #2e9cca;
     width: 0%;
 }
+
+/*** 800X600 ***/
 @media (max-width: 800px) {
     tbody tr td button {
         height: 70px;
         width: 70px;
     }
 }
+
+/*** 375X667 ***/
+@media (max-width: 375px) {
+
+    #btn-start,
+    #btn-resolve {
+        padding: 0.5rem 1rem;
+    }
+}

css/gameover.css

@@ -9,6 +9,10 @@ body {
     padding: 0;
 }
 
+h1 {
+    font-size: 1em;
+}
+
 p#title {
     font-size: 8em;
     font-weight: bold;
@@ -17,7 +21,7 @@ p#title {
     width: 100%;
     font-family: AmongUsFont;
     animation: 1.25s both titleEffect;
-    margin-top: 1em;
+    margin: 1em 0;
 }
 
 div.box {
@@ -26,7 +30,8 @@ div.box {
     box-shadow: 0 0 65px 75px #821f0b;
     margin: auto;
     border: 0px #0000;
-    margin-top: 35px;
+    margin-top: 10em;
+    margin-bottom: 7em;
     border-radius: 29px;
     display: flex;
     flex-flow: row wrap;
@@ -64,10 +69,7 @@ form#form-save {
 }
 
 footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    position: relative;
 }
 
 p.level-code {
@@ -86,7 +88,6 @@ p.level-code {
     }
 }
 
-
 /*** 1366x768 ***/
 @media (max-width: 1366px) {}
 
@@ -104,12 +105,7 @@ p.level-code {
         margin: 5% 0 1em 0;
     }
 
-    footer {
-        position: relative;
-    }
-
     div.box {
-        margin-bottom: 7em;
         box-shadow: 0 0 50px 58px #821f0b;
     }
 

css/index.css

@@ -27,7 +27,11 @@ form {
     align-content: center;
     text-align: center;
     padding: 1%;
-    margin: 0;
+    margin: 0 0 2em 0;
+}
+
+.form-option {
+    width: 100%;
 }
 
 h1 {
@@ -37,6 +41,7 @@ h1 {
 }
 
 form button {
+    margin: auto;
     font-size: 1.5rem;
     padding: 0.5rem 2rem;
     box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
@@ -48,11 +53,16 @@ form button:hover {
 
 form input {
     margin: -0.5rem 0 1rem 0;
-    padding: 1rem;
+    padding: 0.5rem;
     font-size: 1.25rem;
     box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
 }
 
+.input-code-lvl {
+    width: 150px;
+    text-align: center;
+}  
+
 /*** 1366x768 ***/
 @media (max-width: 1366px) {
     h1 {

css/ranking.css

@@ -1,29 +1,34 @@
-/*html, body {
-    height: 100%;
-}*/
-
-header {
-    position: fixed !important;
-}
-
 body {
     background-color: #1b1b1b;
     display: flex;
     flex-flow: row wrap;
+    margin-bottom: 3em;
 }
 
 div.container-ranking {
     margin: 60px auto 0 auto;
 }
 
 h1.title {
-    color: white;
-    font-size: 80px;
+    color: #fff;
+    font-size: 5.5em;
     font-weight: bold;
     font-family: AmongUsFont;
     text-align: center;
     width: 100%;
-    margin: 4% 0 1% 0;
+}
+
+.ranking-box {
+    width: 50%;
+}
+
+h2.subtitle {
+    color: white;
+    font-size: 4em;
+    font-weight: bold;
+    font-family: AmongUsFont;
+    text-align: center;
+    margin: 1% 0;
 }
 
 table {
@@ -47,28 +52,6 @@ tr:nth-child(even) {
     background-color: #1e3344;
 }
 
-    /*    box-shadow: 0 0 3px 1px black;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-}
-
-tbody {
-    box-shadow: 0 0 3px 1px black;
-    border-bottom-left-radius: 10px;
-    border-bottom-right-radius: 10px;
-}
-
-tr {
-    border-bottom-left-radius: 10px;
-    border-bottom-right-radius: 10px;
-}
-
-tr.first-table-cell,
-tr.first-table-cell td {
-    border-bottom-left-radius: 10px;
-    border-bottom-right-radius: 10px;
-}*/
-
 thead tr td p {
     padding: 0 20px;
 }
@@ -79,6 +62,7 @@ p.width-username {
 
 p.width-points {
     width: 200px;
+    margin: auto;
 }
 
 .table-title {
@@ -87,12 +71,67 @@ p.width-points {
     text-align: center;
 }
 
+div.image-box {
+    width: 20%;
+    margin: auto;
+    text-align: center;
+}
+
+div.image-box img {
+    height: 40px;
+}
+
 .username {
-    padding-left: 20px;
+    width: 80%;
     font-size: 17px;
 }
 
 .points {
     text-align: center;
     font-size: 17px;
+}
+
+@media (max-width: 1400px) {
+    p.width-username {
+        width: 10em;
+    }
+
+    p.width-points {
+        width: 5em;
+    }
+}
+
+
+@media (max-width: 1050px) {
+    p.width-username {
+        width: 7em;
+    }
+
+    p.width-points {
+        width: 3em;
+    }
+}
+
+@media (max-width: 800px) {
+    table {
+        width: 100%;
+        table-layout: fixed;
+        overflow-wrap: break-word;
+    }
+
+    .ranking-box {
+        width: 90%;
+        margin: auto;
+    }
+
+    .survival {
+        margin-top: 0.5em !important;
+    }
+}
+
+@media (max-width: 400px) {
+
+    h1.title {
+        font-size: 4.5em;
+    }
 }