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
master
Thomas Hintz 2 years ago
parent 17723fc52c
commit 9fdbcc34f9
8 changed files with 136 additions and 153 deletions
Show Stats Download Patch File Download Diff File

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

@ -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(

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

@ -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>

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

@ -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(

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

@ -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;
}
}

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

@ -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(

72
src/components/widgets.jsx
Unescape Escape View File

@ -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>
);
}

16
src/server/farm.scm
Unescape Escape View File

@ -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))))

2
webpack.dev.js
Unescape Escape View File

@ -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',

Write Preview
Loading…
Cancel
Save