wip

.babelrc

@@ -21,6 +21,5 @@
     "@babel/preset-react"
   ],
   "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }],
-              "@babel/plugin-proposal-class-properties",
-              "emotion"]
+              "@babel/plugin-proposal-class-properties"]
 }

.dockerignore

@@ -1,5 +0,0 @@
-/node_modules/
-/node_modules_bak/
-/dist/
-*~
-/src/server/farm

Dockerfile

@@ -1,58 +0,0 @@
-FROM alpine as chicken
-
-ENV CHICKEN_VERSION 4.11.0
-ENV PLATFORM linux
-
-RUN set -eux; \
-    apk update; \
-    apk --no-cache --update add build-base; \
-    wget -qO- https://code.call-cc.org/releases/${CHICKEN_VERSION}/chicken-${CHICKEN_VERSION}.tar.gz | tar xzv; \
-    cd /chicken-${CHICKEN_VERSION}; \
-    make PLATFORM=${PLATFORM}; \
-    make PLATFORM=${PLATFORM} install; \
-    make PLATFORM=${PLATFORM} check; \
-    cd /; \
-    rm -rf /chicken-${CHICKEN_VERSION}
-
-FROM chicken as deps
-RUN chicken-install http-session srfi-69 coops uri-common srfi-18 medea numbers spiffy spiffy-cookies sql-de-lite crypt intarweb sxml-transforms websockets miscmacros
-
-FROM deps as deps2
-RUN chicken-install -r pll; \
-    cd pll; \
-    sed -i '1s/^/(import scheme)\n/' amb.scm; \
-    chicken-install
-
-FROM deps2 as compat
-RUN apk --no-cache --update add libc6-compat
-
-FROM node:16 as node
-WORKDIR /farm
-# COPY ./ /farm
-COPY package.json package.json
-COPY package-lock.json package-lock.json
-RUN npm install
-
-FROM node as buildfe
-WORKDIR /farm
-COPY ./ /farm
-RUN make prodfe
-
-FROM compat as buildfarm
-WORKDIR /farm
-COPY ./ /farm
-RUN make farm
-
-FROM buildfarm as farm
-WORKDIR /farm
-RUN mkdir dist
-COPY --from=buildfe /farm/dist /farm/dist
-RUN cp src/server/farm dist/; \
-    chmod +x dist/farm
-
-FROM farm as run
-WORKDIR /farm/dist
-ENTRYPOINT ["./farm"]
-CMD ["-:a50"]
-# CMD ./farm
-

Makefile

@@ -17,38 +17,25 @@
 # along with the Alpha Centauri Farming project.  If not, see
 # <https://www.gnu.org/licenses/>.
 
-.PHONY: clean install interactive cypress
+.PHONY: clean install interactive
 
 assets := assets/game/acf/
 
-docker:
-	sudo docker build --network=host . -t farm
-
 dev:
 	npx webpack --config webpack.dev.js --env.assets ./$(assets)
 
 rundev:
-	webpack-dev-server --open --config webpack.dev.js --env.assets ./$(assets)
-# make interactive
-
-rundevserver:
 	make interactive
 
 prod: src/server/farm
 	npx webpack --config webpack.prod.js --env.assets ./$(assets)
 
-prodfe:
-	npx webpack --config webpack.prod.js --env.assets ./$(assets)
-
 install:
 	npm init -y
 	npm install
 
 interactive:
-	csi -include-path $(assets) -include-path src/server -s src/server/farm.scm
-
-interactiveserver:
-	cd dist ; csi -include-path $(assets) -include-path ../src/server -s farm.scm
+	cd dist/ && csi -include-path $(assets) -include-path ../src/server -s farm.scm
 
 src/server/farm: src/server/farm.scm src/server/db.scm
 	cd src/server/ && csc -include-path ../../$(assets) -O3 farm.scm
@@ -62,9 +49,6 @@ runprod:
 upload:
 	rsync -rtvz dist/ $(SERVER):~/farm
 
-cypress:
-	npm run cypress:open
-
 clean:
 	rm -f *~ res/js/app.js
 

assets/font/Libre_Baskerville/OFL.txt

@@ -1,94 +0,0 @@
-Copyright (c) 2012, Pablo Impallari (www.impallari.com|impallari@gmail.com), 
-Copyright (c) 2012, Rodrigo Fuenzalida (www.rfuenzalida.com|hello<6C>rfuenzalida.com), with Reserved Font Name Libre Baskerville.
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

assets/font/OFL.txt

@@ -1,93 +0,0 @@
-Copyright (c) 2010, Kimberly Geswein (kimberlygeswein.com)
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

cypress.json

@@ -1,3 +0,0 @@
-{
-    "baseUrl": "http://localhost:8080"
-}

cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

cypress/integration/sample_spec.js

@@ -1,25 +0,0 @@
-describe('My First Test', () => {
-  it('Visits the Kitchen Sink', () => {
-      cy.visit('/')
-
-      cy.contains('Begin').click()
-
-      cy.contains('New Game').click()
-
-      cy.contains('Login').click()
-
-      cy.get('form [name="username"]').type('test')
-      cy.get('form [name="password"]').type('food')
-      cy.get('button[type="submit"]').click()
-
-      cy.get('form [name="gameName"]').type('test')
-      cy.get('button[type="submit"]').click()
-
-      cy.get('span[class="add-ai"]').click()
-
-      cy.contains('Ready to start').click()
-      cy.contains('Start Game').click()
-
-      cy.get('.show .action-item').first().click()
-  })
-})

cypress/plugins/index.js

@@ -1,21 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-/**
- * @type {Cypress.PluginConfig}
- */
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-}

cypress/support/commands.js

@@ -1,25 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

package.json

