+ Moved client to subfolder and added db communication

client/src/app.vue

@@ -0,0 +1,31 @@
+<template>
+    <div id="srs">
+
+        <navigation/>
+        <router-view/>
+
+    </div>
+</template>
+
+<script>
+
+import navbar from "./components/global/navbar/navbar";
+
+export default {
+  name: 'app',
+  components: {
+    'navigation': navbar
+  }
+}
+
+</script>
+
+<style lang="scss">
+
+    #srs {
+        font-family: Avenir, Helvetica, Arial, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+</style>

client/src/assets/scss/_global.scss

@@ -0,0 +1,55 @@
+@import '_variables';
+@import '_mixins';
+@import '_fonts';
+
+// RESETS
+html {
+    box-sizing: border-box;
+    font-size: $font-size-root;
+    -ms-overflow-style: scrollbar;
+    height: 100%;
+    -webkit-overflow-scrolling: touch;
+    line-height: 1.15;
+    color: $primary--base;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+}
+
+html *,
+html *::before,
+html *::after {
+    box-sizing: border-box;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    outline: none;
+}
+
+@at-root {
+    @-ms-viewport { width: device-width; }
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+ul {
+    list-style-type: none;
+}
+
+var {
+    font-style: normal;
+}
+
+// BUTTONS
+
+// MISC.
+hr {
+    border: none;
+    border-top-style: solid;
+    border-top-width: 1px;
+    border-top-color: rgba($black, .25);
+}

client/src/assets/scss/_variables.scss

@@ -0,0 +1,24 @@
+
+//// COLOURS
+// Global colours
+$white: #FFF;
+$black: #000;
+
+$primary--base: #2c3e50;
+$primary--blue: #599EF4;
+$secondary--blue: #355F91;
+
+$valid: #6AC47B;
+$warning: #F7A758;
+$alert: #F44E4E;
+
+
+// Spell colours
+$spell-card--innerborder: #f5ebd8;
+
+// FONT FAMILY
+$font-family: 'Overpass', sans-serif;
+
+$font-size-root: 15px !default;
+$font-size-base: 1.2rem !default;
+$line-height-base: 1.3 !default;

client/src/components/global/navbar/navbar.vue

@@ -0,0 +1,72 @@
+<template>
+    <nav>
+        <ul v-if="links.length != 0">
+            <li v-for="(link, index) in links" :key="index">
+                <router-link v-bind:to="link.url">{{ link.text }}</router-link>
+            </li>
+        </ul>
+    </nav>
+</template>
+
+<script>
+
+export default {
+    name: 'navbar',
+    data() {
+        return {
+            links: [
+                {
+                    id: 0,
+                    text: 'Accueil',
+                    url: '/',
+                },
+                {
+                    id: 1,
+                    text: 'Sortilèges',
+                    url: '/spells',
+                },
+            ]
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    nav {
+        padding-left: 2rem;
+        font-size: .9rem;
+        color: $black;
+        background: $white;
+        text-transform: uppercase;
+        // box-shadow: 0 0 .5rem rgba($black, .75);
+        ul {
+            display: flex;
+            li {
+                a {
+                    position: relative;
+                    margin-right: 1rem;
+                    padding: 1.5rem;
+                    display: block;
+                    &:after {
+                        position: absolute;
+                        display: block;
+                        left: 50%;
+                        bottom: 0;
+                        transform: translateX(-50%);
+                        width: 0;
+                        height: 3px;
+                        content: '';
+                        background: $black;
+                        transition: width .5s cubic-bezier(0.645, 0.045, 0.355, 1);
+                    }
+                    &:hover {
+                        &:after {
+                            width: 80%;
+                            transition: width .5s cubic-bezier(0.645, 0.045, 0.355, 1);
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>

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

@@ -0,0 +1,208 @@
+<template>
+    <article class="spell-card" v-bind:class="{ active: isFlipped }" @click="toggleCard">
+        <div class="content">
+            <header>
+                <h3>{{ name }}</h3>
+            </header>
+            <section class="casting-header">
+                <div class="casting-infos">
+                    <div class="type">
+                        <div class="level">
+                            <div class="label">
+                                <span>LV.</span>
+                                <br>
+                                <span>MIN</span>
+                            </div>
+                            <var>{{ level }}</var>
+                        </div>
+                        <ul class="schools">
+                            <li v-for="(school, index) in schools" :key="index">
+                                {{ school }}
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="cost">
+                        <span class="label">Malus</span>
+                        <var>{{ cost }}</var>
+                    </div>
+                    <div class="charge">
+                        <span class="label">Charge</span>
+                        <var>{{ charge }}</var>
+                    </div>
+                </div>
+                <div class="casting-ingredients">
+                    <p class="title">Nécessite</p>
+                    <p class="content">
+                        {{ ingredients }}
+                    </p>
+                </div>
+            </section>
+            <hr>
+            <section class="spell-description">
+                <p v-for="(line, index) of description" :key="index">
+                    {{ line }}
+                </p>
+            </section>
+            <hr>
+            <footer v-if="variables">
+                <div class="label">Variables</div>
+                <div class="variables">
+                    <div v-for="(variable, index) in variables" :key="index" class="xyz">
+                        <span>{{ variable.name }}</span>
+                        <var>{{ variable.description }}</var>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    </article>
+</template>
+
+<script>
+
+export default {
+    name: 'spell-card',
+    props: {
+        name: String,
+        description: Array,
+        level: String,
+        schools: Array,
+        ingredients: String,
+        charge: String,
+        cost: String,
+        variables: Array,
+    },
+    data() {
+        return {
+            isFlipped: false,
+        }
+    },
+    methods: {
+        toggleCard: async function() {
+            this.isFlipped = !this.isFlipped;
+        }
+    },
+}
+
+</script>
+
+<style lang="scss">
+
+    .spell-card {
+        max-width: 35rem;
+        padding: .5rem;
+        margin: .5rem auto .5rem;
+        background: $spell-card--innerborder;
+        border: solid 1px rgba($primary--base, .5);
+        border-radius: .5rem;
+        box-shadow: .0 .0 .75rem rgba($primary--base, .25);
+
+        > .content {
+            max-width: 35rem;
+            height: 100%;
+            padding: .75rem;
+            background: $white;
+
+            header {
+                h3 {
+                    padding: .5rem;
+                    text-align: center;
+                    color: $white;
+                    text-transform: uppercase;
+                    background: $black;
+                }
+            }
+
+            .casting-header {
+                display: flex;
+                > * {
+                    width: 50%;
+                }
+
+                .casting-infos {
+                    margin: .75rem 0;
+                    padding-right: .75rem;
+                    border-right: 1px solid rgba($black, .25);
+                    .type {
+                        margin-bottom: .5rem;
+                        display: flex;
+                        > * {
+                            width: 50%;
+                        }
+                        .level {
+                            .label {
+                                margin-right: .25rem;
+                                display: inline-block;
+                            }
+                            var {
+                                display: inline-block;
+                                font-size: 2.3em;
+                            }
+                        }
+                    }
+                    .cost, .charge {
+                        font-size: 0.9rem;
+                        > * {
+                            vertical-align: middle;
+                        }
+                        .label {
+                            display: inline-block;
+                            width: 30%;
+                            text-transform: uppercase;
+                        }
+                        var {
+                            display: inline-block;
+                        }
+                    }
+                }
+
+                .casting-ingredients {
+                    margin: .75rem 0;
+                    padding-left: .75rem;
+                    .title {
+                        margin-bottom: .25rem;
+                        font-size: .9rem;
+                        font-weight: bold;
+                        text-transform: uppercase;
+                    }
+                    .content {
+                        padding-top: 1rem;
+                        font-size: .85rem;
+                        text-align: justify;
+                        text-align-last: center;
+                    }
+                }
+            }
+
+            .spell-description {
+                padding: .75rem 0;
+                font-size: .85rem;
+                p {
+                    &:not(:last-of-type) {
+                        margin-bottom: .5rem;
+                    }
+                }
+            }
+
+            footer {
+                padding: .75rem 0 0;
+                display: flex;
+                align-items: center;
+                .label {
+                    margin-right: 1rem;
+                }
+                .variables {
+                    .xyz {
+                        span {
+                            font-size: 1.1rem;
+                            font-weight: bold;
+                            margin-right: 1rem;
+                        }
+                    }
+                }
+            }
+
+        }
+
+    }
+
+</style>

client/src/main.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import App from './app.vue'
+
+import routes from './routes'
+
+Vue.config.productionTip = false
+Vue.use(VueRouter)
+
+const router = new VueRouter({
+    mode: 'history',
+    routes,
+});
+
+const app = new Vue({
+    render: h => h(App),
+    router
+})
+
+app.$mount('#srs')

client/src/models/Spell.ts

@@ -0,0 +1,18 @@
+class Spell {
+
+    private id: number
+    private name: string
+    private description: string
+    private cost: number
+    private charge: number
+    private schools: Array<string>
+    private ingredients: Array<string>
+    private variables: Array<string>
+
+    constructor(id: number) {
+        this.id = id
+    }
+
+}
+
+export default Spell;

client/src/pages/index.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="home-page">
+        <p>This is the home page</p>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'index',
+}
+</script>
+
+<style>
+
+</style>

client/src/pages/spells.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="spells-page">
+        <v-for v-for="(spell, index) in spells" :key="index">
+            <spell-card v-bind="spell"/>
+        </v-for>
+    </div>
+</template>
+
+<script>
+import spellcard from "../components/spells/spell-card";
+
+export default {
+    name: 'spells',
+    components: {
+        'spell-card': spellcard,
+    },
+    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',
+                    }]
+                }
+            ]
+        }
+    }
+}
+
+</script>
+
+<style>
+
+</style>

client/src/routes.js

@@ -0,0 +1,21 @@
+// App router
+
+
+// Pages
+import index from "./pages/index";
+import spells from "./pages/spells";
+
+// Routes
+const routes = [
+    {
+        path: "*", redirect: "/",
+    },
+    {
+        path: '/', component: index,
+    },
+    {
+        path: '/spells', component: spells,
+    }
+];
+
+export default routes;