Renaming all the components in the front end to be react style

client/src/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Game from "./components/game.component";
+import Game from "./components/Game";
 import './App.css';
 
 

client/src/components/game.component/game.jsx → client/src/components/Game/Game.jsx

@@ -6,13 +6,13 @@ import {
   POST_ROUND,
   POST_GAME,
   ERROR,
-} from "./game-state.enum";
-import HeaderAndFooter from "./header-and-footer.component";
-import PreGame from '../screens/pre-game.component';
-import PreRound from '../screens/pre-round.component';
-import GamePanelContainer from "../screens/game-panel.component";
-import RoundSummary from '../screens/round-summary.component';
-import PlayerScoresContainer from "../screens/player-scores.component";
+} from "./GameState";
+import HeaderAndFooter from "./HeaderAndFooter";
+import PreGame from '../screens/PreGame';
+import PreRound from '../screens/PreRound';
+import GamePanel from "../screens/GamePanel";
+import RoundSummary from '../screens/RoundSummary';
+import PlayerScores from "../screens/PlayerScores";
 
 const initialState = {
   gameState: PRE_GAME,
@@ -43,7 +43,7 @@ const Game = () => {
         onStart={() => setGameState(IN_ROUND)}
       />
     case IN_ROUND:
-      return <GamePanelContainer
+      return <GamePanel
         gameId={state.gameId}
         playerName={state.playerName}
         onRoundEnd={lastRound => setGameStateAnd(POST_ROUND, { lastRound })}
@@ -57,7 +57,7 @@ const Game = () => {
     case POST_GAME:
       return (
         <HeaderAndFooter>
-          <PlayerScoresContainer
+          <PlayerScores
             gameId={state.gameId}
             onReturnToStart={() => setGameState(PRE_GAME)}
           />

client/src/components/game.component/header-and-footer.component.jsx → client/src/components/Game/HeaderAndFooter.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ApiInfo from "../util/api-info.component";
+import ApiInfo from "../util/ApiInfo";
 
 export default props => (
   <>

client/src/components/Game/index.js

@@ -0,0 +1 @@
+export { default } from "./Game";

client/src/components/game.component/index.js

@@ -1,3 +0,0 @@
-import Game from "./game";
-
-export default Game;

client/src/components/screens/game-panel.component/game-panel.component.jsx → client/src/components/screens/GamePanel/GamePanel.jsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { gameInfo, getGuesses, sendGuess } from "../../../services/ggsh.service";
-import Loading from '../../util/loading.component';
-import GuessPane from "./guess-pane.component";
-import PositionedStreetView from "./positioned-street-view.component";
+import { gameInfo, getGuesses, sendGuess } from "../../../domain/GGSHService";
+import Loading from '../../util/Loading';
+import GuessPane from "./GuessPane";
+import PositionedStreetView from "./PositionedStreetView";
 
 const GamePanelContainer = ({ gameId, playerName, onRoundEnd, onGameEnd }) => {
   const [{ currentRound, targetPoint, roundSeconds }, setRoundInfo] = useState({currentRound: null, targetPoint: null, roundSeconds: null});

client/src/components/screens/game-panel.component/guess-pane.component.jsx → client/src/components/screens/GamePanel/GuessPane.jsx

@@ -1,6 +1,6 @@
 import React from "react";
-import ClickMarkerMap from "./click-marker-map.component";
-import RoundTimer from "../../util/timer.component";
+import ClickMarkerMap from "./ClickMarkerMap";
+import RoundTimer from "../../util/Timer";
 
 export default ({
   roundSeconds,

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

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

client/src/components/screens/player-scores.component/player-scores.component.jsx → client/src/components/screens/PlayerScores/PlayerScores.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import { gameInfo } from '../../../services/ggsh.service';
-import Loading from '../../util/loading.component';
-import PlayerScores from "./player-score-list.component";
+import { gameInfo } from '../../../domain/GGSHService';
+import Loading from '../../util/Loading';
+import PlayerScoresList from "./PlayerScoresList";
 
 const PlayerScoresContainer = ({ gameId, onReturnToStart }) => {
   const [scores, setScores] = useState(null);
@@ -26,7 +26,7 @@ const PlayerScoresContainer = ({ gameId, onReturnToStart }) => {
 
   return (
     <div className="player-scores">
-      <PlayerScores scores={scores} />
+      <PlayerScoresList scores={scores} />
       <button className="btn player-scores__button" onClick={onReturnToStart} >Return to Start</button>
     </div>
   );

client/src/components/screens/player-scores.component/player-score-list.component.jsx → client/src/components/screens/PlayerScores/PlayerScoresList.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import PlayerScoreTile from "./player-score-tile.component";
+import PlayerScoreTile from "./PlayerScoreTile";
 
 export default ({ scores }) => (
   <div className="player-scores__score-board">

client/src/components/screens/PlayerScores/index.js

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

client/src/components/screens/pre-game.component/pre-game.component.jsx → client/src/components/screens/PreGame/PreGame.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import Loading from "../../util/loading.component";
-import PlayerNameInput from "./player-name-input.component";
-import JoinGameInput from "./join-game-input.component";
-import { createGame, joinGame } from "../../../services/ggsh.service";
+import Loading from "../../util/Loading";
+import PlayerNameInput from "./PlayerNameInput";
+import JoinGameInput from "./JoinGameInput";
+import { createGame, joinGame } from "../../../domain/GGSHService";
 
 // TODO set round timer for new game
 

client/src/components/screens/PreGame/index.js

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

client/src/components/screens/pre-round.component.jsx → client/src/components/screens/PreRound.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ClickToCopy from "../util/click-to-copy.component";
+import ClickToCopy from "../util/ClickToCopy";
 
 const PreRound = ({ gameId, playerName, onStart }) => (
   <div className="pre-round">

client/src/components/screens/round-summary.component.jsx → client/src/components/screens/RoundSummary.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ClickToCopy from "../util/click-to-copy.component";
+import ClickToCopy from "../util/ClickToCopy";
 
 // TODO eventually we want this to query and show other players
 

client/src/components/screens/game-panel.component/index.js

@@ -1 +0,0 @@
-export { default } from './game-panel.component';

client/src/components/screens/player-scores.component/index.js

@@ -1 +0,0 @@
-export { default } from './player-scores.component';

client/src/components/screens/pre-game.component/index.js

@@ -1 +0,0 @@
-export { default } from './pre-game.component';

client/src/components/util/api-info.component.jsx → client/src/components/util/ApiInfo.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { getStatus } from "../../services/ggsh.service";
+import { getStatus } from "../../domain/GGSHService";
 
 const ApiInfo = () => {
   const [{ loading, version, status }, setState] = useState({ loading: true, version: null, status: null });