@@ -2,8 +2,6 @@
   "name": "farm",
   "sideEffects": [
     "*.css",
-    "*.scss",
-    "*.ttf",
     "*.woff",
     "*.woff2"
   ],
@@ -13,8 +11,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack --config webpack.dev.js",
-    "prod": "webpack --config webpack.prod.js",
-    "cypress:open": "cypress open"
+    "prod": "webpack --config webpack.prod.js"
   },
   "keywords": [],
   "author": "",
@@ -25,39 +22,36 @@
     "@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",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.4.2",
-    "css-url-relative-plugin": "^1.0.0",
-    "cypress": "^4.4.1",
+    "favicons-webpack-plugin": "^2.1.0",
     "file-loader": "^4.3.0",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.8.2",
+    "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",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.11.0",
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.35",
     "@fortawesome/fontawesome-svg-core": "^1.2.26",
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
     "@fortawesome/react-fontawesome": "^0.1.8",
     "cookies-js": "^1.2.3",
+    "css-url-relative-plugin": "^1.0.0",
+    "mobx": "^5.15.3",
+    "mobx-react": "^6.1.4",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-redux": "^7.1.3",
-    "redux": "^4.0.5",
-    "sass": "^1.69.5"
+    "redux": "^4.0.5"
   }
 }

src/components/app/App.jsx

@@ -28,62 +28,67 @@ import Welcome from '../welcome/Welcome.jsx'
 import Tractor from '../tractor/Tractor.jsx'
 
 import { SCREENS, messagePanelId } from '../../constants.js'
+import { play } from './actions.js'
 
