Romain/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first work on hangman

Browse Source
This commit is contained in:
Romulus21
2020-03-28 17:01:53 +01:00
parent 4b9eb03f8d
commit fffa30c6a1
7 changed files with 316 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
resources/js/views/Games/GameIndex.vue Normal file
View File

@@ -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>

56
resources/js/views/Games/Hangman.vue Normal file
View File

@@ -0,0 +1,56 @@
<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 id="wrong-letters"></div>
</div>
<div class="word" id="word"></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",
methods: {
playAgain: function () {
}
}
}
</script>
<style scoped>
</style>