From 3929c4d6b5670af890251ede5cb54232eac41341 Mon Sep 17 00:00:00 2001 From: meriadec Date: Fri, 9 Oct 2015 17:47:53 +0200 Subject: [PATCH] feat(core): work on loading texts --- actions/game.js | 4 ++++ components/game/SourceInput.js | 5 ++--- components/game/index.js | 4 ++++ components/pages/Game.js | 19 +++++++++++++------ components/pages/Home.js | 2 ++ stores/GameStore.js | 14 ++++++++++++++ 6 files changed, 39 insertions(+), 9 deletions(-) diff --git a/actions/game.js b/actions/game.js index 12f036e..9ba43cc 100644 --- a/actions/game.js +++ b/actions/game.js @@ -24,6 +24,10 @@ export function reset (context) { context.dispatch('RESET_GAME'); } +export function destroyGame (context) { + context.dispatch('DESTROY_GAME'); +} + export function tick (context) { context.dispatch('GAME_TICK'); } diff --git a/components/game/SourceInput.js b/components/game/SourceInput.js index 9c61603..95d5716 100644 --- a/components/game/SourceInput.js +++ b/components/game/SourceInput.js @@ -7,9 +7,8 @@ import { setFocus } from '../../actions/game'; export default class SourceInput extends React.Component { componentDidMount () { - setTimeout(() => { - this.props.context.executeAction(setFocus, true); - }); + const input = React.findDOMNode(this.refs.input); + input.focus(); } componentDidUpdate () { diff --git a/components/game/index.js b/components/game/index.js index 1417794..117146a 100644 --- a/components/game/index.js +++ b/components/game/index.js @@ -14,6 +14,7 @@ import GameStats from './GameStats'; // actions import { + destroyGame, tick, beginTest, updateWord, @@ -66,6 +67,9 @@ class Game extends React.Component { if (this._hasGameTick) { clearInterval(this._gameTick); } + setTimeout(() => { + this.props.context.executeAction(destroyGame); + }); } updateStats () { diff --git a/components/pages/Game.js b/components/pages/Game.js index d7031ac..72934b7 100644 --- a/components/pages/Game.js +++ b/components/pages/Game.js @@ -15,7 +15,8 @@ import { const gameStore = context.getStore(GameStore); const routeStore = context.getStore(RouteStore); return { - text: gameStore.getText(), + isFetching: gameStore.isFetching(), + textSource: gameStore.getTextSource(), route: routeStore.getCurrentNavigate() }; }) @@ -24,19 +25,23 @@ export default class GamePage extends React.Component { constructor (props) { super(props); - if (!props.text) { - const id = props.route.url.split('/')[2]; - props.context.executeAction(loadText, id); + const id = props.route.url.split('/')[2]; + + if (!props.textSource || id !== String(props.textSource.id)) { + setTimeout(() => { + props.context.executeAction(loadText, id); + }); } } render () { - const { text } = this.props; - const hasText = !!text; + const { textSource } = this.props; + const hasText = !!textSource; return (
+ {hasText && ( @@ -47,7 +52,9 @@ export default class GamePage extends React.Component {
)} + ); } } + diff --git a/components/pages/Home.js b/components/pages/Home.js index a75250e..3c8d693 100644 --- a/components/pages/Home.js +++ b/components/pages/Home.js @@ -5,6 +5,8 @@ import React from 'react'; import { NavLink } from 'fluxible-router'; import { loadRandom } from '../../actions/game'; +import { Loader } from '../ui'; + export default class Home extends React.Component { componentDidMount () { diff --git a/stores/GameStore.js b/stores/GameStore.js index fd8e3b6..669ccc8 100644 --- a/stores/GameStore.js +++ b/stores/GameStore.js @@ -28,6 +28,9 @@ class GameStore extends BaseStore { init (text) { _.assign(this, { + // check if a text is currently being fetched + _isFetching: false, + // source from server _source: text || null, @@ -68,12 +71,14 @@ class GameStore extends BaseStore { getStats () { return this._stats; } getText () { return this.text; } + getTextSource () { return this._source; } getTextId () { return _.get(this._source, 'id'); } getDuration () { if (!this._startDate) { return 0; } return moment().diff(this._startDate); } typedLetters () { return this._typedLetters; } + isFetching () { return this._isFetching; } isPlaying () { return this._isPlaying; } isReady () { return this._isReady; @@ -152,6 +157,9 @@ class GameStore extends BaseStore { handleTextLoad () { this._isReady = false; + this._isFetching = true; + this.text = null; + this._source = null; this.emitChange(); } @@ -165,11 +173,17 @@ class GameStore extends BaseStore { this.emitChange(); } + handleDestroyGame () { + this.init(); + this.emitChange(); + } + } GameStore.storeName = 'GameStore'; GameStore.handlers = { + DESTROY_GAME: 'handleDestroyGame', TEXT_LOAD: 'handleTextLoad', TEXT_LOADED: 'handleTextLoaded', RANDOM_TEXT_LOADED: 'handleRandomTextLoaded',