Interface improvements (#255)

This ships some improvements, including:
* Keep notifications while navigating.
* Keep notifications visible during mouse interactions.
* Replace Symfony toolbar with latest AJAX info.
* Use a condensed layout to improve predictability of the design.

Author: marein

assets/js/Common/HttpClient.js

@@ -1,17 +1,14 @@
 class HttpClient {
     constructor() {
-        this.onError = (response) => {
-        };
+        this.onError = () => true;
     }
 
     /**
      * @param {String} url
      * @returns {Promise}
      */
     async get(url) {
-        const response = await fetch(url, {
-            headers: {'X-Requested-With': 'XMLHttpRequest'}
-        });
+        const response = await fetch(url);
         const json = await response.json();
 
         if (response.status >= 200 && response.status < 300) return json;
@@ -28,7 +25,6 @@ class HttpClient {
     async post(url, data) {
         const response = await fetch(url, {
             method: 'POST',
-            headers: {'X-Requested-With': 'XMLHttpRequest'},
             body: new URLSearchParams(data)
         });
         const json = await response.json();

assets/js/Common/NotificationList.js

@@ -28,8 +28,16 @@ customElements.define('notification-list', class extends HTMLElement {
 
         this.insertBefore(messageNode, this.childNodes[0]);
 
-        await new Promise(resolve => setTimeout(resolve, timeout));
-        messageNode.addEventListener('animationend', () => this.removeChild(messageNode));
-        messageNode.classList.add('gp-fadeout');
+        let handle = this._scheduleRemoval(messageNode, timeout);
+
+        messageNode.addEventListener('mouseenter', () => clearTimeout(handle));
+        messageNode.addEventListener('mouseleave', () => handle = this._scheduleRemoval(messageNode, timeout));
+    }
+
+    _scheduleRemoval = (messageNode, timeout) => {
+        return setTimeout(() => {
+            messageNode.addEventListener('animationend', () => this.removeChild(messageNode));
+            messageNode.classList.add('gp-fadeout')
+        }, timeout);
     }
 });

assets/js/app.js

@@ -4,6 +4,13 @@ import '@tabler/core/dist/css/tabler.min.css'
 import '@tabler/core/dist/js/tabler.min.js'
 import '../css/app.css'
 
+window.fetch = (fetch => async (resource, options = {}) => {
+    return fetch(
+        resource,
+        {...options, headers: {...(options.headers || {}), 'X-Requested-With': 'XMLHttpRequest'}}
+    );
+})(window.fetch);
+
 window.app = {
     navigate: url => top.location.href = url,
     loadElements: node => Promise.allSettled([...node.querySelectorAll(':not(:defined)')]
@@ -22,6 +29,7 @@ window.app = {
     peInit() {
         if (!window.pe) return window.addEventListener('pe:init', window.app.peInit);
         window.app.navigate = window.pe.navigate;
+        window.pe.selectSource = window.pe.selectTarget = d => d.querySelector('[data-page-content]');
     }
 }
 

assets/js/pe.js

@@ -1,7 +1,8 @@
 function render(oldDocument, newDocument) {
     oldDocument.title = newDocument.title || oldDocument.title;
-    oldDocument.body.replaceWith(newDocument.body);
-    [...oldDocument.body.getElementsByTagName('script')].forEach(n => {
+    const sourceNode = window.pe.selectSource(newDocument);
+    window.pe.selectTarget(oldDocument).replaceWith(sourceNode);
+    [...sourceNode.getElementsByTagName('script')].forEach(n => {
         const s = oldDocument.createElement('script');
         s.innerHTML = n.innerHTML;
         [...n.attributes].forEach(a => s.setAttribute(a.nodeName, a.nodeValue));
@@ -96,7 +97,13 @@ async function submit(form) {
     }
 }
 
-window.pe = {navigate: url => navigate(url, true), submit, abortController: new AbortController()};
+window.pe = {
+    navigate: url => navigate(url, true),
+    submit,
+    abortController: new AbortController(),
+    selectSource: d => d.body,
+    selectTarget: d => d.body
+};
 
 window.addEventListener('popstate', () => navigate(top.location.href, false));
 document.addEventListener('click', e => {

config/web-interface/config.yml

@@ -28,3 +28,8 @@ security:
                 - 'web-interface.security.arrival_authenticator'
             logout:
                 path: /logout
+
+when@dev:
+    services:
+        Gaming\WebInterface\Infrastructure\Symfony\ReplaceSymfonyToolbar:
+            tags: [{ name: kernel.event_listener, event: kernel.response }]

src/WebInterface/Infrastructure/Symfony/ReplaceSymfonyToolbar.php

@@ -0,0 +1,17 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Gaming\WebInterface\Infrastructure\Symfony;
+
+use Symfony\Component\HttpKernel\Event\ResponseEvent;
+
+final class ReplaceSymfonyToolbar
+{
+    public function onKernelResponse(ResponseEvent $event): void
+    {
+        if ($event->getRequest()->isXmlHttpRequest()) {
+            $event->getResponse()->headers->set('Symfony-Debug-Toolbar-Replace', '1');
+        }
+    }
+}

src/WebInterface/Presentation/Http/View/game.html.twig

@@ -1,4 +1,4 @@
-{% extends '@web-interface/layout/fluid.html.twig' %}
+{% extends '@web-interface/layout/condensed.html.twig' %}
 
 {% set page_title = 'Anonymous vs. Anonymous' %}
 

src/WebInterface/Presentation/Http/View/layout/base.html.twig

@@ -15,7 +15,7 @@
     <script type="module" src="{{ asset('js/pe.js') }}"></script>
     <script>window.matchMedia("(prefers-color-scheme:dark)").matches && document.documentElement.setAttribute('data-bs-theme', 'dark');</script>
 </head>
-<body class="{{ body_class is defined ? body_class : 'layout-fluid' }}">
+<body>
 <notification-list></notification-list>
 {% block body %}{% endblock %}
 </body>

src/WebInterface/Presentation/Http/View/layout/center-tight.html.twig

@@ -1,9 +1,7 @@
 {% extends '@web-interface/layout/base.html.twig' %}
 
-{% set body_class = 'd-flex flex-column' %}
-
 {% block body %}
-    <div class="page page-center">
+    <div class="page page-center" data-page-content>
         <div class="container container-tight">
             <p class="text-center fw-medium my-5">
                 <a href="{{ path('lobby') }}" class="link-secondary navbar-brand-autodark text-decoration-none">

…ntation/Http/View/layout/fluid.html.twig …ion/Http/View/layout/condensed.html.twigsrc/WebInterface/Presentation/Http/View/layout/fluid.html.twig renamed to src/WebInterface/Presentation/Http/View/layout/condensed.html.twig src/WebInterface/Presentation/Http/View/layout/fluid.html.twig renamed to src/WebInterface/Presentation/Http/View/layout/condensed.html.twig

@@ -1,9 +1,9 @@
 {% extends '@web-interface/layout/base.html.twig' %}
 
 {% block body %}
-    <div class="page">
+    <div class="page" data-page-content>
         <header class="navbar navbar-expand d-print-none sticky-top">
-            <div class="container-xl">
+            <div class="container-xxl">
                 <div class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-lg-1">
                     <a href="{{ path('lobby') }}">
                         <img src="{{ asset('img/logo.png') }}"
@@ -99,13 +99,13 @@
         </header>
         <div class="page-wrapper">
             <div class="page-body">
-                <div class="container">
+                <div class="container-xxl">
                     {% block content %}{% endblock %}
                 </div>
             </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-            <div class="container-xl">
+            <div class="container-xxl">
                 <div class="row text-center align-items-center flex-row-reverse">
                     <div class="col-lg-auto ms-lg-auto">
                         <ul class="list-inline list-inline-dots mb-0">