init vue+bulma frontend

lootalot_front/src/App.vue

@@ -0,0 +1,47 @@
+<template>
+  <main id="app" class="section">
+  <section id="content" class="columns is-desktop">
+    <Player></Player>
+    <div class="column">
+    <section id="main" class="columns">
+       <div class="column">
+          <div id="main-heading" class="columns is-mobile is-vcentered">
+            <div class="column is-narrow">
+                <span class="icon is-large"><i class="fas fa-3x fa-gem"></i></span>
+            </div>
+            <div class="column has-text-left">
+                <h1 class="title">Coffre de groupe</h1>
+            </div>
+          </div>
+          <Chest player_id="0"></Chest>
+       </div>
+    </section>   
+    </div>
+  </section>
+  </main>
+</template>
+
+<script>
+import Player from './components/Player.vue'
+import Chest from './components/Chest.vue'
+import 'bulma/css/bulma.css'
+
+export default {
+  name: 'app',
+  components: {
+    Player,
+    Chest
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

lootalot_front/src/components/Chest.vue

@@ -0,0 +1,22 @@
+<template>
+    <table class="table is-fullwidth is-striped">
+        <thead>
+          <tr><th>Objets de {{ player_id }}</th></tr>
+        </thead>
+        <tbody>
+          <tr><td>Nom 1</td></tr>
+          <tr><td>Nom 2</td></tr>
+          <tr><td>Nom 3</td></tr>
+        </tbody>
+    </table>
+</template>
+
+<script>
+    export default {
+        props: ["player_id"],
+        data () {
+            return {
+            };
+        }
+    }
+</script>

lootalot_front/src/components/Player.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="column is-one-third-desktop">
+    <div id="sidebar" class="card">
+      <header id="sidebar-heading" class="card-header">
+       <a id="change_player" class="card-header-icon is-dark">
+        <span class="icon is-small">
+         <i class="fas fa-exchange-alt"></i>
+        </span>
+       </a>
+       <p id="active_player" class="card-header-title">{{ name }}</p>
+      </header>
+      <div class="card-content">
+        <span class="icon is-large">
+          <i class="fas fa-2x fa-coins"></i>
+        </span>
+        <nav class="level is-mobile">
+          <div class="level-item">
+            <div><p class="heading">CP</p><p class="subtitle">{{ wealth[0] }}</p></div>
+          </div>
+          <div class="level-item">
+            <div><p class="heading">SP</p><p class="subtitle">{{ wealth[1] }}</p></div>
+          </div>
+          <div class="level-item">
+            <div><p class="heading">GP</p><p class="subtitle">{{ wealth[2] }}</p></div>
+          </div>
+          <div class="level-item">
+            <div><p class="heading">PP</p><p class="subtitle">{{ wealth[3] }}</p></div>
+          </div>
+        </nav>
+      </div>
+      <footer class="card-footer">
+        <a @click="showChest = !showChest" href="#" class="card-footer-item is-dark">Coffre</a>
+        <a href="#" class="card-footer-item">Argent</a>
+      </footer>
+    </div>
+    <div class="card" v-show="showChest" style="margin-top: 1em;">
+      <div class="card-content">
+        <Chest player_id="0"></Chest>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+    import Chest from './Chest.vue'
+    /*
+
+    The Player control board.
+    
+    
+
+    */
+    export default {
+        components: { Chest },
+        data () {
+            return {
+                name: "Player name",
+                wealth: [1000,100,10,1],
+                showChest: false,
+            };
+        }
+    }
+</script>
+
+<style scoped>
+</style>

lootalot_front/src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')