Refactor App

app/frontend/packs/App/App.purs

@@ -6,9 +6,10 @@ import App.Api.Client as Api
 import App.Command.Command as Command
 import App.Command.CommandManager as CommandManager
 import App.Drawer.PieceActor as PieceActor
+import App.EaselJS.Rectangle (Rectangle)
 import App.EaselJS.Rectangle as Rectangle
-import App.EaselJS.Stage as Stage
 import App.EaselJS.Ticker as Ticker
+import App.Firestore (FirebaseToken(..))
 import App.Firestore as Firestore
 import App.GameManager (GameManager)
 import App.GameManager as GameManager
@@ -25,7 +26,6 @@ import App.Utils as Utils
 import Data.Argonaut (jsonParser)
 import Data.Array as Array
 import Data.Int as Int
-import Data.Newtype (unwrap)
 import Data.String (Pattern(..))
 import Data.String as String
 import Data.Time.Duration (Milliseconds(..))
@@ -54,6 +54,11 @@ type App =
   , picture :: Element
   , sounds :: Element
   , log :: Element
+  , gameId :: Maybe GameId
+  , puzzleId :: PuzzleId
+  , pictureUrl :: String
+  , initialView :: Maybe Rectangle
+  , firebaseToken :: Maybe FirebaseToken
   }
 
 init :: Effect Unit
@@ -62,12 +67,37 @@ init = do
 
   doc <- Window.document =<< HTML.window
   playboard <- query "#playboard"
-  baseCanvas <- query "#field"
+  baseCanvas <- query "#base-canvas"
   activeCanvas <- query "#active-canvas"
   picture <- query "#picture"
   sounds <- query "#sounds"
   log <- query "#log"
-  play { playboard, baseCanvas, activeCanvas, picture, sounds, log }
+
+  gameId <- do
+    dataset "game-id" playboard >>= traverse \x -> do
+      GameId <$> Int.fromString x # throwOnNothing "Bad game id"
+  puzzleId <- do
+    x <- dataset' "puzzle-id" playboard
+    PuzzleId <$> Int.fromString x # throwOnNothing "Bad puzzle id"
+  pictureUrl <- dataset' "picture" playboard
+  initialView <- do
+    dataset "initial-view" playboard >>= traverse \x -> do
+      jsonParser x >>= Rectangle.decode # throwOnLeft
+
+  firebaseToken <- map FirebaseToken <$> dataset "firebase-token" playboard
+
+  play { playboard
+       , baseCanvas
+       , activeCanvas
+       , picture
+       , sounds
+       , log
+       , gameId
+       , puzzleId
+       , pictureUrl
+       , initialView
+       , firebaseToken
+       }
 
 
 getGameId :: Element -> Effect (Maybe GameId)
@@ -80,15 +110,13 @@ play :: App -> Effect Unit
 play app = do
   setupLogger app
 
-  gameId <- getGameId app.playboard
-  pictureUrl <- dataset' "picture" app.playboard
   launchAff_ do
     { image, puzzle } <- sequential $
       { image: _, puzzle: _ }
-      <$> parallel (Utils.loadImage pictureUrl)
+      <$> parallel (Utils.loadImage app.pictureUrl)
       <*> parallel (loadPuzzle app)
     gi <- liftEffect do
-      game <- GameManager.create gameId puzzle image
+      game <- GameManager.create app.gameId puzzle image
       CommandManager.register game
       setupUi game app
 
@@ -98,16 +126,13 @@ play app = do
       isTouchScreen <- Utils.isTouchScreen
       bool MouseInteractor.attach TouchInteractor.attach isTouchScreen gi
 
-      dataset "initial-view" app.playboard
-        >>= traverse_ \str -> do
-          rect <- jsonParser str >>= Rectangle.decode # throwOnLeft
-          GameInteractor.contain rect gi
+      app.initialView # traverse_ \rect -> do
+        GameInteractor.contain rect gi
 
       Utils.fadeOutSlow app.picture
       pure gi
 
-
-    maybe updateStandaloneGame updateOnlineGame gameId gi
+    maybe updateStandaloneGame (updateOnlineGame app.firebaseToken) app.gameId gi
 
     liftEffect do
       Utils.fadeOutSlow =<< query "#game-progress .loading"
@@ -119,24 +144,22 @@ play app = do
 
 loadPuzzle :: App -> Aff Puzzle
 loadPuzzle app = do
