Kaynağa Gözat

Update ASCII space page for new folder structure

DricomDragon 5 yıl önce
ebeveyn
işleme
2e3e3430e5
1 değiştirilmiş dosya ile 470 ekleme ve 461 silme
  1. 470 461
      web/public/projets/pro_ascii_space.php

+ 470 - 461
web/public/projets/pro_ascii_space.php

@@ -1,501 +1,510 @@
+<!DOCTYPE html>
+<html lang="fr">
+
 <?php
-$title = "ASCII";
-include("../header.php");
+    $title = "ASCII";
+    include("../../include/head.php");
 ?>
 
-<!-- Main -->
-<main role="main" class="container">
-    <div class="focus-center">
-        <h1>
-            ASCII Space Destroyer
-        </h1>
-        <img class="rounded" src="../images/projets_ascii_ship_torpEL.png" alt="code flat icon">
-        <h2>
-            Jeu vidéo réalisé en C++
-        </h2>
-        <p class="lead">
-            Derrière ce nom un peu bourrin se cache un shooter à la <em>Space Invader</em> où les joueurs peuvent
-            concevoir
-            leur propre vaisseau avant de partir à l'aventure.
-        </p>
-    </div>
-
-    <!-- Content -->
-    <h3>
-        <img src="https://img.icons8.com/color/48/000000/term.png" alt="V">
-        Introduction
-    </h3>
-    <p>
-        Entre mes deux années de prépa, j'ai eu envie de reprendre le C++.
-    </p>
-    <p>
-        J'aime bien le thème de l'espace, ainsi que la possibilité pour le joueur de créer son propre vaisseau.
-    </p>
-    <p>
-        C'est ainsi qu'a débuté le projet ASCII Space Destroyer.
-    </p>
+<body>
+    <!-- Navbar -->
+    <?php
+        include("../../include/navbar.php")
+    ?>
 
-    <h3>
-        Le jeu
-    </h3>
-    <h4>
-        Principe
-    </h4>
-    <div class="row">
-        <div class="col-lg-12 col-xl-4">
-            <p>
-                <strong>ASCII Space Destroyer</strong> est un jeu de de tir. Il s'inspire de <em>SpaceInvader</em>, le
-                pionnier
-                du genre. Les flottes de vaisseau ennemies se rapprochent, et vous devez tous les abattre avant qu'ils
-                ne
-                franchissent le bord droit de l'écran.
+    <!-- Main -->
+    <main role="main" class="container">
+        <div class="focus-center">
+            <h1>
+                ASCII Space Destroyer
+            </h1>
+            <img class="rounded" src="/include/images/projets_ascii_ship_torpEL.png" alt="torpEL ascii ship">
+            <h2>
+                Jeu vidéo réalisé en C++
+            </h2>
+            <p class="lead">
+                Derrière ce nom un peu bourrin se cache un shooter à la <em>Space Invader</em> où les joueurs peuvent
+                concevoir
+                leur propre vaisseau avant de partir à l'aventure.
             </p>
-            <p>
-                La particularité de ce jeu est que votre vaisseau est composé de caractères ASCII, ces 127 caractères
-                standards
-                qui se retrouvent dans tous les jeux de caractères. Ainsi, chaque caractère forme une <em>brique</em>
-                pour
-                votre
-                vaisseau, et elle peut être détruite. Votre vaisseau se détruit au fur et à mesure selon les dégâts
-                subis.
-                Si
-                votre cockpit (représenté par le caractère <code>m</code>) est détruit, c'est Game Over.
-            </p>
-        </div>
-        <div class="col-lg-12 col-xl-8">
-            <img class="rounded img-fluid mx-auto d-block" src="../images/projets_ascii_game1.png" alt="cv flat icon"/>
         </div>
