Fix (probably) all the iOS issues.

notes.txt

@@ -1,44 +1,21 @@
-/ Home page:
-  Create room
-    On click it creates a room and redirects there
+Game
+  -Remove turn
+  has n GameThreads where n is num players
 
-/game/[random chars]
-  if game doesn't exist 404
-  if not gameStarted
-    List players
-    if not in this game:
-      Form to join game
-    else:
-      if < 4 players
-        waiting for n more players
-      else if admin
-        Start game button
-      else
-        waiting for <admin name> to start game
-      List of connected players
-  if game in progress
-    If current player's turn
-      if first round:
-        Describe something to draw
-        Text field
-        Best: not to easy, not too hard
-        Sometimes combinations work well: eg "A lamp on top of a horse"
-      else if odd round
-        Canvas
-        Clear
-        Done
-      else
-        Image
-        What do you think this is?
-        Text field
-        Submit
-    else
-      Waiting on <player name>
-      if admin:
-        Button to remove player from game (because taking too long)
-  else (game complete)
-    Show progression of game
-    Download button
+GamePlayer
+  -Remove turnData
+  +removed - boolean (player's turns will be skipped)
+
+GameThread
+  gameId
+  turn - number (player index is = (turn + threadOffset) % playersLength)
+  threadOffset - 0-(num players-1) - offset from player order
+
+GameThreadTurn
+  threadId
+  userId
+  turnType - 'draw' or 'describe'
+  turnData
 
 UserPush
   userId
@@ -76,7 +53,7 @@ Reset scroll on dynamic page change.
 Trim image on submission? Add a padding.
 
 Next step:
-  On the "draw it" screen:
-    It appears too long on desktop. Its size should be limited.
-      Maybe redo the CSS here. It's really hacky.
-
+  Look into iOS/ipad issue.
+  Make starting games friendly.
+  Make big actions cancellable.
+  Push notifications

server/auth/index.tsx

@@ -53,13 +53,13 @@ export const router: Router = Router({
   strict: true,
 });
 
-router.post('/test-login', requireSameOrigin(), (req, res) => {
+router.all('/test-login', (req, res) => {
   if (!devMode) {
     res.status(403).send('Only allowed during dev');
     return;
   }
 
-  const id = createProbablyUniqueName();
+  const id = req.query.id || createProbablyUniqueName();
 
   req.session!.user = {
     email: 'foo@bar.com',

server/components/pages/styles.css

@@ -52,6 +52,22 @@ body {
   font: inherit;
   padding: 0.4em 0.7em;
   background: #e2e2e2;
+
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+  /* Prevent double-tap zoom */
+  touch-action: manipulation;
+}
+
+.button:disabled {
+  /*
+    This fixes a weird case where particular mouse/touch events just
+    vanish on disabled buttons. Without this, double-tap to zoom
+    still happens on Safari.
+  */
+  pointer-events: none;
 }
 
 .content-box {
@@ -233,6 +249,7 @@ body {
   overflow: hidden;
   position: relative;
   grid-row: canvas;
+  touch-action: pan-x pan-y;
 }
 
 .drawing-canvas {