tjhintz/farm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Convert some comp to functions, attempt fix multi-device

Browse Source
This commit is contained in:
Thomas Hintz
2022-05-22 06:11:07 -07:00
parent 17723fc52c
commit 9fdbcc34f9
8 changed files with 136 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/app/App.jsx
View File

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

8
src/components/create-account/CreateAccount.jsx
View File

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

44
src/components/create-or-join/CreateOrJoin.jsx
View File

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

36
src/components/farm/MessagePanel.jsx
View File

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

24
src/components/welcome/Welcome.jsx
View File

@@ -19,25 +19,23 @@
import React, { Fragment } from 'react' import React, { Fragment } from 'react'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { GroupBox, Row, Col, Button } from '../widgets.jsx' import { Button } from '../widgets.jsx'
import { start } from '../app/actions.js' import { start } from '../app/actions.js'
class Welcome extends React.Component { const Welcome = (props) => {
render() { return (
return ( <Fragment>
<Fragment> <div className='intro-text'>
<div className='intro-text'>
<div className='game-card'> <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>
</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 Begin
</Button> </Button>
</Fragment> </Fragment>
); );
}
} }
export default connect( export default connect(

72
src/components/widgets.jsx
View File

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

16
src/server/farm.scm
View File

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

2
webpack.dev.js
View File

@@ -21,6 +21,7 @@ const common = require('./webpack.common.js');
const path = require('path'); const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const webpack = require('webpack');
module.exports = function(env) { module.exports = function(env) {
return merge(common, { return merge(common, {
@@ -43,6 +44,7 @@ module.exports = function(env) {
'node_modules'] 'node_modules']
}, },
plugins: [ plugins: [
new webpack.HotModuleReplacementPlugin(),
new ReactRefreshWebpackPlugin(), new ReactRefreshWebpackPlugin(),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
title: 'Alpha Centauri Farming', title: 'Alpha Centauri Farming',