Feat: add namecheck and tailwind css

components/base.html

@@ -6,6 +6,7 @@
 	<script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
 	<script src="/assets/htmx.min.js"></script>
 	<script src="/assets/htmx.sse.js"></script>
+        <script src="/assets/tailwind.css"></script>
 	<link rel="stylesheet" href="/assets/style.css"/>
 	<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1"/>
 	<link rel="icon" sizes="64x64" href="favicon.ico"/>

components/index.html

@@ -1,8 +1,17 @@
 {{define "main"}}
+	<!-- user has no username -> login form -->
+	{{ if eq .Username "" }}
 	{{template "login"}}
+	<!-- user has name but no room id => suggest to create room -->
+	{{ else if eq .Room.ID "" }}
+	<div id="hello-user">
+		<p>Hello {{.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>
 	</div>
-	<!-- check if user in the room -->
+	{{else}}
+	<!-- user has room id => send him to his room -->
 	{{template "room" .}}
 {{end}}
+{{end}}

components/namecheck.html

@@ -0,0 +1,17 @@
+{{define "namecheck"}}
+{{ if eq . 0 }}
+<div id="login_notice">this name looks available</div>
+{{ else if eq . 1 }}
+<a href="/">
+<div id="login_notice" class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" role="alert">
+  <p class="font-bold">Be Warned</p>
+  <p>This Name is already taken. You won't be able to login with it until other person leaves.</p>
+</div>
+</a>
+{{ else }}
+<div id="login_notice" class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" role="alert">
+  <p class="font-bold">Be Warned</p>
+  <p>This Name is already taken. You won't be able to login with it until other person leaves.</p>
+</div>
+{{end}}
+{{end}}

components/room.html

@@ -1,5 +1,8 @@
 {{define "room"}}
 <div class="flex h-screen">
+  <div id="hello-user">
+    <p>Hello {{.Username}}</p>
+  </div>
   <!-- Left Panel -->
   {{template "teampew" "blue"}}
   {{template "cardtable" .}}

components/teampew.html

@@ -4,12 +4,12 @@
 <form hx-post="/join-team" hx-target="#room-content">
     <input type="hidden" name="team" value="{{.}}">
   <div class="mb-2">
-    <button type="submit" name="role" value="guesser" class="w-full bg-blue-500 text-white py-2 px-4 rounded">
+      <button type="submit" name="role" value="guesser" class="w-full bg-{{.}}-500 text-white py-2 px-4 rounded">
       Join as Guesser
     </button>
   </div>
   <div>
-    <button type="submit" name="role" value="mime" class="w-full bg-blue-700 text-white py-2 px-4 rounded">
+      <button type="submit" name="role" value="mime" class="w-full bg-{{.}}-700 text-white py-2 px-4 rounded">
       Join as Mime
     </button>
   </div>