last changes

silSuarezP · Nov 19, 2023 · e0eb086 · e0eb086
1 parent 2b3dd33
commit e0eb086
Show file tree

Hide file tree

Showing 6 changed files with 185 additions and 10 deletions.
diff --git a/estilo/estilo.css b/estilo/estilo.css
@@ -1,4 +1,3 @@
-
 /*Silvia SUárez Prendes, UO277412*/
 
 /* Especificidad: 001*/

diff --git a/estilo/memoria.css b/estilo/memoria.css
@@ -0,0 +1,99 @@
+/*Silvia SUárez Prendes, UO277412*/
+
+/* Especificidad: 001 */
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    color: #ad68c4;
+    background-color: #fff;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #ffffff;
+    background-color: #9a4ea9;
+    box-shadow: 0 0.7ex 1.2ex 0.25ex #4e0b66;
+    margin: 0;
+    padding: 0;
+}
+
+header,
+nav {
+    display: flex;
+    flex-direction: row;
+    align-items: first baseline;
+    padding: 1em;
+}
+
+nav {
+    display: block;
+    position: relative;
+    gap: 0,25em;
+}
+
+nav a {
+    color: #000000;
+}
+
+li {
+    list-style-position: inside;
+    display: list-item;
+    text-align: -webkit-match-parent;
+}
+
+ul {
+    display: block;
+    list-style-type: circle;
+    margin-block-start: 0.5em;
+    margin-block-end: 1em;
+    margin-inline-start: 0.5em;
+    margin-inline-end: 0.5em;
+    padding-inline-start: 0.5em;
+}
+
+
+
+
+
+
+/* Especificidad: 001*/
+h1 {
+    color: #000000;
+    background-color: #9a4ea9;
+    padding: 2em;
+    text-transform: uppercase;
+    text-align: center;
+}
+
+/* Especificidad: 001 */
+article {
+    /* Otras propiedades de estilo para los artículos */
+    width: 200px;
+    height: 300px;
+    perspective: 1000px;
+    /* Define la perspectiva para el efecto 3D */
+    transition: transform 0.5s;
+    /* Establece la transición de transformación a medio segundo */
+}
+
+/* Especificidad: 011 */
+article:hover {
+    transform: rotateY(180deg);
+    /* Voltea la tarjeta en el eje Y cuando el usuario pasa el ratón sobre ella */
+}
+
+/* Especificidad: 002 */
+article img,
+article h2 {
+    backface-visibility: hidden;
+    /* Oculta las caras traseras de la tarjeta para evitar parpadeos */
+}
+
+/* Especificidad: 002 */
+article img {
+    transform: rotateY(180deg);
+    /* Gira la imagen en el eje Y para que esté oculta inicialmente */
+}
+
+
diff --git a/index.html b/index.html
@@ -20,7 +20,6 @@
 </head>
 
 <body>
-    <!-- Datos con el contenido que aparece en el navegador -->
     <header>
         <h1>Escritorio virtual</h1>
         <nav>

