Added notification log

src/css/ingame_hud/notifications.scss

@@ -1,7 +1,58 @@
 #ingame_HUD_Notifications {
     position: absolute;
+    display: flex;
+    flex-direction: column-reverse;
     @include S(bottom, 60px);
     @include S(right, 10px);
+    @include S(width, 196px);
+    @include S(max-height, 200px);
+    @include S(padding, 3px);
+    @include S(border-radius, $globalBorderRadius);
+    transition: 0.3s;
+
+    &:hover {
+        pointer-events: all;
+        overflow-y: scroll;
+        overflow-x: hidden;
+        background-color: rgba(#333438, 0.5);
+        &::-webkit-scrollbar {
+            width: 3px;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: rgba(#333438, 0.8);
+        }
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        .notification {
+            opacity: 1;
+        }
+
+        #notificationHover {
+            min-height: 0;
+            padding: 0;
+            margin: 0;
+        }
+
+        #notificationPadding {
+            padding-top: 1px;
+        }
+    }
+
+    #notificationHover {
+        display: block;
+        position: relative;
+        opacity: 0;
+        background: transparent;
+        @include S(margin, 3px, 0px, 0px, 0px);
+        @include S(padding, 7px, 10px);
+        @include S(width, 175px);
+        @include S(min-height, 13px);
+        transform-origin: 100% 50%;
+        box-sizing: content-box;
+        pointer-events: all;
+        transition: 0.3s;
+    }
 
     .notification {
         background: rgba(#333438, 0.8);
@@ -26,6 +77,8 @@
 
         transform-origin: 100% 50%;
         opacity: 0;
+        transition: 0.3s;
+        animation-iteration-count: 1;
         @include InlineAnimation(3s ease-in-out) {
             0% {
                 opacity: 1;

src/js/game/hud/parts/notifications.js

@@ -2,6 +2,25 @@ import { makeDiv } from "../../../core/utils";
 import { T } from "../../../translations";
 import { BaseHUDPart } from "../base_hud_part";
 
+function makeDivElement(id = null, classes = [], innerHTML = "") {
+    const div = document.createElement("div");
+    if (id) {
+        div.id = id;
+    }
+    for (let i = 0; i < classes.length; ++i) {
+        div.classList.add(classes[i]);
+    }
+    div.innerHTML = innerHTML;
+    return div;
+}
+
+function makeDivAfter(sibling, id = null, classes = [], innerHTML = "") {
+    const div = makeDivElement(id, classes, innerHTML);
+    if (sibling.nextElementSibling) sibling.parentNode.insertBefore(div, sibling.nextElementSibling);
+    else sibling.parentNode.appendChild(div);
+    return div;
+}
+
 /** @enum {string} */
 export const enumNotificationType = {
     saved: "saved",
@@ -14,6 +33,13 @@ const notificationDuration = 3;
 export class HUDNotifications extends BaseHUDPart {
     createElements(parent) {
         this.element = makeDiv(parent, "ingame_HUD_Notifications", [], ``);
+
+        this.hoverElement = makeDiv(this.element, "notificationHover");
+        this.hoverElement.style.minHeight = "0";
+        this.hoverElement.style.padding = "0";
+        this.hoverElement.style.margin = "0";
+
+        this.paddingElement = makeDiv(this.element, "notificationPadding");
     }
 
     initialize() {
@@ -22,6 +48,8 @@ export class HUDNotifications extends BaseHUDPart {
         /** @type {Array<{ element: HTMLElement, expireAt: number}>} */
         this.notificationElements = [];
 
+        this.visibleNotificationElements = [];
+
         // Automatic notifications
         this.root.signals.gameSaved.add(() =>
             this.onNotification(T.ingame.notifications.gameSaved, enumNotificationType.saved)
@@ -33,22 +61,24 @@ export class HUDNotifications extends BaseHUDPart {
      * @param {enumNotificationType} type
      */
     onNotification(message, type) {
-        const element = makeDiv(this.element, null, ["notification", "type-" + type], message);
+        const element = makeDivAfter(this.hoverElement, null, ["notification", "type-" + type], message);
         element.setAttribute("data-icon", "icons/notification_" + type + ".png");
 
-        this.notificationElements.push({
+        const notification = {
             element,
             expireAt: this.root.time.realtimeNow() + notificationDuration,
-        });
+        };
+
+        if (this.hoverElement.hasAttribute("style")) this.hoverElement.removeAttribute("style");
+        this.visibleNotificationElements.push(this.notificationElements.push(notification) - 1);
     }
 
     update() {
         const now = this.root.time.realtimeNow();
-        for (let i = 0; i < this.notificationElements.length; ++i) {
+        for (let i = 0; i < this.visibleNotificationElements.length; ++i) {
-            const handle = this.notificationElements[i];
+            const handle = this.notificationElements[this.visibleNotificationElements[i]];
             if (handle.expireAt <= now) {
-                handle.element.remove();
+                this.visibleNotificationElements.splice(i, 1);
-                this.notificationElements.splice(i, 1);
             }
         }
     }