feat: map thumbnail, remove officials

hackforplay · Nov 22, 2019 · 78704eb · 78704eb
1 parent 31bef87
commit 78704eb
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 40 deletions.
diff --git a/src/FloorView.tsx b/src/FloorView.tsx
@@ -51,7 +51,10 @@ export function FloorItem({ map, stage, selected }: FloorItemProps) {
       onClick={onClick}
     >
       <span className={floor.number}>{stage}</span>
-      <div className={floor.image} style={{ backgroundColor: map.color }}></div>
+      <div
+        className={floor.image}
+        style={{ backgroundImage: `url(${map.thumbnailUrl})` }}
+      ></div>
     </button>
   );
 }

diff --git a/src/MapView.tsx b/src/MapView.tsx
@@ -2,26 +2,25 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button } from './Button';
+import { Scroller } from './Scroller';
+import { actions, EditorMode, GameMap, SS } from './store';
 import flex from './styles/flex.scss';
-import map from './styles/map-view.scss';
+import style from './styles/map-view.scss';
 import selector from './styles/selector.scss';
-import { Scroller } from './Scroller';
-import { actions, EditorMode, SS } from './store';
 
-export type Tab = 'mine' | 'official' | 'others';
+export type Tab = 'mine' | 'ours';
 type Refs = {
   [tab in Tab]: React.RefObject<HTMLDivElement>;
 };
