summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorThomas Hintz <t@thintz.com>2020-08-28 09:35:02 -0700
committerThomas Hintz <t@thintz.com>2020-08-28 09:35:02 -0700
commit6219e65e66f5871c034220d240778ffc61e15e6b (patch)
tree6c75f38c51113c1f39ed35e598cd14022b36d4cd
parent92eb1d965383f8f8a16d65912331ac7b9dfa085e (diff)
downloadfarm-6219e65e66f5871c034220d240778ffc61e15e6b.tar.gz
Adding webpack fast refresh support.
-rw-r--r--package-lock.json52
-rw-r--r--package.json2
-rw-r--r--src/components/farm/Board.jsx92
-rw-r--r--webpack.common.js10
-rw-r--r--webpack.dev.js22
5 files changed, 126 insertions, 52 deletions
diff --git a/package-lock.json b/package-lock.json
index bbb5d85..1ac5830 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1793,6 +1793,28 @@
}
}
},
+ "@pmmmwh/react-refresh-webpack-plugin": {
+ "version": "0.4.1",
+ "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.1.tgz",
+ "integrity": "sha512-MzM87WdX2r2KRFfhEho7oGyK1XRE/J9WwjB3v6oLQHN0dzBypBZxSWjnoYx+RWneRCsg8Sin1myf+EjX1fqIbQ==",
+ "dev": true,
+ "requires": {
+ "ansi-html": "^0.0.7",
+ "error-stack-parser": "^2.0.6",
+ "html-entities": "^1.2.1",
+ "native-url": "^0.2.6",
+ "schema-utils": "^2.6.5",
+ "source-map": "^0.7.3"
+ },
+ "dependencies": {
+ "source-map": {
+ "version": "0.7.3",
+ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+ "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+ "dev": true
+ }
+ }
+ },
"@samverschueren/stream-to-observable": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz",
@@ -4841,6 +4863,15 @@
}
}
},
+ "error-stack-parser": {
+ "version": "2.0.6",
+ "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.6.tgz",
+ "integrity": "sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==",
+ "dev": true,
+ "requires": {
+ "stackframe": "^1.1.1"
+ }
+ },
"es-abstract": {
"version": "1.17.5",
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.5.tgz",
@@ -8437,6 +8468,15 @@
"integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
"dev": true
},
+ "native-url": {
+ "version": "0.2.6",
+ "resolved": "https://registry.npmjs.org/native-url/-/native-url-0.2.6.tgz",
+ "integrity": "sha512-k4bDC87WtgrdD362gZz6zoiXQrl40kYlBmpfmSjwRO1VU0V5ccwJTlxuE72F6m3V0vc1xOf6n3UCP9QyerRqmA==",
+ "dev": true,
+ "requires": {
+ "querystring": "^0.2.0"
+ }
+ },
"negotiator": {
"version": "0.6.2",
"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -10265,6 +10305,12 @@
"react-is": "^16.9.0"
}
},
+ "react-refresh": {
+ "version": "0.8.3",
+ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
+ "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==",
+ "dev": true
+ },
"read-chunk": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-1.0.1.tgz",
@@ -11511,6 +11557,12 @@
"integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
"dev": true
},
+ "stackframe": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
+ "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==",
+ "dev": true
+ },
"static-extend": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
diff --git a/package.json b/package.json
index b949057..5497848 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
"@babel/plugin-proposal-decorators": "^7.8.3",
"@babel/preset-env": "^7.8.3",
"@babel/preset-react": "^7.8.3",
+ "@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
"autoprefixer": "^9.7.4",
"babel-loader": "^8.0.6",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
@@ -40,6 +41,7 @@
"node-sass": "^4.13.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
+ "react-refresh": "^0.8.3",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"terser-webpack-plugin": "^2.3.5",
diff --git a/src/components/farm/Board.jsx b/src/components/farm/Board.jsx
index 48df419..6a11145 100644
--- a/src/components/farm/Board.jsx
+++ b/src/components/farm/Board.jsx
@@ -1919,54 +1919,52 @@ class Info extends React.Component {
}
}
-class StartGame extends React.Component {
- render() {
- const { auditThreshold, downPayment, loanInterest, maxDebt, startingOtbs, startingCash, startingDebt } = this.props.game.settings;
- const playerName = this.props.player.name;
- const { color } = this.props.player;
- const { name, host } = this.props.game;
- return (
- <>
- <h1>Lobby</h1>
- <p>
- <b>Game</b>: {name}
- </p>
- <h3>Players</h3>
- <ul>
- <li><PlayerColorIcon color={color} /> {playerName}</li>
- {this.props.game.otherPlayers.map((p, i) => (
- <li key={i}>
- <PlayerColorIcon color={p.player.color} /> {p.player.name}
- {playerName === host ? (
- <span title="Kick Player" className="kick-player" onClick={() => kickPlayer(p.player.name)}>
- <FontAwesomeIcon icon={faBan} />
- </span>
- ): (<></>)}
- </li>
- ))}
- <li>
- <span className="add-ai" onClick={addAIPlayer}>
- <FontAwesomeIcon icon={faPlusCircle} />AI
- </span>
+const StartGame = ({ game, player, toggleReady }) => {
+ const { auditThreshold, downPayment, loanInterest, maxDebt, startingOtbs, startingCash, startingDebt } = game.settings;
+ const playerName = player.name;
+ const { color } = player;
+ const { name, host } = game;
+ return (
+ <>
+ <h1>Lobby</h1>
+ <p>
+ <b>Game</b>: {name}
+ </p>
+ <h3>Players</h3>
+ <ul>
+ <li><PlayerColorIcon color={color} /> {playerName}</li>
+ {game.otherPlayers.map((p, i) => (
+ <li key={i}>
+ <PlayerColorIcon color={p.player.color} /> {p.player.name}
+ {playerName === host ? (
+ <span title="Kick Player" className="kick-player" onClick={() => kickPlayer(p.player.name)}>
+ <FontAwesomeIcon icon={faBan} />
+ </span>
+ ): (<></>)}
</li>
- </ul>
- <h4>Game Settings</h4>
- <ul>
- <li><b>Audit Threshold</b>: ${formatMoney(auditThreshold)}</li>
- <li><b>Max Debt</b>: ${formatMoney(maxDebt)}</li>
- <li><b>Loan Interest</b>: {loanInterest * 100}%</li>
- <li><b>Required Down Payment</b>: {downPayment * 100}%</li>
- <li><b>Starting {itemCardShort}</b>: {startingOtbs}</li>
- <li><b>Starting Cash</b>: ${formatMoney(startingCash)}</li>
- <li><b>Starting Debt</b>: ${formatMoney(startingDebt)}</li>
- </ul>
- <label>
- <input type="checkbox" onChange={this.props.toggleReady} />
- Ready to start
- </label>
- </>
- );
- }
+ ))}
+ <li>
+ <span className="add-ai" onClick={addAIPlayer}>
+ <FontAwesomeIcon icon={faPlusCircle} />AI
+ </span>
+ </li>
+ </ul>
+ <h4>Game Settings</h4>
+ <ul>
+ <li><b>Audit Threshold</b>: ${formatMoney(auditThreshold)}</li>
+ <li><b>Max Debt</b>: ${formatMoney(maxDebt)}</li>
+ <li><b>Loan Interest</b>: {loanInterest * 100}%</li>
+ <li><b>Required Down Payment</b>: {downPayment * 100}%</li>
+ <li><b>Starting {itemCardShort}</b>: {startingOtbs}</li>
+ <li><b>Starting Cash</b>: ${formatMoney(startingCash)}</li>
+ <li><b>Starting Debt</b>: ${formatMoney(startingDebt)}</li>
+ </ul>
+ <label>
+ <input type="checkbox" onChange={toggleReady} />
+ Ready to start
+ </label>
+ </>
+ );
}
const SCREENS = { summary: 'summary', misc: 'misc', farms: 'farms',
diff --git a/webpack.common.js b/webpack.common.js
index 7c69817..1136e8e 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -31,7 +31,7 @@ module.exports = {
app: './src/index.jsx',
},
output: {
- filename: './assets/[name].[contenthash].js',
+ filename: './assets/[name].[hash].js',
path: path.resolve(__dirname, 'dist'),
},
optimization: {
@@ -55,8 +55,8 @@ module.exports = {
}),
new FaviconsWebpackPlugin('./assets/img/tractor.svg'),
new MiniCssExtractPlugin({
- filename: './assets/[name].[contenthash].css',
- chunkFilename: './assets/[id].[contenthash].css',
+ filename: './assets/[name].[hash].css',
+ chunkFilename: './assets/[id].[hash].css',
}),
new CopyPlugin([
{ from: './src/server/farm.scm', to: './[name].[ext]' },
@@ -96,14 +96,14 @@ module.exports = {
test: /\.(svg|png|gif)$/,
loader: 'file-loader',
options: {
- name: './assets/img/[name].[contenthash].[ext]',
+ name: './assets/img/[name].[hash].[ext]',
},
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: 'file-loader',
options: {
- name: './assets/font/[name].[contenthash].[ext]',
+ name: './assets/font/[name].[hash].[ext]',
},
},
{
diff --git a/webpack.dev.js b/webpack.dev.js
index 141c96d..421829a 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -20,6 +20,8 @@ const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
module.exports = function(env) {
return merge(common, {
mode: 'development',
@@ -27,6 +29,7 @@ module.exports = function(env) {
devServer: {
port: 9000,
contentBase: './dist',
+ hot: true,
proxy: {
'/websocket': {
target: 'ws://localhost:8080',
@@ -39,5 +42,24 @@ module.exports = function(env) {
path.resolve(__dirname, env.assets),
'node_modules']
},
+ plugins: [
+ new ReactRefreshWebpackPlugin()
+ ],
+ module: {
+ rules: [
+ {
+ test: /\.jsx?$/,
+ exclude: /node_modules/,
+ use: [
+ {
+ loader: require.resolve('babel-loader'),
+ options: {
+ plugins: [require.resolve('react-refresh/babel')],
+ },
+ },
+ ],
+ },
+ ],
+ },
});
}