From ca6c5d0e3d64693272f16071f6da386d43420764 Mon Sep 17 00:00:00 2001
From: antoinezanardi <antoine.zanardi@epitech.eu>
Date: Sat, 8 Aug 2020 15:39:28 +0200
Subject: [PATCH] feat(About): About page added. Closes #11

---
 CHANGELOG.md                            |  23 +++
 README.md                               |   6 +-
 package-lock.json                       |  52 +++++--
 package.json                            |   9 +-
 src/assets/scss/styles.scss             |   1 +
 src/components/About/About.vue          | 196 ++++++++++++++++++++++++
 src/components/Home/Home.vue            |  21 ++-
 src/plugins/index.js                    |   1 +
 src/plugins/router/index.js             |  13 +-
 src/plugins/vue-github-buttons/index.js |   4 +
 src/plugins/vue-i18n/fr.json            |  43 +++++-
 11 files changed, 340 insertions(+), 29 deletions(-)
 create mode 100644 src/components/About/About.vue
 create mode 100644 src/plugins/vue-github-buttons/index.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 258fa46..bdca790 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,28 @@
 # 📈 LIST OF CHANGES FOR WEREWOLVES ASSISTANT WEB
 
+## 1.0.0-beta.2 (2020-08-03)
+
+### 🚀 New features
+
+* `About` page added with a lot of useful information.
+
+### 🌟 Enhancements
+
+* Pick-up line added on Home page for explaining the concept of Werewolves Assistant.
+
+### 📚 Documentation
+
+* Links for [Werewolves Assistant API](https://github.com/antoinezanardi/werewolves-assistant-api) and demos on `README.md` open now a new tab when clicked.
+
+### 📦 Packages
+
+* `vue-github-buttons` installed with version `3.1.0`.
+* `bootstrap` updated to version `4.5.2`.
+* `sass-loader` updated to version `9.0.3`.
+* `vue-router` updated to version `3.4.2`.
+
+---
+
 ## 1.0.0-beta.1 (2020-08-03)
 
 ### 🚀 New features
diff --git a/README.md b/README.md
index 9dfab62..1307d4d 100644
--- a/README.md
+++ b/README.md
@@ -12,13 +12,13 @@
 [![ForTheBadge uses-js](http://ForTheBadge.com/images/badges/uses-js.svg)](https://GitHub.com/antoinezanardi/werewolves-assistant-web)
 
 ## 🐺 Description
-Werewolves Assistant Web is a Vue web app using the [Werewolves Assistant API](https://github.com/antoinezanardi/werewolves-assistant-api).
+Werewolves Assistant Web is a Vue web app using the <a href="https://github.com/antoinezanardi/werewolves-assistant-api" target="_blank">Werewolves Assistant API</a>.
 Thanks to this app, being the game master of the Werewolves of Millers Hollow game is so easy ! Try it out now with live demos below.
 
 ## 🌻 Live demos
 Two environments are set up:
-* **Sandbox**: https://sandbox.werewolves-assistant.antoinezanardi.fr
-* **Production**: https://werewolves-assistant.antoinezanardi.fr
+* **Sandbox**: <a href="https://sandbox.werewolves-assistant.antoinezanardi.fr" target="_blank">Join here</a>
+* **Production**: <a href="https://werewolves-assistant.antoinezanardi.fr" target="_blank">Join here</a>
 
 For your tests, please use the **Sandbox URL**.
 
diff --git a/package-lock.json b/package-lock.json
index d7b04d6..101d3e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "werewolves-assistant-web",
-  "version": "0.2.0",
+  "version": "1.0.0-beta.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1750,9 +1750,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
-      "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.2.tgz",
+      "integrity": "sha512-vlGn0bcySYl/iV+BGA544JkkZP5LB3jsmkeKLFQakCOwCM3AOk7VkldBz4jrzSe+Z0Ezn99NVXa1o45cQY4R6A=="
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -5653,6 +5653,11 @@
         "mime-types": "^2.1.12"
       }
     },
+    "format-thousands": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/format-thousands/-/format-thousands-1.1.1.tgz",
+      "integrity": "sha1-eXW+4wM42QBjkNpYMdsLQcMj+/o="
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -8793,7 +8798,8 @@
     "neo-async": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz",
-      "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw=="
+      "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
+      "dev": true
     },
     "nice-try": {
       "version": "1.0.5",
@@ -8828,6 +8834,11 @@
         }
       }
     },
