Feat: roomlist & join room

components/index.html

@@ -10,10 +10,13 @@
 	<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>
 	</div>
+	<div>
+	{{template "roomlist" .List}}
+	</div>
 	{{else}}
-	<!-- user has room id => send him to his room -->
+	<!-- instead of having room div; better to replace ancestor completely with room -->
 	<div id="room">
 	{{template "room" .}}
 	</div>
-{{end}}
+	{{end}}
 {{end}}

components/roomlist.html

@@ -0,0 +1,27 @@
+{{define "roomlist"}}
+<div id="roomlist">
+{{range .}}
+<p>
+    {{.ID}}
+</p>
+<div class="room-item mb-3 p-4 border rounded-lg hover:bg-gray-50 transition-colors">
+    <div class="flex justify-between items-center">
+        <div hx-get="/room-join?id={{.ID}}" hx-target="#ancestor" class="room-info">
+            <div class="text-sm text-gray-500">
+                Created {{.CreatedAt.Format "2 Jan 2006 15:04"}} by 
+                <span class="font-medium text-gray-700">{{.CreatorName}}</span>
+            </div>
+            <div class="mt-1 flex items-center gap-3">
+                <span class="px-2 py-1 text-xs font-medium rounded-full {{if .IsGameRunning}}bg-green-100 text-green-800{{else}}bg-gray-100 text-gray-600{{end}}">
+                    {{if .IsRunning}}Game Active{{else}}Waiting Room{{end}}
+                </span>
+                <!-- <span class="text-sm text-gray-600"> -->
+                <!--     {{.PlayersCount}} player{{if ne .PlayersCount 1}}s{{end}} -->
+                <!-- </span> -->
+            </div>
+        </div>
+    </div>
+</div>
+{{end}}
+</div>
+{{end}}