Feat: components chain

components/room.html

@@ -18,28 +18,7 @@
       </div>
     </form>
   </div>
-
-  <!-- Center Panel -->
-  <div class="w-1/2 p-4 flex justify-center">
-    <div class="grid grid-cols-5 gap-2">
-      {{range .Room.Cards}}
-        <div class="border p-2 text-center rounded" 
-             style="background-color: {{if eq .Color "white"}}#ffffff{{else if eq .Color "blue"}}#0000ff{{else if eq .Color "red"}}#ff0000{{else if eq .Color "black"}}#000000{{else if eq .Color "beige"}}#f5f5dc{{else}}#f5f5dc{{end}};">
-          {{if .Revealed}}
-            {{.Word}}
-          {{else}}
-            <button hx-post="/reveal-card" 
-                    hx-target="#room-content"
-                    hx-include="form"
-                    class="w-full h-full flex items-center justify-center">
-              ?
-            </button>
-          {{end}}
-        </div>
-      {{end}}
-    </div>
-  </div>
-
+  {{template "cardtable" .}}
   <!-- Right Panel -->
   <div class="w-1/4 p-4">
     <h2 class="text-xl mb-4">Join Red Team</h2>