Merge branch 'master' into 'production'

Master

See merge request Romulus21/portal!4

deploy.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+git pull origin production
+
+composer install
+php artisan migrate --force
+
+npm install
+npm run prod

resources/js/components/Nav.vue

@@ -7,20 +7,24 @@
             </svg>
         </router-link>
         <hr>
-<!--        <router-link to="/memos" class="nav-item">-->
-<!--            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current site-logo">-->
-<!--                <title>Paramètres</title>-->
-<!--                <path d="M22.9 10.1c-.1-.1-.2-.2-.3-.2L20 9.5c-.1-.5-.3-.9-.6-1.4.2-.2.4-.6.8-1 .3-.4.6-.8.7-1 .1 0 .1-.2.1-.3 0-.1 0-.2-.1-.3-.3-.5-1.1-1.3-2.4-2.4-.1-.1-.2-.1-.4-.1-.1 0-.3 0-.3.1l-2 1.5c-.4-.2-.8-.4-1.3-.5l-.4-2.6c0-.1-.1-.2-.2-.3-.1-.2-.2-.2-.3-.2h-3.2c-.3 0-.4.1-.5.4-.1.5-.3 1.4-.4 2.7-.5.1-.9.3-1.3.5l-2-1.5c-.1-.1-.3-.2-.4-.2-.2 0-.7.3-1.4 1-.6.7-1.1 1.3-1.4 1.6-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.6.8 1.2 1.4 1.5 2-.2.5-.3.9-.5 1.4l-2.6.4c-.1 0-.2.1-.3.2-.1.1-.1.2-.1.3v3.2c0 .1 0 .2.1.3.1.1.2.2.3.2l2.6.4c.1.5.3.9.6 1.4-.2.2-.4.6-.8 1-.3.4-.6.8-.7 1-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.4.5 1.2 1.3 2.4 2.4.1.1.2.2.4.2.1 0 .3 0 .4-.1l2-1.5c.3.1.7.3 1.2.5l.4 2.6c0 .1.1.2.2.3.1.1.2.1.4.1h3.2c.3 0 .4-.1.5-.4.1-.5.3-1.4.4-2.7.4-.1.9-.3 1.3-.5l2 1.5c.1.1.3.1.4.1.2 0 .7-.3 1.3-1 .7-.7 1.2-1.2 1.4-1.5.1-.1.1-.2.1-.3 0-.1 0-.2-.1-.4-.7-.8-1.2-1.5-1.5-2 .2-.4.4-.8.6-1.3l2.7-.4c.1 0 .2-.1.3-.2.1-.1.1-.2.1-.3v-3.2c-.2-.1-.2-.2-.3-.3zm-8.3 4.5c-.7.7-1.6 1.1-2.6 1.1s-1.9-.4-2.6-1.1c-.7-.7-1.1-1.6-1.1-2.6s.4-1.9 1.1-2.6c.7-.7 1.6-1.1 2.6-1.1s1.9.4 2.6 1.1c.7.7 1.1 1.6 1.1 2.6s-.4 1.9-1.1 2.6z"/>-->
-<!--            </svg>-->
-<!--            Activitées-->
-<!--        </router-link>-->
         <router-link to="/memos" class="nav-item">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current site-logo">
