Style; upgrade libs

kcgidw · Jan 4, 2020 · 67a6a63 · 67a6a63
1 parent 07cd913
commit 67a6a63
Show file tree

Hide file tree

Showing 13 changed files with 146 additions and 110 deletions.
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "watch-p": "webpack --env.development -w --debug --output-path-info --display-modules",
     "build-s": "babel src/ --ignore public/ --out-dir dist/ --source-maps --copy-files"
   },
-  "author": "",
+  "author": "Gideon W",
   "license": "ISC",
   "dependencies": {
     "@babel/core": "^7.4.3",
@@ -27,21 +27,21 @@
     "compression": "^1.7.4",
     "compression-webpack-plugin": "^3.0.1",
     "core-js": "^3.0.1",
-    "css-loader": "^2.1.1",
+    "css-loader": "^3.4.1",
     "csv": "^5.3.0",
     "dotenv": "^6.2.0",
     "express": "^4.16.3",
     "lodash": "^4.17.10",
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^4.13.0",
     "sass-loader": "^8.0.0",
-    "socket.io": "^2.1.1",
-    "source-map-loader": "^0.2.3",
+    "socket.io": "^2.2.0",
+    "source-map-loader": "^0.2.4",
     "terser-webpack-plugin": "^2.3.1",
-    "vue-loader": "^15.7.0",
-    "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.30.0",
-    "webpack-cli": "^3.3.0"
+    "vue-loader": "^15.8.3",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10"
   },
   "devDependencies": {
     "@babel/cli": "^7.7.7",
@@ -59,7 +59,6 @@
     "copy-webpack-plugin": "^5.1.1",
     "eslint": "^6.8.0",
     "eslint-plugin-vue": "^6.1.2",
-    "esm": "^3.2.25",
     "mocha": "^5.2.0",
     "vue": "^2.6.10"
   }

diff --git a/readme.md b/readme.md
@@ -5,3 +5,9 @@ An online multiplayer game based on Oink Games' tabletop game, _A Fake Artist Go
 Play on Heroku: https://kc-fakeartistonline.herokuapp.com/
 
 Tech: Vue, Express, Socket.io, Webpack, Mocha
+
+## Develop
+
+Watch-build public: `npm run watch-p`
+
+Build and run server: `npm run start`
diff --git a/src/public/index.html b/src/public/index.html
@@ -7,11 +7,11 @@
 		<meta name="description" content=
 			"An online game based on Oink Games' &quot;A Fake Artist Goes to New York&quot;. Draw with your phone or a mouse." />
 		<meta name="google-site-verification" content="y94kNDTuNomc5PXYaXolDC6Xu-TJVn3z32Sr_I7z2Dg" />
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
 		<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
 		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
 		<script src="https://code.jquery.com/pep/0.4.3/pep.min.js"></script>
-		<link href="https://fonts.googleapis.com/css?family=Quicksand:500,700|Catamaran:900&display=swap" rel="stylesheet">
+		<link href="https://fonts.googleapis.com/css?family=Quicksand:600,700|Catamaran:900&display=swap" rel="stylesheet">
 		<link rel="stylesheet" href="style/normalize.css" />
 		<link rel="stylesheet" href="style/style.bundle.css" />
 	</head>

diff --git a/src/public/js/game-view.vue b/src/public/js/game-view.vue
@@ -3,21 +3,21 @@
 	<div class="view-container">
 		<player-statuses @close="hidePlayerStatuses" :users="gameState.users" v-show="playerStatusesDialogVisible"></player-statuses>
 		<confirmation id="confirm-skip-dialog" v-show="skipRoundConfirmationDialogVisible" @close="hideSkipRoundConfirmationDialog" @confirm="skip">
-			<h3>Skip this Round?</h3>
+			<h2>Skip this Round?</h2>
 			<div class="normal-text"><p>
 				This will end the current round.
 			</p></div>
 		</confirmation>
 		<confirmation id="confirm-setup-dialog" v-show="setupConfirmationDialogVisible" @close="hideSetupConfirmationDialog" @confirm="setup">
-			<h3>Exit to Setup?</h3>
+			<h2>Exit to Setup?</h2>
 			<div class="normal-text"><p>
 				Returning to setup will let you add/remove players. This will end the current round.
 			</p></div>
 		</confirmation>
 		<div class="stripe">
 			<div id="game-info" class="stripe-content canvas-aligned">
 				<h1 class="prompt" v-show="promptVisible">{{promptText}}</h1>
-				<h3 class="current-turn" :style="{color: userColor}">{{whoseTurnText}}</h3>
+				<h2 class="current-turn" :style="{color: userColor}">{{whoseTurnText}}</h2>
 			</div>
 		</div>
 		<div class="stripe flex-center">
