Enha: sse update on actions
This commit is contained in:
@ -41,7 +41,7 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id=ancestor>
|
||||
<div id="ancestor" hx-ext="sse" sse-connect="/sub/sse">
|
||||
{{template "main" .}}
|
||||
</div>
|
||||
</body>
|
||||
|
@ -22,7 +22,7 @@
|
||||
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:.1s">
|
||||
hx-get="/word/show-color?word={{.Word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.05s">
|
||||
{{.Word}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
@ -1,8 +1,4 @@
|
||||
{{define "main"}}
|
||||
<div hx-ext="sse" sse-connect="/sub/sse" sse-swap="test">
|
||||
Contents of this box will be updated in real time
|
||||
with every SSE message received from the chatroom.
|
||||
</div>
|
||||
<!-- user has no username -> login form -->
|
||||
{{ if not . }}
|
||||
{{template "login"}}
|
||||
|
@ -1,12 +1,12 @@
|
||||
{{define "teamlist"}}
|
||||
<div class="playerlist border border-gray-300 rounded mb-2">
|
||||
<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">
|
||||
<div class="playerlist border border-gray-300 rounded mb-2 text-{{.Color}}-700">
|
||||
<p class=border>Mime</p>
|
||||
<p>{{.Mime}}</p>
|
||||
</div>
|
||||
|
@ -1,44 +1,46 @@
|
||||
{{define "room"}}
|
||||
<div id="hello-user">
|
||||
<p>Hello {{.State.Username}};</p>
|
||||
<p>Room created by {{.Room.CreatorName}};</p>
|
||||
<p>Game is running: {{.Room.IsRunning}}</p>
|
||||
<p>
|
||||
{{if and (eq .State.Username .Room.CreatorName) (not .Room.IsRunning)}}
|
||||
<button hx-get="/start-game" hx-target="#room" class="bg-amber-100 text-black px-4 py-2 rounded">Start Game</button>
|
||||
<div id="interier" hx-get="/" hx-trigger="sse:roomupdate_{{.State.RoomID}}">
|
||||
<div id="meta">
|
||||
<p>Hello {{.State.Username}};</p>
|
||||
<p>Room created by {{.Room.CreatorName}};</p>
|
||||
<p>Game is running: {{.Room.IsRunning}}</p>
|
||||
<p>
|
||||
{{if and (eq .State.Username .Room.CreatorName) (not .Room.IsRunning)}}
|
||||
<button hx-get="/start-game" hx-target="#room" class="bg-amber-100 text-black px-4 py-2 rounded">Start Game</button>
|
||||
{{end}}
|
||||
</p>
|
||||
<p>Turn of the <span class="text-{{.Room.TeamTurn}}-500">{{.Room.TeamTurn}}</span> team</p>
|
||||
<p>
|
||||
{{if eq .State.Team ""}}
|
||||
join the team!
|
||||
{{else}}
|
||||
you're on the team <span class="text-{{.State.Team}}-500">{{.State.Team}}</span>!
|
||||
{{end}}
|
||||
</p>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="flex justify-center">
|
||||
<!-- Left Panel -->
|
||||
{{template "teamlist" .Room.BlueTeam}}
|
||||
{{if and (ne .State.Team "blue") (not .Room.IsRunning)}}
|
||||
{{template "teampew" "blue"}}
|
||||
{{end}}
|
||||
</p>
|
||||
<p>Turn of the {{.Room.TeamTurn}} team</p>
|
||||
<p>
|
||||
{{if eq .State.Team ""}}
|
||||
join the team!
|
||||
{{else}}
|
||||
you're on the team {{.State.Team}}!
|
||||
<!-- Right Panel -->
|
||||
{{if and (ne .State.Team "red") (not .Room.IsRunning)}}
|
||||
{{template "teampew" "red"}}
|
||||
{{end}}
|
||||
</p>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="flex justify-center">
|
||||
<!-- Left Panel -->
|
||||
{{template "teamlist" .Room.BlueTeam}}
|
||||
{{if ne .State.Team "blue"}}
|
||||
{{template "teampew" "blue"}}
|
||||
{{end}}
|
||||
<!-- Right Panel -->
|
||||
{{if ne .State.Team "red"}}
|
||||
{{template "teampew" "red"}}
|
||||
{{end}}
|
||||
{{template "teamlist" .Room.RedTeam}}
|
||||
</div>
|
||||
<hr />
|
||||
<div id="cardtable">
|
||||
{{template "cardtable" .Room}}
|
||||
</div>
|
||||
<div>
|
||||
{{if eq .State.Role "guesser"}}
|
||||
<button hx-get="/end-turn" hx-target="#room" class="bg-amber-100 text-black px-4 py-2 rounded">End Turn</button>
|
||||
{{else if eq .State.Role "mime"}}
|
||||
{{template "mimeclue"}}
|
||||
{{end}}
|
||||
{{template "teamlist" .Room.RedTeam}}
|
||||
</div>
|
||||
<hr />
|
||||
<div id="cardtable">
|
||||
{{template "cardtable" .Room}}
|
||||
</div>
|
||||
<div>
|
||||
{{if and (eq .State.Role "guesser") (eq .State.Team .Room.TeamTurn)}}
|
||||
<button hx-get="/end-turn" hx-target="#room" class="bg-amber-100 text-black px-4 py-2 rounded">End Turn</button>
|
||||
{{else if eq .State.Role "mime"}}
|
||||
{{template "mimeclue"}}
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
Reference in New Issue
Block a user