Rendering deck tiles

client/css/rpg-cards.css

@@ -14,8 +14,8 @@ body {
     display: flex;
     flex-direction: row;
     height: 3rem;
-    background-color: rgb(126, 120, 3);
-    color: rgb(228, 228, 238);
+    background-color: #4CAF50;
+    color: #FFF;
     font-size: 1.8rem;
     line-height: 3rem;
 }
@@ -50,3 +50,72 @@ body {
     cursor: initial;
     background-color: inherit;
 }
+
+/* ---------------------------------------------------------------------------*/
+/* List of decks */
+/* ---------------------------------------------------------------------------*/
+.decks {
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.deck-tile {
+    margin: .5rem;
+    width: 20rem;
+    height: 12rem;
+
+    display: flex;
+    flex-direction: column;
+
+    background-color: rgb(255, 255, 255);
+
+    page-break-inside: avoid;
+    border-radius: 4px;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+}
+.deck-tile-header {
+    background-color: #F44336;
+    color: rgb(255, 255, 255);
+    display: flex;
+    flex-direction: row;
+    padding: 0.5rem;
+    border-radius: 4px 4px 0 0;
+    font-size: 1.2rem;
+    font-weight: 400;
+}
+.deck-tile-header:hover {
+    background-color: rgb(96, 104, 126);
+    cursor: pointer;
+}
+.deck-tile-header-name {
+    flex: 1;
+}
+.deck-tile-header-id {
+
+}
+.deck-tile-body {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+.deck-tile-body-item {
+    /* Vertical centering */
+    /*
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    */
+    width: 100%;
+    padding: 0 1rem;
+    flex: 1;
+}
+.deck-tile-footer {
+    padding: 0.5rem;
+    border-radius: 0 0 4px 4px;
+    color: #a8a8a8;
+    background: #eaeaea;
+}

client/src/views/components/deck.ts

@@ -0,0 +1,79 @@
+module rpgcards {
+
+    export interface DeckTileProps {
+        key      : string; //< Unique key for react
+        id       : string;
+        name     : string;
+        desc     : string;
+        cards    : number;
+    }
+    function DeckTilePropsEqual(a:DeckTileProps, b:DeckTileProps) {
+        return a.id === b.id &&
+            a.name === b.name &&
+            a.desc === b.desc &&
+            a.cards === b.cards;
+    }
+
+    interface DeckTileState {
+    }
+
+    export function tileHeader(id: string, name: string) {
+        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))
+            );
+    }
+
+    export function tileBody(description: string) {
+        return React.DOM.div
+            ( { className: 'deck-tile-body', onClick: null }
+            , description
+            );
+    }
+
+    export function tileFooter(cards: number) {
+        let cardsText = "This deck contains " + cards + " cards.";
+        return React.DOM.div
+            ( { className: 'deck-tile-footer', onClick: null }
+            , cardsText
+            );
+    }
+
+    export class DeckTileSpec extends React.Component<DeckTileProps, DeckTileState> {
+        displayName: string;
+
+        initialState(props: DeckTileProps): DeckTileState {
+            return {};
+        }
+
+        // Use this function to speed up rendering
+        /*
+        shouldComponentUpdate(nextProps: DeckTileProps, nextState: DeckTileState): boolean {
+            return DeckTilePropsEqual(this.props, nextProps);
+        }
+        */
+
+        constructor(props: DeckTileProps) {
+            super(props);
+            this.state = this.initialState(props);
+            this.displayName = "DeckTile";
+        }
+
+        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)
+                );
+        }
+    }
+
+    export var DeckTile: React.Factory<DeckTileProps> = React.createFactory(DeckTileSpec);
+}

client/src/views/decks.ts

@@ -9,8 +9,12 @@ module rpgcards {
             let cards = store.getCardsForDeck(id);
 
             return AsyncT.liftA2(deck, cards, (deck, cards) => {
-                return React.DOM.div({key:deck.id},
-                    "Deck " + deck.id + ": " + cards.length + " cards")
+                return <React.ReactElement<any>> DeckTile({
+                    key : deck.id,
+                    id  : deck.id,
+                    desc: deck.description,
+                    name: deck.name,
+                    cards: cards.length });
             }).caseOf({
                 just: (t) => t,
                 nothing: (e) => React.DOM.div({}, "error: " + e.message),

client/tsconfig.json

@@ -30,6 +30,7 @@
         "./src/stores/id.ts",
         "./src/stores/store.ts",
         "./src/stores/template.ts",
+        "./src/views/components/deck.ts",
         "./src/views/decks.ts",
         "./src/views/header.ts"
     ]