Archivo HomeJS.js para la obtensión y almacenamiento en localstorage …

…de la data del usuario. Logo y estilos responsive en archivo site.css.
MatiasMolina000 · Mar 2, 2023 · b3d078c · b3d078c
1 parent a2e0d77
commit b3d078c
Show file tree

Hide file tree

Showing 13 changed files with 257 additions and 120 deletions.
diff --git a/JuegoBingoMVC/Controllers/HomeController.cs b/JuegoBingoMVC/Controllers/HomeController.cs
@@ -1,4 +1,5 @@
 using JuegoBingoMVC.Models;
+using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
 using System.Diagnostics;
 
@@ -18,24 +19,12 @@ public IActionResult Index()
             return View();
         }
 
-        /*public IActionResult Privacy()
-        {
-            return View();
-        }*/
-
+        [Authorize]
         public IActionResult NewGame()
         {
-            //Partida miPartida = new(4);
-            //return View(miPartida);
             return View();
         }
 
-        /*public IActionResult New(string user)
-        {
-
-            return View();
-        }*/
-
         [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
         public IActionResult Error()
         {

diff --git a/JuegoBingoMVC/JuegoBingoMVC.csproj b/JuegoBingoMVC/JuegoBingoMVC.csproj
@@ -17,7 +17,6 @@
 
   <ItemGroup>
     <None Include="Views\Home\Index.cshtml" />
-    <None Include="Views\Home\Privacy.cshtml" />
     <None Include="Views\Shared\Error.cshtml" />
     <None Include="Views\Shared\_Layout.cshtml" />
     <None Include="Views\Shared\_LoginPartial.cshtml" />

diff --git a/JuegoBingoMVC/Views/Home/Index.cshtml b/JuegoBingoMVC/Views/Home/Index.cshtml
@@ -7,36 +7,43 @@
 }
 
 <div class="text-center">
-    <h1 class="display-4">Bienvenido</h1>
-    <br />
-    @*<h1 class="display-4">Welcome</h1>
-    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
-    <ul class="navbar-nav">*@
+    <div class="container mt-5">
+        <div class="row mt-8">
+            <h1 class="display-4">BINGO MVC</h1>
+        </div>
+    </div>
+
+    <div class="container mt-5">
 
-    <ul class="navbar-nav">
         @if (SignInManager.IsSignedIn(User))
         {
-        <li class="nav-item">
-                        <a class="nav-link text-dark" asp-controller="Home" asp-action="NewGame(@User.Identity?.Name)">Nueva Partida</a>
-        </li>
-            <li class="nav-item">
-                        <a  class="nav-link text-dark" asp-area="Home" asp-page="/Account/Manage/Index" title="Manage">Cargar Partida</a>
-            </li>
-        @*<li class="nav-item">
-            <form  class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">
-                <button  type="submit" class="nav-link btn btn-link text-dark">Logout</button>
-            </form>
-        </li>*@
+            <div class="row">
+                <a class="nav-link text-dark" id="btn-game" asp-controller="Home" asp-action="NewGame">Nueva Partida</a>
+            </div>
+            /*<div class="row">
+                <a class="nav-link text-dark" id="loadGame" asp-controller="Home" asp-action="NewGame">Cargar Partida</a>
+            </div>*/
         }
         else
         {
-        <li class="nav-item">
-                        <a class="nav-link text-dark" asp-controller="Home" asp-action="NewGame">Nueva partida como invitado</a>
-        </li>
-        @*<li class="nav-item">
-            <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Login">Login</a>
-        </li>*@
+            <div class="row">
+                <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Register">Registrarse</a>
+            </div>
+            <div class="row">
+                <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Login">Ingresar</a>
+            </div>
+
         }
-    </ul>
+
+    </div>
+
 </div>
 
+
+@section Scripts
+{
+    @if (SignInManager.IsSignedIn(User))
+    {
+        <script type="text/javascript" src="~/js/HomeJs.js"></script>
+    }
+}
diff --git a/JuegoBingoMVC/Views/Home/NewGame.cshtml b/JuegoBingoMVC/Views/Home/NewGame.cshtml
@@ -2,27 +2,27 @@
 @{
     ViewData["Title"] = "Vamos a Jugar!";
 }
-<h1>@ViewData["Title"]</h1>
 
+<h1>@ViewData["Title"]</h1>
 
 <div class="container-fluid">
-    <div class="row" id="cartones"></div>   
-    <div class="row">
-        <div class="col-xl-6 col-lg-12" id="btn-addNumber">
-            <button class="nav-link text-dark" onclick="CallNumber()">Lanzar Bolilla</button>
-        </div>
+    <div class="container">
+        <div class="row" id="cartones"></div>
     </div>
+
+
     <div class="row">
-        <div class="col-xl-6 col-lg-12" id="lastNumber">
-            Bolilla:
-        </div>
-        <div class="col-xl-6 col-lg-12" id="winnerNumber">
-            Cartón Ganador:
+        <div class="col-xl-6 col-lg-12">
+            <button id="btn-addNumber" class="btn btn-primary btn-lg" onclick="CallNumber()">Lanzar Bolilla</button>
         </div>
     </div>
-</div>
 
-<button class="btn btn-primary" onclick="mostrarAlertaSweetAlert2()">Alerta Básica</button>
+    <div class="row data">
+        <div class="col-xl-6 col-lg-12" id="lastNumber">Bolilla:</div>
+        <div class="col-xl-6 col-lg-12" id="winnerNumber">Cartón Ganador:</div>
+    </div>
+
+</div>
 
 @section Scripts
 {

diff --git a/JuegoBingoMVC/Views/Shared/_Layout.cshtml b/JuegoBingoMVC/Views/Shared/_Layout.cshtml
@@ -12,7 +12,7 @@
     <header>
         <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
             <div class="container-fluid">
-                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">JuegoBingoMVC</a>
+                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index"><img src="~/img/logo.png" id="icon"/></a>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                         aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
@@ -45,8 +45,8 @@
     <script src="~/lib/jquery/dist/jquery.min.js"></script>
     <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-
     <script src="~/js/site.js" asp-append-version="true"></script>
+
     @await RenderSectionAsync("Scripts", required: false)
 </body>
 </html>
diff --git a/JuegoBingoMVC/Views/Shared/_LoginPartial.cshtml b/JuegoBingoMVC/Views/Shared/_LoginPartial.cshtml
@@ -6,21 +6,21 @@
 @if (SignInManager.IsSignedIn(User))
 {
     <li class="nav-item">
-        <a  class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @User.Identity?.Name!</a>
+        <a  class="nav-link text-dark" id="userIdentity" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hola @User.Identity?.Name!</a>
     </li>
     <li class="nav-item">
         <form  class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">
-            <button  type="submit" class="nav-link btn btn-link text-dark">Logout</button>
+            <button  type="submit" class="nav-link btn btn-link text-dark">Cerrar Sesión</button>
         </form>
     </li>
 }
-else
+@*else
 {
     <li class="nav-item">
         <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Register">Register</a>
     </li>
     <li class="nav-item">
         <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Login">Login</a>
     </li>
-}
+}*@
 </ul>
diff --git a/JuegoBingoMVC/wwwroot/css/site.css b/JuegoBingoMVC/wwwroot/css/site.css
@@ -1,20 +1,21 @@
 html {
-  font-size: 14px;
+    position: relative;
+    min-height: 100%;
+    font-size: 14px;
 }
 
-@media (min-width: 768px) {
-  html {
-    font-size: 16px;
-  }
+body {
+    margin-bottom: 60px;
 }
 
-html {
-  position: relative;
-  min-height: 100%;
+#btn-addNumber {
+    margin-top: 1rem;
+    margin-left: 5px;
+
 }
 
-body {
-  margin-bottom: 60px;
+.data {
+    font-size: 25px;
 }
 
 .oCart {
@@ -23,21 +24,133 @@ body {
 }
 
 .oCol {
-    height: 6rem;
     border: 1px solid #000000;
-    width: 100%;
+
 }
 
 .oNumber {
-    margin-top: 65%;
-    transform: scaleY(3);
+    margin-top: 20px;
+    margin-bottom: 20px;
     font-weight: 700;
 }
 
 .celEmpty {
-    background-color: aqua;
+    background-color: #38a9e1;
 }
 
+
 .celCheck {
     box-shadow: inset 0 0 0 5px red;
 }
+
+
+#icon {
+    width: 10rem;
+}
+
+
+
+/*Extra extra small devices (portrait phones, less than 576px)*/
+@media (max-width: 531.98px) {
+    #icon {
+        width: 8rem;
+    }
+
+    .oCart {
+        border: 2px solid #000000;
+        text-align: center;
+    }
+
+    .celCheck {
+        box-shadow: inset 0 0 0 2px red;
+    }
+
+    .oNumber {
+        font-size: 0.7rem;
+        transform: scaleY(2);
+        margin-top: 12px;
+        margin-bottom: 12px;
+        font-weight: 700;
+    }
+}
+
+/*Extra small devices (portrait phones, less than 576px)*/
+@media (min-width: 532px) and (max-width: 575.98px) {
+    #icon {
+        width: 8rem;
+    }
+
+    .oNumber {
+        font-size: 1.8rem;
+        transform: scaleY(2);
+        margin-top: 22px;
+        margin-bottom: 25px;
+        font-weight: 700;
+    }
+}
+
+/*Small devices (landscape phones, 576px and up)*/ 
+@media (min-width: 576px) and (max-width: 767.98px) {
+    .oNumber {
+        font-size: 1.8rem;
+        transform: scaleY(2);
+        margin-top: 22px;
+        margin-bottom: 25px;
+        font-weight: 700;
+    }
+}
+
+/*Medium devices (tablets, 768px and up)*/
+@media (min-width: 768px) and (max-width: 991.98px) {
+    .oNumber {
+        font-size: 2.2rem;
+        transform: scaleY(2);
+        margin-top: 25px;
+        margin-bottom: 27px;
+        font-weight: 700;
+    }
+}
+
+/*Large devices (desktops, 992px and up)*/
+@media (min-width: 992px) and (max-width: 1199.98px) {
+    .firstRow {
+        display: none;
+    }
+    .oNumber {
+        font-size: 1.5rem;
+        transform: scaleY(2);
+        margin-top: 15px;
+        margin-bottom: 22px;
+        font-weight: 700;
+    }
+}
+
+/*Extra large devices (large desktops, 1200px and up)*/
+@media (min-width: 1200px) and (max-width: 1399.98px) {
+    .firstRow {
+        display: none;
+    }
+    .oNumber {
+        font-size: 2rem;
+        transform: scaleY(2);
+        margin-top: 20px;
+        margin-bottom: 20px;
+        font-weight: 700;
+    }
+}
+
+@media (min-width: 1400px) {
+    .firstRow {
+        display: none;
+    }
+
+    .oNumber {
+        font-size: 2.5rem;
+        transform: scaleY(2);
+        margin-top: 25px;
+        margin-bottom: 27px;
+        font-weight: 700;
+    }
+}
+
+
diff --git a/JuegoBingoMVC/wwwroot/img/bolillas bingo.jpg b/JuegoBingoMVC/wwwroot/img/bolillas bingo.jpg
diff --git a/JuegoBingoMVC/wwwroot/img/fondo.png b/JuegoBingoMVC/wwwroot/img/fondo.png
diff --git a/JuegoBingoMVC/wwwroot/img/fondo1.jpg b/JuegoBingoMVC/wwwroot/img/fondo1.jpg
diff --git a/JuegoBingoMVC/wwwroot/img/logo.png b/JuegoBingoMVC/wwwroot/img/logo.png