Merge pull request 'RaphouBranche' (#73) from RaphouBranche into master

Reviewed-on: #73
2 years ago · 61217ca181
parent 50b50ac8f0 c1b57e318f
commit 61217ca181
5 changed files with 112 additions and 4 deletions
--- a/index.html
+++ b/index.html
@ -10,6 +10,7 @@
 </head>

 <body>
+
 <header>
    <ul id="nav-bar">
        <li><a href="./index.html">Home</a></li> <!-- maybe put a logo -->
@ -36,9 +37,9 @@

    </div>
    <div id="right" class="column">
-        <button class="action-button">Join Public Game</button>
-        <button class="action-button">New Public Game</button>
-        <button class="action-button">New Private Game</button>
+        <button class="action-button">Create solo game</button>
+        <button class="action-button">Join game</button>
+        <button class="action-button">New Game</button>
    </div>
 </div>

--- a/resources/logo.png
+++ b/resources/logo.png
--- a/styles/index.css
+++ b/styles/index.css
@ -107,4 +107,34 @@ h1 {
    display: flex;
    flex-direction: column;
    margin-top: auto;
-}
+}
+
+#tuto-block {
+    height: 86.7vh;
+    background-color: white;
+    border: 0.5rem solid black;
+}
+
+#p-block {
+    height: 75%;
+    width: 75%; 
+    position: absolute;
+    top: 55%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+}
+
+#picture-logo {
+    display: block;
+    margin: 0 auto;
+}
+
+#phrase-finale{
+    font-size:18pt;
+    color:red;
+    font-family:'Comic Sans MS';
+}
--- a/views/navBar.html
+++ b/views/navBar.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+
+<!--
+    Si vous rrouvez une unitilité à ce truc, n'hésitez pas.'    
+-->
+
+<html lang="en">
+
+<head>
+    <link rel="stylesheet" type="text/css" href="../styles/style.css">
+    <link rel="stylesheet" type="text/css" href="../styles/index.css">
+</head>
+
+<header>
+    <ul id="nav-bar">
+        <li><a href="./index.html">Home</a></li>
+        <li><a href="./views/cards-test.html">Card Test</a></li>
+        <li><a href="./tutorial.html">Tutorial</a></li>
+        <li><a href="./views/leaderboard.html">Leaderboard</a></li>
+        <li><a href="./views/about.html">About</a></li>
+    </ul>
+</header>
+
+</html>
--- a/views/tutorial.html
+++ b/views/tutorial.html
@ -0,0 +1,53 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Tutorial</title>
+    <!-- <base href="https://codefirst.iut.uca.fr/containers/HyperSet-hyperset/"> -->
+    <link rel="stylesheet" type="text/css" href="../styles/style.css">
+    <link rel="stylesheet" type="text/css" href="../styles/index.css">
+</head>
+
+
+<header>
+    <ul id="nav-bar">
+        <li><a href="../index.html">Home</a></li>
+        <li><a href="./cards-test.html">Card Test</a></li>
+        <li><a href="./tutorial.html">Tutorial</a></li>
+        <li><a href="./leaderboard.html">Leaderboard</a></li>
+        <li><a href="./about.html">About</a></li>
+    </ul>
+</header>
+
+<body>
+    <div id="tuto-block">
+        <div id="p-block">
+            <img src="../resources/logo.png"
+                 id="picture-logo"
+                 width="200"
+                 height=auto
+                 alt="Picture not found" /><br /><br />
+            <p>
+                Cette application web vous permet de joueur au célèbre jeu Set.<br />
+                Votre but est d'engendrer un maximum de points avant la fin du temps imparti,
+                pour cela, vous devez réunir des ensembles de 3 cartes.<br />
+                Un ensemble est constitué de trois cartes où chaque caractéristique est soit identique, soit différente pour chacune des cartes.<br />
+                Par exemple, un ensemble pourrait être composé d'une carte rouge pleine en forme de losange avec un remplissage rayé,<br />
+                une carte verte vide en forme d'ovale avec un remplissage plein et une carte violette pleine en forme de vague avec un remplissage vide.<br />
+                Vous pourrez jouer en solo ou en multijoueur ou vous devez être plus rapide que vos adversaire<br />
+                De nombreuses variantes sont disponibles et vous pourrez modifier vos attributs, le nombre de cartes...<br />
+                Pour une première partie nous vous conseillons la version du jeu Set en 3*4<br /><br />
+            </p>
+            <p id="phrase-finale">
+                A vous de jouer !!!
+            </p>
+        </div>
+    </div>
+
+
+
+</body>
+
+</html>