Enha: front padding

components/addbotbtn.html

@@ -3,29 +3,29 @@
 <div>
   {{$botName = .Room.FindBotByTeamRole "blue" "mime"}}
   {{ if eq .Room.BlueTeam.Mime "" }}
-  <button hx-get="/add-bot?team=blue&role=mime" hx-target="#addbot" class="bg-blue-400 text-black px-4 py-2 rounded">Add Bot Mime</button>
+  <button hx-get="/add-bot?team=blue&role=mime" hx-target="#addbot" class="bg-blue-400 text-black px-1 py-1 rounded">Add Bot Mime</button>
   {{ else if ne $botName "" }}
-  <button hx-get="/remove-bot?bot={{$botName}}" hx-target="#addbot" class="bg-blue-400 text-black px-4 py-2 rounded">Remove {{$botName}}</button>
+  <button hx-get="/remove-bot?bot={{$botName}}" hx-target="#addbot" class="bg-blue-400 text-black px-1 py-1 rounded">Remove {{$botName}}</button>
   {{ end }}
   {{$botName = .Room.FindBotByTeamRole "red" "mime"}}
   {{ if eq .Room.RedTeam.Mime "" }}
-  <button hx-get="/add-bot?team=red&role=mime" hx-target="#addbot" class="bg-red-400 text-black px-4 py-2 rounded">Add Bot Mime</button>
+  <button hx-get="/add-bot?team=red&role=mime" hx-target="#addbot" class="bg-red-400 text-black px-1 py-1 rounded">Add Bot Mime</button>
   {{ else if ne $botName "" }}
-  <button hx-get="/remove-bot?bot={{$botName}}" hx-target="#addbot" class="bg-red-400 text-black px-4 py-2 rounded">Remove {{$botName}}</button>
+  <button hx-get="/remove-bot?bot={{$botName}}" hx-target="#addbot" class="bg-red-400 text-black px-1 py-1 rounded">Remove {{$botName}}</button>
   {{ end }}
 </div>
   {{$botName = .Room.FindBotByTeamRole "blue" "guesser"}}
 <div>
   {{ if not .Room.BlueTeam.Guessers }}
-  <button hx-get="/add-bot?team=blue&role=guesser" hx-target="#addbot" class="bg-blue-300 text-black px-4 py-2 rounded">Add Bot Guesser</button>
+  <button hx-get="/add-bot?team=blue&role=guesser" hx-target="#addbot" class="bg-blue-300 text-black px-1 py-1 rounded">Add Bot Guesser</button>
   {{ else if ne $botName "" }}
-  <button hx-get="/remove-bot?bot={{$botName}}" hx-target="#addbot" class="bg-blue-300 text-black px-4 py-2 rounded">Remove {{$botName}}</button>
+  <button hx-get="/remove-bot?bot={{$botName}}" hx-target="#addbot" class="bg-blue-300 text-black px-1 py-1 rounded">Remove {{$botName}}</button>
   {{ end }}
   {{$botName = .Room.FindBotByTeamRole "red" "guesser"}}
   {{ if not .Room.RedTeam.Guessers }}
-  <button hx-get="/add-bot?team=red&role=guesser" hx-target="#addbot" class="bg-red-300 text-black px-4 py-2 rounded">Add Bot Guesser</button>
+  <button hx-get="/add-bot?team=red&role=guesser" hx-target="#addbot" class="bg-red-300 text-black px-1 py-1 rounded">Add Bot Guesser</button>
   {{ else if ne $botName "" }}
-  <button hx-get="/remove-bot?bot={{$botName}}" hx-target="#addbot" class="bg-red-300 text-black px-4 py-2 rounded">Remove {{$botName}}</button>
+  <button hx-get="/remove-bot?bot={{$botName}}" hx-target="#addbot" class="bg-red-300 text-black px-1 py-1 rounded">Remove {{$botName}}</button>
   {{ end }}
 </div>
 {{end}}

components/playerlist.html

@@ -1,13 +1,14 @@
 {{define "teamlist"}}