-    </div>
-    <h4>
-        Progression
-    </h4>
-    <div class="row">
-        <div class="col-lg-12 col-xl-9">
-            <img class="rounded img-fluid mx-auto d-block" src="../images/projets_ascii_menu.png" alt="cv flat icon"/>
+
+        <!-- Content -->
+        <h3>
+            <img src="https://img.icons8.com/color/48/000000/term.png" alt="term flat icon">
+            Introduction
+        </h3>
+        <p>
+            Entre mes deux années de prépa, j'ai eu envie de reprendre le C++.
+        </p>
+        <p>
+            J'aime bien le thème de l'espace, ainsi que la possibilité pour le joueur de créer son propre vaisseau.
+        </p>
+        <p>
+            C'est ainsi qu'a débuté le projet ASCII Space Destroyer.
+        </p>
+
+        <h3>
+            Le jeu
+        </h3>
+        <h4>
+            Principe
+        </h4>
+        <div class="row">
+            <div class="col-lg-12 col-xl-4">
+                <p>
+                    <strong>ASCII Space Destroyer</strong> est un jeu de de tir. Il s'inspire de <em>SpaceInvader</em>, le
+                    pionnier
+                    du genre. Les flottes de vaisseau ennemies se rapprochent, et vous devez tous les abattre avant qu'ils
+                    ne
+                    franchissent le bord droit de l'écran.
+                </p>
+                <p>
+                    La particularité de ce jeu est que votre vaisseau est composé de caractères ASCII, ces 127 caractères
+                    standards
+                    qui se retrouvent dans tous les jeux de caractères. Ainsi, chaque caractère forme une <em>brique</em>
+                    pour
+                    votre
+                    vaisseau, et elle peut être détruite. Votre vaisseau se détruit au fur et à mesure selon les dégâts
+                    subis.
+                    Si
+                    votre cockpit (représenté par le caractère <code>m</code>) est détruit, c'est Game Over.
+                </p>
+            </div>
+            <div class="col-lg-12 col-xl-8">
+                <img class="rounded img-fluid mx-auto d-block" src="/include/images/projets_ascii_game1.png" alt="game screenshot"/>
+            </div>
         </div>
-        <div class="col-lg-12 col-xl-3">
-            <p>
-                Le joueur peut choisir la planète où il souhaite batailler à partir du menu. Pour chaque planète, une
-                courte
-                description permet de comprendre la raison de l'attaque et d'estimer les défenses de l'adversaire. Pour
-                chaque
-                planète pacifiée, le joueur obtient une récompense qui lui permet d'utiliser de meilleurs vaisseaux.
-                Soit la
-                limite du nombre de blocs sur son vaisseau augmente (apelée <code>CPU</code> dans le jeu) soit il
-                débloque une
-                arme ou le bouclier de combat.
-            </p>
+        <h4>
+            Progression
+        </h4>
+        <div class="row">
+            <div class="col-lg-12 col-xl-9">
+                <img class="rounded img-fluid mx-auto d-block" src="/include/images/projets_ascii_menu.png" alt="menu screenshot"/>
+            </div>
+            <div class="col-lg-12 col-xl-3">
+                <p>
+                    Le joueur peut choisir la planète où il souhaite batailler à partir du menu. Pour chaque planète, une
+                    courte
+                    description permet de comprendre la raison de l'attaque et d'estimer les défenses de l'adversaire. Pour
+                    chaque
+                    planète pacifiée, le joueur obtient une récompense qui lui permet d'utiliser de meilleurs vaisseaux.
+                    Soit la
+                    limite du nombre de blocs sur son vaisseau augmente (apelée <code>CPU</code> dans le jeu) soit il
+                    débloque une
+                    arme ou le bouclier de combat.
+                </p>
+            </div>
         </div>
-    </div>
-    <h4>
-        Faire son propre vaisseau
-    </h4>
-    <p>
-        L'avantage de ce genre de graphisme, c'est que n'importe quel joueur peut créer son propre vaisseau : il suffit
-        pour cela d'un éditeur de texte.
-    </p>
-    <p>
-        Lors du chargement du vaisseau, le programme va automatiquement reconnaître les combinaisons de caractères
-        utilisées pour placer le cockpit et les divers équipements disponibles.
-    </p>
-    <p>
-        Voici une courte description de l'arsenal à disposition.
-    </p>
+        <h4>
+            Faire son propre vaisseau
+        </h4>
+        <p>
+            L'avantage de ce genre de graphisme, c'est que n'importe quel joueur peut créer son propre vaisseau : il suffit
+            pour cela d'un éditeur de texte.
+        </p>
+        <p>
+            Lors du chargement du vaisseau, le programme va automatiquement reconnaître les combinaisons de caractères
+            utilisées pour placer le cockpit et les divers équipements disponibles.
+        </p>
+        <p>
+            Voici une courte description de l'arsenal à disposition.
+        </p>
 
