display toast when user adds/removes card

client/src/modules/DeckStateManager.js

@@ -1,5 +1,6 @@
 import { globals } from '../config/globals.js';
 import { HTMLFragments } from './HTMLFragments.js';
+import {toast} from "./Toast";
 
 export class DeckStateManager {
     constructor () {
@@ -39,6 +40,12 @@ export class DeckStateManager {
         );
     }
 
+    getQuantityOfRole(role) {
+        return this.deck.find(
+            (card) => card.role.toLowerCase().trim() === role.toLowerCase().trim()
+        )?.quantity;
+    }
+
     getDeckSize () {
         let total = 0;
         for (const role of this.deck) {
@@ -80,6 +87,15 @@ export class DeckStateManager {
                         const minusOneHandler = (e) => {
                             if (e.type === 'click' || e.code === 'Enter') {
                                 e.preventDefault();
+                                toast(
+                                    `<span class='toast-minus-one'>-1</span>`
+                                    + sortedDeck[i].role + ' (<span class="toast-minus-role-quantity">' + (sortedDeck[i].quantity - 1).toString() + '</span>)',
+                                    'neutral',
+                                    true,
+                                    true,
+                                    'short',
+                                    true
+                                );
                                 this.removeCopyOfCard(sortedDeck[i].role);
                                 this.updateDeckStatus();
                             }

client/src/modules/RoleBox.js

@@ -199,6 +199,15 @@ export class RoleBox {
                         } else {
                             this.deckManager.addCopyOfCard(name);
                         }
+                        toast(
+                            '<span class="toast-plus-one">+1 </span>'
+                            + name + ' (<span class="toast-plus-role-quantity">' + this.deckManager.getQuantityOfRole(name) + '</span>)',
+                            'neutral',
+                            true,
+                            true,
+                            'short',
+                            true
+                        );
                         this.deckManager.updateDeckStatus();
                     }
                 };

client/src/modules/Toast.js

@@ -1,10 +1,16 @@
-export const toast = (message, type, positionAtTop = true, dispelAutomatically = true, duration = null) => {
+export const toast = (
+    message,
+    type, positionAtTop = true,
+    dispelAutomatically = true,
+    duration = null,
+    innerHTML = false
+) => {
     if (message && type) {
-        buildAndInsertMessageElement(message, type, positionAtTop, dispelAutomatically, duration);
+        buildAndInsertMessageElement(message, type, positionAtTop, dispelAutomatically, duration, innerHTML);
     }
 };
 
-function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration) {
+function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration, innerHTML) {
     cancelCurrentToast();
     const messageEl = document.createElement('div');
     messageEl.classList.add('info-message');
@@ -20,6 +26,9 @@ function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutom
         case 'success':
             messageEl.classList.add('toast-success');
             break;
+        case 'neutral':
+            messageEl.classList.add('toast-neutral');
+            break;
     }
 
     switch (duration) {
@@ -47,7 +56,11 @@ function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutom
     }
 
     messageEl.setAttribute('id', 'current-info-message');
-    messageEl.innerText = message;
+    if (innerHTML) {
+        messageEl.innerHTML = message;
+    } else {
+        messageEl.innerText = message;
+    }
 
     document.body.prepend(messageEl);
 }

client/src/styles/GLOBAL.css

@@ -92,6 +92,11 @@ textarea {
     border: 3px solid #c78a8a;
 }
 
+.toast-neutral {
+    background-color: #dbdbdb;
+    border: 3px solid #c4c4c4;
+}
+
 .toast-dispel-automatically {
     animation: fade-in-slide-down-then-exit ease normal forwards;
 }
@@ -112,6 +117,30 @@ textarea {
     animation-duration: 8s;
 }
 
+.toast-plus-one {
+    color: #1c8a36;
+    font-weight: bold;
+    font-size: 20px;
+    margin-right: 5px;
+}
+
+.toast-minus-one {
+    font-size: 20px;
+    margin-right: 5px;
+    color: #e73333;
+    font-weight: bold;
+}
+
+.toast-plus-role-quantity {
+    color: #1c8a36;
+    font-weight: bold;
+}
+
+.toast-minus-role-quantity {
+    color: #e73333;
+    font-weight: bold;
+}
+
 #footer {
     bottom: 0;
     width: 100%;

client/src/styles/create.css

@@ -416,6 +416,11 @@ input[type="number"] {
     cursor: pointer;
     padding: 5px;
     border-radius: 3px;
+    border: 1px solid transparent;
+}
+
+#role-select img:active, #deck-status-container img:active {
+    border: 1px solid whitesmoke;
 }
 
 #role-select img:nth-child(4) {