From 41de2dc8f27fb5d072945c1928dd3b4542be8036 Mon Sep 17 00:00:00 2001
From: Johan Sydseter <johan.sydseter@admincontrol.com>
Date: Mon, 10 Feb 2025 21:26:09 +0100
Subject: [PATCH 1/2] Correcting the mobile mapping for the card preview

---
 .../src/lib/components/mobileAppCardMapping.svelte         | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/cornucopia.owasp.org/src/lib/components/mobileAppCardMapping.svelte b/cornucopia.owasp.org/src/lib/components/mobileAppCardMapping.svelte
index c2f26cfed..01905cf75 100644
--- a/cornucopia.owasp.org/src/lib/components/mobileAppCardMapping.svelte
+++ b/cornucopia.owasp.org/src/lib/components/mobileAppCardMapping.svelte
@@ -13,13 +13,12 @@
     }
 
 </script>
-        <p class="mapping-title{mappingStyle}">OWASP ASVS</p>
+        <p class="mapping-title{mappingStyle}">OWASP MASVS</p>
         <p class="mapping-value{mappingStyle}">{mapping.owasp_masvs || '-'}</p>
-        <p class="mapping-title{mappingStyle}">OWASP AppSensor</p>
+        <p class="mapping-title{mappingStyle}">OWASP MASTG</p>
         <p class="mapping-value{mappingStyle}">{mapping.owasp_mastg || '-'}</p>
         <p class="mapping-title{mappingStyle}">CAPEC</p>
-        <p class="mapping-value{mappingStyle}">{mapping.owasp_capec || '-'}</p>        
-        <p class="mapping-title{mappingStyle}">SAFECODE</p>
+        <p class="mapping-value{mappingStyle}">{mapping.owasp_capec || '-'}</p>
 <style>
     .mapping-title, .mapping-value
     {

From 6eb3cd039cb206b7bc69ab8fcc50ef2f3936e548 Mon Sep 17 00:00:00 2001
From: Johan Sydseter <johan.sydseter@admincontrol.com>
Date: Mon, 10 Feb 2025 22:08:23 +0100
Subject: [PATCH 2/2] Fix the colors for J,Q,K for all suits and correct the
 mobile mapping description

---
 .../src/lib/components/cardPreview.svelte     | 81 ++++++++++++++++---
 1 file changed, 72 insertions(+), 9 deletions(-)

diff --git a/cornucopia.owasp.org/src/lib/components/cardPreview.svelte b/cornucopia.owasp.org/src/lib/components/cardPreview.svelte
index 21d3e6c34..9ed58d988 100644
--- a/cornucopia.owasp.org/src/lib/components/cardPreview.svelte
+++ b/cornucopia.owasp.org/src/lib/components/cardPreview.svelte
@@ -23,6 +23,15 @@
         return cardColor?.get(suit) ?? "";
     }
 
