Helper methods for generating deck tiles

client/src/views/components/deck.ts

     interface DeckTileState {
     }
 
-    export function tileHeader(id: string, name: string) {
+    export function tileHeader(props: DeckTileProps) {
         return React.DOM.div
             ( { className: 'deck-tile-header', onClick: null }
-            , React.DOM.div({ className: 'deck-tile-header-name' }, name)
-            , React.DOM.div({ className: 'deck-tile-header-id' }, id.substring(0, 5))
+            , React.DOM.div({ className: 'deck-tile-header-name' }, props.name)
+            , React.DOM.div({ className: 'deck-tile-header-id' }, props.id)
             );
     }
 
-    export function tileBody(description: string) {
+    export function tileBody(props: DeckTileProps) {
         return React.DOM.div
             ( { className: 'deck-tile-body', onClick: null }
-            , description
+            , props.desc
             );
     }
 
-    export function tileFooter(cards: number) {
-        let cardsText = "This deck contains " + cards + " cards.";
+    export function tileFooter(props: DeckTileProps) {
+        let cardsText = props.cards + " cards";
         return React.DOM.div
             ( { className: 'deck-tile-footer', onClick: null }
             , cardsText
         }
 
         render() {
-            let deckId = this.props.id;
-            let deckName = this.props.name;
-            let deckDesc = this.props.desc;
-            let deckCards = this.props.cards;
 
             return React.DOM.div
                 ( { className: 'deck-tile' }
-                , tileHeader(deckId, deckName)
-                , tileBody(deckDesc)
-                , tileFooter(deckCards)
+                , tileHeader(this.props)
+                , tileBody(this.props)
+                , tileFooter(this.props)
                 );
         }
     }

client/src/views/decks.ts

 
 module rpgcards {
 
+        const deckColor = "#F44336";
+
+        function deckTile(deck: Deck, cards: string[]) {
+            return <React.ReactElement<any>> DeckTile({
+                key   : deck.id,
+                id    : deck.id,
+                name  : deck.name,
+                desc  : deck.description,
+                cards : cards.length,
+                icon  : null,
+                color : deckColor });
+        }
+
+        function loadingTile(id: string) {
+            return <React.ReactElement<any>> DeckTile({
+                key   : id,
+                id    : id,
+                name  : "Loading...",
+                desc  : "",
+                cards : null,
+                icon  : null,
+                color : deckColor });
+        }
+
+        function errorTile(id: string, e: Error) {
+            return <React.ReactElement<any>> DeckTile({
+                key   : id,
+                id    : id,
+                name  : "Error",
+                desc  : e.message,
+                cards : null,
+                icon  : null,
+                color : deckColor });
+        }
+
+        function newDeckTile() {
+            return <React.ReactElement<any>> DeckTile({
+                key   : "#new",
+                id    : null,
+                name  : "New deck",
+                desc  : null,
+                cards : null,
+                icon  : "add circle",
+                color : deckColor });
+        }
 
     export function renderDecks(store: Store): React.ReactElement<any> {
         var decks = store.getDeckList().fmap(deckIds => deckIds.map(id => {
                     cards: cards.length });
             }).caseOf({
                 just: (t) => t,
-                nothing: (e) => React.DOM.div({}, "error: " + e.message),
-                pending: () => React.DOM.div({}, "loading...")
+                nothing: (e) => errorTile(id, e),
+                pending: () => loadingTile(id)
             });
         })).caseOf({
             just: (t) => t,
         });
 
         return React.DOM.div({ className: 'decks' },
-            decks
+            decks,
+            newDeckTile()
         );
     }
 }