diff --git a/js/memoria.js b/js/memoria.js
@@ -1,6 +1,11 @@
 // Ejercicio2 - javascript
 class Memoria {
 
+    // states of the cards
+    INIT = "init";
+    FLIP = "flip";
+    REVEALED = "revealed";
+
     /*
     hasFlippedCard -> indica si ya hay una carta dada la vuelta, default:false
     lockBoard -> indica si el tablero se encuentra bloqueado a la interacción del usuario, default:false
@@ -116,35 +121,82 @@ class Memoria {
      * 2 - pone a false las variables hasFlippedBoard y lockBoard
      */
     resetBoard() {
+        this.firstCard = null;
+        this.secondCard = null;
 
+        this.hasFlippedCard = false;
+        this.lockBoard = false;
     }
 
     /**
      * comprueba si las cartas volteadas son iguales
      *      - si lo son -> llama al método disableCards()
-     *      - si no lo son -> llama al método resetBoard()
+     *      - si no lo son -> llama al método resetBoard() (y da la vuelta a las cartas volteadas)
      * 
      * (se puede usar un operador ternario)
      */
     checkForMatch() {
-
+        if (this.firstCard.dataset.element == this.secondCard.dataset.element) {
+            this.disableCards();
+        }
+        else {
+            this.unflipCards();
+        }
     }
 
 
     /**
-     * 1 - deshabilita las interacciones sobre las tarjetas de memoria que ya hayan sido emparejadas
+     * 1 - deshabilita las interacciones sobre las tarjetas de memoria que ya hayan sido emparejadas (?) TODO
      * 2 - modifica el valor del atributo data-state a revealed 
      * 3 - invoca al método resetBoard()
      */
     disableCards() {
-
+        this.firstCard.dataset.state = this.REVEALED;
+        this.secondCard.dataset.state = this.REVEALED;
+        this.resetBoard();
     }
 
 
+    /**
+     * recorre el objeto JSON y crea por cada elemento existente en él un nodo article en el documento html para representar cada tarjeta del juego de memoria
+     */
+    createElements() {
+        var section = document.getElementsByTagName("section")[1];
+
+        for (var e in this.cards) {
+            var article = document.getElementsByTagName("article")[1];
+
+            article.setAttribute("data-element", e.element);
+            article.setAttribute("data-state", this.INIT);
+
+            var h2 = document.createElement("h2");
+            h2.innerText = "Tarjeta de memoria";
+
+
+            var image = document.createElement("img");
+            image.setAttribute("src", e.source);
+            image.setAttribute("alt", e.element);
+
+            article.append(h2);
+            article.append(image);
+            section.append(article);
+        }
+    }
+
 
+    /**
+     * recorre todas las tarjetas y provoque una llamada al método flipCard() cuando se lance dicho evento
+     */
+    addEventListeners() {
+        var article = document.getElementsByTagName("article");
 
+        for (var c in article) {
+            c.addEventListener("click", this.flipCard.bind(card, this));
+        }
+    }
 
 
+
 
 
 

diff --git a/juegos.html b/juegos.html
@@ -29,12 +29,10 @@ <h1>Escritorio virtual</h1>
 
 
     <!-- Ejercicio2 - javascript -->
-    <!-- Menú de acceso a los diferentes juegos -->
-    <section id="menu-juegos">
+    <section>
         <h2>Juegos</h2>
         <ul>
             <li><a href="memoria.html">Memoria</a></li>
-            <!-- Agrega más enlaces para otros juegos según sea necesario -->
         </ul>
     </section>
 

diff --git a/memoria.html b/memoria.html
@@ -10,6 +10,34 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Agenda</title>
     <link rel="stylesheet" type="text/css" href="estilo/estilo.css" />
+    <link rel="stylesheet" type="text/css" href="estilo/memoria.css" />
 
     <script src="js/memoria.js"></script>
-</head>
+</head>
+
+
+<body>
+    <header>
+        <h1>Escritorio virtual</h1>
+        <nav>
+            <a href="index.html" accesskey="I" tabindex="1">Inicio</a>
+            <a href="sobremi.html" accesskey="S" tabindex="2">Sobre mí</a>
+            <a href="noticias.html" accesskey="N" tabindex="3">Noticias</a>
+            <a href="agenda.html" accesskey="A" tabindex="4">Agenda</a>
+            <a href="meteorología.html" accesskey="M" tabindex="5">Meteorología</a>
+            <a href="viajes.html" accesskey="V" tabindex="6">Viajes</a>
+            <a href="juegos.html" accesskey="J" tabindex="7">Juegos</a>
+        </nav>
+    </header>
+
+    <section>
+        <h2>Juegos</h2>
+        <ul>
+            <li><a href="memoria.html">Memoria</a></li>
+        </ul>
+    </section>
+
+
+
+
+</body>
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,3 @@

		/Silvia SUárez Prendes, UO277412/

		/* Especificidad: 001*/
Expand Down
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,7 +20,6 @@ @@
     </head>
     <body>
-        <!-- Datos con el contenido que aparece en el navegador -->
         <header>
             <h1>Escritorio virtual</h1>
             <nav>
@@ Expand Down @@