-                <title>Paramètres</title>
-                <path d="M22.9 10.1c-.1-.1-.2-.2-.3-.2L20 9.5c-.1-.5-.3-.9-.6-1.4.2-.2.4-.6.8-1 .3-.4.6-.8.7-1 .1 0 .1-.2.1-.3 0-.1 0-.2-.1-.3-.3-.5-1.1-1.3-2.4-2.4-.1-.1-.2-.1-.4-.1-.1 0-.3 0-.3.1l-2 1.5c-.4-.2-.8-.4-1.3-.5l-.4-2.6c0-.1-.1-.2-.2-.3-.1-.2-.2-.2-.3-.2h-3.2c-.3 0-.4.1-.5.4-.1.5-.3 1.4-.4 2.7-.5.1-.9.3-1.3.5l-2-1.5c-.1-.1-.3-.2-.4-.2-.2 0-.7.3-1.4 1-.6.7-1.1 1.3-1.4 1.6-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.6.8 1.2 1.4 1.5 2-.2.5-.3.9-.5 1.4l-2.6.4c-.1 0-.2.1-.3.2-.1.1-.1.2-.1.3v3.2c0 .1 0 .2.1.3.1.1.2.2.3.2l2.6.4c.1.5.3.9.6 1.4-.2.2-.4.6-.8 1-.3.4-.6.8-.7 1-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.4.5 1.2 1.3 2.4 2.4.1.1.2.2.4.2.1 0 .3 0 .4-.1l2-1.5c.3.1.7.3 1.2.5l.4 2.6c0 .1.1.2.2.3.1.1.2.1.4.1h3.2c.3 0 .4-.1.5-.4.1-.5.3-1.4.4-2.7.4-.1.9-.3 1.3-.5l2 1.5c.1.1.3.1.4.1.2 0 .7-.3 1.3-1 .7-.7 1.2-1.2 1.4-1.5.1-.1.1-.2.1-.3 0-.1 0-.2-.1-.4-.7-.8-1.2-1.5-1.5-2 .2-.4.4-.8.6-1.3l2.7-.4c.1 0 .2-.1.3-.2.1-.1.1-.2.1-.3v-3.2c-.2-.1-.2-.2-.3-.3zm-8.3 4.5c-.7.7-1.6 1.1-2.6 1.1s-1.9-.4-2.6-1.1c-.7-.7-1.1-1.6-1.1-2.6s.4-1.9 1.1-2.6c.7-.7 1.6-1.1 2.6-1.1s1.9.4 2.6 1.1c.7.7 1.1 1.6 1.1 2.6s-.4 1.9-1.1 2.6z"/>
+            <svg xmlns="http://www.w3.org/2000/svg"
+                 viewBox="0 0 384 384"  class="fill-current site-logo">
+                <rect x="0" y="341.333" width="384" height="42.667"/>
+                <rect x="0" y="256" width="256" height="42.667"/>
+                <rect x="0" y="85.333" width="256" height="42.667"/>
+                <rect x="0" y="170.667" width="384" height="42.667"/>
+                <rect x="0" y="0" width="384" height="42.667"/>
             </svg>
             Memos
         </router-link>
+        <router-link to="/jeux" class="nav-item">
+            <svg xmlns="http://www.w3.org/2000/svg"
+                 viewBox="0 0 469.333 469.333" class="fill-current site-logo">
+                <path d="M426.667,106.667h-384C19.093,106.667,0,125.76,0,149.333V320c0,23.573,19.093,42.667,42.667,42.667h384 c23.573,0,42.667-19.093,42.667-42.667V149.333C469.333,125.76,450.24,106.667,426.667,106.667z M213.333,256h-64v64h-42.667v-64 h-64v-42.667h64v-64h42.667v64h64V256z M309.333,298.667c-17.707,0-32-14.293-32-32s14.293-32,32-32s32,14.293,32,32 S327.04,298.667,309.333,298.667z M394.667,234.667c-17.707,0-32-14.293-32-32s14.293-32,32-32s32,14.293,32,32 S412.373,234.667,394.667,234.667z"/>
+            </svg>
+            Jeux
+        </router-link>
     </nav>
 </template>
 

resources/js/components/TopBar.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="flex-between flex-center py-1 px-2 topbar">
-        <router-link v-if="authUser" :to="'/profil'" class="flex-center avatar-box">
+        <router-link v-if="authUser" :to="'/profil'" class="flex-middle avatar-box">
             <Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="mr-1"/>
             {{ authUser.data.attributes.name }}
         </router-link>

resources/js/router.js

@@ -8,6 +8,8 @@ import MemoIndex from "./views/Memo/MemoIndex";
 import MemoCreate from "./views/Memo/MemoCreate";
 import MemoShow from "./views/Memo/MemoShow";
 import MemoEdit from "./views/Memo/MemoEdit";
