Merge pull request #58 from Oliver-Akins/dev

v1.2.3

server/README.md

@@ -2,17 +2,17 @@
 1. `cd` into this `server` directory.
 2. Run `pnpm install` to install all of the required dependencies.
 3. Create a copy of the `template.toml` file, and name it `server.toml`.
-4. Edit the `server.toml` file to adjust the
+4. Edit the `server.toml` file to adjust the server and game settings.
 5. Run `tsc` to compile the TypeScript into Javascript. This should create a
 `dist` directory.
 
 
-## Using systemd to manage the server: (Not currently implemented)
+## Using systemd to manage the server:
 This app comes with a `ghost-writer.service` file which is already set up to
 manage the server, it just requires a little bit of additional setup. If you
 change any of the symlinking in the steps below, it is your responsibility to
 figure it out, I will not guarantee support for people who attempt to modify
-the service file.
+the service file beyond the steps below.
 
 6. Create a symlink named `server` in the server root (`/`) pointing to the
 server folder in the Ghost Writer git repository.

server/src/events/NewHand.ts

@@ -36,7 +36,7 @@ export default (io: Server, socket: Socket, data: NewHand) => {
 		// Add the questions and then alert the game clients about the changes
 		team.addCardsToHand(deck.draw(handSize));
 		game.log.silly(`Drew a new hand of cards for team ${data.team}.`);
-		io.to(game.id).emit(`UpdateHand`, {
+		io.to(`${game.id}:${team.id}:guesser`).emit(`UpdateHand`, {
 			status: 200,
 			mode: `replace`,
 			questions: team.hand,

server/src/events/SendCard.ts

@@ -6,7 +6,7 @@ export default (io: Server, socket: Socket, data: SendCard) => {
 
 		// Assert game exists
 		if (!games[data.game_code]) {
-			log.debug(`Can't send a card in a game that doesn't exist: ${data.game_code}`);
+			log.debug(`Can't fing a game with code: ${data.game_code}`);
 			socket.emit(`UpdateHand`, {
 				status: 404,
 				message: `Game with code ${data.game_code} could not be found`,
@@ -20,7 +20,7 @@ export default (io: Server, socket: Socket, data: SendCard) => {
 
 		// The writer is answering
 		if (data.from === "writer") {
-			game.log.debug(`Writer selected question to answer.`);
+			game.log.debug(`Writer selected question to answer`);
 
 			// Draw new cards for team
 			deck.discard(data.text);
@@ -42,7 +42,7 @@ export default (io: Server, socket: Socket, data: SendCard) => {
 
 		// The writer is sending the card to the writer
 		else if (data.from === "guesser") {
-			game.log.debug(`Guesser is sending a card to the writer.`);
+			game.log.debug(`Guesser is sending a card to the writer`);
 
 			// Update the team's hand
 			team.removeCard(data.text);

server/template.toml

@@ -35,6 +35,9 @@ key = ''
 #		directory of the CLI instantiating the server. (or an absolute path)
 #	- If "type" is "sheets", then this is a sheet identifier used by Google
 #		Sheets to indicate which sheet to use when downloading the content.
+#		In the published URL, this is the sequence of number between the
+#		`gid=` and the `&`, so if the URL has `gid=123456789&`, the fingerprint
+#		would be `123456789`.
 fingerprint = ''
 
 # The zero-indexed column number to use when getting the question text.
@@ -46,6 +49,9 @@ column = 0
 #		directory of the CLI instantiating the server. (or an absolute path)
 #	- If "type" is "sheets", then this is a sheet identifier used by Google
 #		Sheets to indicate which sheet to use when downloading the content.
+#		In the published URL, this is the sequence of number between the
+#		`gid=` and the `&`, so if the URL has `gid=123456789&`, the fingerprint
+#		would be `123456789`.
 fingerprint = ''
 
 

web/src/components/GameBoard.vue

@@ -13,7 +13,7 @@
 					v-for="answerIndex in 8"
 					:class="[
 						`answer`,
-						answers[`team_${3 - $store.state.team}`][answerIndex-1].toLowerCase() === getObject
+						answers[`team_${3 - $store.state.team}`][answerIndex-1].toLowerCase().match(getObject)
 							? `correct`: ``
 					]"
 					:key="`${otherTeamID}-answer-container-${answerIndex}`"
@@ -58,7 +58,7 @@
 					v-for="answerIndex in 8"
 					:class="[
 						`answer`,
-						answers[`team_${$store.state.team}`][answerIndex-1].toLowerCase() === getObject
+						answers[`team_${$store.state.team}`][answerIndex-1].toLowerCase().match(getObject)
 							? `correct`: ``
 					]"
 					:key="`${teamID}-answer-container-${answerIndex}`"
@@ -109,7 +109,7 @@ import PastQuestions from './PastQuestions';
 export default {
 	name: `GameBoard`,
 	components: {
-		"past-questions": PastQuestions
+		"past-questions": PastQuestions,
 	},
 	data() {return {
 		visible: false,
@@ -126,9 +126,9 @@ export default {
 		},
 		getObject() {
 			if (!this.$store.state.chosen_object) {
-				return ``;
+				return /\n/;
 			};
-			return this.$store.state.chosen_object.toLowerCase() + `.`;
+			return new RegExp(`${this.$store.state.chosen_object.toLowerCase()}\\.?`);
 		},
 	},
 	methods: {

web/src/components/Hand.vue

@@ -73,10 +73,11 @@ export default {
 		},
 		gameOver() {
 			if (this.$store.state.chosen_object) {
-				let targetAnswer = this.$store.state.chosen_object.toLowerCase()+`.`;
+				let answerRegex = new RegExp(`${this.$store.state.chosen_object.toLowerCase()}\\.?`);
+
 				for (var team in this.$store.state.answers) {
 					for (var answer of this.$store.state.answers[team]) {
-						if (answer.toLowerCase() === targetAnswer) {
+						if (answer.toLowerCase().match(answerRegex)) {
 							return true;
 						};
 					};

web/src/components/PlayerList.vue

@@ -2,13 +2,10 @@
 	<div id="player_list" class="centre">
 		<h2>Players:</h2>
 		<div
-			v-for="player in $store.state.players"
+			v-for="player in players"
 			:key="player.name"
 		>
 			{{ player.name }}
-			<span v-if="player.role" class="player-role">
-				( {{ teamName(player.team) }} {{ roleName(player.role) }} )
-			</span>
 		</div>
 	</div>
 </template>
@@ -22,7 +19,9 @@ export default {
 			return this.$store.state.is_host;
 		},
 		players() {
-			return this.$store.state.players;
+			return this.$store.state.players.filter(
+				p => p.role == null && p.team == null
+			);
 		},
 		gameCode() {
 			return this.$store.state.game_code;

web/src/components/TeamRoleSelect.vue

@@ -7,12 +7,31 @@
 		>
 			{{ $store.state.writer_name }}
 		</button>
+		<div class="players">
+			<div
+				class="player"
+				v-for="player in writers"
+				:key="player.name"
+			>
+				{{ player.name }}
+			</div>
+		</div>
+		<hr>
 		<button
 			class="clickable"
 			@click.stop="joinRole(`guesser`)"
 		>
 			{{ $store.state.guesser_name }}
 		</button>
+		<div class="players">
+			<div
+				class="player"
+				v-for="player in guessers"
+				:key="player.name"
+			>
+				{{ player.name }}
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -29,7 +48,17 @@ export default {
 	computed: {
 		teamName() {
 			return this.$store.state[`team_${this.teamID}`].name;
-		}
+		},
+		writers() {
+			return this.$store.state.players.filter(
+				p => p.team === this.teamID && p.role === `writer`
+			);
+		},
+		guessers() {
+			return this.$store.state.players.filter(
+				p => p.team === this.teamID && p.role === `guesser`
+			);
+		},
 	},
 	methods: {
 		joinRole(role) {
@@ -81,6 +110,10 @@ export default {
 	width: 25%;
 }
 
+hr {
+	width: 90%;
+}
+
 button {
 	background-color: var(--background3);
 	color: var(--background3-text);

web/src/css/theme.css

@@ -73,8 +73,8 @@
 	--confirm-background-darken: #006600;
 	--confirm-background-lighten: #00aa00;
 	--confirm-text: white;
-	--cancel-background: #aa0000;
-	--cancel-background-darken: #830101;
-	--cancel-background-lighten: #e71111;
+	--cancel-background: #c94a4a;
+	--cancel-background-darken: #a54141;
+	--cancel-background-lighten: #fa7d7d;
 	--cancel-text: white;
 }