-  id <- liftEffect $ do
-    id' <- dataset' "puzzle-id" app.playboard
-    Int.fromString id' # throwOnNothing "Bad puzzle id"
-  Logger.info $ "puzzle id: " <> show id
+  Logger.info $ "puzzle id: " <> show app.puzzleId
   Utils.retryOnFailAfter (Milliseconds 5000.0) do
-    Api.getPuzzle (PuzzleId id)
+    Api.getPuzzle app.puzzleId
 
 
 updateStandaloneGame :: GameInteractor -> Aff Unit
 updateStandaloneGame gi = liftEffect do
   Logger.info $ "standalone: " <> show true
   GameInteractor.shuffle gi
 
-updateOnlineGame :: GameId -> GameInteractor -> Aff Unit
-updateOnlineGame gameId gi = do
-  Logger.info $ "game id: " <> show (unwrap gameId)
+updateOnlineGame :: Maybe FirebaseToken -> GameId -> GameInteractor -> Aff Unit
+updateOnlineGame token gameId gi = do
+  Logger.info $ "game id: " <> show gameId
   liftEffect $ do
-    firestore <- Firestore.connect
+    token' <- token # throwOnNothing "firebase token is missing"
+    firestore <- Firestore.connect token' gameId
     firestore # Firestore.onCommandAdd \cmd -> do
       actor <- GameManager.findPieceActor gi.manager (Command.pieceId cmd)
       alive <- PieceActor.isAlive actor

app/frontend/packs/App/Firestore.js

@@ -8,13 +8,11 @@ const firestoreSettings = process.env.FIRESTORE_EMULATOR_HOST ?
         ssl: false
       } : {};
 
-exports.connect = () => {
-  const { firebaseToken, gameId } = document.querySelector("#playboard").dataset;
-
+exports.connect = token => gameId => () => {
   firebase.initializeApp(firebaseConfig);
   firebase
     .auth()
-    .signInWithCustomToken(firebaseToken)
+    .signInWithCustomToken(token)
     .catch(error => {
       const { code, message } = error;
       if (code === 'auth/invalid-custom-token') {
@@ -29,7 +27,7 @@ exports.connect = () => {
 
   window.firebase = firebase;
 
-  return { db, gameId };
+  return { db, gameId: gameId.toString() };
 };
 
 exports.addCommand = obj => ({ db, gameId }) => () => {

app/frontend/packs/App/Firestore.purs

@@ -3,13 +3,21 @@ module App.Firestore where
 import AppPrelude
 
 import App.Command.Command (Command)
+import App.Model.Game (GameId)
 import Data.Argonaut (Json, decodeJson, encodeJson)
+import Data.Newtype (class Newtype)
 
 
-foreign import data Firestore :: Type
+newtype FirebaseToken = FirebaseToken String
+
+derive instance newtypeFirebaseToken :: Newtype FirebaseToken _
+derive newtype instance eqFirebaseToken :: Eq FirebaseToken
+derive newtype instance showFirebaseToken :: Show FirebaseToken
 
-foreign import connect :: Effect Firestore
 
+foreign import data Firestore :: Type
+
+foreign import connect :: FirebaseToken -> GameId -> Effect Firestore
 foreign import onSnapshotCommandAdd :: (Json -> Effect Unit) -> Firestore -> Effect Unit
 foreign import addCommand :: Json -> Firestore -> Effect Unit
 

app/frontend/styles/playboard.scss

@@ -18,14 +18,16 @@ body {
   }
 }
 
-#field {
+#base-canvas {
   position: absolute;
   left: 0;
   top: 0;
 }
 
 #active-canvas {
   position: absolute;
+  left: 0;
+  top: 0;
   /* filter: */
   /*   drop-shadow(0 0 2px rgba(255, 255, 255, 0.8)) */
   /*   drop-shadow(0 6px 6px rgba(0, 0, 0, 0.4)); */

app/views/games/show.html.slim

@@ -1,7 +1,7 @@
 - longer = [@puzzle.width, @puzzle.height].max
 - view = { x: @puzzle.width * 0.5 - longer, y: @puzzle.height * 0.5 - longer, width: longer * 2, height: longer * 2 }
 #playboard.bg-lawrencium data-game-id=@game&.id data-picture=url_for(@puzzle.picture) data-initial-view=view.to_json data-puzzle-id=@puzzle.id data-firebase-token=@firebase_token
-  canvas#field.hidden
+  canvas#base-canvas.hidden
   canvas#active-canvas.hidden
 
   #game-progress.progress class=([@puzzle.difficulty] + (@standalone ? %w(standalone) : []))