From 3c97bc3a6a21d2eba4b93306b4ab680f8b7ef951 Mon Sep 17 00:00:00 2001
From: Europano <vincent.benoit@mailo.com>
Date: Thu, 20 Mar 2025 21:41:52 +0100
Subject: [PATCH] Display levels 7 & 8, shifting dk to the left on AltGr

---
 src/content.js | 18 +++++++++++++++---
 src/style.js   | 16 +++++++++++-----
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/content.js b/src/content.js
index a009b1f..8450b53 100644
--- a/src/content.js
+++ b/src/content.js
@@ -145,14 +145,22 @@ export function drawKey(element, keyMap) {
     ${keyLevel(4, salt,  { x: 0.70, y: 0.41 })}
     ${keyLevel(5, '',    { x: 0.70, y: 0.79 })}
     ${keyLevel(6, '',    { x: 0.70, y: 0.41 })}
+    ${keyLevel(7, '',    { x: 0.70, y: 0.79 })}
+    ${keyLevel(8, '',    { x: 0.70, y: 0.41 })}
   `;
 }
 
 export function drawDK(element, keyMap, deadKey) {
   const drawChar = (element, content) => {
     if (isDeadKey(content)) {
-      element.classList.add('deadKey', 'diacritic');
-      element.textContent = content[1];
+      let symbol = dkSymbols[content] || '';
+      symbol = symbol || (content || '').slice(-1);
+      element.textContent = symbol;
+      if(symbol.startsWith(' ')){
+        element.classList.add('deadKey', 'diacritic');
+      } else {
+        element.classList.add('deadKey');
+      }
     } else {
       element.classList.remove('deadKey', 'diacritic');
       element.textContent = content || '';
@@ -164,9 +172,13 @@ export function drawDK(element, keyMap, deadKey) {
 
   const alt0 = deadKey[keyChars[0]];
   const alt1 = deadKey[keyChars[1]];
+  const alt2 = deadKey[keyChars[2]];
+  const alt3 = deadKey[keyChars[3]];
 
   drawChar(element.querySelector('.level5'), alt0);
-  drawChar(element.querySelector('.level6'), altUpperChar(alt0, alt1));
+  drawChar(element.querySelector('.level6'), isDeadKey(alt1) ? alt1 : altUpperChar(alt0, alt1));
+  drawChar(element.querySelector('.level7'), alt2);
+  drawChar(element.querySelector('.level8'), isDeadKey(alt3) ? alt3 : altUpperChar(alt2, alt3));
 }
 
 /**
diff --git a/src/style.js b/src/style.js
index d359e1b..c5547b2 100644
--- a/src/style.js
+++ b/src/style.js
@@ -267,7 +267,7 @@ const themes = `
 
   /* dimmed AltGr + bold dead keys */
   .level3, .level4 { fill: ${KEY_COLOR_L3}; opacity: .5; }
-  .level5, .level6 { fill: ${KEY_COLOR_L5}; }
+  .level5, .level6, .level7, .level8 { fill: ${KEY_COLOR_L5}; }
   .deadKey {
     fill: ${DEAD_KEY_COLOR};
     font-size: 14px;
@@ -284,10 +284,16 @@ const themes = `
   /* highlight AltGr + Dead Keys */
   .dk .level1, .altgr .level1,
   .dk .level2, .altgr .level2 { opacity: 0.25; }
-  .dk .level5, .altgr .level3,
-  .dk .level6, .altgr .level4 { opacity: 1; }
-  .dk .level3,
-  .dk .level4 { display: none; }
+  .altgr .level3, .altgr .level4 { opacity: 1; }
+  .dk .level3, .dk .level4 { display: none; }
+
+  /* shift dead keys to the left when AltGr is pressed */
+  .level5, .level6 { transform: translate(0); }
+  .level7, .level8 { transform: translate(1.2em); opacity: 0; }
+  .dk .level5, .dk .level6 { transform: translate(0); transition-duration: 0.3s; }
+  .altgr .level5, .altgr .level6 { transform: translate(-1.2em); transition-duration: 0.3s; }
+  .dk .level7, .dk .level8 { opacity: 0; transform: translate(1.2em); transition-duration: 0.3s; }
+  .altgr .level7, .altgr .level8 { opacity: 1; transform: translate(0); transition-duration: 0.3s; }
 
   @media (prefers-color-scheme: dark) {
     rect, path { stroke: #777; fill: #444; }