-    <div class="row">
-        <div class="col-xl-4 col-lg-6 col-md-12">
-            <h5>
-                Le Gun <code>[-</code>
-            </h5>
-            <p>
-                Le tir le plus classique. Pour l'équiper sur votre vaisseau, il suffit d'écrire <code>[-</code> quelque
-                part
-                dans sa structure. Cette arme tire en ligne droite jusqu'à toucher sa cible. Les projectiles sont en
-                forme de
-                <code>+</code>.
-            </p>
-            <p>
-                À l'impact, le Gun fait des dégâts localisés autour du point de contact.
-            </p>
-        </div>
+        <div class="row">
+            <div class="col-xl-4 col-lg-6 col-md-12">
+                <h5>
+                    Le Gun <code>[-</code>
+                </h5>
+                <p>
+                    Le tir le plus classique. Pour l'équiper sur votre vaisseau, il suffit d'écrire <code>[-</code> quelque
+                    part
+                    dans sa structure. Cette arme tire en ligne droite jusqu'à toucher sa cible. Les projectiles sont en
+                    forme de
+                    <code>+</code>.
+                </p>
+                <p>
+                    À l'impact, le Gun fait des dégâts localisés autour du point de contact.
+                </p>
+            </div>
 
-        <div class="col-xl-4 col-lg-6 col-md-12">
-            <h5>
-                Le Cutter <code>[|</code>
-            </h5>
-            <p>
-                Similaire au Gun dans sa manière de tirer, c'est à l'impact que le cutter se diférencie. Lorsque le
-                projectile
-                en forme de <code>|</code> touche une structure ennemie, tous les blocs situés sur la même ligne
-                verticale
-                prennent 50 points de dommages (maxi : 100).
-            </p>
-            <p>
-                Ainsi, si deux projectiles de ce type frappent au même endroit, il est possible de couper un vaisseau
-                ennemi en
-                deux. Soyez donc attentifs, ils peuvent s'avérer particulièrement efficaces sur certains types de
-                structure ...
-            </p>
-        </div>
+            <div class="col-xl-4 col-lg-6 col-md-12">
+                <h5>
+                    Le Cutter <code>[|</code>
+                </h5>
+                <p>
+                    Similaire au Gun dans sa manière de tirer, c'est à l'impact que le cutter se diférencie. Lorsque le
+                    projectile
+                    en forme de <code>|</code> touche une structure ennemie, tous les blocs situés sur la même ligne
+                    verticale
+                    prennent 50 points de dommages (maxi : 100).
+                </p>
+                <p>
+                    Ainsi, si deux projectiles de ce type frappent au même endroit, il est possible de couper un vaisseau
+                    ennemi en
+                    deux. Soyez donc attentifs, ils peuvent s'avérer particulièrement efficaces sur certains types de
+                    structure ...
+                </p>
+            </div>
 
-        <div class="col-xl-4 col-lg-6 col-md-12">
+            <div class="col-xl-4 col-lg-6 col-md-12">
 
-            <h5>
-                Le Disper <code>[<</code>
-            </h5>
-            <p>
-                Les joueurs reconnaîtront dans cette arme le classique fusil à pompe présent dans la plupart des jeux de
-                tir.
-            </p>
-            <p>
-                Ainsi, le Disper tire plusieurs balles en même temps, mais les tirs sont dispersés et la portée réduite.
-                Il faut
-                savoir que le tir de Disper fait davantage de dégâts au contact.
-            </p>
-            <p>
-                Très efficace pour détruire les ennemis proches de la limite, mais le corps à corps est toujours un
-                paris risqué
-                qui se conclue souvent par la perte de deux ou trois éléments de vaisseau ...
-            </p>
-        </div>
+                <h5>
+                    Le Disper <code>[<</code>
+                </h5>
+                <p>
+                    Les joueurs reconnaîtront dans cette arme le classique fusil à pompe présent dans la plupart des jeux de
+                    tir.
+                </p>
+                <p>
+                    Ainsi, le Disper tire plusieurs balles en même temps, mais les tirs sont dispersés et la portée réduite.
+                    Il faut
+                    savoir que le tir de Disper fait davantage de dégâts au contact.
+                </p>
+                <p>
+                    Très efficace pour détruire les ennemis proches de la limite, mais le corps à corps est toujours un
+                    paris risqué
+                    qui se conclue souvent par la perte de deux ou trois éléments de vaisseau ...
+                </p>
+            </div>
 
-        <div class="col-xl-4 col-lg-6 col-md-12">
+            <div class="col-xl-4 col-lg-6 col-md-12">
 
-            <h5>
-                Le Protoseeker <code>[O</code>
-            </h5>
-            <p>
-                Lorsqu'on le voit en fonctionnement, on a l'impression que le Protoseeker est un pistolet à eau ...
-            </p>
-            <p>
-                Ce qui n'est pas très loin de la réalité. En effet, le Protoseeker est l'arme la plus faible du jeu.
-                Elle
-                compense sa faible puissance par une fréquence élevée et un ciblage automatique. Le tir est toujours
-                orienté
-                vers le vaisseau ennemi le plus proche.
-            </p>
-            <p>
-                Ce genre d'arme est très aprécié dans les situations confuses, ou l'on passe son temps à esquiver les
-                projectiles ennemis. Pendant ce temps là, le Protoseeker continue à toucher sa cible, infaillible.
-            </p>
-        </div>
+                <h5>
+                    Le Protoseeker <code>[O</code>
+                </h5>
+                <p>
+                    Lorsqu'on le voit en fonctionnement, on a l'impression que le Protoseeker est un pistolet à eau ...
+                </p>
+                <p>
+                    Ce qui n'est pas très loin de la réalité. En effet, le Protoseeker est l'arme la plus faible du jeu.
+                    Elle
+                    compense sa faible puissance par une fréquence élevée et un ciblage automatique. Le tir est toujours
+                    orienté
+                    vers le vaisseau ennemi le plus proche.
+                </p>
+                <p>
+                    Ce genre d'arme est très aprécié dans les situations confuses, ou l'on passe son temps à esquiver les
+                    projectiles ennemis. Pendant ce temps là, le Protoseeker continue à toucher sa cible, infaillible.
+                </p>
+            </div>
 
-        <div class="col-xl-4 col-lg-6 col-md-12">
+            <div class="col-xl-4 col-lg-6 col-md-12">
 
-            <h5>
-                Missile Launcher <code>[></code>
-            </h5>
-            <p>
-                Le lanceur de missiles est sans doute l'arme la plus dangereuse du jeu.
-            </p>
-            <p>
-                Ses caractéristiques : des dégâts puissants et localisés, une fréquence réduite ... Mais surtout un
-                autoguidage
-                fatal. Ce système de guidage permet au missile de modifier sa trajectoire lors de son vol et de viser
-                directement le cockpit de l'ennemi le plus proche.
-            </p>
-            <p>
-                Si le Protoseeker arrose l'ennemi d'un tir nourri, le missile contourne les défenses et frappe
-                directement au
-                coeur de sa cible.
-            </p>
-            <p>
-                Soyez donc vigilant si vous venez à affronter ce genre d'arme : la modification de trajectoire le rend
-                très
-                difficle à éviter. Néanmoins, si vous êtes assez attentif, vous pourrez découvrir une faille dans
-                l'algorithme
-                de guidage qui vous permettra d'échapper à l'impact.
-            </p>
-        </div>
+                <h5>
+                    Missile Launcher <code>[></code>
+                </h5>
+                <p>
+                    Le lanceur de missiles est sans doute l'arme la plus dangereuse du jeu.
+                </p>
+                <p>
+                    Ses caractéristiques : des dégâts puissants et localisés, une fréquence réduite ... Mais surtout un
+                    autoguidage
+                    fatal. Ce système de guidage permet au missile de modifier sa trajectoire lors de son vol et de viser
+                    directement le cockpit de l'ennemi le plus proche.
+                </p>
+                <p>
+                    Si le Protoseeker arrose l'ennemi d'un tir nourri, le missile contourne les défenses et frappe
+                    directement au
+                    coeur de sa cible.
+                </p>
+                <p>
+                    Soyez donc vigilant si vous venez à affronter ce genre d'arme : la modification de trajectoire le rend
+                    très
+                    difficle à éviter. Néanmoins, si vous êtes assez attentif, vous pourrez découvrir une faille dans
+                    l'algorithme
+                    de guidage qui vous permettra d'échapper à l'impact.
+                </p>
+            </div>
 
-        <div class="col-xl-4 col-lg-6 col-md-12">
+            <div class="col-xl-4 col-lg-6 col-md-12">
 
-            <h5>
-                Brexit launcher <code>[{</code>
-            </h5>
-            <p>
-                Nommé d'après l'événement homonyme (il semblerait que je manquai d'inspiration à ce moment là), le
-                <strong>Brexit</strong>
-                est une arme basée sur la division.
-            </p>
-            <p>
-                De puissance comparable au <strong>Gun</strong>, le <strong>Brexit</strong> tire simultanément deux tirs
-                en
-                diagonale.
-            </p>
-            <p>
-                Peut être utilisé en arme d'appoint pour couvrir de nouveaux angles d'attaques; ou bien pour faire des
-                dégâts en
-                évitant une attaque frontale, ce qui s'avère utile lors de l'attaque d'un vaisseau lourdement armé.
-            </p>
-        </div>
+                <h5>
+                    Brexit launcher <code>[{</code>
+                </h5>
+                <p>
+                    Nommé d'après l'événement homonyme (il semblerait que je manquai d'inspiration à ce moment là), le
+                    <strong>Brexit</strong>
+                    est une arme basée sur la division.
+                </p>
+                <p>
+                    De puissance comparable au <strong>Gun</strong>, le <strong>Brexit</strong> tire simultanément deux tirs
+                    en
+                    diagonale.
+                </p>
+                <p>
+                    Peut être utilisé en arme d'appoint pour couvrir de nouveaux angles d'attaques; ou bien pour faire des
+                    dégâts en
+                    évitant une attaque frontale, ce qui s'avère utile lors de l'attaque d'un vaisseau lourdement armé.
+                </p>
+            </div>
 
-        <div class="col-xl-4 col-lg-6 col-md-12">
-            <h5>
-                Hecto combustion <code>[~</code>
-            </h5>
-            <p>
-                L'hecto combustion est une arme assez spéciale. Cette arme tire un <code>H</code> très lent. Son atout
-                vient du
-                fait qu'il n'explose pas à l'impact. Il fait des dégâts et continue sa route.
-            </p>
-            <p>
-                Ainsi, il peut être utilisé pour perforer des blindages épais. Mais sa lenteur le rend assez difficile à
-                maîtriser.
-            </p>
-        </div>
+            <div class="col-xl-4 col-lg-6 col-md-12">
+                <h5>
+                    Hecto combustion <code>[~</code>
+                </h5>
+                <p>
+                    L'hecto combustion est une arme assez spéciale. Cette arme tire un <code>H</code> très lent. Son atout
+                    vient du
+                    fait qu'il n'explose pas à l'impact. Il fait des dégâts et continue sa route.
+                </p>
+                <p>
+                    Ainsi, il peut être utilisé pour perforer des blindages épais. Mais sa lenteur le rend assez difficile à
+                    maîtriser.
+                </p>
+            </div>
 
-        <div class="col-xl-4 col-lg-6 col-md-12">
+            <div class="col-xl-4 col-lg-6 col-md-12">
 
-            <h5>
-                Sniper rifle <code>[=</code>
-            </h5>
-            <p>
-                Le Sniper tire un projectile en ligne droite, très puissant et accélérant.
-            </p>
-            <p>
-                Il fait davantage de dégât avec la distance. À utiliser pour attaquer l'ennemi dès son apparition.
-            </p>
-        </div>
+                <h5>
+                    Sniper rifle <code>[=</code>
+                </h5>
+                <p>
+                    Le Sniper tire un projectile en ligne droite, très puissant et accélérant.
+                </p>
+                <p>
+                    Il fait davantage de dégât avec la distance. À utiliser pour attaquer l'ennemi dès son apparition.
+                </p>
+            </div>
 
-        <div class="col-xl-4 col-lg-12 col-md-12">
+            <div class="col-xl-4 col-lg-12 col-md-12">
 
-            <h5>
-                Le bouclier de combat <code>()</code>
-            </h5>
-            <p>
-                Le bouclier n'est pas une arme, mais un dispositif de défense.
-            </p>
-            <p>
-                Si le vaisseau possède au moins un bouclier, il apparaît bleuté et entouré d'un champ protecteur. Ce
-                champ de
-                force absorbe les dégâts sans endommager la structure.
-            </p>
-            <p>
-                À force d'encaisser les dégâts, le bouclier se vide. Une fois vide, l'enveloppe disparaît : le vaisseau
-                n'est
-                plus protégé.
-            </p>
-            <p>
-                Si le vaisseau n'a pas encaissé de dégât pendant un certain laps de temps, le bouclier recommence à se
-                régénérer.
-            </p>
-            <p>
-                Le nombre de générateurs augmente la capacité du bouclier, c'est à dire le nombre de dégâts qu'il peut
-                encaisser
-                avant de disparaître, ainsi que la vitesse de rechargement.
-            </p>
+                <h5>
+                    Le bouclier de combat <code>()</code>
+                </h5>
+                <p>
+                    Le bouclier n'est pas une arme, mais un dispositif de défense.
+                </p>
+                <p>
+                    Si le vaisseau possède au moins un bouclier, il apparaît bleuté et entouré d'un champ protecteur. Ce
+                    champ de
+                    force absorbe les dégâts sans endommager la structure.
+                </p>
+                <p>
+                    À force d'encaisser les dégâts, le bouclier se vide. Une fois vide, l'enveloppe disparaît : le vaisseau
+                    n'est
+                    plus protégé.
+                </p>
+                <p>
+                    Si le vaisseau n'a pas encaissé de dégât pendant un certain laps de temps, le bouclier recommence à se
+                    régénérer.
+                </p>
+                <p>
+                    Le nombre de générateurs augmente la capacité du bouclier, c'est à dire le nombre de dégâts qu'il peut
+                    encaisser
+                    avant de disparaître, ainsi que la vitesse de rechargement.
+                </p>
+            </div>
         </div>
-    </div>
 
-    <h5>
-        Tableau récapitulatif
-    </h5>
-    <p>
-        Voici le résumé de tous les équipements fonctionnels disponibles pour construire votre vaisseau.
-    </p>
-    <div class="table-responsive">
-        <table class="table">
-            <thead>
-            <tr>
-                <th>Nom</th>
-                <th>Symbole</th>
-                <th>Projectile</th>
-                <th>Catégorie</th>
-                <th title="Charge CPU : coût supplémentaire de ce bloc">CPU</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr>
-                <td>Cockpit</td>
-                <td><code>m</code></td>
-                <td></td>
-                <td>Structure</td>
-                <td>1</td>
-            </tr>
-            <tr>
-                <td>Bloc</td>
-                <td title="N'importe quel caractère ASCII">ASCII</td>
-                <td></td>
-                <td>Structure</td>
-                <td>1</td>
-            </tr>
-            <tr>
-                <td>Gun</td>
-                <td><code>[-</code></td>
-                <td><code>+</code></td>
-                <td>Arme</td>
-                <td>20</td>
-            </tr>
-            <tr>
-                <td>Cutter</td>
-                <td><code>[|</code></td>
-                <td><code>|</code></td>
-                <td>Arme</td>
-                <td>22</td>
-            </tr>
-            <tr>
-                <td>Disper</td>
-                <td><code>[<</code></td>
-                <td><code>*</code></td>
-                <td>Arme</td>
-                <td>24</td>
-            </tr>
-            <tr>
-                <td>Protoseeker</td>
-                <td><code>[O</code></td>
-                <td><code>O</code></td>
-                <td>Arme</td>
-                <td>22</td>
-            </tr>
-            <tr>
-                <td>Missile launcher</td>
-                <td><code>[></code></td>
-                <td><code>-></code></td>
-                <td>Arme</td>
-                <td>70</td>
-            </tr>
-            <tr>
-                <td>Brexit launcher</td>
-                <td><code>[{</code></td>
-                <td><code>X</code></td>
-                <td>Arme</td>
-                <td>27</td>
-            </tr>
-            <tr>
-                <td>Hecto combustion</td>
-                <td><code>[~</code></td>
-                <td><code>H</code></td>
-                <td>Arme</td>
-                <td>56</td>
-            </tr>
-            <tr>
-                <td>Sniper rifle</td>
-                <td><code>[=</code></td>
-                <td><code>=</code></td>
-                <td>Arme</td>
-                <td>50</td>
-            </tr>
-            <tr>
-                <td>Bouclier</td>
-                <td><code>()</code></td>
-                <td></td>
-                <td>Défense</td>
-                <td>30</td>
-            </tr>
-            </tbody>
-        </table>
-    </div>
+        <h5>
+            Tableau récapitulatif
+        </h5>
+        <p>
+            Voici le résumé de tous les équipements fonctionnels disponibles pour construire votre vaisseau.
+        </p>
+        <div class="table-responsive">
+            <table class="table">
+                <thead>
+                <tr>
+                    <th>Nom</th>
+                    <th>Symbole</th>
+                    <th>Projectile</th>
+                    <th>Catégorie</th>
+                    <th title="Charge CPU : coût supplémentaire de ce bloc">CPU</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>Cockpit</td>
+                    <td><code>m</code></td>
+                    <td></td>
+                    <td>Structure</td>
+                    <td>1</td>
+                </tr>
+                <tr>
+                    <td>Bloc</td>
+                    <td title="N'importe quel caractère ASCII">ASCII</td>
+                    <td></td>
+                    <td>Structure</td>
+                    <td>1</td>
+                </tr>
+                <tr>
+                    <td>Gun</td>
+                    <td><code>[-</code></td>
+                    <td><code>+</code></td>
+                    <td>Arme</td>
+                    <td>20</td>
+                </tr>
+                <tr>
+                    <td>Cutter</td>
+                    <td><code>[|</code></td>
+                    <td><code>|</code></td>
+                    <td>Arme</td>
+                    <td>22</td>
+                </tr>
+                <tr>
+                    <td>Disper</td>
+                    <td><code>[<</code></td>
+                    <td><code>*</code></td>
+                    <td>Arme</td>
+                    <td>24</td>
+                </tr>
+                <tr>
+                    <td>Protoseeker</td>
+                    <td><code>[O</code></td>
+                    <td><code>O</code></td>
+                    <td>Arme</td>
+                    <td>22</td>
+                </tr>
+                <tr>
+                    <td>Missile launcher</td>
+                    <td><code>[></code></td>
+                    <td><code>-></code></td>
+                    <td>Arme</td>
+                    <td>70</td>
+                </tr>
+                <tr>
+                    <td>Brexit launcher</td>
+                    <td><code>[{</code></td>
+                    <td><code>X</code></td>
+                    <td>Arme</td>
+                    <td>27</td>
+                </tr>
+                <tr>
+                    <td>Hecto combustion</td>
+                    <td><code>[~</code></td>
+                    <td><code>H</code></td>
+                    <td>Arme</td>
+                    <td>56</td>
+                </tr>
+                <tr>
+                    <td>Sniper rifle</td>
+                    <td><code>[=</code></td>
+                    <td><code>=</code></td>
+                    <td>Arme</td>
+                    <td>50</td>
+                </tr>
+                <tr>
+                    <td>Bouclier</td>
+                    <td><code>()</code></td>
+                    <td></td>
+                    <td>Défense</td>
+                    <td>30</td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
 
-    <h3>
-        Technologies
-    </h3>
-    <p>
-        Ce jeu a été codé en <strong>C++</strong> avec l'IDE <strong>Code::Blocks</strong>. Je me suis aidé pour cela de
-        la biblothèque SDL.
-    </p>
+        <h3>
+            Technologies
+        </h3>
+        <p>
+            Ce jeu a été codé en <strong>C++</strong> avec l'IDE <strong>Code::Blocks</strong>. Je me suis aidé pour cela de
+            la biblothèque SDL.
+        </p>
 
-    <div class="row">
-        <div class="col-lg-12 col-xl-6">
-            <h4>
-                SDL 1.2
-            </h4>
-            <p>
-                SDL signifie <strong>S</strong>imple <strong>D</strong>irectMedia <strong>L</strong>ayer. Cette
-                bibliothèque
-                permet d'ajouter des fonctions élémentaires pour intéragir avec l'utilisateur.
-            </p>
+        <div class="row">
+            <div class="col-lg-12 col-xl-6">
+                <h4>
+                    SDL 1.2
+                </h4>
+                <p>
+                    SDL signifie <strong>S</strong>imple <strong>D</strong>irectMedia <strong>L</strong>ayer. Cette
+                    bibliothèque
+                    permet d'ajouter des fonctions élémentaires pour intéragir avec l'utilisateur.
+                </p>
+                <p>
+                    Véritable boîte à outils, j'ai utilisé pour ce programme le module graphique pour afficher une fenêtre,
+                    et le
+                    module de gestion d'événements pour récupérer les entrées utilisateur (clavier, souris).
+                </p>
+                <p>
+                    La SDL est une bibliothèque bas niveau. C'est à dire qu'elle est très primitive, il faut beaucoup de
+                    code pour
+                    arriver à un rendu correct. Cela demande au programmeur beaucoup de travail, et beaucoup d'organisation.
+                </p>
+                <p>
+                    Lien vers <a href="https://www.libsdl.org/">le site officiel de SDL 1.2</a>.
+                </p>
+            </div>
+            <div class="col-lg-12 col-xl-6">
+
+                <h4>
+                    SDL GFX
+                </h4>
+                <p>
+                    SDL GFX rajoute quelques fonctions graphiques à la SDL. Je l'ai utilisée principalement ici pour sa
+                    fonction qui
+                    permet d'afficher des caractères. Sans cette fonction, difficile d'afficher ces vaisseaux faits de
+                    caractères
+                    ASCII ...
+                </p>
+                <p>
+                    Et oui, SDL ne fait pas ça ... quand je vous disais que SDL est une bibliothèque bas niveau et ne
+                    faisait pas
+                    grand choses, je ne plaisantais pas.
+                </p>
+
+            </div>
+        </div>
+
+        <h3>
+            Téléchargements
+        </h3>
+        <div class="alert alert-info">
+            <img class="float-left" src="https://img.icons8.com/color/90/000000/road-worker.png" alt="worker flat icon">
             <p>
-                Véritable boîte à outils, j'ai utilisé pour ce programme le module graphique pour afficher une fenêtre,
-                et le
-                module de gestion d'événements pour récupérer les entrées utilisateur (clavier, souris).
+                Mon site web est encore en <strong>développement</strong>. Cette section sera implémentée dans une
+                future version.
             </p>
             <p>
-                La SDL est une bibliothèque bas niveau. C'est à dire qu'elle est très primitive, il faut beaucoup de
-                code pour
-                arriver à un rendu correct. Cela demande au programmeur beaucoup de travail, et beaucoup d'organisation.
+                Vous pourrez télécharger les différents exécutables du jeu, que vous ayez un ordinateur sous Linux ou sous
+                Windows.
             </p>
             <p>
-                Lien vers <a href="https://www.libsdl.org/">le site officiel de SDL 1.2</a>.
+                Repassez plus tard ...
             </p>
         </div>
-        <div class="col-lg-12 col-xl-6">
 
-            <h4>
-                SDL GFX
-            </h4>
-            <p>
-                SDL GFX rajoute quelques fonctions graphiques à la SDL. Je l'ai utilisée principalement ici pour sa
-                fonction qui
-                permet d'afficher des caractères. Sans cette fonction, difficile d'afficher ces vaisseaux faits de
-                caractères
-                ASCII ...
-            </p>
-            <p>
-                Et oui, SDL ne fait pas ça ... quand je vous disais que SDL est une bibliothèque bas niveau et ne
-                faisait pas
-                grand choses, je ne plaisantais pas.
-            </p>
+        <!-- Pagination -->
+        <ul class="pagination pagination-lg justify-content-center">
+            <li class="page-item">
+                <a class="page-link arrow" title="Page précédente" href="pro_static_site.php">&laquo</a>
+            </li>
+            <li class="page-item">
+                <a class="page-link" title="Site web de Jovian" href="pro_static_site.php">1</a>
+            </li>
+            <li class="page-item active">
+                <div class="page-link" title="ASCII Space destroyer">2</div>
+            </li>
+            <li class="page-item">
+                <a class="page-link" title="Pulsar" href="pro_pulsar.php">3</a>
+            </li>
+            <li class="page-item">
+                <a class="page-link" title="Quoridor" href="pro_quoridor.php">4</a>
+            </li>
+            <li class="page-item">
+                <a class="page-link arrow" title="Page suivante" href="pro_pulsar.php">&raquo</a>
+            </li>
+        </ul>
+    </main>
 
+    <!-- Footer -->
+    <footer class="footer bg-dark mt-5">
+        <div class="container">
+            <span class="text-muted">Images sources : ICON8</span>
+            <a href="https://icons8.com/icon/104082/cv">CV icon by Icons8</a>
+            <a href="https://icons8.com/icon/104084/city">City icon by Icons8</a>
+            <a href="https://icons8.com/icon/19293/code">Code icon by Icons8</a>
         </div>
-    </div>
-
-    <h3>
-        Téléchargements
-    </h3>
-    <div class="alert alert-info">
-        <img class="float-left" src="https://img.icons8.com/color/90/000000/road-worker.png" alt="[Working]">
-        <p>
-            Mon site web est encore en <strong>développement</strong>. Cette section sera implémentée dans une
-            future version.
-        </p>
-        <p>
-            Vous pourrez télécharger les différents exécutables du jeu, que vous ayez un ordinateur sous Linux ou sous
-            Windows.
-        </p>
-        <p>
-            Repassez plus tard ...
-        </p>
-    </div>
-
-    <!-- Pagination -->
-    <ul class="pagination pagination-lg justify-content-center">
-        <li class="page-item">
-            <a class="page-link arrow" title="Page précédente" href="pro_static_site.php">&laquo</a>
-        </li>
-        <li class="page-item">
-            <a class="page-link" title="Site web de Jovian" href="pro_static_site.php">1</a>
-        </li>
-        <li class="page-item active">
-            <div class="page-link" title="ASCII Space destroyer">2</div>
-        </li>
-        <li class="page-item">
-            <a class="page-link" title="Pulsar" href="pro_pulsar.php">3</a>
-        </li>
-        <li class="page-item">
-            <a class="page-link" title="Quoridor" href="pro_quoridor.php">4</a>
-        </li>
-        <li class="page-item">
-            <a class="page-link arrow" title="Page suivante" href="pro_pulsar.php">&raquo</a>
-        </li>
-    </ul>
-</main>
-
-<!-- Footer -->
-<footer class="footer bg-dark mt-5">
-    <div class="container">
-        <span class="text-muted">Images sources : ICON8</span>
-        <a href="https://icons8.com/icon/104082/cv">CV icon by Icons8</a>
-        <a href="https://icons8.com/icon/104084/city">City icon by Icons8</a>
-        <a href="https://icons8.com/icon/19293/code">Code icon by Icons8</a>
-    </div>
-</footer>
+    </footer>
 
-<!-- Scripts -->
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
-        crossorigin="anonymous"></script>
-<script src="../js/bootstrap.js"></script>
+    <!-- Scripts -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+            crossorigin="anonymous"></script>
+    <script src="/include/js/bootstrap.js"></script>
 
 </body>
-</html>
+</html>