From b50c91d05d4f0d26194e30bc7790ceee1177eb1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20L=2E=20Maravilha?=
 <andre.maravilha@outlook.com>
Date: Wed, 15 May 2024 16:27:48 -0300
Subject: [PATCH] =?UTF-8?q?Modifica=20nome=20dos=20componentes=20e=20faz?=
 =?UTF-8?q?=20pequenas=20corre=C3=A7=C3=B5es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/build-deploy.yml     | 27 ++++++---
 package.json                           |  3 +
 src/components/Board.vue               | 32 +++++-----
 src/components/{Card.vue => Carta.vue} | 17 +++---
 src/composables/card-utils.js          | 35 -----------
 src/lib/hep-cartas.js                  | 84 ++++++++++++++++++++++++++
 src/lib/hep-game.js                    | 10 +++
 src/views/DecksView.vue                | 34 +++++------
 8 files changed, 159 insertions(+), 83 deletions(-)
 rename src/components/{Card.vue => Carta.vue} (80%)
 delete mode 100644 src/composables/card-utils.js
 create mode 100644 src/lib/hep-cartas.js
 create mode 100644 src/lib/hep-game.js

diff --git a/.github/workflows/build-deploy.yml b/.github/workflows/build-deploy.yml
index dafc71a..4b06e26 100644
--- a/.github/workflows/build-deploy.yml
+++ b/.github/workflows/build-deploy.yml
@@ -1,7 +1,7 @@
 name: Build and Deploy
 
 on:
-  # Runs on pushes targeting the default branch
+  # Runs on pushes targeting the main branch
   push:
     branches:
       - main
@@ -31,25 +31,38 @@ jobs:
 
       - name: Checkout 🛎️
         uses: actions/checkout@v3
+
+      #- name: Rename image files to lowercase characters only 🔧
+      #  run: |
+      #    sudo apt-get install -y rename
+      #    find ./src/assets/cards/imagens/ -depth -exec rename 's/(.*)\/([^\/]*)/$1\/\L$2/' {} \;
         
       - name: Resize images for production 🔧
         run: |
           sudo apt-get install -y imagemagick