+    function getRoyalSuitColor(suit : string, id: string, value: string)
+    {
+        if (!cardColor?.get(suit)) return 'white';
+        if (!['J', 'Q', 'K', 'A', 'B'].includes(value)) return 'white';
+        suit = cardColor?.get(suit) + '-royal';
+        if (['CRM', 'CM', 'WC'].includes(id)) suit = suit + '-mobile';
+        return suit;
+    }
+
     function getTextColor(suit : string, id: string)
     {
         if (['CRM', 'CM', 'WC'].includes(id)) suit = suit + '-mobile';
@@ -31,26 +40,26 @@
 </script>
 
 <div class="card-render">
-    <div class="left {getSuitColor(card.suit, card?.suitId)}">
+    <div class="left {getSuitColor(card?.suit, card?.suitId)}">
         <span class="property-card-suit{previewStyle}">{card?.suitName}</span>
     </div>
-    <div class="right">
+    <div class="right {getRoyalSuitColor(card?.suit, card?.suitId, card?.value)}">
         
         {#if mapping}
-        <span class="property-card-number{previewStyle} {getTextColor(card.suit, card?.suitId)}-text">{card?.card ?? card?.value}</span>
-        <p class="property-card-description{previewStyle}">{card.desc}</p>
-            {#if card.edition == 'webapp' && card.value != 'A' && card.value != 'B'}
+        <span class="property-card-number{previewStyle} {getTextColor(card?.suit, card?.suitId)}-text">{card?.card ?? card?.value}</span>
+        <p class="property-card-description{previewStyle}">{card?.desc}</p>
+            {#if card?.edition == 'webapp' && card?.value != 'A' && card?.value != 'B'}
                 <WebAppCardMapping {mapping} {style}></WebAppCardMapping>
             {/if}
-            {#if card.edition == 'mobileapp' && card.value != 'A' && card.value != 'B'}
+            {#if card?.edition == 'mobileapp' && card?.value != 'A' && card?.value != 'B'}
                 <MobileAppCardMapping {mapping}  {style}></MobileAppCardMapping>
             {/if}
-        {:else if card.suitName == 'WILD CARD'}
+        {:else if card?.suitName == 'WILD CARD'}
         <h1 class="property-card-number {getSuitColor(card.suit, card?.suitId)}">Joker</h1>
         <p class="property-card-description{previewStyle}">{card.desc}</p>
         {:else}
-        <h1 class="property-card-number {getSuitColor(card.suit, card?.suitId)}">{card?.value}</h1>
-        <p class="property-card-description{previewStyle}">{card.desc}</p>
+        <h1 class="property-card-number {getSuitColor(card?.suit, card?.suitId)}">{card?.value}</h1>
+        <p class="property-card-description{previewStyle}">{card?.desc}</p>
         {/if}
     </div>
 </div>
@@ -248,6 +257,60 @@
         color: rgb(10,58,94);
     }
 
+    .white {
+        background-color: white;
+    }
+
+    .authentication-royal {
+        background-color: #d3e4ed;
+    }
+    .authorization-royal {
+        background-color: #eee6c6;
+    }
+    .data-validation-and-encoding-royal {
+        background-color: #dfdfe0;
+    }
+    .cornucopia-royal {
+        background-color: #ced8df;
+    }
+    .session-management-royal {
+        background-color: #ddedd9;
+    }
+    .cryptography-royal {
+        background-color: #dbd8eb;
+    }
+    .wild-card-royal {
+        background-color: #fee9d8;
+    }
+    .wild-card-royal-mobile {
+        background: rgb(255,230,209);
+        background: linear-gradient(90deg, rgba(255,230,209,0.7) 0%, rgba(251,182,124,0.7) 100%);
+    }
+    .platform-and-code-royal {
+        background: rgb(95,172,211);
+        background: linear-gradient(90deg, rgba(95,172,211,0.5) 0%, rgba(79,185,145,0.5) 100%);
+    }
+    .authentication-and-authorization-royal {
+        background: rgb(240,179,98);
+        background: linear-gradient(90deg, rgba(240,179,98,0.5) 0%, rgba(240,156,44,0.5) 100%);
+    }
+    .network-and-storage-royal {
+        background: rgb(223,92,141);
+        background: linear-gradient(90deg, rgba(223,92,141,0.5) 0%, rgba(242,194,0,0.5) 100%);
+    }
+    .resilience-royal {
+        background: rgb(79,138,192);
+        background: linear-gradient(90deg, rgba(79,138,192,0.5) 0%, rgba(49,124,192,0.5) 100%);
+    }
+    .cryptography-royal-mobile {
+        background: rgb(246,135,101);
+        background: linear-gradient(90deg, rgba(246,135,101,0.5) 0%, rgba(246,89,40,0.5) 100%);
+    }
+    .cornucopia-royal-mobile {
+        background: rgb(39,70,94);
+        background: linear-gradient(90deg, rgba(39,70,94,0.2) 0%, rgba(10,58,94,0.2) 100%);
+    }
+
     @media (max-aspect-ratio: 1.5/1)
     {
         .card-render