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"
|
docker rm -f golias 2>/dev/null && echo "old container removed"
|
||||||
|
|
||||||
run-container: stop-container
|
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"}}
|
{{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"}}
|
{{template "login"}}
|
||||||
<div id="create-room" class="create-room-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>
|
<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>
|
||||||
<!-- check if user in the room -->
|
<!-- check if user in the room -->
|
||||||
{{template "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}}
|
{{end}}
|
||||||
|
@ -1,41 +1,8 @@
|
|||||||
{{define "room"}}
|
{{define "room"}}
|
||||||
<div class="flex h-screen">
|
<div class="flex h-screen">
|
||||||
<!-- Left Panel -->
|
<!-- Left Panel -->
|
||||||
<div class="w-1/4 p-4 border-r">
|
{{template "teampew" "blue"}}
|
||||||
<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" .}}
|
|
||||||
<!-- Right Panel -->
|
<!-- Right Panel -->
|
||||||
<div class="w-1/4 p-4">
|
{{template "cardtable" "red"}}
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{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())
|
abortWithError(w, err.Error())
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
tmpl.ExecuteTemplate(w, "main", roundWords)
|
tmpl.ExecuteTemplate(w, "base", roundWords)
|
||||||
}
|
}
|
||||||
|
|
||||||
func makeCookie(username string, remote string) (*http.Cookie, error) {
|
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())
|
abortWithError(w, err.Error())
|
||||||
return
|
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
|
// return
|
||||||
// }
|
// }
|
||||||
userState := models.MakeTestState()
|
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 /ping", handlers.HandlePing)
|
||||||
mux.HandleFunc("GET /", handlers.HandleHome)
|
mux.HandleFunc("GET /", handlers.HandleHome)
|
||||||
mux.HandleFunc("POST /login", handlers.HandleFrontLogin)
|
mux.HandleFunc("POST /login", handlers.HandleFrontLogin)
|
||||||
|
mux.HandleFunc("GET /room", handlers.HandleRoomEnter)
|
||||||
//elements
|
//elements
|
||||||
mux.HandleFunc("GET /room/createform", handlers.HandleShowCreateForm)
|
mux.HandleFunc("GET /room/createform", handlers.HandleShowCreateForm)
|
||||||
mux.HandleFunc("GET /room/hideform", handlers.HandleHideCreateForm)
|
mux.HandleFunc("GET /room/hideform", handlers.HandleHideCreateForm)
|
||||||
|
Reference in New Issue
Block a user