-          mogrify -resize 600 ./src/assets/cards/imagens/*[.png,.jpg,.jpeg,.PNG,.JPG,.JPEG]
+          mogrify -resize 600 -format png ./src/assets/cards/imagens/*[.png,.jpg,.jpeg,.PNG,.JPG,.JPEG]
+
+      - name: Remove unnecessary files 🔧
+        run: |
+          rm -f ./src/assets/cards/imagens/*.jpg
+          rm -f ./src/assets/cards/imagens/*.jpeg
+          rm -f ./src/assets/cards/imagens/*.PNG
+          rm -f ./src/assets/cards/imagens/*.JPG
+          rm -f ./src/assets/cards/imagens/*.JPEG
 
-      - name: Set up Node 🔧
+      - name: Set up Node.js 🔧
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           cache: 'npm'
 
-      - name: Install dependencies 🔧
+      - name: Install project dependencies 🔧
         run: npm install
 
-      - name: Build 🔧
+      - name: Build project 🔧
         run: npm run build
 
-      - name: Setup Pages 🔧
+      - name: Setup GitHub Pages 🔧
         uses: actions/configure-pages@v3
 
       - name: Upload artifact 🔧
diff --git a/package.json b/package.json
index 65e259e..d8abd2a 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,9 @@
   "bugs": {
     "url": "https://github.com/cefetmg-dv/hepgame/issues"
   },
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "dependencies": {
     "@popperjs/core": "^2.11.7",
     "bootstrap": "^5.2.3",
diff --git a/src/components/Board.vue b/src/components/Board.vue
index 1ecc2bd..92eca9f 100644
--- a/src/components/Board.vue
+++ b/src/components/Board.vue
@@ -6,20 +6,20 @@
         <div class="col-12">
           <div class="row justify-content-center">
             <div class="col-1">
-              <Card :cardId="6" class="deck-card"></Card>
+              <Carta :carta="6" class="deck-card"></Carta>
             </div>
             <div class="col-1">
-              <Card :cardId="7" class="deck-card"></Card>
+              <Carta :carta="7" class="deck-card"></Carta>
             </div>
             <div class="col-1">
-              <Card :cardId="8" class="deck-card"></Card>
+              <Carta :carta="8" class="deck-card"></Carta>
             </div>
           </div>
         </div>
         <div class="col-12">
             <div class="row justify-content-center">
-                <div v-for="(card, index) in player1.cards" :key="index" class="col-1">
-                    <Card :cardId="card.id" class="deck-card"></Card>
+                <div v-for="(carta, idx) in jogador_1.cartas" :key="index" class="col-1">
+                    <Carta :carta="carta.id" class="deck-card"></Carta>
                 </div>
             </div>
         </div>
@@ -31,28 +31,28 @@
 <!-- JavaScript                                                             -->
 <!-- ---------------------------------------------------------------------- -->
 <script>
-import cardUtils from '@/composables/card-utils.js';
-import Card from '@/components/Card.vue';
+import hepCartas from '@/lib/hep-cartas.js';
+import Carta from '@/components/Carta.vue';
 
 export default {
   components: {
-    Card
+    Carta
   },
   data() {
     return {
-        player1: {
-            name: 'Player 1',
-            cards: [],
+        jogador_1: {
+            nome: 'Jogador 1',
+            cartas: [],
         },
       //
     };
   },
   created() {
-    this.player1.cards.push(cardUtils.getCard(1));
-    this.player1.cards.push(cardUtils.getCard(2));
-    this.player1.cards.push(cardUtils.getCard(3));
-    this.player1.cards.push(cardUtils.getCard(4));
-    this.player1.cards.push(cardUtils.getCard(5));
+    this.jogador_1.cartas.push(hepCartas.buscarCartaPorId(1));
+    this.jogador_1.cartas.push(hepCartas.buscarCartaPorId(2));
+    this.jogador_1.cartas.push(hepCartas.buscarCartaPorId(3));
+    this.jogador_1.cartas.push(hepCartas.buscarCartaPorId(4));
+    this.jogador_1.cartas.push(hepCartas.buscarCartaPorId(5));
   },
   mounted() {
     // TODO
diff --git a/src/components/Card.vue b/src/components/Carta.vue
similarity index 80%
rename from src/components/Card.vue
rename to src/components/Carta.vue
index 6b6089a..40e86bf 100644
--- a/src/components/Card.vue
+++ b/src/components/Carta.vue
@@ -2,8 +2,8 @@
 <!-- HTML                                                                   -->
 <!-- ---------------------------------------------------------------------- -->
 <template>
-    <div class="hep-card">
-        <img :src="card.imagem" :alt="card.nome" class="rounded">
+    <div class="hep-carta">
+        <img :src="dados.imagem" :alt="dados.nome" class="rounded">
     </div>
 </template>
 
@@ -12,23 +12,24 @@
 <!-- JavaScript                                                             -->
 <!-- ---------------------------------------------------------------------- -->
 <script>
-import cardUtils from '@/composables/card-utils.js';
+import hepCartas from '@/lib/hep-cartas.js';
+
 export default {
     props: {
-        cardId: {
+        carta: {
             type: String,
             required: true
         }
     },
     data() {
         return {
-            card: null,
+            dados: null
         }
     },
     methods: {
     },
     created() {
-        this.card = cardUtils.getCard(this.cardId);
+        this.dados = hepCartas.buscarCartaPorId(this.carta);
     },
 }
 </script>
@@ -38,14 +39,14 @@ export default {
 <!-- CSS                                                                    -->
 <!-- ---------------------------------------------------------------------- -->
 <style scoped>
-.hep-card {
+.hep-carta {
     margin: 0;
     padding: 0;
     max-width: 100% !important;
     width: 100% !important;
 }
 
-.hep-card img {
+.hep-carta img {
     width: 100%;
     height: auto;
 }
diff --git a/src/composables/card-utils.js b/src/composables/card-utils.js
deleted file mode 100644
index 325c1e3..0000000
--- a/src/composables/card-utils.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import fm from 'front-matter';
-import { marked } from 'marked';
-import DOMPurify from 'dompurify';
-
-// Obtém os dados dos cards
-const entries = import.meta.glob('/src/assets/cards/*.md', { as: 'raw', eager: true });
-const cards = [];
-for (let key of Object.keys(entries)) {
-    const { attributes, body } = fm(entries[key]);
-    const card = {
-        ...attributes,
-        descricao: DOMPurify.sanitize(marked.parse(body))
-    };
-
-    if (card.imagem) {
-        card.imagem = new URL(`/src/assets/cards/imagens/${card.imagem}`, import.meta.url).href;
-    }
-
-    cards.push(card);
-}
-
-// Ordena os cards por ordem crescente pelo id
-cards.sort((a, b) => a.id - b.id);
-
-export default {
-
-    getCards() {
-        return cards;
-    },
-
-    getCard(id) {
-        return cards.find(card => card.id === id);
-    }
-
-};
diff --git a/src/lib/hep-cartas.js b/src/lib/hep-cartas.js
new file mode 100644
index 0000000..6789234
--- /dev/null
+++ b/src/lib/hep-cartas.js
@@ -0,0 +1,84 @@
+import fm from 'front-matter';
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+
+
+const ARQUIVOS = import.meta.glob(`/src/assets/cards/*.md`, { as: 'raw', eager: true });
+const URL_CARTA_SEM_IMAGEM = new URL(`/src/assets/card-noimage.png`, import.meta.url).href;
+const PATH_IMAGENS = '/src/assets/cards/imagens';
+
+// Arrays que armazenam os dados das cartas
+const CARTAS = [];
+const GENIOS = [];
+
+// Obtém os dados das cartas a partir dos arquivos .md
+for (let key of Object.keys(ARQUIVOS)) {
+
+    // Extrai os atributos e o texto da carta
+    const { attributes, body } = fm(ARQUIVOS[key]);
+    const carta = {
+        ...attributes,
+        descricao: DOMPurify.sanitize(marked.parse(body))
+    };
+
+    // Define a URL da imagem da carta
+    if (carta.imagem) {
+
+        // Correção temporária até que os arquivos .md das cartas sejam ajustados
+        carta.imagem = carta.imagem.substring(0, carta.imagem.lastIndexOf('.'));
+
+        carta.imagem = new URL(`${PATH_IMAGENS}/${carta.imagem}.png`, import.meta.url).href;
+    } else {
+        carta.imagem = URL_CARTA_SEM_IMAGEM;
+    }
+
+    // Adiciona a carta ao array de cartas
+    CARTAS.push(carta);
+
+    // Adiciona o gênio ao array de gênios
+    if (carta.genio) {
+        GENIOS.push(carta);
+    }
+}
+
+// Ordena as cartas em ordem crescente pelo id
+CARTAS.sort((a, b) => a.id - b.id);
+
+
+export default {
+
+    /**
+     * Retorna um array com todas as cartas.
+     * @returns {Array} Retorna um array com todas as cartas.
+     */
+    buscarCartas() {
+        return CARTAS;
+    },
+
+    /**
+     * Retorna um array com as cartas de gênios.
+     * @returns {Array} Retorna um array com as cartas de gênios.
+     */
+    buscarGenios() {
+        return GENIOS;
+    },
+
+    /**
+     * Retorna um array com as cartas do deck de um gênio específico.
+     * @param {String} genio Nome do deck/gênio.
+     * @returns {Array} Retorna um array com as cartas do deck.
+     */
+    buscarCartasPorGenio(genio) {
+        return CARTAS.filter(carta => carta.deck === genio);
+    },
+
+    /**
+     * Retorna uma carta a partir de seu id.
+     * @param {Number} id Id da carta.
+     * @returns {Object} Retorna um objeto com os dados da carta.
+     */
+    buscarCartaPorId(id) {
+        return CARTAS.find(carta => carta.id === id);
+    }
+
+};
diff --git a/src/lib/hep-game.js b/src/lib/hep-game.js
new file mode 100644
index 0000000..dd2d245
--- /dev/null
+++ b/src/lib/hep-game.js
@@ -0,0 +1,10 @@
+import hepCartas from '@/lib/hep-cartas.js';
+
+class Jagador {
+    constructor(nome, deck) {
+        this.nome = nome;
+        this.deck = deck;
+        this.cartas = [];
+        this.energia = 1;
+    }
+}
diff --git a/src/views/DecksView.vue b/src/views/DecksView.vue
index 0e05641..3af6559 100644
--- a/src/views/DecksView.vue
+++ b/src/views/DecksView.vue
@@ -5,28 +5,28 @@
 
   <BackToMenu/>
   <!-- Modal para exibir detalhes do card -->
