German umlaut support if need

app/Livewire/CreateCode.php

@@ -8,6 +8,7 @@
 class CreateCode extends Component
 {
     public string $message;
+    private array $umlaute = ['ö', 'ä', 'ü', "ß"];
 
     protected array $symbols = [
         'enable',
@@ -36,18 +37,42 @@ class CreateCode extends Component
         'tools_power_drill',
         'nest_eco_leaf',
         'air_freshener',
+        'favorite',
+        'bolt',
+        'key',
+        'sunny',
+
     ];
 
     #[Computed(persist: true)]
     public function letters(): array
     {
         shuffle($this->symbols);
-
-        return collect(range('a', 'z'))
+        return collect([...range('a', 'z'), ...$this->umlaute])
             ->combine($this->symbols)
             ->toArray();
     }
 
+    /**
+     * Display german umlaut only if present in the message
+     */
+    public function legendLetters(string $message): array
+    {
+
+        if (count(array_intersect(mb_str_split($message), $this->umlaute)) == 0) {
+            return array_filter($this->letters, function ($key) {
+                return !in_array($key, $this->umlaute);
+            }, ARRAY_FILTER_USE_KEY);
+        }
+
+        // get uppercase ß
+        $letters = $this->letters;
+        $letters['ẞ'] = $letters["ß"];
+        unset($letters['ß']);
+
+        return $letters;
+    }
+
     public function render()
     {
         return view('livewire.create-code');

resources/views/components/code.blade.php

@@ -6,10 +6,10 @@
 <div {{ $attributes->class(['text-center flex flex-wrap gap-8 mt-auto']) }}>
     @foreach(array_filter(explode(' ', trim($message))) as $word)
         <div class="word flex flex-wrap gap-2">
-            @foreach(str_split($word) as $character)
+            @foreach(mb_str_split($word) as $character)
                 <div>
                      <span class="material-symbols-outlined character !text-4xl">
-                        {{ $letters[strtolower($character)] ?? $character }}
+                        {{ $letters[mb_strtolower($character)] ?? $character }}
                     </span>
 
                     <div class="bg-gray-200 w-12 h-12"></div>

resources/views/components/legend.blade.php

@@ -3,7 +3,7 @@
 <div class="flex flex-wrap mt-auto">
     @foreach ($letters as $letter => $symbol)
         <div class="flex flex-col items-center border border-white/10 print:border-gray-400 p-2">
-            <span class="mb-2 font-bold">{{ ucwords($letter) }}</span>
+            <span class="mb-2 font-bold">{{ mb_convert_case($letter, MB_CASE_UPPER) }}</span>
             <span class="material-symbols-outlined character">{{ $symbol }}</span>
         </div>
     @endforeach

resources/views/livewire/create-code.blade.php

@@ -11,6 +11,6 @@ class="bg-white/10 text-white py-2 px-3 rounded-xl w-full"></textarea>
     <x-code :message="$message" :letters="$this->letters"/>
 
     @if ($message)
-        <x-legend :letters="$this->letters" />
+        <x-legend :letters="$this->legendLetters($message)" />
     @endif
 </div>