Enha: split onto more templates
This commit is contained in:
		
							
								
								
									
										2
									
								
								Makefile
									
									
									
									
									
								
							
							
						
						
									
										2
									
								
								Makefile
									
									
									
									
									
								
							| @@ -32,4 +32,4 @@ stop-container: | ||||
| 	docker rm -f golias 2>/dev/null && echo "old container removed" | ||||
|  | ||||
| run-container: stop-container | ||||
| 	docker run --name=golias -v $(CURDIR)/store.json:/root/store.json -p 0.0.0.0:9000:9000 -d golias:master | ||||
| 	docker run --name=golias -v $(CURDIR)/store.json:/root/store.json -p 0.0.0.0:3000:3000 -d golias:master | ||||
|   | ||||
							
								
								
									
										49
									
								
								components/base.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										49
									
								
								components/base.html
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,49 @@ | ||||
| {{define "base"}} | ||||
| <!DOCTYPE html> | ||||
| <html lang="en"> | ||||
| <head> | ||||
| 	<title>Alias</title> | ||||
| 	<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> | ||||
| 	<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"/> | ||||
| 	<style type="text/css"> | ||||
| 		body{ | ||||
|             background-color: #0C1616FF; | ||||
|             color: #8896b2; | ||||
|             max-width: 800px; | ||||
|             min-width: 0; | ||||
|             margin: 2em auto !important; | ||||
|             margin-left: auto; | ||||
|             margin-right: auto; | ||||
|             line-height: 1.5; | ||||
|             font-size: 16px; | ||||
|             font-family: Open Sans,Arial; | ||||
|             text-align: center; | ||||
|             display: block; | ||||
|         } | ||||
|         a{ | ||||
|             color: #00a2e7; | ||||
|         } | ||||
|         a:visited{ | ||||
|             color: #ca1a70; | ||||
|         } | ||||
|         table { | ||||
|           border-collapse: separate !important; | ||||
|           border-spacing: 10px 10px; | ||||
|           border: 1px solid white; | ||||
|         } | ||||
|         tr{ | ||||
|             border: 1px solid white; | ||||
|         } | ||||
| 	</style> | ||||
| </head> | ||||
| <body> | ||||
| <div id=ancestor> | ||||
| 	{{template "main" .}} | ||||
| </div> | ||||
| </body> | ||||
| </html> | ||||
| {{end}} | ||||
| @@ -1,72 +1,8 @@ | ||||
| {{define "main"}} | ||||
| <!DOCTYPE html> | ||||
| <html lang="en"> | ||||
| <head> | ||||
| 	<title>Word Colors</title> | ||||
| 	<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> | ||||
| 	<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"/> | ||||
| 	<style type="text/css"> | ||||
| 		body{ | ||||
|             background-color: #0C1616FF; | ||||
|             color: #8896b2; | ||||
|             max-width: 800px; | ||||
|             min-width: 0; | ||||
|             margin: 2em auto !important; | ||||
|             margin-left: auto; | ||||
|             margin-right: auto; | ||||
|             line-height: 1.5; | ||||
|             font-size: 16px; | ||||
|             font-family: Open Sans,Arial; | ||||
|             text-align: center; | ||||
|             display: block; | ||||
|         } | ||||
|         a{ | ||||
|             color: #00a2e7; | ||||
|         } | ||||
|         a:visited{ | ||||
|             color: #ca1a70; | ||||
|         } | ||||
|         table { | ||||
|           border-collapse: separate !important; | ||||
|           border-spacing: 10px 10px; | ||||
|           border: 1px solid white; | ||||
|         } | ||||
|         tr{ | ||||
|             border: 1px solid white; | ||||
|         } | ||||
| 	</style> | ||||
| </head> | ||||
| <body> | ||||
| <div id=ancestor> | ||||
| 	{{template "login"}} | ||||
| 	<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 --> | ||||
| 	{{template "room" .}} | ||||
| 	<!-- <h1>Word Color Cards</h1> --> | ||||
| 	<!-- <div style="display: flex; gap: 1rem; flex-wrap: wrap; padding: 1rem;"> --> | ||||
| 	<!-- 	{{range $word, $color := .}} --> | ||||
| 	<!-- 	<div id="card-{{$word}}" class="slide-it" style=" --> | ||||
| 	<!-- 		background-color: beige; --> | ||||
| 	<!-- 		padding: 1rem; --> | ||||
| 	<!-- 		border-radius: 8px; --> | ||||
| 	<!-- 		box-shadow: 0 2px 4px rgba(0,0,0,0.2); --> | ||||
| 	<!-- 		min-width: 100px; --> | ||||
| 	<!-- 		text-align: center; --> | ||||
| 	<!-- 		color: white; --> | ||||
| 	<!-- 		text-shadow: 0 2px 4px rgba(0,0,0,0.8); --> | ||||
| 	<!-- 		cursor: pointer;" --> | ||||
| 	<!-- 		hx-get="/word/show-color?word={{$word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.2s"> --> | ||||
| 	<!-- 		{{$word}} --> | ||||
| 	<!-- 	</div> --> | ||||
| 	<!-- 	{{end}} --> | ||||
| 	<!-- </div> --> | ||||
| </div> | ||||
| </body> | ||||
| </html> | ||||
| {{end}} | ||||
|   | ||||
| @@ -1,41 +1,8 @@ | ||||
| {{define "room"}} | ||||
| <div class="flex h-screen"> | ||||
|   <!-- Left Panel --> | ||||
|   <div class="w-1/4 p-4 border-r"> | ||||
|     <h2 class="text-xl mb-4">Join Blue Team</h2> | ||||
|     <form hx-post="/join-team" hx-target="#room-content"> | ||||
|       <input type="hidden" name="room_id" value="{{.Room.ID}}"> | ||||
|       <input type="hidden" name="team" value="blue"> | ||||
|       <div class="mb-2"> | ||||
|         <button type="submit" name="role" value="guesser" class="w-full bg-blue-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"> | ||||
|           Join as Mime | ||||
|         </button> | ||||
|       </div> | ||||
|     </form> | ||||
|   </div> | ||||
|   {{template "cardtable" .}} | ||||
|   {{template "teampew" "blue"}} | ||||
|   <!-- Right Panel --> | ||||
|   <div class="w-1/4 p-4"> | ||||
|     <h2 class="text-xl mb-4">Join Red Team</h2> | ||||
|     <form hx-post="/join-team" hx-target="#room-content"> | ||||
|       <input type="hidden" name="room_id" value="{{.Room.ID}}"> | ||||
|       <input type="hidden" name="team" value="red"> | ||||
|       <div class="mb-2"> | ||||
|         <button type="submit" name="role" value="guesser" class="w-full bg-red-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-red-700 text-white py-2 px-4 rounded"> | ||||
|           Join as Mime | ||||
|         </button> | ||||
|       </div> | ||||
|     </form> | ||||
|   </div> | ||||
|   {{template "cardtable" "red"}} | ||||
| </div> | ||||
| {{end}} | ||||
|   | ||||
							
								
								
									
										18
									
								
								components/teampew.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										18
									
								
								components/teampew.html
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,18 @@ | ||||
| {{define "teampew"}} | ||||
| <div class="w-1/4 p-4 border-r"> | ||||
| <h2 class="text-xl mb-4">Join {{.}} Team</h2> | ||||
| <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"> | ||||
|       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"> | ||||
|       Join as Mime | ||||
|     </button> | ||||
|   </div> | ||||
| </form> | ||||
| </div> | ||||
| {{end}} | ||||
| @@ -45,7 +45,7 @@ func HandleFrontLogin(w http.ResponseWriter, r *http.Request) { | ||||
| 		abortWithError(w, err.Error()) | ||||
| 		return | ||||
| 	} | ||||
| 	tmpl.ExecuteTemplate(w, "main", roundWords) | ||||
| 	tmpl.ExecuteTemplate(w, "base", roundWords) | ||||
| } | ||||
|  | ||||
| func makeCookie(username string, remote string) (*http.Cookie, error) { | ||||
|   | ||||
| @@ -40,5 +40,42 @@ func HandleCreateRoom(w http.ResponseWriter, r *http.Request) { | ||||
| 		abortWithError(w, err.Error()) | ||||
| 		return | ||||
| 	} | ||||
| 	tmpl.ExecuteTemplate(w, "main", nil) | ||||
| 	tmpl.ExecuteTemplate(w, "base", nil) | ||||
| } | ||||
|  | ||||
| func HandleRoomEnter(w http.ResponseWriter, r *http.Request) { | ||||
| 	// parse payload | ||||
| 	roomID := r.URL.Query().Get("id") | ||||
| 	if roomID == "" { | ||||
| 		// error | ||||
| 		return | ||||
| 	} | ||||
| 	// create a room | ||||
| 	room, err := getRoomByID(roomID) | ||||
| 	if err != nil { | ||||
| 		msg := "failed to find the room" | ||||
| 		log.Error(msg, "error", err, "room_id", roomID) | ||||
| 		abortWithError(w, msg) | ||||
| 		return | ||||
| 	} | ||||
| 	ctx := context.WithValue(r.Context(), "current_room", room.ID) | ||||
| 	ctx, err = updateRoomInSession(ctx, room.ID) | ||||
| 	if err != nil { | ||||
| 		msg := "failed to set current room to session" | ||||
| 		log.Error(msg, "error", err) | ||||
| 		abortWithError(w, msg) | ||||
| 		return | ||||
| 	} | ||||
| 	// send msg of created room | ||||
| 	// h.Broker.Notifier <- broker.NotificationEvent{ | ||||
| 	// 	EventName: models.MsgRoomListUpdate, | ||||
| 	// 	Payload:   fmt.Sprintf("%s created a room named %s", r.CreatorName, r.RoomName), | ||||
| 	// } | ||||
| 	// return html | ||||
| 	tmpl, err := template.ParseGlob("components/*.html") | ||||
| 	if err != nil { | ||||
| 		abortWithError(w, err.Error()) | ||||
| 		return | ||||
| 	} | ||||
| 	tmpl.ExecuteTemplate(w, "base", room) | ||||
| } | ||||
|   | ||||
| @@ -58,5 +58,5 @@ func HandleHome(w http.ResponseWriter, r *http.Request) { | ||||
| 	// 	return | ||||
| 	// } | ||||
| 	userState := models.MakeTestState() | ||||
| 	tmpl.ExecuteTemplate(w, "main", userState) | ||||
| 	tmpl.ExecuteTemplate(w, "base", userState) | ||||
| } | ||||
|   | ||||
							
								
								
									
										1
									
								
								main.go
									
									
									
									
									
								
							
							
						
						
									
										1
									
								
								main.go
									
									
									
									
									
								
							| @@ -22,6 +22,7 @@ func ListenToRequests(port string) error { | ||||
| 	mux.HandleFunc("GET /ping", handlers.HandlePing) | ||||
| 	mux.HandleFunc("GET /", handlers.HandleHome) | ||||
| 	mux.HandleFunc("POST /login", handlers.HandleFrontLogin) | ||||
| 	mux.HandleFunc("GET /room", handlers.HandleRoomEnter) | ||||
| 	//elements | ||||
| 	mux.HandleFunc("GET /room/createform", handlers.HandleShowCreateForm) | ||||
| 	mux.HandleFunc("GET /room/hideform", handlers.HandleHideCreateForm) | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 Grail Finder
					Grail Finder