Adding webpack dev server support.

master
Thomas Hintz 4 years ago
parent b22aea2507
commit 92eb1d9653

@ -25,6 +25,10 @@ dev:
npx webpack --config webpack.dev.js --env.assets ./$(assets) npx webpack --config webpack.dev.js --env.assets ./$(assets)
rundev: rundev:
webpack-dev-server --open --config webpack.dev.js --env.assets ./$(assets)
# make interactive
rundevserver:
make interactive make interactive
prod: src/server/farm prod: src/server/farm
@ -35,7 +39,7 @@ install:
npm install npm install
interactive: interactive:
cd dist/ && csi -include-path $(assets) -include-path ../src/server -s farm.scm csi -include-path $(assets) -include-path src/server -s src/server/farm.scm
src/server/farm: src/server/farm.scm src/server/db.scm src/server/farm: src/server/farm.scm src/server/db.scm
cd src/server/ && csc -include-path ../../$(assets) -O3 farm.scm cd src/server/ && csc -include-path ../../$(assets) -O3 farm.scm

1337
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -13,8 +13,8 @@
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.dev.js", "build": "webpack --config webpack.dev.js",
"prod": "webpack --config webpack.prod.js", "prod": "webpack --config webpack.prod.js",
"cypress:open": "cypress open" "cypress:open": "cypress open"
}, },
"keywords": [], "keywords": [],
"author": "", "author": "",
@ -45,6 +45,7 @@
"terser-webpack-plugin": "^2.3.5", "terser-webpack-plugin": "^2.3.5",
"webpack": "^4.41.5", "webpack": "^4.41.5",
"webpack-cli": "^3.3.10", "webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2" "webpack-merge": "^4.2.2"
}, },
"dependencies": { "dependencies": {

@ -120,18 +120,16 @@ class PlayerResources extends React.Component {
<ResourceUnit img={TractorImg} h='240' s='100' label='Tractors' <ResourceUnit img={TractorImg} h='240' s='100' label='Tractors'
amount={player.assets.tractor}> amount={player.assets.tractor}>
{player.assets.tractor} {player.assets.tractor}
</ResourceUnit>{' '}
<ResourceUnit img={CakeImg} h='240' s='100' label='Birthday'
amount={player.assets.birthday ? player.assets.birthday : 0}>
{player.assets.birthday ? player.assets.birthday : 0}
</ResourceUnit> </ResourceUnit>
</div> </div>
); );
} }
} }
/* {' '}
* <ResourceUnit img={CakeImg} h='240' s='100' label='Birthday'
* amount={player.assets.birthday ? player.assets.birthday : 0}>
* {player.assets.birthday ? player.assets.birthday : 0}
* </ResourceUnit> */
// http://stackoverflow.com/questions/149055 // http://stackoverflow.com/questions/149055
function formatMoney(n) { function formatMoney(n) {
return n.toFixed(1).replace(/(\d)(?=(\d{3})+\.)/g, '$1,').slice(0, -2); } return n.toFixed(1).replace(/(\d)(?=(\d{3})+\.)/g, '$1,').slice(0, -2); }
@ -1813,21 +1811,23 @@ class AlertOverlay extends React.Component {
<FontAwesomeIcon icon={faTimes} /> <FontAwesomeIcon icon={faTimes} />
</div> </div>
) : (<></>)} ) : (<></>)}
<div className='alert-overlay-contents'> <div className='alert-container'>
{this.props.children} <div className='alert-overlay-contents'>
<br /> {this.props.children}
<div> <br />
<Button onClick={this.buttonClick} disabled={!!this.props.disabled}>{this.props.buttonText}</Button> <div>
{this.props.cancelButtonText ? ( <Button onClick={this.buttonClick} disabled={!!this.props.disabled}>{this.props.buttonText}</Button>
<> {this.props.cancelButtonText ? (
{' '} <>
<Button onClick={this.cancelButtonClick} disabled={!!this.props.cancelDisabled}> {' '}
{this.props.cancelButtonText} <Button onClick={this.cancelButtonClick} disabled={!!this.props.cancelDisabled}>
</Button> {this.props.cancelButtonText}
</> </Button>
): (<></>)} </>
): (<></>)}
</div>
{!this.props.preventHiding ? (<a onClick={this.hide}>close</a>) : (<></>)}
</div> </div>
{!this.props.preventHiding ? (<a onClick={this.hide}>close</a>) : (<></>)}
</div> </div>
</div> </div>
); );
@ -2110,7 +2110,7 @@ class BoardApp extends React.Component {
buttonText='Close' buttonText='Close'
hideHandler={() => 'nothing'} hideHandler={() => 'nothing'}
handler={() => { return false; }}> handler={() => { return false; }}>
<Fragment> <div className="game-over">
<h1>Game Over!</h1> <h1>Game Over!</h1>
{alert.contents.results.map((e, i) => ( {alert.contents.results.map((e, i) => (
<p key={i}>{e}</p> <p key={i}>{e}</p>
@ -2121,7 +2121,14 @@ class BoardApp extends React.Component {
<p>{alert.contents.stats.emergency}</p> <p>{alert.contents.stats.emergency}</p>
<p>{alert.contents.stats.highRoller}</p> <p>{alert.contents.stats.highRoller}</p>
<p>{alert.contents.stats.lowRoller}</p> <p>{alert.contents.stats.lowRoller}</p>
</Fragment> {alert.contents.stats.players.map(p => (
<div key={p.name}>
<p><b>{p.name} Harvests:</b></p>
<p>Total: ${formatMoney(p.harvestTotal)} Expenses: ${formatMoney(Math.abs(p.operatingExpenses))}</p>
<p>Avg ${formatMoney(p.harvestAverage)} rolling {p.harvestRoll} for {p.numHarvests} harvests</p>
<p>Hay: ${formatMoney(p.hay)} Grain: ${formatMoney(p.grain)} Fruit: ${formatMoney(p.fruit)} Cows: ${formatMoney(p.cows)}</p>
</div>))}
</div>
</AlertOverlay> </AlertOverlay>
); );
} else if (alert && alert.type === ALERTS.auditCalled) { } else if (alert && alert.type === ALERTS.auditCalled) {

@ -172,7 +172,12 @@
(tax-person . 0) (tax-person . 0)
(emergency . 0) (emergency . 0)
(num-harvests . 0) (num-harvests . 0)
(harvest-rolls . 0))) (harvest-rolls . 0)
(operating-expenses . 0)
(hay . 0)
(grain . 0)
(fruit . 0)
(cows . 0)))
(alist-ref 'ai? args eqv? #f) (alist-ref 'ai? args eqv? #f)
(alist-ref 'processing-turn args eqv? #f)))) (alist-ref 'processing-turn args eqv? #f))))
@ -555,7 +560,7 @@
;; (session-set! (sid) 'game *game*) ;; (session-set! (sid) 'game *game*)
;; (set-startup-otbs (session-ref (sid) 'player) 2) ;; (set-startup-otbs (session-ref (sid) 'player) 2)
) )
(send-static-file "main.html") (send-static-file "index.html")
;; (with-headers `((connection close) ;; (with-headers `((connection close)
;; (content-type text/html)) ;; (content-type text/html))
;; (lambda () ;; (lambda ()
@ -1015,7 +1020,31 @@
(* (/ (alist-ref 'harvest-rolls (player-stats p)) (* (/ (alist-ref 'harvest-rolls (player-stats p))
(max (alist-ref 'num-harvests (player-stats p)) 1)) (max (alist-ref 'num-harvests (player-stats p)) 1))
10)) 10))
10)) ")")))))) 10)) ")")))
(players . ,(list->vector
(map (lambda (p)
(let ((stats (player-stats p)))
`((name . ,(player-name p))
(numHarvests . ,(alist-ref 'num-harvests stats))
(hay . ,(alist-ref 'hay stats))
(grain . ,(alist-ref 'grain stats))
(fruit . ,(alist-ref 'fruit stats))
(cows . ,(alist-ref 'cows stats))
(harvestAverage . ,(exact->inexact
(round
(/ (fold + 0 (map (lambda (c) (alist-ref c stats))
'(hay grain fruit cows)))
(alist-ref 'num-harvests stats)))))
(harvestTotal . ,(fold + 0 (map (lambda (c) (alist-ref c stats))
'(hay grain fruit cows))))
(operatingExpenses . ,(alist-ref 'operating-expenses stats))
(harvestRoll . ,(exact->inexact
(/ (round
(* (/ (alist-ref 'harvest-rolls stats)
(max (alist-ref 'num-harvests stats) 1))
10))
10))))))
(game-players game)))))))
type: "end-of-game"))) type: "end-of-game")))
(define (create-ws-response player event misc) (define (create-ws-response player event misc)
@ -2299,7 +2328,7 @@
(define (make-player-stat stat amount) (define (make-player-stat stat amount)
(lambda (p) (lambda (p)
(safe-set! (player-stats p) (safe-set! (player-stats p)
(alist-update stat (+ (alist-ref stat (player-stats p)) amount) (alist-update stat (+ (alist-ref stat (player-stats p) eqv? 0) amount)
(player-stats p))))) (player-stats p)))))
(define (get-actions player space) (define (get-actions player space)
@ -2522,6 +2551,7 @@
(begin (begin
((make-player-stat 'num-harvests 1) player) ((make-player-stat 'num-harvests 1) player)
((make-player-stat 'harvest-rolls rolled) player) ((make-player-stat 'harvest-rolls rolled) player)
((make-player-stat crop income) player)
(safe-set! (player-cash player) (safe-set! (player-cash player)
(+ (player-cash player) income)) (+ (player-cash player) income))
(safe-set! (player-harvest-mult player) 1) (safe-set! (player-harvest-mult player) 1)
@ -2535,6 +2565,9 @@
(player-name player)))) (player-name player))))
(game-players game))))) (game-players game)))))
((alist-ref 'action operating-expense) player) ((alist-ref 'action operating-expense) player)
((make-player-stat 'operating-expenses
(- (player-cash player) previous-cash))
player)
`((rolled . ,rolled) `((rolled . ,rolled)
(rolls . ,(list->vector (make-rolls 22))) (rolls . ,(list->vector (make-rolls 22)))
(income . ,income) (income . ,income)

@ -919,8 +919,6 @@ $trade-margin: 3rem;
color: white; } color: white; }
.alert-overlay-contents { .alert-overlay-contents {
max-height: 90vh;
overflow: auto;
background: $light-color; background: $light-color;
padding: 2rem; padding: 2rem;
display: flex; display: flex;
@ -928,6 +926,10 @@ $trade-margin: 3rem;
justify-content: center; justify-content: center;
align-items: center; } align-items: center; }
.alert-container {
max-height: 90vh;
overflow: auto; }
.moving { .moving {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -1062,3 +1064,9 @@ ul {
font-family: 'IndieFlower-Regular'; font-family: 'IndieFlower-Regular';
width: 0; width: 0;
height: 0; } height: 0; }
.game-over p {
margin-bottom: 0.2rem;
text-align: left;
width: 100%;
}

@ -28,7 +28,7 @@ const CssUrlRelativePlugin = require('css-url-relative-plugin')
module.exports = { module.exports = {
entry: { entry: {
app: './src/main.jsx', app: './src/index.jsx',
}, },
output: { output: {
filename: './assets/[name].[contenthash].js', filename: './assets/[name].[contenthash].js',
@ -50,7 +50,7 @@ module.exports = {
new CleanWebpackPlugin(), new CleanWebpackPlugin(),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
title: 'Alpha Centauri Farming', title: 'Alpha Centauri Farming',
filename: 'main.html', filename: 'index.html',
meta: {viewport: 'width=device-width, initial-scale=1'}, meta: {viewport: 'width=device-width, initial-scale=1'},
}), }),
new FaviconsWebpackPlugin('./assets/img/tractor.svg'), new FaviconsWebpackPlugin('./assets/img/tractor.svg'),

@ -24,6 +24,16 @@ module.exports = function(env) {
return merge(common, { return merge(common, {
mode: 'development', mode: 'development',
devtool: 'inline-source-map', devtool: 'inline-source-map',
devServer: {
port: 9000,
contentBase: './dist',
proxy: {
'/websocket': {
target: 'ws://localhost:8080',
ws: true
},
},
},
resolve: { resolve: {
modules: [path.resolve(__dirname, 'src'), modules: [path.resolve(__dirname, 'src'),
path.resolve(__dirname, env.assets), path.resolve(__dirname, env.assets),

Loading…
Cancel
Save