From 9fdbcc34f9a3e928b5555efff406da43f6847275 Mon Sep 17 00:00:00 2001
From: Thomas Hintz <t@thintz.com>
Date: Sun, 22 May 2022 06:11:07 -0700
Subject: [PATCH] Convert some comp to functions, attempt fix multi-device

---
 src/components/app/App.jsx                    | 87 +++++++++----------
 .../create-account/CreateAccount.jsx          |  8 --
 .../create-or-join/CreateOrJoin.jsx           | 44 +++++-----
 src/components/farm/MessagePanel.jsx          | 36 ++++----
 src/components/welcome/Welcome.jsx            | 24 +++--
 src/components/widgets.jsx                    | 72 +++++++--------
 src/server/farm.scm                           | 16 +++-
 webpack.dev.js                                |  2 +
 8 files changed, 136 insertions(+), 153 deletions(-)

diff --git a/src/components/app/App.jsx b/src/components/app/App.jsx
index 4002d23..3cfd53f 100644
--- a/src/components/app/App.jsx
+++ b/src/components/app/App.jsx
@@ -28,67 +28,62 @@ 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 {
-    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 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 App extends React.Component {
-    render() {
-        let view;
-        switch (this.props.screen) {
+const App = ({ screen, logout, createAccount, login, errors }) => {
+    let view;
+    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>);
-                break;
-            case SCREENS.newGame:
-                view = (<Chrome>
+        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>
                     <div className='view-container'>
-                        <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}
+                        <JoinGame createAccount={createAccount}
+                                  login={login}
+                                  errors={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(
diff --git a/src/components/create-account/CreateAccount.jsx b/src/components/create-account/CreateAccount.jsx
index c48a5a1..14ed404 100644
--- a/src/components/create-account/CreateAccount.jsx
+++ b/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>
diff --git a/src/components/create-or-join/CreateOrJoin.jsx b/src/components/create-or-join/CreateOrJoin.jsx
index 7ac1dce..1986ac5 100644
--- a/src/components/create-or-join/CreateOrJoin.jsx
+++ b/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 {
-    signOut = (e) => {
+const CreateOrJoin = ({ signOut, showNewGame, start, showJoinGame }) => {
+    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}>
-                    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>
-        );
-    }
+    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>
+    );
 }
 
 export default connect(
diff --git a/src/components/farm/MessagePanel.jsx b/src/components/farm/MessagePanel.jsx
index 19fde7f..df924ae 100644
--- a/src/components/farm/MessagePanel.jsx
+++ b/src/components/farm/MessagePanel.jsx
@@ -21,26 +21,22 @@ import { connect } from 'react-redux'
 
 import SpaceNode from './SpaceNode.jsx'
 
-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;
-        }
+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;
     }
 }
 
diff --git a/src/components/welcome/Welcome.jsx b/src/components/welcome/Welcome.jsx
index 31a94e2..977ad51 100644
--- a/src/components/welcome/Welcome.jsx
+++ b/src/components/welcome/Welcome.jsx
@@ -19,25 +19,23 @@
 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 {
-    render() {
-        return (
-            <Fragment>
-              <div className='intro-text'>
+const Welcome = (props) => {
+    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={this.props.start}>
+            </div>
+            <Button size='large' className='shadow intro action-item' onClick={props.start}>
                 Begin
-              </Button>
-            </Fragment>
-        );
-    }
+            </Button>
+        </Fragment>
+    );
 }
 
 export default connect(
diff --git a/src/components/widgets.jsx b/src/components/widgets.jsx
index f91b00e..4980ca9 100644
--- a/src/components/widgets.jsx
+++ b/src/components/widgets.jsx
@@ -20,51 +20,43 @@ import React, { Fragment } from 'react'
 
 export { GroupBox, Row, Col, Button }
 
-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>
+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}
             </div>
-        );
-    }
+        </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 Row = (props) => {
+    return (<div className={'grid-x full-width ' +
+                                 (props.collapse ? 'collapse' : '') + ' ' +
+                                 (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 Col = (props) => {
+    return (
+        <div className={'cell small-' + props.width + ' ' + (props.className ? props.className : '')}>
+            {props.children}
+        </div>
+    );
 }
 
-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>
-        );
-    }
+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>
+    );
 }
diff --git a/src/server/farm.scm b/src/server/farm.scm
index 0083d48..3e29414 100644
--- a/src/server/farm.scm
+++ b/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))))
diff --git a/webpack.dev.js b/webpack.dev.js
index ae4cadb..3c8587c 100644
--- a/webpack.dev.js
+++ b/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',