feat: Paint kanji grid row background green on completion

src/Controller/KanjiController.php

@@ -109,10 +109,23 @@ class KanjiController extends AbstractController
     ): Response {
         $charInfo = $this->getCharInfo(force: $request->isNoCache());
 
+        $completedRows = [];
+        $completedFlag = true;
         $chars = [];
         foreach (range(intval("{$start}0", 16), intval("{$end}f", 16)) as $codepoint) {
             $charStr = mb_chr($codepoint, 'UTF-8');
 
+            if (
+                !key_exists('ignored', $charInfo[$charStr] ?? ['ignored' => 0])
+                and !key_exists('unicode', $charInfo[$charStr] ?? [])
+            ) {
+                $completedFlag = false;
+            }
+            if (($codepoint + 1) % 0x10 === 0) {
+                if ($completedFlag === true) $completedRows[] = dechex($codepoint - 0xf);
+                $completedFlag = true;
+            }
+
             $chars[] = [
                 'str'       => $charStr,
                 'codepoint' => dechex($codepoint),
@@ -122,6 +135,7 @@ class KanjiController extends AbstractController
 
         return $this->render(self::tmpl('grid'), [
             'characters' => $chars,
+            'completed'  => $completedRows,
         ]);
     }
 

templates/kanji/grid.html.twig

@@ -43,6 +43,7 @@
   .jimaku  { border-top:  3px solid lightgray     !important; }
 
   .none, .ignored { opacity: 0.15; }
+  .completed      { background-color: rgba(0 255 0 / 0.05); }
 </style>
 
 <div>
@@ -71,12 +72,18 @@
     </form>
   </div>
   <div
-    class="d-flex flex-wrap p-4"
+    class="pd-flex flex-column"
 
     hx-target="#baseModalContent"
     hx-swap="innerHTML"
   >
   {% for char in characters %}
+    {% if char.codepoint ends with '0' %}
+    <div class="
+      d-flex p-1 ps-3 pe-3
+      {{ char.codepoint in completed ? 'completed' : '' }}
+    ">
+    {% endif %}
     <div style="width: calc(100% / 16);">
     <div
       class="
@@ -129,6 +136,9 @@
       </div>
     </div>
     </div>
+    {% if char.codepoint ends with 'f' %}
+    </div>
+    {% endif %}
   {% endfor %}
   </div>
 </div>