+    "node-fetch": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
+      "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
+    },
     "node-forge": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
@@ -11056,13 +11067,13 @@
       }
     },
     "sass-loader": {
-      "version": "9.0.2",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-9.0.2.tgz",
-      "integrity": "sha512-nphcum3jNI442njnrZ5wJgSNX5lfEOHOKHCLf+PrTIaleploKqAMUuT9CVKjf+lyi6c2MCGPHh1vb9nGsjnZJA==",
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-9.0.3.tgz",
+      "integrity": "sha512-fOwsP98ac1VMme+V3+o0HaaMHp8Q/C9P+MUazLFVi3Jl7ORGHQXL1XeRZt3zLSGZQQPC8xE42Y2WptItvGjDQg==",
       "requires": {
-        "klona": "^1.1.1",
+        "klona": "^1.1.2",
         "loader-utils": "^2.0.0",
-        "neo-async": "^2.6.1",
+        "neo-async": "^2.6.2",
         "schema-utils": "^2.7.0",
         "semver": "^7.3.2"
       },
@@ -11085,6 +11096,11 @@
             "json5": "^2.1.2"
           }
         },
+        "neo-async": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+          "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+        },
         "schema-utils": {
           "version": "2.7.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
@@ -12832,6 +12848,16 @@
         }
       }
     },
+    "vue-github-buttons": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue-github-buttons/-/vue-github-buttons-3.1.0.tgz",
+      "integrity": "sha512-x0b9bdhP5xZOD5kQ9+nnCzvKqVyHb4moqN2l06mjYB/k2WRdW5jiAWlneUgoPFwPvcqM40vrTDXVvBrS0MMlEQ==",
+      "requires": {
+        "format-thousands": "^1.1.1",
+        "node-fetch": "^2.3.0",
+        "tslib": "^1.9.3"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -12896,9 +12922,9 @@
       }
     },
     "vue-router": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.3.4.tgz",