-export const tabs: Tab[] = ['mine', 'official', 'others'];
+export const tabs: Tab[] = ['mine', 'ours'];
 
 export interface MapViewProps {}
 
 export function MapView({  }: MapViewProps) {
   const [tab, setTab] = React.useState<Tab>('mine');
   const refs: Refs = {
     mine: React.useRef(null),
-    official: React.useRef(null),
-    others: React.useRef(null)
+    ours: React.useRef(null)
   };
 
   const handleScroll = React.useCallback((e: React.UIEvent<HTMLDivElement>) => {
@@ -47,8 +46,13 @@ export function MapView({  }: MapViewProps) {
 
   const selected = useSelector((state: SS) => state.floor.selected);
 
+  const maps: { [key in Tab]: GameMap[] } = {
+    mine: useSelector((state: SS) => state.floor.mine),
+    ours: useSelector((state: SS) => state.floor.ours)
+  };
+
   return (
-    <div className={map.container}>
+    <div className={style.container}>
       <h2>Choose background of map{selected}</h2>
       <div className={selector.container}>
         <button
@@ -63,27 +67,18 @@ export function MapView({  }: MapViewProps) {
         <button
           className={classNames(
             selector.item,
-            tab === 'official' && selector.selected
-          )}
-          onClick={() => scrollTo('official')}
-        >
-          Official
-        </button>
-        <button
-          className={classNames(
-            selector.item,
-            tab === 'others' && selector.selected
+            tab === 'ours' && selector.selected
           )}
-          onClick={() => scrollTo('others')}
+          onClick={() => scrollTo('ours')}
         >
-          Others
+          Ours
         </button>
       </div>
-      <Scroller ms={50} className={map.scroller} onScroll={handleScroll}>
+      <Scroller ms={50} className={style.scroller} onScroll={handleScroll}>
         {tabs.map(id => (
-          <div key={id} id={id} className={map.group} ref={refs[id]}>
-            {Array.from({ length: 15 }).map((_, i) => (
-              <MapViewItem key={i} />
+          <div key={id} id={id} className={style.group} ref={refs[id]}>
+            {maps[id].map(map => (
+              <MapViewItem key={map.id} map={map} />
             ))}
           </div>
         ))}
@@ -92,22 +87,27 @@ export function MapView({  }: MapViewProps) {
   );
 }
 
-export interface MapViewItemProps {}
+export interface MapViewItemProps {
+  map: GameMap;
+}
 
-export function MapViewItem({  }: MapViewItemProps) {
+export function MapViewItem({ map }: MapViewItemProps) {
   const dispatch = useDispatch();
   const onClick = React.useCallback(() => {
     dispatch(actions.setEditorMode(EditorMode.Code));
   }, []);
 
   return (
-    <div className={map.responsive}>
-      <div className={map.responsiveContent}>
-        <div className={map.item} style={{ backgroundColor: 'green' }}>
-          <div className={classNames(map.footer, flex.horizontal)}>
+    <div className={style.responsive}>
+      <div className={style.responsiveContent}>
+        <div
+          className={style.item}
+          style={{ backgroundImage: `url(${map.thumbnailUrl})` }}
+        >
+          <div className={classNames(style.footer, flex.horizontal)}>
             <div className={flex.vertical}>
-              <span>TITLE</span>
-              <span>by Author</span>
+              <span>{map.name}</span>
+              <span>by {map.authorName}</span>
             </div>
             <Button primary onClick={onClick}>
               Apply

diff --git a/src/example.tsx b/src/example.tsx
@@ -95,7 +95,8 @@ require '../game'
 const store = createGamebookStore();
 store.dispatch(actions.setCollaborators(users(4)));
 store.dispatch(actions.setStages(gameMaps(4)));
-store.dispatch(actions.setMaps(gameMaps(50)));
+store.dispatch(actions.setMine(gameMaps(15)));
+store.dispatch(actions.setOurs(gameMaps(15)));
 
 let container = document.querySelector('#container');
 render(<Gamebook code={code} store={store}></Gamebook>, container);
@@ -138,7 +139,20 @@ function gameMaps(length: number) {
     id: uniqueId(),
     name: random('Forest', 'Town', 'Dangeon', 'Field'),
     authorName: random('Kou', 'Tsune', 'Gino', 'Maki'),
-    color: random('red', 'green', 'blue', 'yellow')
+    thumbnailUrl: random(
+      'https://i.gyazo.com/98fde90a98cdbeb43bafd9e5acdc474d.png',
+      'https://i.gyazo.com/cbc899cfac1cabf3ba7724dd0a019b00.png',
+      'https://i.gyazo.com/a089d89a0cb0370099e8019c7ebdee14.png',
+      'https://i.gyazo.com/e0dc8b3ac3c8f605f649e04ac6c71b63.png',
+      'https://i.gyazo.com/193fc217409486e12b574b8127c30e7e.png',
+      'https://i.gyazo.com/ab4a2796943232e4d881c0600de1a3e2.png',
+      'https://i.gyazo.com/a2f3d26060e11efb54181654d2b3625f.png',
+      'https://i.gyazo.com/347c267072badea20467f241466d6b13.png',
+      'https://i.gyazo.com/ce0ffb5f018be7b015ebdbd7e099a1a4.png',
+      'https://i.gyazo.com/63354acfcba8ad93203933b29300f9e7.png',
+      'https://i.gyazo.com/8dbe0bc20ead1913bfb5d1b3334d9227.png',
+      'https://i.gyazo.com/c6f8041fd06ec240505b2207fc8b0264.png'
+    )
   }));
 }
 

diff --git a/src/store/floor.ts b/src/store/floor.ts
@@ -9,15 +9,17 @@ export const initialState = {
    * [stage1, stage2, ...]
    */
   stages: [] as GameMap[],
-  maps: [] as GameMap[]
+  mine: [] as GameMap[],
+  ours: [] as GameMap[]
 };
 
 const actionCreator = actionCreatorFactory('gamebook');
 
 export const actions = {
   setFloor: actionCreator<number>('SET_FLOOR'),
   setStages: actionCreator<GameMap[]>('SET_STAGES'),
-  setMaps: actionCreator<GameMap[]>('SET_MAPS')
+  setMine: actionCreator<GameMap[]>('SET_MINE'),
+  setOurs: actionCreator<GameMap[]>('SET_OURS')
 };
 
 const floor = reducerWithImmer(initialState)
@@ -27,8 +29,11 @@ const floor = reducerWithImmer(initialState)
   .case(actions.setStages, (draft, payload) => {
     draft.stages = payload;
   })
-  .case(actions.setMaps, (draft, payload) => {
-    draft.maps = payload;
+  .case(actions.setMine, (draft, payload) => {
+    draft.mine = payload;
+  })
+  .case(actions.setOurs, (draft, payload) => {
+    draft.ours = payload;
   })
   .toReducer();
 

diff --git a/src/store/types.ts b/src/store/types.ts
@@ -1,7 +1,7 @@
 export interface GameMap {
   id: string;
   name: string;
-  color: string;
+  thumbnailUrl: string;
   authorName: string;
 }
 

diff --git a/src/styles/floor-view.scss b/src/styles/floor-view.scss
@@ -36,6 +36,7 @@ $padding: 4px;
 .image {
   width: $width;
   height: $height;
+  background-size: contain;
 }
 
 // 追加ボタン

diff --git a/src/styles/map-view.scss b/src/styles/map-view.scss
@@ -42,6 +42,7 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
+  background-size: contain;
 }
 
 .footer {