-<div class="playerlist border border-gray-300 text-{{.Color}}-500 rounded mb-2">
-    <p class=border>Guessers</p>
-{{range .Guessers}}
-    <p>{{.}}</p>
-{{end}}
-</div>
-<hr />
-<div class="playerlist border border-gray-300 rounded mb-2 text-{{.Color}}-700">
-    <p class=border>Mime</p>
-    <p>{{.Mime}}</p>
+<div>
+  <div class="playerlist border border-gray-300 text-{{.Color}}-500 rounded mb-2">
+      <p class="border">Guessers</p>
+  {{range .Guessers}}
+      <p>{{.}}</p>
+  {{end}}
+  </div>
+  <div class="playerlist border border-gray-300 rounded mb-2 text-{{.Color}}-700">
+      <p class="border">Mime</p>
+      <p>{{.Mime}}</p>
+  </div>
 </div>
 {{end}}

components/room.html

@@ -37,7 +37,7 @@
       {{template "addbot" .}}
     {{end}}
   </div>
-  <div class="flex justify-center">
+  <div class="flex justify-center space-x-4">
     <!-- Left Panel -->
     {{template "teamlist" .Room.BlueTeam}}
     {{if not .Room.IsRunning}}

components/teampew.html

@@ -1,44 +1,46 @@
 {{define "teampew"}}
-<div>
-<h2 class="text-xl mb-4">Join Blue Team</h2>
-<form hx-post="/join-team" hx-target="#ancestor">
-    <input type="hidden" name="team" value="blue">
-  <div class="mb-1">
-    {{if and (eq .State.Role "guesser") (eq .State.Team "blue")}}
-    {{else}}
-      <button type="submit" name="role" value="guesser" class="w-full bg-blue-500 text-white py-2 px-4 rounded">
-      Join as Guesser
-    </button>
-    {{end}}
-  </div>
-  {{if eq .Room.BlueTeam.Mime ""}}
+<div class="space-y-4">
   <div>
-      <button type="submit" name="role" value="mime" class="w-full bg-blue-700 text-white py-2 px-4 rounded">
-      Join as Mime
-    </button>
+    <h2 class="text-xl mb-4">Join Blue Team</h2>
+    <form hx-post="/join-team" hx-target="#ancestor">
+        <input type="hidden" name="team" value="blue">
+      <div class="mb-1">
+        {{if and (eq .State.Role "guesser") (eq .State.Team "blue")}}
+        {{else}}
+          <button type="submit" name="role" value="guesser" class="w-full bg-blue-500 text-white py-1 px-2 rounded">
+          Join as Guesser
+        </button>
+        {{end}}
+      </div>
+      {{if eq .Room.BlueTeam.Mime ""}}
+      <div>
+          <button type="submit" name="role" value="mime" class="w-full bg-blue-700 text-white py-1 px-2 rounded">
+          Join as Mime
+        </button>
+      </div>
+      {{end}}
+    </form>
   </div>
-  {{end}}
-</form>
-</div>
-<div>
-<h2 class="text-xl mb-4">Join Red Team</h2>
-<form hx-post="/join-team" hx-target="#ancestor">
-    <input type="hidden" name="team" value="red">
-  <div class="mb-1">
-    {{if and (eq .State.Role "guesser") (eq .State.Team "red")}}
-    {{else}}
-      <button type="submit" name="role" value="guesser" class="w-full bg-red-500 text-white py-2 px-4 rounded">
-      Join as Guesser
-    </button>
-    {{end}}
-  </div>
-  {{if eq .Room.RedTeam.Mime ""}}
   <div>
-      <button type="submit" name="role" value="mime" class="w-full bg-red-700 text-white py-2 px-4 rounded">
-      Join as Mime
-    </button>
+    <h2 class="text-xl mb-4">Join Red Team</h2>
+    <form hx-post="/join-team" hx-target="#ancestor">
+        <input type="hidden" name="team" value="red">
+      <div class="mb-1">
+        {{if and (eq .State.Role "guesser") (eq .State.Team "red")}}
+        {{else}}
+          <button type="submit" name="role" value="guesser" class="w-full bg-red-500 text-white py-1 px-2 rounded">
+          Join as Guesser
+        </button>
+        {{end}}
+      </div>
+      {{if eq .Room.RedTeam.Mime ""}}
+      <div>
+          <button type="submit" name="role" value="mime" class="w-full bg-red-700 text-white py-1 px-2 rounded">
+          Join as Mime
+        </button>
+      </div>
+      {{end}}
+    </form>
   </div>
-  {{end}}
-</form>
 </div>
 {{end}}