-  <div id="cardModal" class="modal" tabindex="-1">
+  <div id="modal-carta" class="modal" tabindex="-1">
     <div class="modal-dialog modal-lg modal-fullscreen-md-down modal-dialog-centered modal-dialog-scrollable">
       <div class="modal-content text-dark">
         <div class="modal-header">
-          <h1 class="modal-title h5">{{ modal.card?.nome }}</h1>
+          <h1 class="modal-title h5">{{ modal.carta?.nome }}</h1>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body">
           <div class="container-fluid">
             <div class="row">
               <div class="col-12 col-md-5 mb-3 text-center">
-                <img :src="modal.card?.imagem" :alt="modal.card?.nome" class="img-fluid img-thumbnail rounded">
+                <img :src="modal.carta?.imagem" :alt="modal.carta?.nome" class="img-fluid img-thumbnail rounded">
               </div>
               <div class="col-12 col-md-7 mb-3">
                 <div class="row">
                   <div class="col-12 mb-3">
                     <div class="hstack gap-3">
-                      <span v-if="modal.card?.genio" class="badge text-bg-success">Gênio</span>
-                      <span v-for="(tag, index) in modal.card?.tags" :key="index" class="badge text-bg-primary">{{ tag }}</span>
+                      <span v-if="modal.carta?.genio" class="badge text-bg-success">Gênio</span>
+                      <span v-for="(tag, idx) in modal.carta?.tags" :key="idx" class="badge text-bg-primary">{{ tag }}</span>
                     </div>
                   </div>