-      "integrity": "sha512-SdKRBeoXUjaZ9R/8AyxsdTqkOfMcI5tWxPZOUX5Ie1BTL5rPSZ0O++pbiZCeYeythiZIdLEfkDiQPKIaWk5hDg=="
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.2.tgz",
+      "integrity": "sha512-n3Ok70hW0EpcJF4lcWIwSHAQbFTnIOLl/fhO8+oTs4jHNtBNsovcVvPZeTOyKEd8C3xF1Crft2ASuOiVT5K1mw=="
     },
     "vue-select": {
       "version": "3.10.7",
diff --git a/package.json b/package.json
index cbfaf2c..3533cbc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "werewolves-assistant-web",
-    "version": "1.0.0-beta.1",
+    "version": "1.0.0-beta.2",
     "private": true,
     "scripts": {
         "start": "npm run serve",
@@ -18,23 +18,24 @@
         "@sentry/integrations": "^5.20.1",
         "animate.css": "^4.1.0",
         "axios": "^0.19.2",
-        "bootstrap": "^4.5.0",
+        "bootstrap": "^4.5.2",
         "epic-spinners": "^1.1.0",
         "jquery": "^3.5.1",
         "jsonwebtoken": "^8.5.1",
         "node-sass": "^4.14.1",
         "popper.js": "^1.16.1",
         "qs": "^6.9.4",
-        "sass-loader": "^9.0.2",
+        "sass-loader": "^9.0.3",
         "sweetalert2": "^9.17.1",
         "uniqid": "^5.2.0",
         "v-tooltip": "^2.0.3",
         "vee-validate": "^3.3.8",
         "vue": "^2.6.11",
         "vue-flip": "^1.0.2",
+        "vue-github-buttons": "^3.1.0",
         "vue-i18n": "^8.20.0",
         "vue-roller": "^1.12.3",
-        "vue-router": "^3.2.0",
+        "vue-router": "^3.4.2",
         "vue-select": "^3.10.7",
         "vue-toasted": "^1.1.28",
         "vuex": "^3.5.1"
diff --git a/src/assets/scss/styles.scss b/src/assets/scss/styles.scss
index 2db1739..63ee78c 100644
--- a/src/assets/scss/styles.scss
+++ b/src/assets/scss/styles.scss
@@ -1,5 +1,6 @@
 @import "../../../node_modules/animate.css/animate.min.css";
 @import "../../../node_modules/@fortawesome/fontawesome-free/css/all.min.css";
+@import "../../../node_modules/vue-github-buttons/dist/vue-github-buttons.min.css";
 
 @import "colors";
 @import "all";
diff --git a/src/components/About/About.vue b/src/components/About/About.vue
new file mode 100644
index 0000000..4b2341b
--- /dev/null
+++ b/src/components/About/About.vue
@@ -0,0 +1,196 @@
+<template>
+    <div id="about" class="container page-with-navbar">
+        <div class="row mt-2">
+            <div class="col-12">
+                <h1 class="section-title">
+                    <img width="65" :src="IMGs.werewolf" alt="werewolf" class="mr-3"/>
+                    <span v-html="$t('About.werewolvesAssistantWhatFor')"/>
+                </h1>
+                <hr class="bg-dark"/>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                <div class="row justify-content-between align-items-center">
+                    <div class="col-lg-8 col-12">
+                        <h3 class="section-subtitle">
+                            <i class="fas fa-dice fa-2x mr-3 text-primary"/>
+                            <span v-html="`${$t('About.theGame')} ${$t('About.werewolvesOfMillersHollowTM')}`"/>
+                        </h3>
+                    </div>
+                    <div class="col-lg-3 col-12">
+                        <a class="btn btn-primary btn-block" href="https://www.youtube.com/watch?v=3HUz8CAORro"
+                           target="_blank" v-tooltip="$t('About.watchYouTubeVideo')">
+                            <i class="fa fa-question-circle mr-2"/>
+                            <span v-html="$t('About.iDontKnowThisGame')"/>
+                        </a>
+                    </div>
+                </div>
+                <hr class="bg-dark"/>
+            </div>
+        </div>
+        <div class="row section-content">
+            <div class="col-12">
+                <p v-html="`${$t('About.werewolvesOfMillersHollowTM')} ${$t('About.isAGame')}`  "/>
+                <p v-html="$t('About.forAGameToBeSuccessful')"/>
+            </div>
+        </div>
+        <div class="row mt-4">
+            <div class="col-12">
+                <h3 class="section-subtitle">
+                    <i class="fas fa-star fa-2x mr-3 text-warning"/>
+                    <span v-html="$t('About.werewolvesAssistantIsHere')"/>
+                </h3>
+                <hr class="bg-dark"/>
+            </div>
+        </div>
+        <div class="row section-content">
+            <div class="col-12">
+                <p v-html="$t('About.forHelpingGameMaster')"/>
+                <p v-html="$t('About.theAssistantHasManyFeaturesLike')"/>
+                <ul>
+                    <li v-html="$t('About.screenForGameComposition')"/>
+                    <li v-html="$t('About.interfaceForGameMonitoring')" class="mt-3"/>
+                    <li v-html="$t('About.interfaceForEachActionAndEvents')" class="mt-3"/>
+                    <li v-html="$t('About.gameSummaryWhenPartyIsDone')" class="mt-3"/>
+                </ul>
+                <p v-html="$t('About.assistantIsFreeAndAvailable')"/>
+                <p class="text-center">
+                    <i class="fa fa-exclamation-triangle fa-2x text-warning mr-3"></i>
+                    <span v-html="$t('About.attentionPlease')" class="font-weight-bold"/>
+                </p>
+                <hr class="bg-dark">
+                <p v-html="$t('About.assistantDoesntReplaceTheOriginalGame')"/>
+            </div>
+        </div>
+        <div class="row mt-4">
+            <div class="col-12">
+                <h3 class="section-subtitle">
+                    <i class="fas fa-hands-helping fa-2x mr-3 text-success"/>
+                    <span v-html="$t('About.howToContribute')"/>
+                </h3>
+                <hr class="bg-dark"/>
+            </div>
+        </div>
+        <div class="row section-content">
+            <div class="col-12">
+                <p v-html="$t('About.someMethodsToContribute')"/>
+                <ul>
+                    <li>
+                        <div class="d-flex flex-column justify-content-center align-items-center">
+                            <div>
+                                <span v-html="`${$t('About.theAssistantIsOpenSource')}. ${$t('About.availableOnGitHub')} `"/>
+                                <a target="_blank" href="https://github.com/antoinezanardi/werewolves-assistant-web" v-html="`${$t('About.atThisAddress')}`"/>
+                                <span v-html="`, ${$t('About.pleaseAddAStar')}`"/>
+                            </div>
+                            <div class="mt-3">
+                                <gh-btns-star slug="antoinezanardi/werewolves-assistant-web" show-count/>
+                                <gh-btns-follow user="antoinezanardi" show-count/>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="mt-4">
+                        <span v-html="`${$t('About.thisProjectNotWithoutFees')} `"/>
+                        <a target="_blank" href="https://www.buymeacoffee.com/antoinezanardi" v-html="$t('About.hisBuyMeACoffeePage')"/>
+                        <span v-html="'.'"/>
+                    </li>
+                    <li v-html="$t('About.speakAboutThisProject')" class="mt-4"/>
+                </ul>
+            </div>
+        </div>
+        <div class="row mt-4">
+            <div class="col-12">
+                <h3 class="section-subtitle">
+                    <i class="fas fa-pen-fancy fa-2x mr-3 text-info"/>
+                    <span v-html="$t('About.aWordFromCreator')"/>
+                </h3>
+                <hr class="bg-dark"/>
+            </div>
+        </div>
+        <div class="row section-content">
+            <div class="col-12">
+                <p>
+                    <span v-html="`${$t('About.ImTheCreator')} `"/>
+                    <a href="https://www.antoinezanardi.fr/" target="_blank" v-html="$t('About.myPortfolio')"/>
+                    <span v-html="'.'"/>
+                </p>
+                <p v-html="`${$t('About.forMe')}, ${$t('About.werewolvesOfMillersHollowTM')} ${$t('About.isOneOfTheBestGame')}`"/>
+                <p v-html="$t('About.ImAFanOfGameMastering')"/>
+                <p>
+                    <span v-html="$t('About.pleaseRateThisProjectAndHaveFun')"/>
+                    <i class="fa fa-hand-peace animate__animated animate__tada animate__slow animate__infinite text-warning"/>
+                </p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <hr class="bg-dark"/>
+            </div>
+        </div>
+        <div class="row mb-3 justify-content-center">
+            <div class="col-12 col-lg-4">
+                <router-link class="btn btn-secondary btn-block" to="/">
+                    <i class="fa fa-sign-out-alt mr-2"/>
+                    <span v-html="$t('Statistics.backToHome')"/>
+                </router-link>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import werewolf from "@/assets/img/roles/werewolf.png";
+
+export default {
+    name: "About",
+    data() {
+        return {
+            IMGs: {
+                werewolf,
+            },
+        };
+    },
+    created() {
+        localStorage.setItem("aboutPageVisited", "true");
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+    @import "../../../node_modules/bootstrap/scss/bootstrap";
+    @import "../../assets/scss/variables";
+
+    .section-title {
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        @include font-size(2.5rem);
+
+        span {
+            display: flex;
+            align-items: center;
+            text-align: center;
+        }
+    }
+
+    .section-subtitle {
+        display: flex;
+        align-content: center;
+        @include font-size(1.75rem);
+
+        i {
+            display: flex;
+            align-items: center;
+        }
+        span {
+            display: flex;
+            align-items: center;
+            text-align: center;
+        }
+    }
+
+    .section-content {
+        @include font-size(1.35rem);
+        text-align: justify;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/Home/Home.vue b/src/components/Home/Home.vue
index 81c48fe..646d3b9 100644
--- a/src/components/Home/Home.vue
+++ b/src/components/Home/Home.vue
@@ -3,12 +3,16 @@
         <div id="home-content" class="flex-column flex-grow-1 d-flex justify-content-center">
             <div class="row">
                 <div class="col-12 text-center">
+                    <img width="150" src="../../assets/img/wolf.png" alt="Wolf"/>
                     <h1 id="title" class="text-center" v-html="$t('Home.werewolvesAssistant')"/>
-                    <img src="../../assets/img/wolf.png" alt="Wolf"/>
+                    <h4 id="subtitle" class="text-center">
+                        <i class="fa fa-star mr-2 text-warning"/>
+                        <span class="text-secondary" v-html="$t('Home.bestToolForGameMastering')"/>
+                    </h4>
                 </div>
             </div>
             <div class="mt-4 d-flex justify-content-center">
-                <div class="col-lg-3 col-sm-12">
+                <div class="col-lg-4 col-sm-12">
                     <button @click="play" class="btn btn-block btn-primary text-uppercase font-weight-bold home-btn">
                         <i class="fa fa-play-circle mr-2"/>
                         <span v-html="$t('Home.play')"/>
@@ -20,6 +24,12 @@
                             <span v-html="$t('Home.statistics')"/>
                         </router-link>
                     </transition>
+                    <router-link to="/about" key="about"
+                                 class="btn btn-block btn-dark font-weight-bold home-btn mt-4">
+                        <span v-html="$t('Home.whatIsItAbout')"/>
+                        <i class="fas fa-question ml-2"
+                           :class="{ 'animate__animated animate__heartBeat animate__infinite': !aboutPageVisited }"/>
+                    </router-link>
                     <transition name="fade" mode="out-in">
                         <button v-if="!isUserLogged" key="not-logged" @click="showAccountModal"
                                 class="btn btn-secondary btn-block mt-4 text-uppercase font-weight-bold account-btn">
@@ -73,6 +83,9 @@ export default {
         ...mapGetters("user", {
             isUserLogged: "isLogged",
         }),
+        aboutPageVisited() {
+            return localStorage.getItem("aboutPageVisited") === "true";
+        },
     },
     methods: {
         ...mapActions("user", {
@@ -139,6 +152,10 @@ export default {
         @include font-size(3rem);
     }
 
+    #subtitle {
+        @include font-size(1.2rem);
+    }
+
     #home-footer {
         padding: 15px;
     }
diff --git a/src/plugins/index.js b/src/plugins/index.js
index 9e8994f..fffe97d 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -7,6 +7,7 @@ import "./v-tooltip";
 import "./vee-validate";
 import "./vue-countdown";
 import "./vue-flip";
+import "./vue-github-buttons";
 import i18n from "./vue-i18n";
 import "./vue-roller";
 import "./vue-select";
diff --git a/src/plugins/router/index.js b/src/plugins/router/index.js
index bc913d9..fe125c5 100644
--- a/src/plugins/router/index.js
+++ b/src/plugins/router/index.js
@@ -1,9 +1,10 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import Home from "../../components/Home/Home";
-import GameLobby from "../../components/GameLobby/GameLobby";
-import Game from "../../components/Game/Game";
-import Statistics from "../../components/Statistics/Statistics";
+import Home from "@/components/Home/Home";
+import GameLobby from "@/components/GameLobby/GameLobby";
+import Game from "@/components/Game/Game";
+import Statistics from "@/components/Statistics/Statistics";
+import About from "@/components/About/About";
 
 Vue.use(VueRouter);
 
@@ -27,6 +28,10 @@ const routes = [{
     path: "/",
     name: "Home",
     component: Home,
+}, {
+    path: "/about",
+    name: "About",
+    component: About,
 }, {
     path: "/game-lobby",
     name: "GameLobby",
diff --git a/src/plugins/vue-github-buttons/index.js b/src/plugins/vue-github-buttons/index.js
new file mode 100644
index 0000000..c9833d3
--- /dev/null
+++ b/src/plugins/vue-github-buttons/index.js
@@ -0,0 +1,4 @@
+import Vue from "vue";
+import VueGitHubButtons from "vue-github-buttons";
+
+Vue.use(VueGitHubButtons);
\ No newline at end of file
diff --git a/src/plugins/vue-i18n/fr.json b/src/plugins/vue-i18n/fr.json
index a47c34d..9270565 100644
--- a/src/plugins/vue-i18n/fr.json
+++ b/src/plugins/vue-i18n/fr.json
@@ -1,9 +1,9 @@
 {
     "NavBar": {
-        "werewolvesAssistant": "Assistant Loups Garous"
+        "werewolvesAssistant": "Assistant Loups-Garous"
     },
     "Home": {
-        "werewolvesAssistant": "Assistant Loups Garous",
+        "werewolvesAssistant": "Assistant Loups-Garous",
         "play": "Jouer",
         "logInOrSignUp": "Se connecter ou s'inscrire",
         "statistics": "Statistiques",
@@ -11,7 +11,9 @@
         "youMustLogInToPlay": "Vous devez vous connecter pour jouer",
         "contactMe": "Me contacter",
         "thisProjectIsOpenSource": "Ce projet est open-source",
-        "buyMeACoffee": "M'offrir un café"
+        "buyMeACoffee": "M'offrir un café",
+        "whatIsItAbout": "À quoi ça sert",
+        "bestToolForGameMastering": "L'outil idéal pour le maître du jeu des Loups-Garous de Thiercelieux"
     },
     "Login": {
         "loggedIn": "Connecté",
@@ -35,6 +37,41 @@
         "required": "Requis",
         "userDataOnlyForAccount": "Ces informations ne sont enregistrées que pour vous permettre de vous connecter et ainsi enregistrer vos parties."
     },
+    "About": {
+        "werewolvesAssistantWhatFor": "Un assistant ? Pour quoi faire ?",
+        "theGame": "Le jeu",
+        "werewolvesOfMillersHollowTM": "Les Loups-Garous de Thiercelieux™",
+        "iDontKnowThisGame": "Je ne connnais pas ce jeu",
+        "watchYouTubeVideo": "Regarder une vidéo explicative sur YouTube",
+        "isAGame": "est un jeu de société d'ambiance dans lequel chaque joueur incarne un villageois ou un loup-garou. Chaque partie est animée par un maître du jeu non-joueur et apporte son lot de surprises, de trahisons, de retournements de situations, de rires et parfois de pleurs.",
+        "forAGameToBeSuccessful": "Pour qu'une partie soit réussie, le maître du jeu doit l'animer en installant une ambiance prenante, en y imposant un rythme et en connaissant les règles du jeu sur le bout des doigts. Dans le cas où le maître du jeu doit gérer un nombre conséquent de joueurs, a peu d'expérience ou est dans un état second, ce n'est pas une tâche facile...",
+        "werewolvesAssistantIsHere": "L'assistant Loups-Garous entre en scène !",
+        "forHelpingGameMaster": "Pour aider le maître du jeu dans sa lourde tâche qu'est l'animation d'une partie de Loups-Garous, l'Assistant Loups-Garous est l'outil parfait !",
+        "theAssistantHasManyFeaturesLike": "L'Assistant possède un panel de fonctionnalités tel que:",
+        "screenForGameComposition": "Un écran de composition de partie permettant de créer une partie de 4 à 20 joueurs avec la possibilité de répartir aléatoirement les rôles.",
+        "interfaceForGameMonitoring": "Une interface ludique de suivi de partie.",
+        "interfaceForEachActionAndEvents": "Pour chaque évènement, la possibilité de renseigner les choix des joueurs comme la cible des loups-garous ou l'élection du maire par exemple.<br/> L'Assistant se charge de l'ordre de passage des joueurs, d'afficher les morts ou autres évènements et de retenir tous les choix faits durant la partie.",
+        "gameSummaryWhenPartyIsDone": "Un récapitulatif lorsque la partie est terminée avec le camp gagnant et l'historique complet.",
+        "assistantIsFreeAndAvailable": "En somme, l'Assistant va vous faire découvrir ou re-découvrir le plaisir d'être le maître du jeu pendant une partie de Loups-Garous. Il est disponible sur tout support ayant un navigateur Internet et est 100% GRATUIT.",
+        "attentionPlease": "ATTENTION CEPENDANT",
+        "assistantDoesntReplaceTheOriginalGame": "L'Assistant n'a aucune vocation à remplacer le jeu original Les Loups-Garous de Thiercelieux™. Pour utiliser l'Assistant, un jeu avec ses cartes est nécessaire. L'Assistant n'est qu'un support pour le maître du jeu qui est le seul utilisateur de l'outil, les joueurs n'y ont pas accès.",
+        "howToContribute": "Comment contribuer à ce projet ?",
+        "someMethodsToContribute": "Il existe plusieurs moyens de contribuer à ce projet:",
+        "theAssistantIsOpenSource": "L'Assistant Loups-Garous est un projet open-source !",
+        "availableOnGitHub": "Disponible sur GitHub",
+        "atThisAddress": "à cette addresse",
+        "pleaseAddAStar": "que vous soyez développeur, graphiste ou même testeur, votre aide est la bienvenue. D'ailleurs, si le projet vous plaît, n'hésitez pas à ajouter une étoile ou à suivre le créateur !",
+        "thisProjectNotWithoutFees": "Ce projet a pour vocation de rester un service gratuit. Néanmoins, l'hébergement et l'infrastructure de l'outil sont tous deux payants. Si vous souhaitez participer ou si vous aimez le travail du créateur de ce projet, vous pouvez faire un don sur",
+        "hisBuyMeACoffeePage": "sa page Buy Me A Coffee",
+        "speakAboutThisProject": "Parlez de ce projet autour de vous ! Le bouche à oreille permettra aux nombreux indécis du role-play de se lancer dans la grande aventure du maître du jeu grâce à l'Assistant Loups-Garous.",
+        "aWordFromCreator": "Un mot du créateur de l'Assistant Loup-Garous",
+        "ImTheCreator": "Je suis Antoine ZANARDI, développeur Full-Stack Web et adepte de l'open-source en général. Si vous souhaitez en savoir plus sur moi, je vous invite à découvrir",
+        "myPortfolio": "mon portoflio",
+        "forMe": "Pour moi",
+        "isOneOfTheBestGame": "est un des meilleurs jeux entre amis ou en famille autour d'une table, où s'entremellent alliances et trahisons, un peu comme un Mario Kart en fait... Au fur et à mesure d'une partie, la vraie nature de chaque joueur se révèle, les masques tombent, chacun se sent menacé... Autant de rebondissements qui rendent chaque partie unique !",
+        "ImAFanOfGameMastering": "Étant un grand fan du rôle de maître du jeu, j'ai toujours eu l'envie de partager ce doux sentiment de chef d'orchestre durant une partie. J'ai donc créé cet assistant pour que n'importe qui puisse endosser ce rôle si important, et ce, dans n'importe quelle configuration de jeu.",
+        "pleaseRateThisProjectAndHaveFun": "N'hésitez pas à me faire part de vos avis sur cet assistant. Il a été créé pour servir tous maîtres du jeu, novices ou experts, et rendre vos parties mémorables. Amusez-vous bien ! "
+    },
     "GameLobby": {
         "loading": "Recherche d'une partie en cours",
         "gameComposition": "Composition de la partie",