[Client] Improve NPC admin page + move and fix its JavaScript into a separate file

- Style all button and inputs on admin pages with Roboto Mono font (and
sans-serif as a fallback) with 1em font size;
- Remove unneeded transition effect property declaration on text hover, as the
regular declaration is applied when switching from hover state to regular
state.
- Add NPC dedicated stylesheet in which specific NPC style has been added;
- Use an icon where the picture of a NPC is not available (like when adding a
new one) and provide the NPC picture as the picture instead of the edition page
itself;
- Move NPC's JavaScript in a dedicated file, improve its code and fix its
access to DOM elements.

truthinquiry/static/css/admin_ui.css

@@ -33,6 +33,11 @@ body {
     margin: var(--body-margin);
 }
 
+button, input {
+    font-family: "Roboto Mono", sans-serif;
+    font-size: 1em;
+}
+
 header {
     align-content: center;
     align-items: center;
@@ -94,7 +99,6 @@ svg {
 }
 
 .short_color_transition:hover {
-    transition-property: background-color, color;
     transition-duration: 0.25s;
     transition-timing-function: linear;
 }

truthinquiry/static/css/admin_ui_login.css

@@ -6,7 +6,6 @@ form {
 }
 
 input {
-    font-family: "Roboto Mono", sans-serif;
     font-size: 1em;
     margin: 1em;
     padding: 0.25em;

truthinquiry/static/css/admin_ui_npc.css

@@ -0,0 +1,75 @@
+button {
+    display: flex;
+}
+
+button, input {
+    background-color: transparent;
+    border-color: var(--admin-white-color);
+    border-style: solid;
+    border-width: 0.125em;
+    color: var(--admin-white-color);
+    margin: 1em;
+    padding: 0.25em;
+}
+
+input[type="text"] {
+    width: 20em;
+}
+
+.action_buttons, .answer_groups {
+    align-content: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.action_button {
+    align-items: center;
+    border-radius: 1em;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding: 0.25em;
+}
+
+.action_button:hover {
+    background-color: var(--admin-white-color);
+    color: var(--admin-grey-color);
+}
+
+.action_button:hover > .action_icon {
+    fill: var(--admin-grey-color);
+}
+
+.action_icon {
+    height: 2em;
+    transition-property: fill;
+    width: 2em;
+}
+
+.character_image {
+    width: 15em;
+}
+
+.character_image, #npc_name {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.character_image, #npc_name {
+    display: block;
+}
+
+.info_item {
+    font-size: 1.25em;
+}
+
+.info_item, .section_title {
+    text-align: center;
+}
+
+.section_title {
+    font-size: 1.5em;
+    margin: 1em;
+}

truthinquiry/static/images/no_photography_white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960" fill="white"><path d="m902 885-92-89V371H637l-82-97H407l-54 65-65-65 78-92h230l82 97h132q37.225 0 64.613 27.706Q902 334.412 902 371v514ZM646 631 469 453q36-3 70.5 8.5t60.5 38q26 26.5 37.5 60.5t8.5 71Zm-188 10Zm123-74ZM194 279l91 92H150v495h533L25 208l49-49 820 820-49 49-71-71H150q-37.175 0-64.088-26.594Q59 903.812 59 866V371q0-37.588 26.912-64.794Q112.825 279 150 279h44Zm169.564 219L407 541q-17 15.696-26 36.305t-9 43.157q0 45.958 31.29 77.248Q434.58 729 480 729q20.857 0 41.929-9.5Q543 710 559.689 693L603 735.722Q579 763 547.068 776q-31.932 13-67.399 13-70.336 0-119.002-49.292Q312 690.417 312 620q0-34.274 12.457-66.098 12.456-31.823 39.107-55.902Z"/></svg>

truthinquiry/static/js/admin.js

@@ -87,33 +87,3 @@ function saveFormQuestions(){
 
     makeAPIRequest("admin/setQuestions", {"questions": data, "lang": "FR"}, {"content": "json"})
 }
-
-//functions for npc.html
-
-function saveFormNpc(){
-    let data = {}
-    
-    data["id"] = npc.querySelector("#npc_id").value;
-    data["name"] = npc.querySelector("#npc_name").value;
-    
-    let allAnswersJson = [];
-    data["allAnswers"] = allAnswersJson;
-    
-    for(let answerTypeNode of npc.querySelectorAll(".answerType")){
-        let answersJson = [];
-        let answerTypeJson = {"answers": answersJson};
-        allAnswersJson.push(answerTypeJson);
-
-        for(let answerNode of answerTypeNode.querySelectorAll("input")){
-            answersJson.push({"text": answerNode.value})
-        }
-    }
-
-    makeAPIRequest("admin/setNpc", {"npc": data, "lang": "FR"}, {"content": "json"})
-}
-
-async function deleteNpc(){
-    let npc_id = npc.querySelector("#npc_id").value;
-    await makeAPIRequest("admin/deleteNpc", {"npc_id": npc_id, "lang": "FR"}, {"content": "json"});
-    document.location = "/admin";
-}

truthinquiry/static/js/admin_npc.js

@@ -0,0 +1,33 @@
+function createOrUpdateNpc() {
+    const data = {};
+    data["id"] = document.querySelector("#npc_id").value;
+    data["name"] = document.querySelector("#npc_name").value;
+    
+    const allAnswersJson = [];
+    data["allAnswers"] = allAnswersJson;
+    
+    for (let answerTypeNode of document.querySelector(".answer_groups").children) {
+        const answersJson = [];
+        const answerTypeJson = {"answers": answersJson};
+        allAnswersJson.push(answerTypeJson);
+
+        answerTypeNode.querySelectorAll("input").forEach(answerNode => {
+            answersJson.push({"text": answerNode.value});
+        });
+    }
+
+    makeAPIRequest("admin/setNpc", {"npc": data, "lang": "FR"}, {"content": "json"}).then(() => {
+        alert("Opération effectuée avec succès");
+    });
+}
+
+async function deleteNpc() {
+    if (!confirm("Voulez-vous vraiment supprimer ce personnage ?")) {
+        return;
+    }
+
+    const npcId = document.querySelector("#npc_id").value;
+    await makeAPIRequest("admin/deleteNpc", {"npc_id": npcId, "lang": "FR"}, {"content": "json"});
+    alert("Opération effectuée avec succès");
+    document.location = "/admin";
+}

truthinquiry/templates/admin/npc.html

@@ -1,36 +1,82 @@
 <!DOCTYPE html>
 <html lang="fr">
     <head>
-        <title>NPC</title>
         <meta charset="UTF-8">
+        <title>Truth Inquiry - {{'Gestion' if npc.get('id') else 'Ajout'}} d'un personnage</title>
         <link rel="stylesheet" href="/static/css/admin_ui.css">
-        <script src="/static/js/api.js"></script>
-        <script src="/static/js/admin.js"></script>
+        <link rel="stylesheet" href="/static/css/admin_ui_npc.css">
+        <link rel="icon" href="/static/images/favicon/favicon_32.png" type="image/png" sizes="32x32">
+        <link rel="icon" href="/static/images/favicon/favicon_64.png" type="image/png" sizes="64x64">
+        <link rel="icon" href="/static/images/favicon/favicon_96.png" type="image/png" sizes="96x96">
+        <link rel="icon" href="/static/images/favicon/favicon_128.png" type="image/png" sizes="128x128">
+        <link rel="icon" href="/static/images/favicon/favicon_192.png" type="image/png" sizes="192x192">
+        <link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="256x256">
+        <link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
+        <meta name="color-scheme" content="dark light">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
     </head>
     <body>
-        <a href="/admin"> go Back </a> <br>
-
-        <section id="npc">
-            <section>
-                <span>Npc name: </span>
-                <input id="npc_id" value="{{ npc.get('id') or ''}}" hidden>
-                <input id="npc_name" value="{{ npc.get('name') or ''}}">
-                <img href="{{npc.get('img')}}">
-            </section>
-            
-            <section>
-                <p>Answers:</p>
-                {%for answer_type in npc.get("answers") or []%}
-                <section class="answerType">
-                    {%for answer in answer_type%}
-                    <input value="{{answer}}">
-                    {%endfor%}
-                </section>
-                {%endfor%}
-            </section>
+        <header>
+            <a class="short_color_transition" href="/admin" title="Cliquez ici pour revenir à l'accueil de l'interface d'administration du jeu">Accueil</a>
+            <a class="short_color_transition" href="/admin/questions" title="Cliquez ici pour gérer les questions du jeu">Gestion des questions</a>
+            <a class="short_color_transition" href="/admin/places" title="Cliquez ici pour gérer les lieux du jeu">Gestion des lieux</a>
+            <a class="short_color_transition" href="/admin/traits" title="Cliquez ici pour gérer les réactions du jeu">Gestion des réactions</a>
+            <a class="short_color_transition" href="/api/v1/admin/logout" title="Cliquez ici pour vous déconnecter de l'interface d'administration du jeu">Déconnexion</a>
+        </header>
+        <h1 class="page_title">Truth Inquiry - Interface d'administration</h1>
+        <h2 class="page_category">{{'Gestion' if npc.get('id') else 'Ajout'}} d'un personnage</h2>
+        <p class="page_description">Cliquez sur les champs pour éditer les informations. Dans les réponses aux questions lors de l'interrogation, utilisez «&nbsp;{NPC}&nbsp;» pour faire référence au nom d'un personnage et «&nbsp;{SALLE}&nbsp;» pour faire référence au nom d'une salle.</p>
+        <section>
+            <h2 class="section_title">Informations sur le personnage</h2>
+            <input id="npc_id" value="{{ npc.get('id') or ''}}" hidden="hidden">
+            <p class="info_item">Nom du personnage</p>
+            <input type="text" id="npc_name" value="{{ npc.get('name') or ''}}" title="Saisissez le nom du personnage" aria-label="Nom du personnage">
+            <p class="info_item">Image du personnage</p>
+            <img class="character_image" alt="{{'Image du personnage' + (' ' + npc.get('name') if npc.get('name') else '')}}" src="{{'/static/images/no_photography_white.svg' if npc.get('img') == None else '/api/v1/getNpcImage?npcid=' + npc.get('img')|string}}">
         </section>
-
-        <button onclick="saveFormNpc()">Save changes</button>
-        <button onclick="deleteNpc()">Delete Npc</button>
+        <section>
+            <h2 class="section_title">Réponses aux questions lors de l'interrogation</h2>
+            <div class="answer_groups">
+                {%for answer_type in npc.get("answers") or []%}
+                <div class="answer_group">
+                    {%for answer in answer_type%}
+                    <input type="text" value="{{answer}}" title="Saisissez le texte de la réponse" aria-label="Texte de la réponse">
+                    {%endfor%}
+                </div>
+                {%endfor%}
+            </div>
+        </section>
+        <div class="action_buttons">
+            {% if npc.get('id'): %}
+            <button id="save_edits_button" class="action_button short_color_transition" onclick="createOrUpdateNpc()"  title="Cliquez ici pour enregister les modifications sur le personnage">
+                <svg class="action_icon short_color_transition" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48">
+                    <path d="M18.9 36.75 6.65 24.5l3.3-3.3 8.95 9L38 11.1l3.3 3.25Z"/>
+                </svg>
+                Enregister les modifications du personnage
+            </button>
+            <button id="delete_npc_button" class="action_button short_color_transition" onclick="deleteNpc()" title="Cliquez ici pour supprimer le personnage">
+                <svg class="action_icon short_color_transition" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48">
+                    <path d="M12.45 38.7 9.3 35.55 20.85 24 9.3 12.5l3.15-3.2L24 20.8 35.55 9.3l3.15 3.2L27.2 24l11.5 11.55-3.15 3.15L24 27.2Z"/>
+                </svg>
+                Supprimer le personnage
+            </button>
+            {% else: %}
+            <button id="add_npc_button" class="action_button short_color_transition" onclick="createOrUpdateNpc()" title="Cliquez ici pour ajouter un personnage avec les données saisies">
+                <svg class="action_icon short_color_transition" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48">
+                    <path d="M18.9 36.75 6.65 24.5l3.3-3.3 8.95 9L38 11.1l3.3 3.25Z"/>
+                </svg>
+                Ajouter un personnage
+            </button>
+            {% endif %}
+        </div>
+        <noscript>
+            <div class="alert_dialog_background"></div>
+            <dialog>
+                <h3 class="alert_dialog_title">JavaScript nécessaire</h3>
+                <p class="alert_dialog_msg unsupported_browser_msg">Désolé, mais JavaScript est nécessaire pour faire fonctionner cette page. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir ajouter ou gérer un personnage.</p>
+            </dialog>
+        </noscript>
+        <script src="/static/js/api.js"></script>
+        <script src="/static/js/admin_npc.js"></script>
     </body>
 </html>