Enha: state to hold room_id instead of whole room

components/cardtable.html

@@ -2,7 +2,7 @@
   <!-- Center Panel -->
   <div class="flex justify-center">
     <div class="grid grid-cols-2 sm:grid-cols-5 gap-2">
-      {{range .Room.Cards}}
+      {{range .Cards}}
 	{{template "cardword" .}} 
       {{end}}
     </div>

components/index.html

@@ -1,11 +1,11 @@
 {{define "main"}}
 	<!-- user has no username -> login form -->
-	{{ if eq .Username "" }}
+	{{ if not . }}
 	{{template "login"}}
 	<!-- user has name but no room id => suggest to create room -->
-	{{ else if eq .Room.ID "" }}
+	{{ else if eq .State.RoomID "" }}
 	<div id="hello-user">
-		<p>Hello {{.Username}}</p>
+		<p>Hello {{.State.Username}}</p>
 	</div>
 	<div id="create-room" class="create-room-div">
 	    <button button id="create-form-btn" type="submit" class="justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" hx-get="/room/createform" hx-swap="outerHTML">SHOW ROOM CREATE FORM</button>

components/room.html

@@ -1,6 +1,6 @@
 {{define "room"}}
 <div id="hello-user">
-  <p>Hello {{.Username}}</p>
+  <p>Hello {{.State.Username}}</p>
 </div>
 <hr />
 <div class="flex justify-center">
@@ -11,6 +11,6 @@
 </div>
 <hr />
 <div id="cardtable">
-  {{template "cardtable" .}}
+  {{template "cardtable" .Room}}
 </div>
 {{end}}