v0.0.1 released – Code Gamemode is now available.

- Modo de juego "Code" habilitado pero en modo experimental (Experimental sobre todo en el aspecto visual)
- Despliegue de distintos lenguajes al presionar el modo de juego code.
- Fix bugs
- Cambios en la estructura del proyecto
- Footer con el creador y su versión actual
- Botón reset para cada modo de juego con posibilidad de usar "Ctrl + R" para accionarlo
- Posibilidad eliminada de reiniciar y poder encontrar la misma frase/fragmento de código

Author: Maek0s

package-lock.json

@@ -16,6 +16,7 @@
     "axios": "^1.11.0",
     "canvas-confetti": "^1.9.3",
     "gh-pages": "^6.3.0",
+    "prismjs": "^1.30.0",
     "react": "^19.1.0",
     "react-confetti": "^6.4.0",
     "react-dom": "^19.1.0",

package.json

@@ -1,6 +1,7 @@
 /* Elementos de estructura generales */
 
-html, body {
+html,
+body {
   height: 100%;
   overflow: hidden;
   margin: 0;
@@ -14,6 +15,10 @@ header {
   padding: 10px 20px;
 }
 
+* {
+  user-select: none;
+}
+
 /* Resto de elementos */
 
 /* Header */
@@ -32,19 +37,18 @@ header {
 }
 
 .optionNav {
-  
   display: flex;
   align-items: center;
 }
 
 a {
   text-decoration: none;
-  color: inherit
+  color: inherit;
 }
 
 a:hover {
   text-decoration: none;
-  color: inherit
+  color: inherit;
 }
 
 a#logo {
@@ -68,29 +72,121 @@ div.icon img {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: calc(100vh - 80px);
+  height: calc(92vh - 80px);
   padding: 20px;
   box-sizing: border-box;
 }
 
+/* OptionsGame */
+
+.optionsGame {
+  position: fixed;
+  top: calc(50% - 180px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+}
+
+.optionsGame .group {
+  display: flex;
+}
+
+.optionsGame .group span {
+  border: 1px solid black;
+  background-color: rgb(73, 70, 70);
+  padding: 5px 10px;
+}
+
+.optionsGame .group span.mode {
+  cursor: pointer;
+}
+
+.optionsGame .group span.mode:first-child {
+  border-radius: 10px 1px 1px 10px;
+}
+
+.optionsGame .group span.mode:last-child {
+  border-left: 0px;
+  border-radius: 1px 10px 10px 1px;
+}
+
+span.timerDisplayed {
+  cursor: pointer;
+  border-radius: 0px !important;
+  pointer-events: none;
+}
+
+.optionsGame .group.timersExpanded span.timerDisplayed {
+  pointer-events: auto;
+}
+
+.timerDisplayed:last-child {
+  border-radius: 1px 10px 10px 1px !important;
+}
+
+.group.timersExpanded span + span.timerDisplayed {
+  border-left: none;
+}
+
+.enable {
+  background-color: #007acc !important;
+}
+
+.timerToggleExpanded {
+  border-radius: 10px 0px 0px 10px;
+}
+
+.optionsGame .group span.timerDisplayed {
+  opacity: 0;
+  width: 0;
+  overflow: hidden;
+  transition: width 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid black;
+  background-color: rgb(73, 70, 70);
+  padding: 5px 10px;
+  border-radius: 0;
+  margin-left: -1px;
+  padding: 0;
+  box-sizing: border-box;
+  transform: translateX(-20px);
+}
+
+.optionsGame .group.timersExpanded span.timerDisplayed {
+  width: 40px;
+  opacity: 1;
+  margin-left: 0;
+  border-radius: 0 10px 10px 0;
+  transform: translateX(0);
+}
+
+.optionsGame .group span.timerToggle {
+  border: 1px solid black;
+  background-color: rgb(73, 70, 70);
+  border-radius: 10px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Game */
+
 .game {
-  flex: 1;
   position: fixed;
-  font-family: "monospace";
-  font-size: "2rem";
+  font-family: monospace;
+  font-size: 2rem;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   white-space: pre;
-  justify-content: center;
-  align-items: center;
-  height: calc(100vh - 80px);
   width: 60%;
-  height: 20%;
-  font-family: monospace;
-  font-size: 2rem;
-
-  align-content: center;
+  height: auto;
+  justify-content: center;
   display: flex;
   flex-wrap: wrap;
 }
@@ -106,7 +202,7 @@ div.icon img {
   padding: 12px 24px;
   font-size: 1rem;
   font-weight: bold;
-  background-color: #007ACC;
+  background-color: #007acc;
   color: white;
   border: none;
   border-radius: 8px;
@@ -115,7 +211,7 @@ div.icon img {
   transition: background-color 0.3s ease, transform 0.2s ease;
   position: relative;
   overflow: hidden;
-  margin-top: 2rem;
+  margin-top: 13vh;
 }
 
 .resetButton .icon {
@@ -135,11 +231,130 @@ div.icon img {
   transform: rotate(360deg);
 }
 
+.resetButton.codebtn {
+  margin-top: 10px !important;
+}
+
+/* Code game mode */
+
+::-webkit-scrollbar {
+    display: none;
+}
+
+.gameCodeContainer {
+  display: flex;
+  justify-content: center;
+  padding-top: 100px;
+  padding-bottom: 0px;
+  width: 100%;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+.gameCodeContainer pre {
+    font-family: monospace;
+    white-space: pre;
+    max-width: 80%;
+    min-width: 30vh;
+    min-height: 300px;
+    overflow-x: auto;
+    padding: 20px;
+    color: white;
+    border-radius: 10px;
+}
+
+.group span + span.mode {
+  border-left: none;
+}
+
+.gameCodeContainer pre code {
+  font-size: 1.1rem;
+}
+
+.tab-flecha-written {
+  color: orange;
+  font-weight: bold;
+}
+
+.tab-flecha {
+  color: gray;
+  font-weight: bold;
+}
+
+/* Footer */
+
+footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  height: 60px;
+  padding: 0 20px;
+}
+
+.githubCreator {
+  position: absolute;
+  left: 10px;
+  display: flex;
+  align-items: center;
+}
+
+.githubCreator a {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.madeWith {
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  flex: 1;
+  text-align: right;
+}
+
+.madeWith a {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Cursor mode code */
+
+.cursor {
+  position: relative;
+  color: #007acc;
+  font-weight: bold;
+}
+
+.cursor::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 2px;
+  height: 1em;
+  background-color: #007acc;
+  animation: blink 1s steps(2, start) infinite;
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
 /* Cambios situacionales */
 
-/* max-width 600px */
+/* max-width 850px */
 
-@media (max-width: 600px) {
+@media (max-width: 840px) {
   .game {
     width: 90%;
     font-size: 1.5rem;
@@ -149,4 +364,4 @@ div.icon img {
     font-size: 0.9rem;
     padding: 10px 20px;
   }
-}
+}