+import GameIndex from "./views/Games/GameIndex";
+import Hangman from "./views/Games/Hangman";
 
 Vue.use(VueRouter)
 
@@ -46,5 +48,14 @@ export default new VueRouter({
             path: '/memos/:id/edit', component: MemoEdit,
             meta: {title: 'Edit Memo'}
         },
+
+        {
+            path: '/jeux', component: GameIndex,
+            meta: {title: 'Liste des jeux'}
+        },
+        {
+            path: '/jeux/pendu', component: Hangman,
+            meta: {title: 'Jeu : Le pendu'}
+        },
     ]
 })

resources/js/views/Games/GameIndex.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="p-2">
+        <h1>Liste des jeux</h1>
+        <div>
+            <router-link to="/jeux/pendu">
+                Pendu
+            </router-link>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "GameIndex"
+    }
+</script>
+
+<style scoped>
+    .figure-container {
+        fill: transparent;
+        stroke: #fff;
+        stroke-width: 4px;
+        stroke-linecap: round;
+    }
+
+    .figure-part {
+        display: none;
+    }
+
+    .wrong-letters-container {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        display: flex;
+        flex-direction: column;
+        text-align: right;
+    }
+
+    .wrong-letters-container p {
+        margin: 0 0 5px;
+    }
+
+    .wrong-letters-container span {
+        font-size: 24px;
+    }
+
+    .word {
+        display: flex;
+        position: absolute;
+        bottom: 10px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .word .letter {
+        border-bottom: 3px solid #2980b9;
+        display: inline-flex;
+        font-size: 30px;
+        align-items: center;
+        justify-content: center;
+        margin: 0 3px;
+        height: 50px;
+        width: 20px;
+    }
+
+    .popup-container {
+        background-color: rgba(0, 0, 0, 0.3);
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        display: flex;
+        display: none;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .popup-container .popup {
+        background-color: #2980b9;
+        border-radius: 5px;
+        box-shadow: 0 15px 10px 3px rgba(0, 0, 0, 0.1);
+        padding: 20px;
+        text-align: center;
+    }
+
+    button {
+        cursor: pointer;
+        background-color: #fff;
+        color: #2980b9;
+        border: 0;
+        margin-top: 20px;
+        padding: 12px 20px;
+        font-size: 16px;
+    }
+
+    button:active {
+         transform: scale(0.98);
+     }
+
+    button:focus {
+         outline: 0;
+     }
+
+    .notification-container {
+        background-color: rgba(0, 0, 0, 0.3);
+        border-radius: 10px 10px 0 0;
+        padding: 15px 20px;
+        position: absolute;
+        bottom: -50px;
+        transition: transform 0.3s ease-in-out;
+    }
+
+    .notification-container p {
+        margin: 0;
+    }
+
+    .notification-container .show {
+         transform: translateY(-50px);
+    }
+</style>

resources/js/views/Games/Hangman.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="p-2">
+        <h1>Pendu</h1>
+        <p>Trouve le mot du pendu - Saisi les lettres</p>
+        <div class="game-container">
+            <svg height="250" width="200" class="figure-container">
+                <!-- Potence -->
+                <line x1="60" y1="20" x2="140" y2="20" />
+                <line x1="140" y1="20" x2="140" y2="50" />
+                <line x1="60" y1="20" x2="60" y2="230" />
+                <line x1="20" y1="230" x2="100" y2="230" />
+
+                <!-- Tête -->
+                <circle cx="140" cy="70" r="20" class="figure-part"/>
+                <!-- Corps -->
+                <line x1="140" y1="90" x2="140" y2="150" class="figure-part"/>
+                <line x1="140" y1="120" x2="120" y2="100" class="figure-part"/>
+                <line x1="140" y1="120" x2="160" y2="100" class="figure-part"/>
+                <line x1="140" y1="150" x2="120" y2="180" class="figure-part"/>
+                <line x1="140" y1="150" x2="160" y2="180" class="figure-part"/>
+            </svg>
+
+            <div class="wrong-letters-container">
+                <div v-html="wrongLetters"></div>
+            </div>
+
+            <div class="word" v-html="wordEl"></div>
+        </div>
+
+        <div class="popup-container" id="popup-container">
+            <div class="popup">
+                <h2 id="final-message"></h2>
+                <button id="play-button" @click="playAgain">Play Again</button>
+            </div>
+        </div>
+
+        <div class="notification-container" id="notification-container">
+            <p>You have already entered this letter</p>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Hangman",
+        data: function () {
+            return {
+                words: ['pimprenelle', 'culcul', 'milo'],
+                correctLetters: [],
+                wrongLetters: [],
+                selectedWord: '',
+                wordEl: '',
+                popup: false,
+                finalMessage: '',
+            }
+        },
+        mounted() {
+            this.selectedWord = this.words[Math.floor(Math.random() * this.words.length)]
+            console.log(this.selectedWord)
+            this.displayWord()
+        },
+        methods: {
+            displayWord() {
+                this.wordEl =
+                    this.selectedWord
+                    .split('')
+                    .map(
+                        letter => {
+                            let toggleLetter = this.correctLetters.includes(letter) ? letter : ''
+                            return '<span class="' + letter + '">' + toggleLetter +"</span>"
+                        }
+
+                    ).join('')
+
+                const innerWord = this.wordEl.replace(/\n/g, '')
+
+                if(innerWord === this.selectedWord) {
+                    this.finalMessage = 'Congratulations! You won! 😃';
+                    this.popup.style.display = 'flex';
+                }
+            },
+            updateWrongLettersEl() {
+                let wrongLettersEl =
+                    this.wrongLetters.length > 0 ? '<p>Wrong</p>' : ''
+                        +
+                    this.wrongLetters.map(letter => `<span>${letter}</span>`)
+
+                // Display parts
+                figureParts.forEach((part, index) => {
+                    const errors = wrongLetters.length
+
+                    if(index < errors) {
+                        part.style.display = 'block'
+                    } else {
+                        part.style.display = 'none'
+                    }
+                })
+
+                // Check if lost
+                if(wrongLetters.length === figureParts.length) {
+                    finalMessage.innerText = 'Unfortunately you lost. 😕';
+                    popup.style.display = 'flex';
+                }
+            },
+            playAgain: function () {
+                this.correctLetters.splice(0)
+                this.wrongLetters.splice(0)
+                this.selectedWord = this.words[Math.floor(Math.random() * this.words.length)]
+                this.displayWord()
+                this.updateWrongLettersEl()
+                this.popup = false
+            }
+        }
+    }
+</script>

resources/js/views/Memo/MemoShow.vue

@@ -1,74 +1,28 @@
 <template>
-  <div class="p-2">
-    <div
-      v-if="loading"
-    >
-      > Loading...
-    </div>
-    <div v-else>
-      <div class="flex-between flex-center mb-1">
-        <a
-          href="#"
-          class="link"
-          @click="$router.back()"
-        >< Back</a>
-        <div class="relative">
-          <router-link
-            :to="'/memos/' + memo.memo_id + '/edit'"
-            class="btn-secondary mr-1"
-          >
-            Edit
-          </router-link>
-          <a
-            href="#"
-            class="btn-alert"
-            @click="modal = ! modal"
-          >
-            Delete
-          </a>
-          <div
-            v-if="modal"
-            class="absolute modal mt-2"
-          >
-            <p>Are you sure you want to delete this record ?</p>
-            <div class="flex-end flex-center mt-2">
-              <button
-                class="btn mr-2"
-                @click="modal = ! modal"
-              >
-                Cancel
-              </button>
-              <button
-                class="btn-alert-strong"
-                @click="destroy"
-              >
-                Delete
-              </button>
+    <div class="p-2">
+        <div v-if="loading" >> Loading...</div>
+        <div v-else>
+            <div class="flex-between flex-center mb-1">
+                <a href="#" class="link" @click="$router.back()">< Back</a>
+                <div class="relative">
+                    <router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
+                    <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
+                    <div v-if="modal" class="absolute modal mt-2">
+                        <p>Are you sure you want to delete this record ?</p>
+                        <div class="flex-end flex-center mt-2">
+                            <button class="btn mr-2" @click="modal = ! modal">Cancel</button>
+                            <button class="btn-alert-strong" @click="destroy"> Delete</button>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="modal" class="modal-background" @click="modal = ! modal" />
             </div>
-          </div>
+    <!--           <TagBox :memo="memo" />-->
+            <h1 class="memo-title flex-center">{{ memo.name }}</h1>
+            <p class="memo-style pt-1" v-html="memoMarkdown"></p>
+            <div class="memo-change">@last update : {{ memo.last_updated }}</div>
         </div>
-        <div
-          v-if="modal"
-          class="modal-background"
-          @click="modal = ! modal"
-         />
     </div>
-<!--           <TagBox :memo="memo" />-->
-      <p class="title-section pt-3">
-        Memo
-      </p>
-      <h1 class="memo-title">
-        {{ memo.name }}
-      </h1>
-      <p
-        class="memo-style pt-1"
-        v-html="memoMarkdown"
-      ></p>
-      <div class="memo-change my-2 p-1">
-        @last update : {{ memo.last_updated }}
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>

resources/sass/app.scss

@@ -15,3 +15,5 @@
 
 @import "pages/auth";
 @import "pages/memos";
+
+@import "pages/games/hangman";

resources/sass/pages/games/hangman.scss

@@ -0,0 +1,110 @@
+.game-container {
+    padding: 20px 30px;
+    position: relative;
+    margin: auto;
+    height: 350px;
+    width: 450px;
+}
+
+.figure-container {
+    fill: transparent;
+    stroke: $dark;
+    stroke-width: 4px;
+    stroke-linecap: round;
+}
+
+.figure-part {
+    display: none;
+}
+
+.wrong-letters-container {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    flex-direction: column;
+    text-align: right;
+
+    p {
+        margin: 0 0 5px;
+    }
+
+    span {
+        font-size: 24px;
+    }
+}
+
+.word {
+    display: flex;
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+
+    .letter {
+        border-bottom: 3px solid #2980b9;
+        display: inline-flex;
+        font-size: 30px;
+        align-items: center;
+        justify-content: center;
+        margin: 0 3px;
+        height: 50px;
+        width: 20px;
+    }
+}
+
+.popup-container {
+    background-color: rgba(0,0,0,0.3);
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    display: flex;
+    display: none;
+    align-items: center;
+    justify-content: center;
+
+    .popup {
+        background-color: #2980b9;
+        border-radius: 5px;
+        box-shadow: 0 15px 10px 3px rgba(0,0,0,0.1);
+        padding: 20px;
+        text-align: center;
+
+        button {
+            cursor: pointer;
+            background-color: #fff;
+            color: #2980b9;
+            border: 0;
+            margin-top: 20px;
+            padding: 12px 20px;
+            font-size: 16px;
+
+            &:active {
+                transform: scale(0.98);
+            }
+
+            &:focus {
+                outline: 0;
+            }
+        }
+    }
+}
+
+.notification-container {
+    background-color: rgba(0,0,0,0.3);
+    border-radius: 10px 10px 0 0;
+    padding: 15px 20px;
+    position: absolute;
+    bottom: -50px;
+    transition: transform 0.3s ease-in-out;
+
+    p {
+        margin: 0;
+    }
+
+    &.show {
+        transform: translateY(-50px);
+    }
+}

resources/sass/pages/memos.scss

@@ -27,6 +27,12 @@
         opacity: 0.6;
     }
 
+    &-change {
+        text-align: right;
+        background: $greyLight;
+        padding: 0.5rem 1rem;
+    }
+
 }
 
 .memo-edit {
@@ -36,3 +42,30 @@
     }
 
 }
+
+.memo-style {
+    p {
+        margin: 0.25rem 0 0.5rem;
+    }
+
+    code,
+    pre {
+        background-color: $greyLight;
+    }
+
+    pre {
+        padding: 0.5rem;
+    }
+
+    a {
+        color: $greyLight;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    img {
+        width: 100%;
+    }
+}