summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorThomas Hintz <t@thintz.com>2022-05-22 06:11:07 -0700
committerThomas Hintz <t@thintz.com>2022-05-22 06:11:07 -0700
commit9fdbcc34f9a3e928b5555efff406da43f6847275 (patch)
treee3fa96b2c95be12b9115376e55702a389c1f0b5b
parent17723fc52c3fbe283d522632190ab5658df6bd1f (diff)
downloadfarm-master.tar.gz
Convert some comp to functions, attempt fix multi-deviceHEADmaster
-rw-r--r--src/components/app/App.jsx87
-rw-r--r--src/components/create-account/CreateAccount.jsx8
-rw-r--r--src/components/create-or-join/CreateOrJoin.jsx44
-rw-r--r--src/components/farm/MessagePanel.jsx36
-rw-r--r--src/components/welcome/Welcome.jsx24
-rw-r--r--src/components/widgets.jsx72
-rw-r--r--src/server/farm.scm16
-rw-r--r--webpack.dev.js2
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
@@ -64,14 +64,6 @@ export default class CreateAccount extends React.Component {
<Row>
<Col width="12">
<label>
- Email (optional)
- <input onChange={this.onChange} name="email" type="email" />
- </label>
- </Col>
- </Row>
- <Row>
- <Col width="12">
- <label>
Password
<input onChange={this.onChange} required name="password" type="password" />
</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',