styled componets and unikitty update - hide selected character from UI

pollen8 · Nov 8, 2018 · f48a2dc · f48a2dc
1 parent c026328
commit f48a2dc
Show file tree

Hide file tree

Showing 9 changed files with 812 additions and 150 deletions.
diff --git a/client/package.json b/client/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@infosum/unikitty": "^3.0.14",
+    "@infosum/unikitty": "^5.1.12",
     "@types/node": "*",
     "@types/prop-types": "^15.5.3",
     "@types/react": "*",
@@ -19,7 +19,8 @@
     "react-apollo": "^2.1.9",
     "react-dom": "^16.4.1",
     "react-router-dom": "^4.3.1",
-    "recompose": "^0.27.1"
+    "recompose": "^0.27.1",
+    "styled-components": "^4.0.3"
   },
   "devDependencies": {
     "@types/jest": "^23.3.0",

diff --git a/client/src/Games/AddGame.tsx b/client/src/Games/AddGame.tsx
@@ -87,6 +87,7 @@ const AddGame: React.SFC<RouteComponentProps<any>> = ({ history }) => {
           contract={contract}
         >
           {({ setValue, formData, validate, errors }) => {
+            console.log('formrdata', formData);
             return <div>
               <h1>New Game</h1>
               <FormGroup>
@@ -109,7 +110,6 @@ const AddGame: React.SFC<RouteComponentProps<any>> = ({ history }) => {
                   type="button"
                   onClick={async (e) => {
                     try {
-                      e.preventDefault();
                       await validate(formData);
                       const game = {
                         variables: {

diff --git a/client/src/Games/AddPlayer.tsx b/client/src/Games/AddPlayer.tsx
@@ -1,7 +1,18 @@
-import { Button, Form, FormGroup, Input, Label } from '@infosum/unikitty';
 import gql from 'graphql-tag';
 import * as React from 'react';
-import { graphql, MutateProps } from 'react-apollo';
+import {
+  graphql,
+  MutateProps,
+} from 'react-apollo';
+
+import {
+  Button,
+  Form,
+  FormGroup,
+  Input,
+  Label,
+} from '@infosum/unikitty';
+
 import { IPlayer } from './PlayerList';
 
 const initialData: IPlayer = {
@@ -25,7 +36,10 @@ const AddPlayer: React.SFC<MutateProps<any>> = (props) => {
             <Label>Player:</Label>
             <Input
               value={formData.user.name}
-              onChange={(e) => setValue('player', e.target.value)} />
+              onChange={(e) => setValue('user', {
+                ...formData.user,
+                name: e.target.value,
+              })} />
           </FormGroup>
           <Button
             onClick={() => {
@@ -34,7 +48,10 @@ const AddPlayer: React.SFC<MutateProps<any>> = (props) => {
                   gamId: 1,
                   userId: 2,
                 }
-              }).then(() => setValue('player', ''));
+              }).then(() => setValue('user', {
+                id: '',
+                name: '',
+              }));
             }}
           >
             Add

diff --git a/client/src/Games/AssignCharacters.tsx b/client/src/Games/AssignCharacters.tsx
@@ -1,7 +1,15 @@
-import { Button, Form, FormGroup, Label, VirtualizedSelect } from '@infosum/unikitty';
 import gql from 'graphql-tag';
 import * as React from 'react';
 import { Mutation } from 'react-apollo';
+
+import {
+  Button,
+  Form,
+  FormGroup,
+  Input,
+  Label,
+} from '@infosum/unikitty';
+
 import CharacterSelect from './CharacterSelect';
 import { IGame } from './Game';
 
@@ -29,6 +37,7 @@ mutation UpdatePlayerInGame($id: String, $userId: String, $characterId: String,
 }
 `;
 
+// Number of good/bad players based on # of people playing.
 const teamMap = {
   5: { good: 3, evil: 2 },
   6: { good: 4, evil: 2 },
@@ -57,7 +66,7 @@ const AssignCharacters: React.SFC<{ game: IGame }> = ({ game }) => {
       >
         {(updatePlayerInGame) => (
           <Form<IUpdatePlayerRequest> initialData={initialData}>
-            {({ setValue, formData }) => {
+            {({ setValue, formData, reset }) => {
               const unassignedPlayers = game.players.map((p) => ({
                 label: p.user.name,
                 value: p.user.id,
@@ -67,7 +76,8 @@ const AssignCharacters: React.SFC<{ game: IGame }> = ({ game }) => {
                   <Label>
                     Player:
                   </Label>
-                  <VirtualizedSelect
+                  <Input
+                    type="select"
                     value={formData.userId}
                     options={unassignedPlayers}
                     onChange={(e) => setValue('userId', e.value)} />
@@ -91,6 +101,7 @@ const AssignCharacters: React.SFC<{ game: IGame }> = ({ game }) => {
                       updatePlayerInGame({
                         variables
                       });
+                      reset();
 
                     }}
                   >

diff --git a/client/src/Games/CharacterSelect.tsx b/client/src/Games/CharacterSelect.tsx
@@ -1,6 +1,12 @@
-import { FormGroup, Label, VirtualizedSelect } from '@infosum/unikitty';
 import * as React from 'react';
-import { Query } from "react-apollo";
+import { Query } from 'react-apollo';
+
+import {
+  FormGroup,
+  Input,
+  Label,
+} from '@infosum/unikitty';
+
 import { GET_CHARACTER } from '../Characters/Characters';
 import { IPlayer } from './PlayerList';
 
@@ -24,7 +30,8 @@ const CharacterSelect: React.SFC<IProps> = ({ onChange, value, players }) => {
         return (
           <FormGroup>
             <Label>Character</Label>
-            <VirtualizedSelect
+            <Input
+              type="select"
               value={value}
               options={options}
               onChange={onChange} />

diff --git a/client/src/Games/PlayerList.tsx b/client/src/Games/PlayerList.tsx
@@ -1,4 +1,19 @@
 import * as React from 'react';
+import styled from 'styled-components';
+
+import {
+  CircleIcon,
+  CrossIcon,
+  IconStack,
+  TickIcon,
+} from '@infosum/unikitty';
+
+const Li = styled.li`
+display: flex;
+> div > div {
+  display: block
+}
+`;
 
 export interface ICharacter {
   id: string;
@@ -26,9 +41,21 @@ const PlayerList: React.SFC<IProps> = ({ players }) => {
     <ul>
       {
         players.map(({ id, user, character }) =>
-          <li key={id}>
-            {user.name}: {character.name}
-          </li>
+          <Li key={id} >
+            <div style={{ width: '25px' }}>
+              {character.name ? <IconStack>
+                <CircleIcon width="15" height="15" />
+                <TickIcon fill="#fff" width="10" height="10" />
+              </IconStack> :
+                <IconStack>
+                  <CircleIcon width="15" height="15" fill="red" />
+                  <CrossIcon fill="#fff" width="10" height="10" />
+                </IconStack>}
+            </div>
+            <div>
+              {user.name}
+            </div>
+          </Li>
         )}
     </ul>
   );

diff --git a/client/src/Games/PlayerSelect.tsx b/client/src/Games/PlayerSelect.tsx
@@ -4,8 +4,8 @@ import { Query } from 'react-apollo';
 import {
   FormFeedback,
   FormGroup,
+  Input,
   Label,
-  VirtualizedSelect,
 } from '@infosum/unikitty';
 
 import { GET_USERS } from '../Users/Users';
@@ -30,7 +30,8 @@ const PlayerSelect: React.SFC<IProps> = ({ onChange, value, errors }) => {
         return (
           <FormGroup>
             <Label>Players</Label>
-            <VirtualizedSelect
+            <Input
+              type="selecct"
               value={value}
               multi={true}
               options={options}