Add town scene [Re #64]

src/6-ui-features/combatLog/combatLogSlice.ts → src/6-ui-features/CombatLog/combatLogSlice.ts

@@ -3,7 +3,6 @@ import { AppThunk } from '../../7-app/types';
 import { GameManager } from '../../0-engine/GameManager';
 import { CombatLogSys } from '../../2-ecsystems/Combat/CombatLogSys';
 
-
 const initialState = {
   entries: [] as string[],
 };

src/6-ui-features/CombatScene/index.tsx

@@ -7,12 +7,12 @@ import Unit from './Unit';
 import ActionBar from './ActionBar';
 import { RootState } from '../../7-app/types';
 import { setMousePosition, UnitInfo, updateUnitsFromEngine } from './combatSceneSlice';
-import CombatLog from '../combatLog';
+import CombatLog from '../CombatLog';
 import useUILoop from '../useUILoop';
 
 import useDetectKeypress from '../common/useDetectKeypress';
 import InfoSidebar from './InfoSidebar';
-import { updateCombatLogFromEngine } from '../combatLog/combatLogSlice';
+import { updateCombatLogFromEngine } from '../CombatLog/combatLogSlice';
 
 function sortUnitsByCombatPosition(a: UnitInfo, b: UnitInfo) {
   return a.position - b.position;

src/6-ui-features/TownScene/TownLocation.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import TownLocation from './TownLocation';
+
+describe('<TownLocation />', () => {
+  it('renders location name', () => {
+    const name = 'Marketplace';
+    render(<TownLocation name={name} />);
+
+    expect(screen.getByRole('button')).toHaveTextContent(name);
+  });
+});

src/6-ui-features/TownScene/TownLocation.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+type TownLocationProps = {
+  name: string;
+}
+
+export default function TownLocation({ name }: TownLocationProps): JSX.Element {
+  return <Container>{name}</Container>;
+}
+
+const Container = styled.button`
+  background-color: lightblue;
+  border: 1px solid #c0c0c0;
+  border-radius: 50%;
+  height: 7em;
+  outline: 0;
+  padding: 1em;
+  width: 7em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;

src/6-ui-features/TownScene/index.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import TownScene from '.';
+
+describe('<TownScene />', () => {
+  it('renders all shops', () => {
+    render(<TownScene />);
+    expect(screen.getAllByRole('button')).toHaveLength(4);
+  });
+});

src/6-ui-features/TownScene/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import TownLocation from './TownLocation';
+
+const locations = ["Blacksmith's", 'Guild', 'Marketplace', "Alchemist's"];
+
+export default function TownScene(): JSX.Element {
+  return (
+    <Container>
+      <MainContent>
+        <LocationContainer>
+          {locations.map((name) => <TownLocation key={name} name={name} />)}
+        </LocationContainer>
+      </MainContent>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  min-height: 70vh;
+  align-items: stretch;
+`;
+
+const MainContent = styled.div`
+  flex: 1 1 100%;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+`;
+
+const LocationContainer = styled.div`
+  display: flex;
+  justify-content: space-around;
+`;

src/6-ui-features/sceneManager/sceneMetaSlice.ts

@@ -0,0 +1,23 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { AppThunk } from '../../7-app/types';
+
+export enum Scenes {
+  Combat = 'combat',
+  Town = 'town',
+}
+
+const initialState = {
+  currentScene: Scenes.Town,
+};
+
+const sceneMetaSlice = createSlice({
+  name: 'sceneMeta',
+  initialState,
+  reducers: {
+    changedScene(state, action) {
+      state.currentScene = action.payload;
+    },
+  },
+});
+
+export default sceneMetaSlice.reducer;

src/7-app/store.ts

@@ -1,11 +1,13 @@
 import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
-import combatLogReducer from '../6-ui-features/combatLog/combatLogSlice';
+import combatLogReducer from '../6-ui-features/CombatLog/combatLogSlice';
 import combatSceneReducer from '../6-ui-features/CombatScene/combatSceneSlice';
+import sceneMetaReducer from '../6-ui-features/sceneManager/sceneMetaSlice';
 
 export const store = configureStore({
   reducer: {
     combatLog: combatLogReducer,
     combatScene: combatSceneReducer,
+    sceneMeta: sceneMetaReducer,
   },
 });
 

src/App.tsx

@@ -1,9 +1,20 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { useEffect } from 'react';
-import CombatScene from './6-ui-features/CombatScene';
+
+import { useSelector } from 'react-redux';
 import TopBar from './6-ui-features/CombatScene/TopBar';
 import { GameManager } from './0-engine/GameManager';
+import { Scenes } from './6-ui-features/sceneManager/sceneMetaSlice';
+
+import CombatScene from './6-ui-features/CombatScene';
+import TownScene from './6-ui-features/TownScene';
+import { RootState } from './7-app/types';
+
+const scenes = {
+  [Scenes.Combat]: CombatScene,
+  [Scenes.Town]: TownScene,
+};
 
 function App(): JSX.Element {
   useEffect(() => {
@@ -13,14 +24,17 @@ function App(): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const currentScene = useSelector((state: RootState) => state.sceneMeta.currentScene);
+  const Scene = scenes[currentScene];
+
   return (
     <div
       css={css`
         width: 80vw;
       `}
     >
       <TopBar />
-      <CombatScene />
+      <Scene />
     </div>
   );
 }