Convert some comp to functions, attempt fix multi-device

src/components/app/App.jsx

@@ -28,29 +28,25 @@ import Welcome from '../welcome/Welcome.jsx'
 import Tractor from '../tractor/Tractor.jsx'
 
 import { SCREENS, messagePanelId } from '../../constants.js'
-import { play } from './actions.js'
 
-class Chrome extends React.Component {
+const Chrome = ({ children, spikes, tractorClass }) => {
-    render() {
     return (
         <div className='flex-fullcenter'>
             <div className='background-heading'><h1>Alpha Centauri Farming</h1></div>
-                {this.props.children}
+            {children}
-                <Tractor spikes={this.props.spikes} className={this.props.tractorClass} />
+            <Tractor spikes={spikes} className={tractorClass} />
         </div>
     );
-    }
 }
 
-class App extends React.Component {
+const App = ({ screen, logout, createAccount, login, errors }) => {
-    render() {
     let view;
-        switch (this.props.screen) {
+    switch (screen) {
         case SCREENS.intro:
             view = (<Chrome spikes={true} tractorClass='intro'><Welcome /></Chrome>);
             break;
         case SCREENS.start:
-                view = (<Chrome><CreateOrJoin signOut={this.props.logout} /></Chrome>);
+            view = (<Chrome><CreateOrJoin signOut={logout} /></Chrome>);
             break;
         case SCREENS.newGame:
             view = (<Chrome>
@@ -60,9 +56,9 @@ class App extends React.Component {
                              title={'New Game'}
                              type={'new-game'}
                              showGameName={true}
-                                 createAccount={this.props.createAccount}
+                             createAccount={createAccount}
-                                 login={this.props.login}
+                             login={login}
-                                 errors={this.props.errors}
+                             errors={errors}
                     />
                 </div>
             </Chrome>);
@@ -71,9 +67,9 @@ class App extends React.Component {
             view = (
                 <Chrome>
                     <div className='view-container'>
-                            <JoinGame createAccount={this.props.createAccount}
+                        <JoinGame createAccount={createAccount}
-                                      login={this.props.login}
+                                  login={login}
-                                      errors={this.props.errors}
+                                  errors={errors}
                         />
                     </div>
                 </Chrome>);
@@ -88,7 +84,6 @@ class App extends React.Component {
             <div id={messagePanelId}><MessagePanel /></div>
         </Fragment>
     );
-    }
 }
 
 export default connect(

src/components/create-account/CreateAccount.jsx

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

src/components/farm/MessagePanel.jsx

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

src/components/welcome/Welcome.jsx

@@ -19,12 +19,11 @@
 import React, { Fragment } from 'react'
 import { connect } from 'react-redux'
 
-import { GroupBox, Row, Col, Button } from '../widgets.jsx'
+import { Button } from '../widgets.jsx'
 import { start } from '../app/actions.js'
 
 
-class Welcome extends React.Component {
+const Welcome = (props) => {
-    render() {
     return (
         <Fragment>
             <div className='intro-text'>
@@ -32,12 +31,11 @@ class Welcome extends React.Component {
                     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={this.props.start}>
+            <Button size='large' className='shadow intro action-item' onClick={props.start}>
                 Begin
             </Button>
         </Fragment>
     );
-    }
 }
 
 export default connect(

src/components/widgets.jsx

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

src/server/farm.scm

@@ -127,6 +127,8 @@
   (setter last-updated)
   (setter last-cash)
   (setter mailbox)
+  (setter websocket-thread)
+  (setter push-websocket-thread)
   (setter mutex)
   (setter harvesting)
   (setter hay-doubled)
@@ -170,6 +172,8 @@
      (alist-ref 'last-updated args eqv? 0)
      (alist-ref 'last-cash args eqv? 5000)
      (alist-ref 'mailbox args eqv? (make-mailbox))
+     (alist-ref 'websocket-thread args eqv? #f)
+     (alist-ref 'push-websocket-thread args eqv? #f)
      (alist-ref 'mutex args eqv? (make-mutex 'player))
      (alist-ref 'harvesting args eqv? #f)
      (alist-ref 'hay-doubled args eqv? #f)
@@ -434,7 +438,11 @@
 (define session-cookie-name (make-parameter "awful-cookie"))
 (define session-cookie-setter (make-parameter
                                (lambda (sid)
-                                 (set-cookie! (session-cookie-name) sid))))
+                                 (set-cookie! (session-cookie-name)
+                                              sid
+                                              max-age: (* 60 60 24 365) ;; one year
+                                              )
+                                 )))
 ;; TODO make cookie last forever
 (session-lifetime (* 60 60 60 24 7 4))
 
@@ -1603,12 +1611,12 @@
            (create-start-response "new-game-started")))
         ((string=? type "create-account")
          (let ((username (alist-ref 'username msg))
-               (email (alist-ref 'email msg))
+               ;; (email (alist-ref 'email msg))
                (password (alist-ref 'password msg))
                (confirm-password (alist-ref 'confirmPassword msg)))
            (if (string=? password confirm-password)
                (if (null? (fetch-user username))
-                   (let ((id (add-user username email password)))
+                   (let ((id (add-user username "" password)))
                      (session-set! (sid) 'user-id id)
                      (create-start-response "start-init"))
                    (create-start-response "start-init" errors: '("Account already exists")))
@@ -1882,6 +1890,8 @@
 (define (websocket-page)
   (sid (read-cookie (session-cookie-name)))
   ;; TODO some kind of error handling if (sid) #f
+  (when (and (*player*) (not (player-websocket-thread (*player*))))
+    (set! (player-websocket-thread (*player*)) (current-thread)))
   (with-concurrent-websocket
    (lambda ()
      (let loop ((msg (read-json (receive-message))))

webpack.dev.js

@@ -21,6 +21,7 @@ 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, {
@@ -43,6 +44,7 @@ module.exports = function(env) {
                       'node_modules']
         },
         plugins: [
+            new webpack.HotModuleReplacementPlugin(),
             new ReactRefreshWebpackPlugin(),
             new HtmlWebpackPlugin({
                 title: 'Alpha Centauri Farming',