prompts; bugfixes; rules; button state

kcgidw · Nov 26, 2018 · b5c73b6 · b5c73b6
1 parent e645a71
commit b5c73b6
Show file tree

Hide file tree

Showing 15 changed files with 443 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "csv": "^4.0.0",
     "dotenv": "^6.0.0",
     "express": "^4.16.3",
     "lodash": "^4.17.10",

diff --git a/readme.md b/readme.md
@@ -1,3 +1,5 @@
 An aid for Oink Games' tabletop game, _A Fake Artist Goes to New York_. Play online and draw with a mouse or phone.
 
+Play on Heroku: https://kc-fakeartistonline.herokuapp.com/
+
 Tech: Node.js, Express, Socket.io, jQuery, Webpack
diff --git a/src/common/client-game.js b/src/common/client-game.js
@@ -3,16 +3,55 @@ const COLOR = require('./color');
 
 class ClientGame {
 	constructor() {}
-	static compile(gameRoom, canViewFaker) {
+	static compile(gameRoom, fakerView) {
 		let game = new ClientGame();
 		game.roomCode = gameRoom.roomCode;
 		game.usernames = _.map(gameRoom.users, (u) => (u.name));
 		game.host = gameRoom.host.name;
 		game.state = gameRoom.state;
 		game.turn = gameRoom.turn;
-		game.keyword = gameRoom.keyword;
+		game.keyword = fakerView ? '???' : gameRoom.keyword;
 		game.hint = gameRoom.hint;
-		game.faker = canViewFaker ? gameRoom.faker.name : undefined; // hide from non-fakers
+		game.faker = fakerView ? gameRoom.faker.name : undefined; // hide from non-fakers
+		game.strokes = gameRoom.strokes;
+		return game;
+	}
+	static compileWaitingRoom(gameRoom) {
+		let game = new ClientGame();
+		game.roomCode = gameRoom.roomCode;
+		game.usernames = _.map(gameRoom.users, (u) => (u.name));
+		game.host = gameRoom.host.name;
+		game.state = gameRoom.state;
+		game.turn = gameRoom.turn;
+		// game.keyword = fakerView ? '???' : gameRoom.keyword;
+		// game.hint = gameRoom.hint;
+		// game.faker = fakerView ? gameRoom.faker.name : undefined; // hide from non-fakers
+		// game.strokes = gameRoom.strokes;
+		return game;
+	}
+	static compileStrokes(gameRoom) {
+		let game = new ClientGame();
+		// game.roomCode = gameRoom.roomCode;
+		// game.usernames = _.map(gameRoom.users, (u) => (u.name));
+		// game.host = gameRoom.host.name;
+		game.state = gameRoom.state;
+		game.turn = gameRoom.turn;
+		// game.keyword = fakerView ? '???' : gameRoom.keyword;
+		// game.hint = gameRoom.hint;
+		// game.faker = fakerView ? gameRoom.faker.name : undefined; // hide from non-fakers
+		game.strokes = gameRoom.strokes;
+		return game;
+	}
+	static compileRoundStart(gameRoom, fakerView) {
+		let game = new ClientGame();
+		// game.roomCode = gameRoom.roomCode;
+		game.usernames = _.map(gameRoom.users, (u) => (u.name)); // include for turn order
+		// game.host = gameRoom.host.name;
+		game.state = gameRoom.state;
+		game.turn = gameRoom.turn;
+		game.keyword = fakerView ? '???' : gameRoom.keyword;
+		game.hint = gameRoom.hint;
+		game.faker = fakerView ? gameRoom.faker.name : undefined; // hide from non-fakers
 		game.strokes = gameRoom.strokes;
 		return game;
 	}
@@ -21,6 +60,9 @@ class ClientGame {
 		Object.assign(game, json);
 		return game;
 	}
+	overwriteFromJson(json) {
+		Object.assign(this, json);
+	}
 	whoseTurn() {
 		var idx = ((this.turn - 1) % this.usernames.length);
 		return this.usernames[idx];

diff --git a/src/common/color.js b/src/common/color.js
@@ -1,13 +1,13 @@
 const HEX = {
 	'RED':		'#e50000',
-	'GOLD':		'#d8cc41',
-	'FOREST':	'#2e8c00',
+	'GOLD':		'#ccbc14',
+	'FOREST':	'#329900',
 	'BLUE':		'#0066cc',
 	'PURPLE':	'#5500cc',
 	'ORANGE':	'#f28900',
-	'LIME':	'#89e500', 
+	'LIME':		'#89e500', 
 	'TEAL':		'#00bf8f',
-	'BROWN':	'#995600',
+	'BROWN':	'#a56729',
 	'MAGENTA':	'#cc0070',
 	// 'GREEN':	'#76cc00',
 	// 'PINK':		'#db72e5',

diff --git a/src/common/game-state.js b/src/common/game-state.js
@@ -2,7 +2,7 @@
 const GAME_STATE = {
 	'INVITE': 'INVITE',
 	'PLAY': 'PLAY',
-	'GAME_OVER': 'GAME_OVER',
+	'ROUND_OVER': 'ROUND_OVER',
 	'CLOSED': 'CLOSED'
 };
 

diff --git a/src/public/index.html b/src/public/index.html
@@ -12,7 +12,7 @@
 	</head>
 
 	<body>
-		<div id="wrapper">
+		<div class="wrapper">
 			<div id="landing" class="view">
 				<div class="chunk">
 					<h1>Fake Artist Online</h1>
@@ -44,7 +44,7 @@ <h1>Fake Artist Online</h1>
 					</div>
 				</div>
 				<div class="chunk">
-					<p><a href="/rules">Rules</a></p>
+					<p><a href="/rules.html">Rules</a></p>
 					<p><a href="https://github.com/kcgidw/fao">Github</a></p>
 					<p>Use a modern browser for best results.</p>
 				</div>
@@ -69,7 +69,7 @@ <h3>Users:</h3>
 				</div>
 			</div>
 			<div id="in-game" class="view">
-				<div class="view-game-info"></div>
+				<div class="toggle-game-info"></div>
 				<div id="game-info" class="chunk">
 					<h3 class="prompt"></h3>
 					<h3 class="whose-turn"></h3>
@@ -87,6 +87,8 @@ <h3>Users:</h3>
 				<div id="drawing-decision" class="chunk">
 					<button class="btn secondary redo-drawing">Redo</button>
 					<button class="btn primary submit-drawing">Submit</button>
+					<div style="clear: both"></div>
+					<button class="btn primary big new-round">New Round</button>
 				</div>
 				<!-- <div class="gameover">
 					<h2>Drawing phase over! Time to vote!</h2>

diff --git a/src/public/js/menu.js b/src/public/js/menu.js
@@ -123,7 +123,12 @@ $('#waiting-room .actions .start').on('click', function(e) {
 });
 
 function updateGameUI(eventName, data) {
-	FAO.game = ClientGame.fromJson(data.roomState);
+	if(!FAO.game) {
+		FAO.game = ClientGame.fromJson(data.roomState);
+	} else {
+		FAO.game.overwriteFromJson(data.roomState);
+	}
+
 	switch(FAO.game.state) {
 		case GAME_STATE.INVITE:
 			setView('WAITING');
@@ -139,6 +144,18 @@ function updateGameUI(eventName, data) {
 			setView('IN_GAME');
 			$('div#in-game .prompt').text(`${FAO.game.hint}: ${FAO.game.keyword}`);
 			$('div#in-game .whose-turn').text(`Current turn: ${FAO.game.whoseTurn()}`);
+			$('div#in-game .redo-drawing').toggle(true);
+			$('div#in-game .submit-drawing').toggle(true);
+			$('div#in-game .new-round').toggle(false);
+			$('div#in-game .redo-drawing').prop('disabled', false);
+			$('div#in-game .submit-drawing').prop('disabled', false);
+			break;
+		case GAME_STATE.ROUND_OVER:
+			$('div#in-game .redo-drawing').toggle(false);
+			$('div#in-game .submit-drawing').toggle(false);
+			$('div#in-game .new-round').toggle(true);
+			$('div#in-game .redo-drawing').prop('disabled', true);
+			$('div#in-game .submit-drawing').prop('disabled', true);
 			break;
 		default:
 			console.warn(`Bad game state ${FAO.game.state}`);

diff --git a/src/public/js/paint.js b/src/public/js/paint.js
@@ -35,8 +35,8 @@ function getRelativePointFromPointerEvent(canvasThis, e) {
 }
 
 function toggleInputs(containerString, disable) {
-	$(`${containerString} .btn`).prop('disabled', disable);
-	$(`${containerString} input`).prop('disabled', disable);
+	$('div#in-game .redo-drawing').prop('disabled', disable);
+	$('div#in-game .submit-drawing').prop('disabled', disable);
 }
 function setStroked(s) {
 	stroked = s;
@@ -65,6 +65,7 @@ $('#new-paint').on('pointerup', function(e) {
 	if(curDrawState === DRAW_STATE.PAINT && FAO.myTurn()) {
 		if(points.length < 4) {
 			redo();
+			setStroked(false);
 		} else {
 			setStroked(true);
 			curDrawState = DRAW_STATE.PREVIEW;
@@ -97,16 +98,21 @@ function redo() {
 	points = [];
 	setStroked(false);
 }
+function clearBg() {
+	oldCtx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
+}
 $('#in-game .btn.redo-drawing').on('click', function(e) {
 	redo();
 });
 $('#in-game .btn.submit-drawing').on('click', function(e) {
 	submitDrawing();
 });
 function submitDrawing() {
-	socket.emit(MESSAGE.SUBMIT_STROKE, {
-		points: points,
-	});
+	if(points.length > 0) {
+		socket.emit(MESSAGE.SUBMIT_STROKE, {
+			points: points,
+		});
+	}
 }
 
 socket.on(MESSAGE.NEW_TURN, function(data) {
@@ -125,4 +131,26 @@ socket.on(MESSAGE.NEW_TURN, function(data) {
 			curDrawState = DRAW_STATE.SPECTATE;
 		}
 	}
+});
+
+socket.on(MESSAGE.START_GAME, function(data) {
+	if(data.err) {
+		return;
+	} else {
+		redo();
+		setStroked(false);
+		clearBg();
+	}
+});
+socket.on(MESSAGE.NEW_TURN, function(data) {
+	if(data.err) {
+		return;
+	} else {
+		redo();
+		setStroked(false);
+	}
+});
+
+$('#in-game .new-round').on('click', function(e) {
+	socket.emit(MESSAGE.START_GAME, {});
 });
diff --git a/src/public/rules.html b/src/public/rules.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+
+	<head>
+		<title>Fake Artist Online - Rules</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> 
+		<link rel="stylesheet" href="style/normalize.css" />
+		<link rel="stylesheet" href="style/style.css" />
+	</head>
+
+	<body>
+		<div id="rules-wrapper" class="wrapper">
+			<div id="rules" class="chunk">
+				<h1>Fake Artist Online - Rules</h1>
+				<p>A group of artists must work together to find the one <strong>fake artist</strong> among them, while that fake artist tries to avoid detection.</p>
+				<p>Each round, all artists receive a random keyword and its hint, e.g. <span>"Food (hint): Apple (keyword)".</span></p>
+				<p>But the faker <em>only receives the hint</em>.</p>
+				<br />
+				<p>Players take turns, drawing single strokes on the drawing pad. After every player has drawn twice, everyone votes on who they think the fake artist is.</p>
+				<br />
+				<p>The fake artist has to bluff their way through the drawing, while the artists try to draw enough to prove they know the keyword - but draw too obviously, and the fake artist might catch on!</p>
+				<p>Even if the fake artist gets caught at the end, if they're able to correctly guess the keyword, <em>they still win!</em></p>
+			</div>
+			<div class="chunk">
+				<a href="/index.html">Back to main page</a>
+			</div>
+		</div>
+	</body>
+
+</html>
diff --git a/src/public/style/style.css b/src/public/style/style.css
@@ -40,7 +40,7 @@ h3 {
 	margin: 5px 5px;
 }
 
-#wrapper {
+.wrapper {
 	margin-left: auto;
 	margin-right: auto;
 	text-align: center;
@@ -60,7 +60,7 @@ div.chunk {
 p, ul {
 	margin: 5px auto;
 }
-p em {
+p em, p strong, p span {
 	white-space: nowrap;
 }
 a {
@@ -176,6 +176,18 @@ canvas#new-paint {
 	z-index: 2;
 }
 
+/* ============================================================================
+	Rules
+============================================================================ */
+
+#rules-wrapper {
+	max-width: 40em;
+}
+#rules {
+	font-size: 16px;
+	text-align: left;
+}
+
 /* ============================================================================
 	Misc
 ============================================================================ */