feat(core): work on loading texts

42Zavattas · Oct 9, 2015 · 3929c4d · 3929c4d
1 parent 68ed699
commit 3929c4d
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 (
       <div>
+
         {hasText && (
           <Game
             context={this.props.context} />
@@ -47,7 +52,9 @@ export default class GamePage extends React.Component {
             <Loader />
           </div>
         )}
+
       </div>
     );
   }
 }
+
diff --git 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
@@ -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',