Breaking GuessPane into a module, also renaming some index.jsx

client/src/components/screens/GamePanel/ClickMarkerMap.jsx

@@ -1,11 +0,0 @@
-import React, { useRef } from 'react';
-import useClickMarker from '../../../hooks/useClickMarker';
-import useMap from '../../../hooks/useMap';
-import styles from './GamePanel.module.css';
-
-export default ({ onMarkerMoved }) => {
-  const mapDivRef = useRef(null);
-  const mapRef = useMap(mapDivRef);
-  useClickMarker(mapRef, onMarkerMoved);
-  return <div className={styles.fullsize} ref={mapDivRef} />;
-};

client/src/components/screens/GamePanel/GamePanel.module.css

@@ -39,43 +39,6 @@
   color: #b1b1b1;
 }
 
-.guess {
-  height: 100%;
-  width: 100%;
-  flex: 1;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-around;
-}
-
-.map {
-  flex: 3;
-  height: 100%;
-  width: 100%;
-}
-
-.submit {
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  text-align: center;
-}
-
-.submitButton {
-  flex: 1;
-  margin: 2px;
-}
-
-.timer {
-  padding: 1px;
-  display: inline;
-}
-
-.timer--timeout {
-  color: red;
-}
-
 @media only screen and (min-width: 600px) and (min-height: 600px) {
   .page {
     display: block;
@@ -83,59 +46,4 @@
     margin-bottom: 2px;
     margin-right: 2px;
   }
-
-  .guess {
-    position: absolute;
-    left: 10px;
-    bottom: 10px;
-    height: 200px;
-    width: 200px;
-    flex-flow: column-reverse nowrap;
-    z-index: 1;
-    opacity: .75;
-    transition: 1s;
-  }
-
-  .guess:hover {
-    height: 400px;
-    width: 400px;
-    opacity: 1;
-    transition: 0.5s;
-  }
-
-  .map {
-    opacity: .75;
-    transition: 1s;
-  }
-
-  .map:hover {
-    opacity: 1;
-  }
-
-  .submit {
-    flex-flow: column-reverse nowrap;
-    margin-top: 4px;
-    color: #fff;
-  }
-
-  .submit>* {
-    background-color: #333;
-  }
-
-  .submitButton {
-    margin: 0px;
-    margin-bottom: 5px;
-  }
-
-  .guess .submitButton {
-    visibility: hidden;
-    opacity: 0;
-    transition: 1s;
-  }
-
-  .guess:hover .submitButton {
-    visibility: visible;
-    opacity: 1;
-    transition: 0.5s;
-  }
 }

client/src/components/screens/GamePanel/GuessPane/ClickMarkerMap.jsx

@@ -0,0 +1,11 @@
+import React, { useRef } from 'react';
+import useClickMarker from '../../../../hooks/useClickMarker';
+import useMap from '../../../../hooks/useMap';
+import styles from './GuessPane.module.css';
+
+export default ({ onMarkerMoved }) => {
+  const mapDivRef = useRef(null);
+  const mapRef = useMap(mapDivRef);
+  useClickMarker(mapRef, onMarkerMoved);
+  return <div className={styles.map} ref={mapDivRef} />;
+};

client/src/components/screens/GamePanel/GuessPane.jsx → client/src/components/screens/GamePanel/GuessPane/GuessPane.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { dispatch } from '../../../domain/gameStore';
+import { dispatch } from '../../../../domain/gameStore';
 import ClickMarkerMap from './ClickMarkerMap';
-import styles from './GamePanel.module.css';
+import styles from './GuessPane.module.css';
 import RoundTimer from './RoundTimer';
 
 export default () => {
@@ -16,10 +16,8 @@ export default () => {
   };
 
   return (
-    <div className={styles.guess}>
-      <div className={styles.map}>
-        <ClickMarkerMap onMarkerMoved={setSelectedPoint} />
-      </div>
+    <div className={styles.pane}>
+      <ClickMarkerMap onMarkerMoved={setSelectedPoint} />
       <div className={styles.submit}>
         <RoundTimer onTimeout={handleSubmitGuess} />
         <button

client/src/components/screens/GamePanel/GuessPane/GuessPane.module.css

@@ -0,0 +1,93 @@
+.pane {
+  height: 100%;
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-around;
+}
+
+.map {
+  flex: 3;
+  height: 100%;
+  width: 100%;
+}
+
+.submit {
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  text-align: center;
+}
+
+.submitButton {
+  flex: 1;
+  margin: 2px;
+}
+
+.timer {
+  padding: 1px;
+  display: inline;
+}
+
+.timer--timeout {
+  color: red;
+}
+
+@media only screen and (min-width: 600px) and (min-height: 600px) {
+  .pane {
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    height: 200px;
+    width: 200px;
+    flex-flow: column-reverse nowrap;
+    z-index: 1;
+    opacity: .75;
+    transition: 1s;
+  }
+
+  .pane:hover {
+    height: 400px;
+    width: 400px;
+    opacity: 1;
+    transition: 0.5s;
+  }
+
+  .map {
+    opacity: .75;
+    transition: 1s;
+  }
+
+  .map:hover {
+    opacity: 1;
+  }
+
+  .submit {
+    flex-flow: column-reverse nowrap;
+    margin-top: 4px;
+    color: #fff;
+  }
+
+  .submit>* {
+    background-color: #333;
+  }
+
+  .submitButton {
+    margin: 0px;
+    margin-bottom: 5px;
+  }
+
+  .pane .submitButton {
+    visibility: hidden;
+    opacity: 0;
+    transition: 1s;
+  }
+
+  .pane:hover .submitButton {
+    visibility: visible;
+    opacity: 1;
+    transition: 0.5s;
+  }
+}

client/src/components/screens/GamePanel/RoundTimer.jsx → client/src/components/screens/GamePanel/GuessPane/RoundTimer.jsx

@@ -1,7 +1,7 @@
 import ms from 'pretty-ms';
 import React, { useEffect, useState } from 'react';
-import { dispatch, useRoundSeconds } from '../../../domain/gameStore';
-import styles from './GamePanel.module.css';
+import { dispatch, useRoundSeconds } from '../../../../domain/gameStore';
+import styles from './GuessPane.module.css';
 
 const useRoundTimer = (onTimeout) => {
   const remaining = useRoundSeconds();

client/src/components/screens/GamePanel/GuessPane/index.js

@@ -0,0 +1 @@
+export { default } from './GuessPane';