Merge pull request #36 from Luizon/development

Development

404.html

@@ -5,12 +5,12 @@
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<meta property="og:title" content="ESpeedruÑ">
-		<meta property="og:description" content="Página para ver las tablas de posición mundial de hispanohablantes.">
+		<meta property="og:description" content="Tablas de posición mundial de speedruners hispanohablantes.">
 		<meta property="og:image" content="https://xn--espeedru-k3a.com/assets/img/favicon.png">
 		<meta property="og:url" content="https://xn--espeedru-k3a.com">
 		<meta name="twitter:card" content="summary">
 		<meta name="twitter:title" content="ESpeedruÑ">
-		<meta name="twitter:description" content="Página para ver las tablas de posición mundial de hispanohablantes.">
+		<meta name="twitter:description" content="Tablas de posición mundial de speedruners hispanohablantes.">
 		<meta name="twitter:image" content="https://xn--espeedru-k3a.com/assets/img/favicon.png">
 		<meta name="twitter:url" content="https://xn--espeedru-k3a.com">
 		<link rel="shortcut icon" href="https://espeedruñ.com/assets/img/favicon.png" type="image/png">
@@ -61,6 +61,7 @@
 				<a id="home" href="https://espeedruñ.com">Página inicial</a>
 			</div>
 		</div>
-        <script src="https://espeedruñ.com/js/templates/footer.js"></script>
+		<script src="https://espeedruñ.com/js/templates/footer.js"></script>
+		<link rel="stylesheet" href="https://espeedruñ.com/css/animations.css">
 	</body>
 </html>

README.md