-                  <div class="col-12" v-html="modal.card?.descricao">
+                  <div class="col-12" v-html="modal.carta?.descricao">
                   </div>
                 </div>
               </div>
@@ -40,8 +40,8 @@
   <!-- Listagem dos cards -->
   <div class="container">
     <div class="row py-5 gx-5 gy-5">
-      <div v-for="(card, index) in cards" :key="index" class="col-12 col-md-3">
-        <Card :cardId="card.id" @click="() => { exibirModal(card.id) }" class="deck-card hvr-grow"></Card>
+      <div v-for="(carta, idx) in cartas" :key="idx" class="col-12 col-md-3">
+        <Carta :carta="carta.id" @click="() => { exibirModal(carta.id) }" class="hep-carta hvr-grow"></Carta>
       </div>
     </div>
   </div>
@@ -54,35 +54,35 @@
 <!-- ---------------------------------------------------------------------- -->
 <script>
 import { RouterLink, RouterView } from 'vue-router';
-import Card from '@/components/Card.vue';
+import Carta from '@/components/Carta.vue';
+import BackToMenu from '@/components/BackToMenu.vue'
 import * as bootstrap from 'bootstrap';
-import cardUtils from '@/composables/card-utils.js';
-import BackToMenu from '@/components/BackToMenu.vue';
+import hepCartas from '@/lib/hep-cartas.js';
 
 export default {
   components: {
     RouterLink,
     RouterView,
-    Card,
+    Carta,
     BackToMenu
   },
   data() {
     return {
-      cards: cardUtils.getCards(),
+      cartas: hepCartas.buscarCartas(),
       modal: {
         elemento: null,
-        card: null
+        carta: null
       }
     };
   },
   created() {
   },
   mounted() {
-    this.modal.elemento = new bootstrap.Modal(document.querySelector('#cardModal'));
+    this.modal.elemento = new bootstrap.Modal(document.querySelector('#modal-carta'));
   },
   methods: {
     exibirModal(id) {
-      this.modal.card = cardUtils.getCard(id);
+      this.modal.carta = hepCartas.buscarCartaPorId(id);
       this.modal.elemento.show();
     }
   }
@@ -94,7 +94,7 @@ export default {
 <!-- CSS                                                                    -->
 <!-- ---------------------------------------------------------------------- -->
 <style scoped>
-.deck-card {
+.hep-carta {
   cursor: pointer;
 }
 </style>