Style and flesh out "Join Game" page

This is the page the host lands on before players have joined which shows the game PIN for everybody to copy.
ejv2 · Sep 26, 2024 · 65b5dc7 · 65b5dc7
1 parent 162bae0
commit 65b5dc7
Show file tree

Hide file tree

Showing 6 changed files with 194 additions and 10 deletions.
diff --git a/config.gahoot b/config.gahoot
@@ -29,5 +29,8 @@ ssl: false
 // Can be relative (to cwd at startup), or absolute.
 quiz_dir: quizzes
 
+// Address to send players to (displayed cosmetically, not used for links)
+site_link: https://ejv2.cc/gahoot/
+
 // Gameplay settings
 game_timeout: 2700
diff --git a/config/conf.go b/config/conf.go
@@ -21,6 +21,8 @@ type Config struct {
 	TrustedProxies []string `validate:"dive,ip_addr"`
 	HasSSL         bool
 
+	SiteLink string `validate:"url"`
+
 	QuizPath string `validate:"dir"`
 
 	GameTimeout time.Duration

diff --git a/config/parse.go b/config/parse.go
@@ -102,6 +102,8 @@ func parse(c *Config, path string) error {
 			c.TrustedProxies, err = parseArray(s, &num, trail)
 		case "quiz_dir":
 			c.QuizPath = trail
+		case "site_link":
+			c.SiteLink = trail
 		case "game_timeout":
 			i, e := strconv.ParseInt(trail, 10, 32)
 			c.GameTimeout, err = time.Second*time.Duration(i), e

diff --git a/frontend/static/styles.css b/frontend/static/styles.css
@@ -88,6 +88,13 @@ input[type=submit] {
         transform: scale(1, 0.8);
 }
 
+.btn:disabled {
+        opacity: 70%;
+        text-decoration: line-through;
+        cursor: not-allowed;
+        pointer-events: none;
+}
+
 .btn-green {
         background-color: var(--green);
 }
@@ -96,6 +103,10 @@ input[type=submit] {
         background-color: var(--dark);
 }
 
+.btn-purple {
+        background-color: var(--purple);
+}
+
 .wizard {
         display: flex;
         flex-direction: column;
@@ -305,22 +316,170 @@ input.error {
         align-items: center;
 }
 
+p.starterror {
+        font-weight: bold;
+        font-size: 30pt;
+}
+
+.game-start-container {
+        justify-content: flex-start !important;
+}
+
+.gamepin-container {
+        min-width: 100%;
+        padding: 0px;
+
+        color: var(--dark);
+        background-color: var(--lightblue);
+}
+
+.gameaction-container {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+
+        min-width: 100%;
+        padding: 0px;
+
+        background-color: var(--teal);
+        border-bottom: solid white 2px;
+        border-top: solid white 2px;
+}
+
+.gamepin-instructions {
+        display: inline-block;
+        font-weight: bold;
+        background-color: white;
+
+        font-size: 30px;
+
+        padding: 3px;
+        margin-left: 30px;
+
+        border-radius: 3px;
+}
+
+.gamepin-withthe {
+        display: inline-block;
+        font-weight: bold;
+        background-color: white;
+
+        font-size: 30px;
+
+        padding: 3px;
+        margin-left: 30px;
+        margin-bottom: 0px;
+        margin-top: 0px;
+
+        border-radius: 3px;
+}
+
+.gamepin {
+        display: inline-block;
+        background-color: white;
+        color: var(--dark);
+        font-weight: bolder;
+        font-size: 72pt;
+
+        margin-left: 50px;
+        margin-top: 0px;
+
+        width: auto;
+
+        border-radius: 3px;
+}
+
+.player-counter {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+
+        margin-left: 20px;
+}
+
+.player-counter-number {
+        background-color: white;
+        color: var(--dark);
+        padding: 4px;
+
+        font-size: 30px;
+        border-radius: 5px;
+
+        margin-bottom: 0px;
+}
+
+.player-joins {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 70px;
+        margin-top: 10px;
+}
+
 .game-countdown {
         background-color: var(--lightblue);
 }
 
 .host-nicknames {
+        font-size: 17pt;
+        animation: nickjoin-animation ease-out .3s;
         font-weight: bold;
         cursor: pointer;
 }
 
+@keyframes nickjoin-animation {
+        from {
+                transform: scale(0);
+        }
+
+        50% {
+                transform: scale(2);
+        }
+
+        to {
+                transform: scale(1);
+        }
+}
+
+@keyframes nickdisconn-animation {
+        from {
+                transform: scale(1) rotate(0deg);
+        }
+
+        10% {
+                transform: scale(1.5);
+        }
+
+        25% {
+                transform: scale(1.5) rotate(45deg);
+        }
+
+        50% {
+                transform: scale(1.5) rotate(-45deg);
+        }
+
+        75% {
+                transform: scale(1.5) rotate(45deg);
+        }
+
+        90% {
+                transform: scale(1.5);
+        }
+
+        to {
+                transform: scale(1) rotate(0deg);
+        }
+}
+
 .host-nicknames:hover {
         text-decoration: line-through;
 }
 
 .host-nicknames-disconnected {
         color: var(--red);
         text-decoration: line-through;
+        animation: nickdisconn-animation ease 1s;
 }
 
 .game-answers-title {

diff --git a/frontend/templates/host.gohtml b/frontend/templates/host.gohtml
@@ -17,16 +17,33 @@
 
 	<body x-cloak x-init="$store.host.init()" x-data="$store.host">
 		<!-- Player join screen -->
-		<div id="player-joins" x-show="stateID == 1" class="game-container">
-			<template x-for="player in players">
-				<p class="host-nicknames"
-					@click="$store.host.kickPlayer(player.id)"
-					x-text="player.name"
-					:class="player.connected ? '' : 'host-nicknames-disconnected'" />
-			</template>
+		<div x-show="stateID == 1" class="game-container game-start-container">
+			<div class="gamepin-container">
+				<h2 class="gamepin-instructions">Head to <a href="{{.SiteLink}}">{{.SiteLink}}</a> to join!</h2>
+				<br>
+				<h2 class="gamepin-withthe">Game PIN:</h2>
+				<br>
+				<h1 class="gamepin" x-text="$store.host.pin"></h1>
+			</div>
+
+			<div class="gameaction-container">
+				<div class="player-counter">
+					<h3 x-text="$store.host.players.length" class="player-counter-number"></h3>
+					<p>Players</p>
+				</div>
+				<p x-show="startError" class="starterror lighterror"><u>Three</u> players required to start</p>
+				<button class="btn btn-blue" :disabled="$store.host.players.length < 3" @click="$store.host.startGame()">Start game</button>
+			</div>
+
+			<div class="player-joins" id="player-joins">
+				<template x-for="player in players">
+					<p class="host-nicknames"
+						@click="$store.host.kickPlayer(player.id)"
+						x-text="player.name"
+						:class="player.connected ? '' : 'host-nicknames-disconnected'" />
+				</template>
+			</div>
 
-			<button class="btn btn-blue" @click="$store.host.startGame()">Start game</button>
-			<p x-show="startError" class="lighterror"><u>Three</u> players required to start</p>
 		</div>
 
 		<!-- Game start countdown -->

diff --git a/play.go b/play.go
@@ -19,7 +19,8 @@ func handleHost(c *gin.Context) {
 		Title          string
 		Pin            uint32
 		WebsocketProto string
-	}{WebsocketProto: Config.WSProto()}
+		SiteLink       string
+	}{WebsocketProto: Config.WSProto(), SiteLink: Config.SiteLink}
 
 	spin := c.Param("pin")
 	if spin == "" {