- [All] Finished API call for spells and various bug fixes

client/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "spellsaurus",
+  "name": "spellsaurus_client",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -2088,6 +2088,37 @@
       "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",

client/package.json

@@ -27,6 +27,7 @@
         "lint": "vue-cli-service lint"
     },
     "dependencies": {
+        "axios": "^0.19.2",
         "core-js": "^3.6.4",
         "vue": "^2.6.11"
     },

client/src/components/spells/spell-card.vue

@@ -1,5 +1,5 @@
 <template>
-    <article class="spell-card" v-bind:class="{ active: isFlipped }" @click="toggleCard">
+    <article class="spell-card">
         <div class="content">
             <header>
                 <h3>{{ name }}</h3>
@@ -17,7 +17,7 @@
                         </div>
                         <ul class="schools">
                             <li v-for="(school, index) in schools" :key="index">
-                                {{ school }}
+                                {{ school.name }}
                             </li>
                         </ul>
                     </div>
@@ -33,14 +33,14 @@
                 <div class="casting-ingredients">
                     <p class="title">Nécessite</p>
                     <p class="content">
-                        {{ ingredients }}
+                        <span v-for="(ingredient, index) in ingredients" :key="index">{{ ingredient }}</span>
                     </p>
                 </div>
             </section>
             <hr>
             <section class="spell-description">
-                <p v-for="(line, index) of description" :key="index">
-                    {{ line }}
+                <p>
+                    {{ description }}
                 </p>
             </section>
             <hr>

client/src/pages/spells.vue

@@ -7,6 +7,7 @@
 </template>
 
 <script>
+import axios from 'axios';
 import spellcard from "../components/spells/spell-card";
 
 export default {
@@ -16,23 +17,18 @@ export default {
     },
     data() {
         return {
-            spells: [
-                {
-                    name: 'Soleil Pourri',
-                    description: [`Le lanceur projette un petit astre vert jusqu’à 20m autour de lui. L’astre brûle l’air environnant, nécrosant rapidement les formes de vies dans un rayon de 100m.`, `Toutes les créatures dans la portée de l’astre (sauf le lanceur) doivent réussir un jet de CON avec un malus de -30. Si elles échouent, elles subissent 3D20 dégâts radiants et 2D20 dégâts nécrotiques. Elles perdent également 1D10 PV max.`],
-                    schools: ['Lumomancie', 'Nécromancie'],
-                    level: '-30',
-                    charge: '2',
-                    ingredients: 'Volonté, Geste',
-                    cost: '-90',
-                    variables: [{
-                        name: 'x',
-                        description: 'lol',
-                    }]
-                }
-            ]
+            spells: []
         }
-    }
+    },
+    mounted() {
+        axios({ method: "GET", "url": "http://localhost:2814/api/spells"})
+        .then(result => {
+            this.spells = result.data.spells;
+            console.log(result)
+        }, error => {
+            console.log(error)
+        })
+    },
 }
 
 </script>