@@ -111,7 +111,7 @@ const strokeTracker = {
 	},
 	hasPoints: function() {
 		return this.points.length > 0;
-	}
+	},
 };
 
 export default {
@@ -188,7 +188,7 @@ export default {
 		},
 		roundAndTurn() {
 			return this.gameState.round + '-' + this.gameState.turn;
-		}
+		},
 	},
 	watch: {
 		roundAndTurn() {
@@ -308,7 +308,7 @@ export default {
 		},
 		rules() {
 			Store.setView(VIEW.RULES);
-		}
+		},
 	},
 	mounted() {
 		this.$nextTick(function() {
@@ -320,6 +320,6 @@ export default {
 	},
 	beforeDestroy() {
 		window.removeEventListener('resize', this.resize);
-	}
+	},
 };
 </script>
diff --git a/src/public/js/player-statuses.vue b/src/public/js/player-statuses.vue
@@ -1,6 +1,6 @@
 <template>
 	<dialog-component id="player-statuses">
-		<h3>Players</h3>
+		<h2>Players</h2>
 		<ul>
 			<li v-for="u in users" :key="'0'+u.name">
 				<svg class="feather color-spot" :style="{color: color(u)}">
@@ -44,6 +44,6 @@ export default {
 		connectionStatusString(user) {
 			return user.connected ? '' : 'Disconnected';
 		},
-	}
+	},
 };
 </script>
diff --git a/src/public/js/rules-view.vue b/src/public/js/rules-view.vue
@@ -1,9 +1,9 @@
 <template>
 	<div id="rules" class="view">
 		<div class="view-container">
-			<div class="stripe flex-center">
+			<div class="stripe">
 				<div id="rules-content" class="stripe-content normal-text">
-					<div class="align-center">
+					<div class="align-left">
 						<h2>Rules</h2>
 					</div>
 					<div class="align-left">
@@ -14,8 +14,8 @@
 						<p>The fake artist has to bluff their way through the drawing. The others need to prove they know the keyword - but draw too obviously, and the fake artist might catch on!</p>
 						<p>If the fake artist is caught, they get a chance to guess the keyword. If they're correct, <em>they still win!</em></p>
 					</div>
-					<div class="align-center">
-						<button class="btn tertiary" @click="back()">Back</button>
+					<div class="align-right">
+						<button class="btn secondary" @click="back()">OK</button>
 					</div>
 				</div>
 			</div>
@@ -31,7 +31,7 @@ export default {
 	methods: {
 		back() {
 			Store.setView(Store.state.previousView);
-		}
+		},
 	},
 };
 </script>
diff --git a/src/public/js/setup-view.vue b/src/public/js/setup-view.vue
@@ -1,49 +1,65 @@
 <template>
-<div id="room-setup" class="view">
-	<div class="view-container">
-		<confirmation id="confirm-leave" confirmText="Leave" v-show="leaveConfirmationDialogVisible" @close="leaveConfirmationDialogVisible = false" @confirm="leave">
-			<h3>Leave game</h3>
-			<div class="normal-text"><p>
-				Are you sure you want to leave this game?
-			</p></div>
-		</confirmation>
+	<div id="room-setup" class="view">
+		<div class="view-container">
+			<Confirmation
+				id="confirm-leave"
+				confirmText="Leave"
+				v-show="leaveConfirmationDialogVisible"
+				@close="leaveConfirmationDialogVisible = false"
+				@confirm="leave"
+			>
+				<h2>Leave game?</h2>
+				<div class="normal-text">
+					<p>Are you sure you want to leave this game?</p>
+				</div>
+			</Confirmation>
+			<Confirmation
+				id="confirm-start"
+				confirmText="Start"
+				v-show="startConfirmationDialogVisible"
+				@close="startConfirmationDialogVisible = false"
+				@confirm="start"
+			>
+				<h2>Start game?</h2>
+				<div class="normal-text">
+					<p>Additional players won't be able to join while a game is in progress.</p>
+					<p>To add more players later, choose the "Exit to Setup" menu option.</p>
+				</div>
+			</Confirmation>
 
-		<div class="stripe flex-center align-center game-code">
-			<div class="stripe-content">
-				<div id="setup-header">Your game code is:</div>
-				<h1>{{ roomCode }}</h1>
+			<div class="stripe flex-center align-center game-code">
+				<div class="stripe-content">
+					<div id="setup-header">Your game code is:</div>
+					<h1>{{ roomCode }}</h1>
+				</div>
 			</div>
-		</div>
 
-		<div class="stripe flex-center align-center users">
-			<div class="stripe-content">
-				<div id="setup-header">Players:</div>
-				<ul class="users">
-					<li v-for="username in usernames" :key="'0' + username">{{username}}</li>
-				</ul>
+			<div class="stripe flex-center align-center users">
+				<div class="stripe-content">
+					<div id="setup-header">Players:</div>
+					<ul class="users">
+						<li v-for="username in usernames" :key="'0' + username">{{username}}</li>
+					</ul>
+				</div>
 			</div>
-		</div>
 