@@ -1,8 +1,8 @@
 # [ESpeedruÑ.com](https://espeedruñ.com)
 
 Esta página no es oficial y no está asociada con [Speedrun.com](https://speedrun.com).
-Sin embargo <b>si utiliza</b> la [API de speedrun.com](https://github.com/speedruncomorg/api) para llenarse de contenido.
+Sin embargo <b><b>si utiliza</b></b> la [API de speedrun.com](https://github.com/speedruncomorg/api) para llenarse de contenido.
 
-    Está sujeta a cambios.
+    ESpeedruÑ está sujeto a cambios.
 
 ## Ñ

css/animations.css

@@ -0,0 +1,7 @@
+@keyframes hover-animation {
+  0% { transform: rotate(0deg); }
+  15% { transform: rotate(15deg); }
+  45% { transform: rotate(345deg); }
+  80% { transform: rotate(30deg); }
+  100% { transform: rotate(0deg); }
+}

css/index.css

@@ -351,6 +351,9 @@ a.hyperlink.dark {
     font-weight: bolder;
     font-size: 1.2em;
     color: #a58ab3;
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    user-select: none !important;
 }
 
 div.expand {
@@ -406,4 +409,13 @@ div.expand {
 
 .no-text-decoration {
     text-decoration: none;
+}
+
+.user-select-none > span {
+    display: inline-flex;
+    animation: none;
+}
+
+.user-select-none > span:hover {
+    animation: hover-animation 1s;
 }

index.html

@@ -5,21 +5,21 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta property="og:title" content="ESpeedruÑ">
-    <meta property="og:description" content="Tablas de posición mundial de speedruns hispanohablantes.">
+    <meta property="og:description" content="Tablas de posición mundial de speedruners hispanohablantes.">
     <meta property="og:image" content="https://xn--espeedru-k3a.com/assets/img/favicon.png">
     <meta property="og:url" content="https://xn--espeedru-k3a.com">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="ESpeedruÑ">
-    <meta name="twitter:description" content="Tablas de posición mundial de speedruns hispanohablantes.">
+    <meta name="twitter:description" content="Tablas de posición mundial de speedruners hispanohablantes.">
     <meta name="twitter:image" content="https://xn--espeedru-k3a.com/assets/img/favicon.png">
     <meta name="twitter:url" content="https://xn--espeedru-k3a.com">
-    <link rel="icon" href="https://espeedruñ.com/assets/img/favicon.png" type="image/png">
     <title>ESpeedruÑ</title>
+    <link rel="icon" href="https://espeedruñ.com/assets/img/favicon.png" type="image/png">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <link rel="stylesheet" href="./css/index.css">
     <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.4.1/bootbox.min.js"></script> <!-- anteriormente 4.4.0 -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/6.0.0/bootbox.min.js"></script> <!-- anteriormente 4.4.0 -->
     <script src="./js/vars.js"></script>
     <script src="./js/globals.js"></script>
 </head>
@@ -29,7 +29,7 @@
     <script src="./js/SearchBox.js" type="module"></script>
     <script src="./js/SearchBoxIndex.js" type="module"></script>
     <script src="./js/index.js" type="module"></script>
-    <h1>Bienvenido a ESpeedruÑ.com</h1>
+    <h3 id="greeting"></h3>
     <div class="mt-4"></div>
     <div class="generic-container">
         <h6>Buscar un juego</h6>
@@ -43,5 +43,6 @@ <h6>Buscar un juego</h6>
     </div>
 
     <script src="./js/templates/footer.js"></script>
+    <link rel="stylesheet" href="./css/animations.css">
 </body>
 </html>

js/index.js

@@ -15,7 +15,7 @@ async function loadGameCards() {
                     releaseDate : game.releaseDate,
                     parentNode: $("#gamesContainer")[0],
                 });
-                console.log(game);
+                // console.log(game);
             })
 		})
 		.fail(err => {

js/leaderboard.js

@@ -213,6 +213,7 @@ async function loadSubcategories(categoryID) {
 			if(!hasSubcategories) {
 				let subcategoryTextNode = document.createElement('p');
 				subcategoryTextNode.innerHTML = `<strong>${leaderboard.category.name}</strong> no tiene subcategorías.`
+				subcategoryTextNode.hidden = true;
 				$("#subcategories").append(subcategoryTextNode);
 			}
 		})

js/templates/coffee.js

@@ -12,7 +12,8 @@ coffeeNode.addEventListener("click", evt => {
         message: "Yo me encargaré de pagar el hosting y el dominio de la página, así como darle soporte. Mientras speedrun.com no me solicite que se elimine, espeedruñ.com existirá ;)"
         + "<br>Eso no significa que no puedas <b style='color: inherit;'>motivarme a continuar</b> comprándome un cafécito 👀"
         + "<br><br><a href='https://streamlabs.com/p_luizon/tip'>Este es mi Paypal para transferencias directas ;)</a>",
-        onEscape: true
+        backdrop: true,
+        onEscape: true,
     });
     let newTab = window.open("https://streamlabs.com/p_luizon/tip", "_blank");
     newTab.focus();

js/templates/footer.js

@@ -2,14 +2,14 @@ let footerNode = document.createElement('footer');
 footerNode.classList = "text-center";
 footerNode.innerHTML = 
 `<div class="pt-3">
-    <span>ESpeedruÑ.com - 2023</span>
+    <span>ESpeedruÑ.com - 2024</span>
     <div style="height: 40px;">
         <p class="text-white-50 lh-1">
             Toda la información mostrada en esta página es propiedad de <a class="hyperlink" href="https://speedrun.com">speedrun.com</a>.
         </p>
     </div>
-    <p class="text-white-50 lh-1">
-        Ñ
+    <p class="lh-1 user-select-none">
+        <span class="fw-bolder text-white-50">&nbspÑ&nbsp</span>
     </p>
 </div>`;
 document.querySelector("body").appendChild(footerNode);

js/templates/nav.js

@@ -2,7 +2,7 @@ let navbarNode = document.createElement('nav');
 let lastFocusedElement = null;
 navbarNode.classList = "navbar navbar-expand-lg navbar-dark bg-dark fixed-top";
 navbarNode.innerHTML = 
-`<span class="pt-0 pb-0 navbar-text disabled d-md-block d-lg-none fw-bolder fs-3 font-monospace" style="top: 0.43em; width: 100%; left: 0px; position: absolute; z-index: -1;">
+`<span class="user-select-none text-white-50 fw-bolder fs-3 font-monospace pt-0 pb-0 d-md-flex justify-content-center d-lg-none" style="top: 0.43em; width: 100%; left: 0px; position: absolute; z-index: -1;">
   Ñ
 </span>
 <div class="container-fluid">
@@ -12,60 +12,57 @@ navbarNode.innerHTML =
   </button>
   <div class="collapse navbar-collapse" id="navbarNav">
   <ul class="navbar-nav">
-      <li class="nav-item">
-        <a class="nav-link" href="javascript:acercaDe()">Acerca de</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="javascript:contactanos()">Contáctanos</a>
-      </li>
-    </ul>
-    <div id="searcherNavContainer" class="row ps-1 pe-1 m-0 me-lg-4 me-xl-4 pe-lg-2 pe-xl-2 justify-content-center justify-content-lg-end justify-content-xl-end position-relative" style="width: 100%;">
-      <div class="col p-0">
-        <input id="searcherNav" class="form-control" type="search" placeholder="Buscar juego" aria-label="Search">
-      </div>
-      <button id="btnSearcherNav" class="btn btn-outline-secondary col-auto">
-        <img src="https://espeedruñ.com/img/search.svg">
-      </button>
-      <div class="search-games-container d-none">
-        <span class='search-title-label'>Presiona el botón para buscar</span>
-      </div>
+    <li class="nav-item">
+      <a class="nav-link" href="javascript:about()">Acerca de</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="javascript:contactUs()">Contáctanos</a>
+    </li>
+  </ul>
+  <div id="searcherNavContainer" class="row ps-1 pe-1 m-0 me-lg-4 me-xl-4 pe-lg-2 pe-xl-2 justify-content-center justify-content-lg-end justify-content-xl-end position-relative" style="width: 100%;">
+    <div class="col p-0">
+      <input id="searcherNav" class="form-control" type="search" placeholder="Buscar juego" aria-label="Search">
     </div>
-    <span class="navbar-text disabled d-none d-lg-flex fw-bolder fs-2 font-monospace" style="position: absolute; right: 16px; z-index: -1;">
-      Ñ
-    </span>
+    <button id="btnSearcherNav" class="btn btn-outline-secondary col-auto">
+      <img src="https://espeedruñ.com/img/search.svg">
+    </button>
+    <div class="search-games-container d-none">
+      <span class='search-title-label'>Presiona el botón para buscar</span>
+    </div>
+  </div>
+  <span class="user-select-none d-none d-lg-flex" style="position: absolute; right: 16px;">
+    <span class="navbar-text fw-bolder fs-2 font-monospace">Ñ</span>
+  </span>
   </div>
 </div>`;
 navbarNode.classList.add("mb-4");
 document.querySelector("body").appendChild(navbarNode);
 
-let divMargin = document.createElement('div');
-document.querySelector("body").appendChild(divMargin);
-
-let divDesarrollando = document.createElement('p');
-divDesarrollando.id = "divMensajeTope";
-divDesarrollando.style = "padding-top: 4em;";
-// divDesarrollando.innerHTML = 'Esta página actualmente está en desarrollo y en fase de pruebas.';
-document.querySelector("body").appendChild(divDesarrollando);
+let divUpperSpace = document.createElement('div');
+divUpperSpace.style = "padding-top: 5em;";
+document.querySelector("body").appendChild(divUpperSpace);
 
 $("#btnSearcherNav").on("click", evt => {
   $("#searcherNav").focus();
 });
 
-function acercaDe() {
+function about() {
   bootbox.dialog({
     title: "Acerca de",
     onEscape : true,
+    backdrop: true,
     message: "Esta página fue creada sin fines de lucro, con el único propósito de documentar acerca de las <b style='color: inherit;'>posiciones mundiales de los speedrunners hispanohablantes</b>."
       + "<br>Es posible que encuentres jugadores que no sean hispanohablantes en las tablas o que no encuentres speedrunners que conozcas, esto es debido a que <b style='color: inherit;'>se filtra según la bandera del jugador</b>. Si en speedrun.com no tiene colocado un país hispano entonces no se mostrará en las tablas de esta página."
-      + "<br><br>¡ESpeedruÑ.com seguirá mejorando!"
+      + "<br><br>¡ESpeedruÑ.com seguirá mejorando!",
   });
 }
 
-function contactanos() {
+function contactUs() {
   bootbox.dialog({
     title: "Contáctanos",
     onEscape : true,
+    backdrop: true,
     message: "¡Hola! Soy Luizón, el creador de esta página Ñ 🤠"
-        + "<br>Si deseas colaborar o quieres reportar un problema puedes contactarme en <a class='hyperlink dark' href='https://discord.gg/jjgDVGbySx'>mi server de discord.</a>"
+        + "<br>Si deseas colaborar o quieres reportar un problema puedes contactarme en <a class='hyperlink dark' href='https://discord.gg/jjgDVGbySx'>mi server de discord.</a>",
   });
 }

leaderboard/index.html

@@ -5,12 +5,12 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta property="og:title" content="ESpeedruÑ">
-    <meta property="og:description" content="Página para ver las tablas de posición mundial de hispanohablantes.">
+    <meta property="og:description" content="Tablas de posición mundial de speedruners hispanohablantes.">
     <meta property="og:image" content="https://xn--espeedru-k3a.com/assets/img/favicon.png">
     <meta property="og:url" content="https://xn--espeedru-k3a.com">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="ESpeedruÑ">
-    <meta name="twitter:description" content="Página para ver las tablas de posición mundial de hispanohablantes.">
+    <meta name="twitter:description" content="Tablas de posición mundial de speedruners hispanohablantes.">
     <meta name="twitter:image" content="https://xn--espeedru-k3a.com/assets/img/favicon.png">
     <meta name="twitter:url" content="https://xn--espeedru-k3a.com">
     <link rel="shortcut icon" href="../assets/img/favicon.png" type="image/png">
@@ -86,5 +86,6 @@ <h3>ROM Hacks</h3>
     </div>
     <script src="../js/leaderboard.js" type="module"></script>
     <script src="../js/templates/footer.js"></script>
+    <link rel="stylesheet" href="../css/animations.css">
 </body>
 </html>

sitemap.xml

@@ -1,39 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
-
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-
    <url>
-
       <loc>https://xn--espeedru-k3a.com/</loc>
-
-      <lastmod>2023-09-04</lastmod>
-
+      <lastmod>2024-07-11</lastmod>
       <changefreq>monthly</changefreq>
-
       <priority>1.0</priority>
-
    </url>
-
    <url>
-
       <loc>https://xn--espeedru-k3a.com/leaderboard/?juego=sm64</loc>
-
       <changefreq>always</changefreq>
-
    </url>
-
    <url>
-
       <loc>https://xn--espeedru-k3a.com/leaderboard/?juego=smo</loc>
-
       <changefreq>always</changefreq>
-
    </url>
-
-   <url>
-
-      <loc>https://xn--espeedru-k3a.com/assets/img/favicon.png</loc>
-
-   </url>
-
 </urlset>