-const Chrome = ({ children, spikes, tractorClass }) => {
-    return (
-        <div className='flex-fullcenter'>
-            <div className='background-heading'><h1>Alpha Centauri Farming</h1></div>
-            {children}
-            <Tractor spikes={spikes} className={tractorClass} />
-        </div>
-    );
+class Chrome extends React.Component {
+    render() {
+        return (
+            <div className='flex-fullcenter'>
+                <div className='background-heading'><h1>Alpha Centauri Farming</h1></div>
+                {this.props.children}
+                <Tractor spikes={this.props.spikes} className={this.props.tractorClass} />
+            </div>
+        );
+    }
 }
 
-const App = ({ screen, logout, createAccount, login, errors }) => {
-    let view;
-    switch (screen) {
+class App extends React.Component {
+    render() {
+        let view;
+        switch (this.props.screen) {
         case SCREENS.intro:
             view = (<Chrome spikes={true} tractorClass='intro'><Welcome /></Chrome>);
             break;
-        case SCREENS.start:
-            view = (<Chrome><CreateOrJoin signOut={logout} /></Chrome>);
-            break;
-        case SCREENS.newGame:
-            view = (<Chrome>
-                <div className='view-container'>
-                    <NewGame colors={['green', 'red', 'blue', 'yellow', 'black']}
-                             button={'Start'}
-                             title={'New Game'}
-                             type={'new-game'}
-                             showGameName={true}
-                             createAccount={createAccount}
-                             login={login}
-                             errors={errors}
-                    />
-                </div>
-            </Chrome>);
-            break;
-        case SCREENS.joinGame:
-            view = (
-                <Chrome>
+            case SCREENS.start:
+                view = (<Chrome><CreateOrJoin signOut={this.props.logout} /></Chrome>);
+                break;
+            case SCREENS.newGame:
+                view = (<Chrome>
                     <div className='view-container'>
-                        <JoinGame createAccount={createAccount}
-                                  login={login}
-                                  errors={errors}
+                        <NewGame colors={['green', 'red', 'blue', 'yellow', 'black']}
+                                 button={'Start'}
+                                 title={'New Game'}
+                                 type={'new-game'}
+                                 showGameName={true}
+                                 createAccount={this.props.createAccount}
+                                 login={this.props.login}
+                                 errors={this.props.errors}
                         />
                     </div>
                 </Chrome>);
+                break;
+            case SCREENS.joinGame:
+                view = (
+                    <Chrome>
+                        <div className='view-container'>
+                            <JoinGame createAccount={this.props.createAccount}
+                                      login={this.props.login}
+                                      errors={this.props.errors}
+                            />
+                        </div>
+                    </Chrome>);
             break;
         case SCREENS.play:
             view = (<Board />);
             break;
+        }
+        return (
+            <Fragment>
+                {view}
+                <div id={messagePanelId}><MessagePanel /></div>
+            </Fragment>
+        );
     }
-    return (
-        <Fragment>
-            {view}
-            <div id={messagePanelId}><MessagePanel /></div>
-        </Fragment>
-    );
 }
 
 export default connect(

src/components/create-account/CreateAccount.jsx

@@ -61,6 +61,14 @@ export default class CreateAccount extends React.Component {
                             </label>
                         </Col>
                     </Row>
+                    <Row>
+                        <Col width="12">
+                            <label>
+                                Email (optional)
+                                <input onChange={this.onChange} name="email" type="email" />
+                            </label>
+                        </Col>
+                    </Row>
                     <Row>
                         <Col width="12">
                             <label>

src/components/create-or-join/CreateOrJoin.jsx

@@ -24,31 +24,32 @@ import Cookies from 'cookies-js'
 import { GroupBox, Row, Col, Button } from '../widgets.jsx'
 import { showNewGame, showJoinGame } from '../app/actions.js'
 
-const CreateOrJoin = ({ signOut, showNewGame, start, showJoinGame }) => {
-    const handleSignOut = (e) => {
+class CreateOrJoin extends React.Component {
+    signOut = (e) => {
         e.preventDefault();
-        signOut();
+        this.props.signOut();
         Cookies.expire('awful-cookie');
     }
 
-    return (
-        <Fragment>
-            <div className="font-preloader">text</div>
-            <Button size='large' className='shadow action-item' onClick={showNewGame}>
-                New Game
-            </Button>
-            {(start.start.games.length > 0) || (start.start.openGames.length > 0)  ? (
-                 <Button size='large' className='shadow' onClick={showJoinGame}>
-                     Join Game
-                 </Button>
-            ) : (<Fragment />)}
-            {start.start.user ? (
-                 <Button size='large' className='shadow sign-out-button' onClick={handleSignOut}>
-                     Sign Out
-                 </Button>
-            ) : (<></>)}
-        </Fragment>
-    );
+    render() {
+        return (
+            <Fragment>
+                <Button size='large' className='shadow' onClick={this.props.showNewGame}>
+                    New Game
+                </Button>
+                {(this.props.start.start.games.length > 0) || (this.props.start.start.openGames.length > 0)  ? (
+                     <Button size='large' className='shadow' onClick={this.props.showJoinGame}>
+                         Join Game
+                     </Button>
+                ) : (<Fragment />)}
+                {this.props.start.start.user ? (
+                     <Button size='large' className='shadow sign-out-button' onClick={this.signOut}>
+                         Sign Out
+                     </Button>
+                ) : (<></>)}
+            </Fragment>
+        );
+    }
 }
 
 export default connect(

src/components/farm/MessagePanel.jsx

@@ -21,22 +21,26 @@ import { connect } from 'react-redux'
 
 import SpaceNode from './SpaceNode.jsx'
 
-const MessagePanel = (props) => {
-    if (props.space !== null) {
-        const panel = document.getElementById('message-panel'),
-              mpDims = props.mpDims;
-        panel.style.top =
-            (Math.min(Math.max(mpDims.mouseY, mpDims.minHeight + mpDims.padding),
-                      mpDims.maxHeight)) + 'px';
-        panel.style.left =
-            (Math.min(Math.max(mpDims.mouseX, mpDims.minWidth + mpDims.padding),
-                      mpDims.maxWidth)) + 'px';
-        return (
-            <SpaceNode space={props.space} height='210px'
-                       showtitle={true} orientation={''} />
-        );
-    } else {
-        return null;
+import { setMessagePanelSpace, mpMouse } from './actions.js'
+
+class MessagePanel extends React.Component {
+    render () {
+        if (this.props.space !== null) {
+            const panel = document.getElementById('message-panel'),
+                  mpDims = this.props.mpDims;
+            panel.style.top =
+                (Math.min(Math.max(mpDims.mouseY, mpDims.minHeight + mpDims.padding),
+                          mpDims.maxHeight)) + 'px';
+            panel.style.left =
+                (Math.min(Math.max(mpDims.mouseX, mpDims.minWidth + mpDims.padding),
+                          mpDims.maxWidth)) + 'px';
+            return (
+                    <SpaceNode space={this.props.space} height='210px'
+                               showtitle={true} orientation={''} />
+            );
+        } else {
+            return null;
+        }
     }
 }
 

src/components/farm/PlayerIcon.jsx

@@ -22,9 +22,8 @@ export default class PlayerIcon extends React.Component {
     render() {
         return (
             <center>
-                {this.props.colors.map(c => (
-                    <div key={c} className={'player player-' + c + (c === this.props.current ? ' player-current' : '')} />
-                ))}
+                {this.props.colors
+                 .map(c => (<div key={c} className={'player player-' + c}></div>))}
             </center>
         );
     }

src/components/farm/SpaceNode.jsx

@@ -73,7 +73,7 @@ class SpaceNode extends React.Component {
                         {title}
                     </div>)
                   : (null)}
-            { this.props.space.players.length ? <PlayerIcon colors={this.props.space.players} current={this.props.current} /> : ''}
+            { this.props.space.players.length ? <PlayerIcon colors={this.props.space.players} /> : ''}
                     <div className='space-description'>
                 {this.props.space.description}
             </div>

src/components/farm/interface.js

@@ -31,8 +31,7 @@ import { itemCard, fateCard } from 'game.js'
 export { initialize, buy, roll, endTurn, loan, trade, submitTradeAccept,
          submitTradeDeny, submitTradeCancel, audit, handleMessage,
          nextAction, buyUncleBert, actionsFinished, skip, endAiTurn,
-         startGame, readyToStart, leaveGame, kickPlayer, toggleRevealForTrade,
-         addAIPlayer, birthdayBonusPlayer }
+         startGame, readyToStart, leaveGame }
 
 let store;
 let movingTimer = 0;
@@ -127,7 +126,7 @@ function handleMessage(evt) {
             store.dispatch(autoSkip(data.component));
         }
         if (data.event === 'end-of-game') {
-            store.dispatch(alert(ALERTS.endOfGame, { results: data.results, stats: data.stats }, 'endOfGame' + data.game.turn));
+            store.dispatch(alert(ALERTS.endOfGame, data.results, 'endOfGame' + data.game.turn));
         }
     });
 };
@@ -214,22 +213,6 @@ function leaveGame() {
     sendCommand({ type: 'leave-game' });
 }
 
-function kickPlayer(name) {
-    sendCommand({ type: 'kick-player', name });
-}
-
-function birthdayBonusPlayer(name) {
-    sendCommand({ type: 'birthday-bonus-player', name });
-}
-
-function addAIPlayer() {
-    sendCommand({ type: 'add-ai-player' });
-}
-
-function toggleRevealForTrade(id) {
-    sendCommand({ type: 'toggle-reveal-for-trading', id });
-}
-
 // TODO share with Board.jsx
 // http://stackoverflow.com/questions/149055
 function formatMoney(n) {

src/components/farm/reducers.js

@@ -91,8 +91,6 @@ const initialState = {
               assets: { hay: 10, grain: 10, fruit: 0, cows: 0, harvester: 0, tractor: 0, birthday: 0 },
               color: '',
               name: '',
-              cards: [],
-              revealedCards: [],
               ridges: { ridge1: 0, ridge2: 0, ridge3: 0, ridge4: 0 },
               space: 0,
               hayDoubled: false,
@@ -108,7 +106,6 @@ const initialState = {
             turn: 0,
             oldMessages: [],
             name: '',
-            host: '',
             settings: { downPayment: 0.2,
                         loanInterest: 0.2,
                         maxDebt: 50000,
@@ -123,10 +120,8 @@ const initialState = {
           cardError: false,
           action: false,
           actionValue: null,
-          actionId: -1,
           nextAction: false,
           nextActionValue: null,
-          nextActionId: -1,
           actionChangeHandled: true,
           message: '',
           alerts: {},
@@ -146,8 +141,6 @@ const initialState = {
     profileTurns: 500
 }
 
-let lastActionId = -1;
-
 export default function(state = initialState, action) {
     switch (action.type) {
     case UPDATE_GAME:
@@ -213,18 +206,15 @@ export default function(state = initialState, action) {
                                      maxHeight: action.maxHeight }};
     case SET_NEXT_ACTION:
         return { ...state, ui: { ...state.ui, nextAction: action.action,
-                                 nextActionValue: action.value,
-                                 nextActionId: ++lastActionId }};
+                                 nextActionValue: action.value }};
     case NEXT_UI_ACTION:
         return { ...state, ui: { ...state.ui, action: state.ui.nextAction,
                                  actionValue: state.ui.nextActionValue,
-                                 actionId: state.ui.nextActionId,
                                  autoSkip: false,
                                  actionChangeHandled: !state.ui.nextAction }};
     case NEXT_UI_ACTION_SILENT: // don't set actionChangeHandled
         return { ...state, ui: { ...state.ui, action: state.ui.nextAction,
-                                 actionValue: state.ui.nextActionValue,
-                                 actionId: state.ui.nextActionId }};
+                                 actionValue: state.ui.nextActionValue }};
     case MARK_ACTION_CHANGE_HANDLED:
         return { ...state, ui: { ...state.ui, actionChangeHandled: true }};
     case ALERT:

src/components/join-game/JoinGame.jsx

@@ -26,23 +26,19 @@ import { start } from '../app/actions.js'
 import LoginOrCreateAccount from '../login-or-create-account/LoginOrCreateAccount.jsx';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArrowCircleLeft, faCaretDown } from '@fortawesome/free-solid-svg-icons'
+import { faArrowCircleLeft } from '@fortawesome/free-solid-svg-icons'
 
 import NewGame from '../new-game/NewGame.jsx'
 
 const JoinGameScreens = { list: 'list', details: 'details' };
 
-const defaultMaxGames = 5;
-
 class JoinGame extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
             screen: JoinGameScreens.list,
             game: null,
-            showSignIn: false,
-            maxGames: defaultMaxGames,
-            maxOpenGames: defaultMaxGames
+            showSignIn: false
         };
     }
 
@@ -71,98 +67,69 @@ class JoinGame extends React.Component {
         this.setState(state => { return { showSignIn: !state.showSignIn }; });
     }
 
-    showAllGames = (e) => {
-        e.preventDefault();
-        this.setState({ maxGames: Number.MAX_SAFE_INTEGER });
-    }
-
-    showAllOpenGames = (e) => {
-        e.preventDefault();
-        this.setState({ maxOpenGames: Number.MAX_SAFE_INTEGER });
-    }
-
     render() {
-        const { games, openGames } = this.props;
         return (
             <GroupBox title={(
-                    <Fragment>
-                        <a onClick={this.handleBack}>
-                            <FontAwesomeIcon icon={faArrowCircleLeft} />
-                        </a>
-                        Join Game
-                    </Fragment>
+                <Fragment>
+                    <a href="#" onClick={this.handleBack}>
+                        <FontAwesomeIcon icon={faArrowCircleLeft} />
+                    </a>
+                    Join Game
+                </Fragment>
             )}>
-                <Row>
-                    <Col width='12'>
-                        {this.state.screen === JoinGameScreens.list ?
-                         (<>
-                             <h3>My Games</h3>
-                             {(!this.props.user && !this.state.showSignIn) ? (
-                                  <a onClick={this.showSignIn}>Sign In to see your games</a>
-                             ) : (<></>)}
-                             {(!this.props.user && this.state.showSignIn) ? (
-                                  <>
-                                      <hr />
-                                      <LoginOrCreateAccount login={this.props.login}
-                                                            createAccount={this.props.createAccount}
-                                                            errors={this.props.errors}
-                                                            showLogin={true}
-                                      />
-                                      <hr />
-                                  </>
-                             ) : (<></>)}
-                             <ul>
-                                 {games.slice(0, this.state.maxGames)
-                                       .map((g, i) =>
-                                           (
-                                               <li key={i}>
-                                                   <a onClick={(e) => this.handleJoinAsExisting(e, g.id)}>{g.name}</a>
-                                               </li>
-                                           ))}
-                                 {games.length > this.state.maxGames ? (
-                                      <li>
-                                          <center>
-                                              <a onClick={this.showAllGames}><FontAwesomeIcon icon={faCaretDown} /> Show all</a>
-                                          </center>
-                                      </li>
-                                 ) : (<></>)}
-                             </ul>
-                             <h3>Open Games</h3>
-                             <ul>
-                                 {openGames.slice(0, this.state.maxOpenGames)
-                                           .map((g, i) =>
-                                               (
-                                                   <li key={i}>
-                                                       <a onClick={e => {
-                                                               e.preventDefault();
-                                                               this.handleClickGame(g); }}>{g.name}</a>
-                                                   </li>
-                                               ))}
-                                 {openGames.length > this.state.maxOpenGames ? (
-                                      <li>
-                                          <center>
-                                              <a onClick={this.showAllOpenGames}><FontAwesomeIcon icon={faCaretDown} /> Show all</a>
-                                          </center>
-                                      </li>
-                                 ) : (<></>)}
-                             </ul>
-                         </>
-                         )
-                         : (
-                             <Fragment>
-                                 <h3><b>Game:</b> {this.state.game.name}</h3>
-                                 <NewGame colors={this.state.game.colors}
-                                          button={'Join'}
-                                          showGameName={false}
-                                          gameName={this.state.game.name}
-                                          gameId={this.state.game.id}
-                                          type={'join-game'}
-                                          hideBack={true}
-                                          createAccount={this.props.createAccount}
-                                          login={this.props.login}
-                                          errors={this.props.errors}
-                                          title={'Join as New Player'} />
-                             </Fragment>)}
+            <Row>
+                <Col width='12'>
+                    {this.state.screen === JoinGameScreens.list ?
+                    (<>
+                    <h3>My Games</h3>
+                    {(!this.props.user && !this.state.showSignIn) ? (
+                    <a onClick={this.showSignIn}>Sign In to see your games</a>
+                    ) : (<></>)}
+                    {(!this.props.user && this.state.showSignIn) ? (
+                    <>
+                        <hr />
+                        <LoginOrCreateAccount login={this.props.login}
+                                              createAccount={this.props.createAccount}
+                                              errors={this.props.errors}
+                                              showLogin={true}
+                        />
+                        <hr />
+                    </>
+                    ) : (<></>)}
+                    <ul>
+                        {this.props.games
+                        .map((g, i) =>
+                        (<li key={i}>
+                        <a onClick={(e) => this.handleJoinAsExisting(e, g.id)}>{g.name}</a>
+                        </li>))}
+                    </ul>
+                    <h3>Open Games</h3>
+                    <ul>
+                        {this.props.openGames
+                        .map((g, i) =>
+                        (<li key={i}>
+                        <a onClick={e => {
+                            e.preventDefault();
+                            this.handleClickGame(g); }}>{g.name}</a>
+                        </li>))}
+                    </ul>
+                    </>
+                    )
+            : (
+                <Fragment>
+                    <h3><b>Game:</b> {this.state.game.name}</h3>
+                    <NewGame colors={this.state.game.colors}
+                             button={'Join'}
+                             showGameName={false}
+                             gameName={this.state.game.name}
+                             gameId={this.state.game.id}
+                             type={'join-game'}
+                             hideBack={true}
+                             createAccount={this.props.createAccount}
+                             login={this.props.login}
+                             errors={this.props.errors}
+                             title={'Join as New Player'} />
+                </Fragment>)}
                     </Col>
                 </Row>
             </GroupBox>

src/components/login-or-create-account/LoginOrCreateAccount.jsx

@@ -42,7 +42,7 @@ export default class LoginOrCreateAccount extends React.Component {
                                     createAccount={this.props.createAccount} />
                 )}
                 <div className="center">
-                    <a className="action-item" onClick={this.toggleLogin}>{this.state.showLogin ? 'Create Account' : 'Login'}</a>
+                    <a onClick={this.toggleLogin}>{this.state.showLogin ? 'Create Account' : 'Login'}</a>
                 </div>
             </>
         );

src/components/welcome/Welcome.jsx

@@ -19,23 +19,25 @@
 import React, { Fragment } from 'react'
 import { connect } from 'react-redux'
 
-import { Button } from '../widgets.jsx'
+import { GroupBox, Row, Col, Button } from '../widgets.jsx'
 import { start } from '../app/actions.js'
 
 
-const Welcome = (props) => {
-    return (
-        <Fragment>
-            <div className='intro-text'>
+class Welcome extends React.Component {
+    render() {
+        return (
+            <Fragment>
+              <div className='intro-text'>
                 <div className='game-card'>
-                    Your ancestors were farmers on one of the first transports to Alpha Centuari{`'`}s Proxima b. The growing season is short and harsh but the colonists depend on you for their food. Are you up to the challenge?
+                  Your ancestors were farmers on one of the first transports to Alpha Centuari{`'`}s Proxima b. The growing season is short and harsh but the colonists depend on you for their food. Are you up to the challenge?
                 </div>
-            </div>
-            <Button size='large' className='shadow intro action-item' onClick={props.start}>
+              </div>
+              <Button size='large' className='shadow intro' onClick={this.props.start}>
                 Begin
-            </Button>
-        </Fragment>
-    );
+              </Button>
+            </Fragment>
+        );
+    }
 }
 
 export default connect(

src/components/widgets.jsx

@@ -20,43 +20,51 @@ import React, { Fragment } from 'react'
 
 export { GroupBox, Row, Col, Button }
 
-const GroupBox = (props) => {
-    return (
-        <div className='panel card'>
-            {props.title ?
-             (<div className='card-divider'>
-                 {props.title}
-             </div>) : (<Fragment />)}
-            <div className={'card-section ' + props.className ? props.className : ''}>
-                {props.children}
+class GroupBox extends React.Component {
+    render() {
+        return (
+            <div className='panel card'>
+              {this.props.title ?
+                  (<div className='card-divider'>
+                    {this.props.title}
+                   </div>) : (<Fragment />)}
+                <div className={'card-section ' + this.props.className ? this.props.className : ''}>
+                {this.props.children}
+              </div>
             </div>
-        </div>
-    );
+        );
+    }
 }
 
-const Row = (props) => {
-    return (<div className={'grid-x full-width ' +
-                                 (props.collapse ? 'collapse' : '') + ' ' +
-                                 (props.className ? props.className : '')} >
-        {props.children}</div>);
+class Row extends React.Component {
+    render() {
+        return (<div className={'grid-x full-width ' +
+                                (this.props.collapse ? 'collapse' : '') + ' ' +
+                                (this.props.className ? this.props.className : '')} >
+                {this.props.children}</div>);
+    }
 }
 
-const Col = (props) => {
-    return (
-        <div className={'cell small-' + props.width + ' ' + (props.className ? props.className : '')}>
-            {props.children}
-        </div>
-    );
+class Col extends React.Component {
+    render() {
+        return (
+            <div className={'cell small-' + this.props.width + ' ' + (this.props.className ? this.props.className : '')}>
+                {this.props.children}
+            </div>
+        );
+    }
 }
 
-const Button = (props) => {
-    return (
-        <button className={'button ' + (props.size ? props.size : '') +
-                           ' ' + (props.className ? props.className : '')}
-                type={props.type || 'button'}
-                disabled={props.disabled}
-                onClick={props.onClick} >
-            {props.children}
-        </button>
-    );
+class Button extends React.Component {
+    render() {
+        return (
+            <button className={'button ' + (this.props.size ? this.props.size : '') +
+                    ' ' + (this.props.className ? this.props.className : '')}
+                    type={this.props.type || 'button'}
+                    disabled={this.props.disabled}
+                    onClick={this.props.onClick} >
+              {this.props.children}
+            </button>
+        );
+    }
 }

src/server/db.scm

@@ -1,7 +1,6 @@
 (use sql-de-lite crypt)
 
-;; (define *db* "/home/tjhintz/db")
-(define *db* "/farmdb/db")
+(define *db* "/home/tjhintz/db")
 
 (define-syntax with-db
   (syntax-rules ()
@@ -11,17 +10,12 @@
          body ...)))))
 
 (define (create-tables)
-  (when (not (file-exists? *db*))
-    (call-with-output-file *db*
-      (lambda (output-port)
-        ""
-        )))
   (with-db (db)
-    (exec (sql db "create table if not exists users(id INTEGER PRIMARY KEY, username TEXT, email TEXT, password TEXT, salt TEXT);"))
-    (exec (sql db "create table if not exists sessions(bindings TEXT, session_id TEXT PRIMARY KEY);"))
-    (exec (sql db "create table if not exists games(id INTEGER PRIMARY KEY, status TEXT, object TEXT, updated INTEGER);"))
-    (exec (sql db "create table if not exists players(id INTEGER PRIMARY KEY, object TEXT);"))
-    (exec (sql db "create table if not exists user_games(user_id INTEGER, game_id INTEGER);"))))
+    (exec (sql db "create table users(id INTEGER PRIMARY KEY, username TEXT, email TEXT, password TEXT, salt TEXT);"))
+    (exec (sql db "create table sessions(bindings TEXT, session_id TEXT PRIMARY KEY);"))
+    (exec (sql db "create table games(id INTEGER PRIMARY KEY, status TEXT, object TEXT, updated INTEGER);"))
+    (exec (sql db "create table players(id INTEGER PRIMARY KEY, object TEXT);"))
+    (exec (sql db "create table user_games(user_id INTEGER, game_id INTEGER);"))))
 
 (define (db-session-set! sid bindings)
   (with-db (db)
@@ -68,12 +62,6 @@
     (string=? (crypt password (alist-ref 'salt user))
               (alist-ref 'password user))))
 
-(define (unsecure-set-password username password)
-  (let ((salt (crypt-gensalt)))
-    (with-db (db)
-      (exec (sql db "update users set password=?, salt=? where username=?;")
-            (crypt password salt) salt username))))
-
 (define (alist->string alist)
   (with-output-to-string (lambda () (write alist))))
 

src/style.scss

@@ -16,20 +16,6 @@
 // along with the Alpha Centauri Farming project.  If not, see
 // <https://www.gnu.org/licenses/>.
 
-@font-face {
-  font-family: 'IndieFlower-Regular';
-  src: url('../assets/font/IndieFlower-Regular.woff2') format('woff2'),
-       url('../assets/font/IndieFlower-Regular.woff') format('woff'),
-       url('../assets/font/IndieFlower-Regular.ttf') format('truetype');
-}
-
-// @font-face {
-//   font-family: 'LibreBaskerville-Regular';
-//   src: url('../assets/font/LibreBaskerville-Regular.woff2') format('woff2'),
-//        url('../assets/font/LibreBaskerville-Regular.woff') format('woff'),
-//        url('../assets/font/LibreBaskerville-Regular.ttf') format('truetype');
-// }
-
 @import './foundation/foundation';
 
 // Global styles
@@ -173,8 +159,6 @@ $tab-margin: 0.3rem;
     width: 100%; }
 
 .space {
-    font-family: 'IndieFlower-Regular';
-    // font-family: 'LibreBaskerville-Regular';
     flex-grow: 1;
     flex-basis: 0;
     padding: 3px;
@@ -185,7 +169,6 @@ $tab-margin: 0.3rem;
         font-size: 4px; }
     @include breakpoint(large) {
         font-size: 14px; }
-    text-shadow: 0px 0px 2px black;
 }
 
 .space-description {
@@ -261,23 +244,6 @@ $tab-margin: 0.3rem;
     margin-top: 4px;
     margin-left: 5px; }
 
-.player-current {
-    position: relative;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
-    transition: all 0.3s ease-in-out; }
-
-.player-current::after {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: 12px;
-  top: 0;
-  left: 0;
-  background-color: rgba(255, 255, 255, 0.5);
-  box-shadow: 0 0px 5px $primary-color;
-  animation: die-pulse 2s ease-in-out infinite; }
-
 .player-selectable {
     border: 4px solid #ff816e;
     cursor: pointer;
@@ -305,7 +271,7 @@ $tab-margin: 0.3rem;
 .player-black {
     background-color: black; }
 .player-none {
-    background-color: #f2f2f2; } // 
+    background-color: #f2f2f2; }
 
 .tab .player {
     height: 27px;
@@ -471,107 +437,21 @@ $trade-margin: 3rem;
 .space-type-hay {
     background-color: hsla(120, 100%, 25%, 0.19); }
 
-.space-type-hay::after {
-    background: url('../assets/img/hay.svg') repeat;
-    content: '';
-    width: 100%;
-    height: 100%;
-    opacity: 0.2;
-    z-index: -1;
-    position: absolute;
-    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
-    background-size: auto 100%;
-    top: 0;
-    left: 0; }
-
 .space-type-cherry {
     background-color: hsla(0, 100%, 40%, 0.28); }
 
-.space-type-cherry::after {
-    background: url('../assets/img/fruit.svg') repeat;
-    content: '';
-    width: 100%;
-    height: 100%;
-    opacity: 0.1;
-    z-index: -1;
-    position: absolute;
-    filter: invert(13%) sepia(54%) saturate(6280%) hue-rotate(358deg) brightness(98%) contrast(123%);
-    background-size: auto 50%;
-    background-position: right;
-    top: 0;
-    left: 0; }
-
 .space-type-apple {
     background-color: hsla(0, 100%, 40%, 0.28); }
 
-.space-type-apple::after {
-    background: url('../assets/img/fruit.svg') repeat;
-    content: '';
-    width: 100%;
-    height: 100%;
-    opacity: 0.1;
-    z-index: -1;
-    position: absolute;
-    filter: invert(13%) sepia(54%) saturate(6280%) hue-rotate(358deg) brightness(98%) contrast(123%);
-    background-size: auto 50%;
-    background-position: right;
-    top: 0;
-    left: 0; }
-
 .space-type-wheat {
     background-color: hsla(50, 97%, 48%, 0.22); }
 
-.space-type-wheat::after {
-    background: url('../assets/img/wheat.svg') repeat;
-    content: '';
-    width: 100%;
-    height: 100%;
-    opacity: 0.2;
-    z-index: -1;
-    position: absolute;
-    filter: invert(68%) sepia(58%) saturate(747%) hue-rotate(8deg) brightness(102%) contrast(106%);
-    background-size: auto 110%;
-    background-position: right;
-    top: 0;
-    left: 0; }
-
 .space-type-corn {
     background-color: hsla(50, 97%, 48%, 0.22); }
 
-.space-type-corn::after {
-    background: url('../assets/img/wheat.svg') repeat;
-    content: '';
-    width: 100%;
-    height: 100%;
-    opacity: 0.2;
-    z-index: -1;
-    position: absolute;
-    filter: invert(68%) sepia(58%) saturate(747%) hue-rotate(8deg) brightness(102%) contrast(106%);
-    background-size: auto 110%;
-    background-position: right;
-    top: 0;
-    left: 0; }
-
 .space-type-cows {
     background-color: hsla(0, 25%, 43%, 0.49); }
 
-.space-type-cows::after {
-    background: url('../assets/img/cow.svg') repeat;
-    content: '';
-    width: 100%;
-    height: 100%;
-    opacity: 0.2;
-    z-index: -1;
-    position: absolute;
-    filter: invert(43%) sepia(5%) saturate(4943%) hue-rotate(314deg) brightness(76%) contrast(75%);
-    background-size: auto 35%;
-    background-position: right;
-    top: 0;
-    left: 0; }
-
-.space-type-buy {
-    background-color: hsla(240, 100%, 85%, 0.15); }
-
 .space-title {
     text-align: center;
     font-style: italic; }
@@ -806,14 +686,6 @@ $trade-margin: 3rem;
     padding: 0.5rem;
     display: none; }
 
-.tab.border-top {
-    $tab-border: 0.3rem solid $primary-color;
-    border-top: $tab-border;
-    border-bottom: none;
-    border-left: none;
-    border-right: none;
-}
-
 .tab.show {
     display: block; }
 
@@ -880,7 +752,6 @@ $trade-margin: 3rem;
     margin-top: 1rem; }
 
 .clear-background {
-    position: relative;
     background: white; }
 
 .harvest-card {
@@ -927,6 +798,8 @@ $trade-margin: 3rem;
     color: white; }
 
 .alert-overlay-contents {
+    max-height: 90vh;
+    overflow: auto;
     background: $light-color;
     padding: 2rem;
     display: flex;
@@ -934,10 +807,6 @@ $trade-margin: 3rem;
     justify-content: center;
     align-items: center; }
 
-.alert-container {
-    max-height: 90vh;
-    overflow: auto; }
-
 .moving {
     display: flex;
     justify-content: center;
@@ -1059,27 +928,70 @@ $intro-time: 6s;
     position: absolute;
     bottom: 1rem; }
 
-.lobby-icon {
-    cursor: pointer;
-    margin-left: 0.2rem; }
-
-.kick-player {
-    color: red; }
-
-.birthday-selected {
-    color: blue; }
-
-ul {
-    margin-left: 0;
-    list-style-type: none; }
-
-.font-preloader {
-    font-family: 'IndieFlower-Regular';
-    width: 0;
-    height: 0; }
-
-.game-over p {
-    margin-bottom: 0.2rem;
-    text-align: left;
-    width: 100%;
+/* -------- MENU ------- */
+/* Position and sizing of burger button */
+.bm-burger-button {
+  position: fixed;
+  width: 36px;
+  height: 30px;
+  left: 36px;
+  top: 36px;
+}
+
+/* Color/shape of burger icon bars */
+.bm-burger-bars {
+  background: #373a47;
+}
+
+/* Color/shape of burger icon bars on hover*/
+.bm-burger-bars-hover {
+  background: #a90000;
+}
+
+/* Position and sizing of clickable cross button */
+.bm-cross-button {
+  height: 24px;
+  width: 24px;
+}
+
+/* Color/shape of close button cross */
+.bm-cross {
+  background: #bdc3c7;
+}
+
+/*
+Sidebar wrapper styles
+Note: Beware of modifying this element as it can break the animations - you should not need to touch it in most cases
+*/
+.bm-menu-wrap {
+  position: fixed;
+  height: 100%;
+}
+
+/* General sidebar styles */
+.bm-menu {
+  background: #373a47;
+  padding: 2.5em 1.5em 0;
+  font-size: 1.15em;
+}
+
+/* Morph shape necessary with bubble or elastic */
+.bm-morph-shape {
+  fill: #373a47;
+}
+
+/* Wrapper for item list */
+.bm-item-list {
+  color: #b8b7ad;
+  padding: 0.8em;
+}
+
+/* Individual item */
+.bm-item {
+  display: inline-block;
+}
+
+/* Styling of overlay */
+.bm-overlay {
+  background: rgba(0, 0, 0, 0.3);
 }

webpack.common.js

@@ -19,7 +19,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-// const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
+const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const webpack = require("webpack");
@@ -28,10 +28,10 @@ const CssUrlRelativePlugin = require('css-url-relative-plugin')
 
 module.exports = {
     entry: {
-        app: './src/index.jsx',
+        app: './src/main.jsx',
     },
     output: {
-        filename: './assets/[name].[hash].js',
+        filename: './assets/[name].[contenthash].js',
         path: path.resolve(__dirname, 'dist'),
     },
     optimization: {
@@ -48,10 +48,15 @@ module.exports = {
     },
     plugins: [
         new CleanWebpackPlugin(),
-        // new FaviconsWebpackPlugin('./assets/img/tractor.svg'),
+        new HtmlWebpackPlugin({
+            title: 'Alpha Centauri Farming',
+            filename: 'main.html',
+            meta: {viewport: 'width=device-width, initial-scale=1'},
+        }),
+        new FaviconsWebpackPlugin('./assets/img/tractor.svg'),
         new MiniCssExtractPlugin({
-            filename: './assets/[name].[hash].css',
-            chunkFilename: './assets/[id].[hash].css',
+            filename: './assets/[name].[contenthash].css',
+            chunkFilename: './assets/[id].[contenthash].css',
         }),
         new CopyPlugin([
             { from: './src/server/farm.scm', to: './[name].[ext]' },
@@ -88,17 +93,10 @@ module.exports = {
             //     },
             // },
             {
-                test: /\.(svg|png|gif)$/,
+                test: /\.(woff|woff2|eot|ttf|otf|svg|png|gif)$/,
                 loader: 'file-loader',
                 options: {
-                    name: './assets/img/[name].[hash].[ext]',
-                },
-            },
-            {
-                test: /\.(woff|woff2|eot|ttf|otf)$/,
-                loader: 'file-loader',
-                options: {
-                    name: './assets/font/[name].[hash].[ext]',
+                    name: './assets/img/[name].[contenthash].[ext]',
                 },
             },
             {

webpack.dev.js

@@ -19,54 +19,15 @@
 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-const webpack = require('webpack');
 
 module.exports = function(env) {
     return merge(common, {
         mode: 'development',
         devtool: 'inline-source-map',
-        devServer: {
-            port: 9000,
-            contentBase: './dist',
-            hot: true,
-            proxy: {
-                '/websocket': {
-                    target: 'ws://localhost:8080',
-                    ws: true
-                },
-            },
-        },
         resolve: {
             modules: [path.resolve(__dirname, 'src'),
                       path.resolve(__dirname, env.assets),
                       'node_modules']
         },
-        plugins: [
-            new webpack.HotModuleReplacementPlugin(),
-            new ReactRefreshWebpackPlugin(),
-            new HtmlWebpackPlugin({
-                title: 'Alpha Centauri Farming',
-                filename: 'index.html',
-                meta: {viewport: 'width=device-width, initial-scale=1'},
-            }),
-        ],
-        module: {
-            rules: [
-                {
-                    test: /\.jsx?$/,
-                    exclude: /node_modules/,
-                    use: [
-                        {
-                            loader: require.resolve('babel-loader'),
-                            options: {
-                                plugins: [require.resolve('react-refresh/babel')],
-                            },
-                        },
-                    ],
-                },
-            ],
-        },
     });
 }

webpack.prod.js

@@ -21,8 +21,6 @@ const common = require('./webpack.common.js');
 const path = require('path');
 
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = function(env) {
     return merge(common, {
@@ -33,16 +31,8 @@ module.exports = function(env) {
                       path.resolve(__dirname, env.assets),
                       'node_modules']
         },
-        plugins: [
-            new HtmlWebpackPlugin({
-                title: 'Alpha Centauri Farming',
-                filename: 'main.html',
-                meta: {viewport: 'width=device-width, initial-scale=1'},
-            }),
-        ],
         optimization:  {
-            minimize: true,
-            minimizer: [new OptimizeCssAssetsPlugin({}), new TerserPlugin()],
+            minimizer: [new OptimizeCssAssetsPlugin({})],
         },
     });
 }