-		<div class="stripe flex-center align-center actions">
-			<div class="stripe-content">
-				<div class="tinytext tip" style="margin-bottom: 10px;">
-					Additional players won't be able to join while a game is in progress.
+			<div class="stripe flex-center align-center actions">
+				<div class="stripe-content">
+					<button class="btn primary big" @click="startConfirmationDialogVisible = true">Start Game</button>
+					<div style="clear: both" />
+					<button class="btn tertiary" @click="leaveConfirmationDialogVisible = true">Leave</button>
 				</div>
-				<button class="btn primary big" @click="start">Start Game</button>
-				<div style="clear: both"/>
-				<button class="btn tertiary" @click="leaveConfirmationDialogVisible = true">Leave</button>
 			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script>
-import Store from './state';
-import VIEW from './view';
-import Confirmation from './confirmation';
+import Store from "./state";
+import VIEW from "./view";
+import Confirmation from "./confirmation";
 export default {
-	name: 'SetupView',
+	name: "SetupView",
 	components: {
 		Confirmation,
 	},
@@ -57,11 +73,11 @@ export default {
 	},
 	data() {
 		return {
-			leaveConfirmationDialogVisible: false
+			leaveConfirmationDialogVisible: false,
+			startConfirmationDialogVisible: false,
 		};
 	},
-	watch: {
-	},
+	watch: {},
 	methods: {
 		start() {
 			Store.submitStartGame();
@@ -70,6 +86,6 @@ export default {
 			Store.setView(VIEW.HOME);
 			Store.submitLeaveGame();
 		},
-	}
+	},
 };
 </script>
diff --git a/src/public/style/colors.scss b/src/public/style/colors.scss
@@ -1,20 +1,18 @@
 :root {
-	--artist3: hsl(322, 98%, 60%);
-	--artist4: hsl(322, 95%, 50%); /* standard */
-	--artist5: hsl(322, 98%, 40%);
-	--artist6: hsl(322, 100%, 30%);
-	--grey0: hsl(220, 10%, 100%);
-	--grey1: hsl(220, 10%, 90%);
-	--grey2: hsl(220, 10%, 80%);
-	--grey3: hsl(220, 10%, 70%);
-	--grey4: hsl(220, 10%, 60%);
-	--grey5: hsl(220, 10%, 50%);
-	--grey6: hsl(220, 12%, 40%);
-	--grey7: hsl(220, 12%, 30%);
-	--grey8: hsl(220, 12%, 20%);
+	--artist3: hsl(322, 90%, 65%);
+	--artist4: hsl(322, 90%, 55%);
+	--artist5: hsl(322, 90%, 45%);
+	--grey0: hsl(220, 40%, 100%);
+	--grey1: hsl(220, 40%, 95%);
+	--grey2: hsl(220, 30%, 85%);
+	--grey3: hsl(220, 30%, 75%);
+	--grey4: hsl(220, 20%, 65%);
+	--grey5: hsl(220, 15%, 55%);
+	--grey6: hsl(220, 15%, 45%);
+	--grey7: hsl(220, 15%, 35%);
 	--blue1: hsl(200, 60%, 75%);
-	--blue2: hsl(200, 60%, 60%); /* standard */
-	--blue3: hsl(200, 60%, 45%);
+	--blue2: hsl(200, 60%, 60%);
+	--blue3: hsl(200, 60%, 50%);
 	--blue4: hsl(200, 60%, 40%);
 	--blue5: hsl(200, 60%, 30%);
 	--gold1: hsl(54, 100%, 90%);
@@ -25,5 +23,4 @@
 	--purp3: hsl(258, 50%, 55%);
 	--purp2: hsl(258, 50%, 75%);
 	--shade: rgba(0, 0, 0, 0.3);
-	--shade1: rgba(0, 0, 0, 0.7);
 }
diff --git a/src/public/style/dialog.scss b/src/public/style/dialog.scss
@@ -5,19 +5,27 @@
         position: absolute;
         top: 0;
         left: 0;
-        background-color: var(--shade1);
+        background-color: var(--shade);
         z-index: 10;
     }
     .dialog-window {
         z-index: 10;
+        min-width: 25em;
+        max-width: 35em;
+        padding: 10px 20px;
+        display: block;
+        text-align: left;
         background-color: var(--grey0);
-        border: solid 1px var(--grey1);
         border-radius: 5px;
-        padding: 10px 20px;
-        box-shadow: 0px 3px 6px 0px var(--shade);
+        box-shadow: 0px 3px 6px var(--shade), 0px 6px 20px var(--shade);
+
+        @media screen and (max-width: 480px) {
+            min-width: 150px;
+        }
     }
     .dialog-actions {
         margin-top: 20px;
+        text-align: right;
     }
 }
 

diff --git a/src/public/style/dropup.scss b/src/public/style/dropup.scss
@@ -17,12 +17,12 @@
 
 		@media(any-hover: hover) {
 			&:hover {
-				border-color: var(--grey0);
+				border-color: var(--grey1);
 			}
 		}
 		&.expanded {
-			border-color: var(--grey0);
-			background-color: var(--grey0);
+			border-color: var(--grey1);
+			background-color: var(--grey1);
 		}
 	}