WIP support sfx; Refactor file structure

package.json

@@ -25,6 +25,7 @@
 		"babel-loader": "^8.0.5",
 		"compression": "^1.7.4",
 		"compression-webpack-plugin": "^3.0.1",
+		"copy-webpack-plugin": "^5.1.1",
 		"core-js": "^3.0.1",
 		"css-loader": "^3.4.1",
 		"csv": "^5.3.0",

src/common/cli-game.js → src/public/js/client-game.js

@@ -21,7 +21,9 @@ function generateClientGameState() {
 		},
 		getUserColor(username) {
 			let userIdx = this.getUsernames().findIndex((u) => u === username); // needs es6 polyfill
-			return userIdx >= 0 ? Color.HEX[Color.ORDER[userIdx]] || 'var(--grey6)' : 'var(--grey6)';
+			return userIdx >= 0
+				? Color.HEX[Color.ORDER[userIdx]] || 'var(--grey6)'
+				: 'var(--grey6)';
 		},
 		getMostRecentStroke() {
 			return this.strokes[this.strokes.length - 1];

src/public/js/state.js

@@ -2,10 +2,11 @@ import VIEW from './view';
 import CONNECTION_STATE from './connection-state';
 import GAME_PHASE from '../../common/game-phase';
 import MESSAGE from '../../common/message';
-import { generateClientGameState } from '../../common/cli-game';
+import { generateClientGameState } from './client-game';
 import { validateUsername } from '../../common/util';
 
 const socket = io();
+// const sfx = new Audio('static/sfx-shake.wav');
 
 const Store = {
 	state: {
@@ -83,7 +84,13 @@ function handleSocket(messageName, handler, errHandler) {
 			handler(data);
 		}
 		if (data.roomState !== undefined) {
+			const prevStrokesLength = Store.state.gameState
+				? Store.state.gameState.strokes.length
+				: 0;
 			Store.setGameState(data.roomState);
+			// if (prevStrokesLength < data.roomState.strokes.length) {
+			// sfx.play();
+			// }
 		}
 	});
 }

webpack.config.js

@@ -3,6 +3,7 @@ const CompressionPlugin = require('compression-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = (env) => {
 	const prod = env.production;
@@ -42,14 +43,6 @@ module.exports = (env) => {
 						'html-loader',
 					],
 				},
-				{
-					test: /\.svg$/,
-					loader: [
-						{ loader: 'file-loader', options: { name: '[name].svg' } },
-						'extract-loader',
-						'svg-inline-loader',
-					],
-				},
 				{
 					test: /\.(sa|sc|c)ss$/,
 					use: [
@@ -94,6 +87,12 @@ module.exports = (env) => {
 			new MiniCssExtractPlugin({
 				filename: 'style.bundle.css',
 			}),
+			new CopyPlugin([
+				{
+					from: path.resolve(__dirname, 'src', 'public/static'),
+					to: path.resolve(__dirname, 'dist', 'public/static'),
+				},
+			]),
 		],
 
 		externals: prod