Introduce Datasets

client/css/rpg-cards.css

     margin: .5rem;
     width: 20rem;
     height: 12rem;
+    border: 1px solid gray;
 
     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 :hover {
+    background-color: rgb(200, 200, 255);
 }
-.deck-tile-header-id {
+.deck-tile-content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
 
+    background-color: white;
+
+    page-break-inside: avoid;
 }
+.deck-tile-header {
+    font-weight: 700;
+    padding: 1rem;
+    font-size: 1.28571429em;
+    line-height: 1.2857em;
+    background-color: #3F51B5;
+    color: white;
+}
+.deck-tile-meta {
+    font-size: 1em;
+    color: rgba(0,0,0,.4);
+ }
 .deck-tile-body {
     flex: 1;
+    padding: 1rem;
     display: flex;
     justify-content: center;
     flex-direction: column;
 }
 .deck-tile-footer {
     padding: 0.5rem;
-    border-radius: 0 0 4px 4px;
     color: #a8a8a8;
     background: #eaeaea;
 }

client/src/actions/actions.ts

     export class ActionNewDeck implements Action {
         constructor() {}
     }
+    export class ActionDeleteDeck implements Action {
+        constructor(private _id: EntityId) {}
+        get id(): EntityId {return this._id}
+    }
     export class ActionSetDeckName implements Action {
-        constructor(private _id: string, private _name:string) {}
-        get id(): string {return this._id}
+        constructor(private _id: EntityId, private _name:string) {}
+        get id(): EntityId {return this._id}
         get name(): string {return this._name}
     }
     export class ActionSetDeckDescription implements Action {
-        constructor(private _id: string, private _desc:string) {}
-        get id(): string {return this._id}
+        constructor(private _id: EntityId, private _desc:string) {}
+        get id(): EntityId {return this._id}
         get desc(): string {return this._desc}
     }
-    export class ActionDeleteDeck implements Action {
-        constructor(private _id: string) {}
-        get id(): string {return this._id}
+    export class ActionDeckAddDataset implements Action {
+        constructor(private _deck_id: EntityId, private _dataset_id: EntityId) {}   
+        get deck_id(): EntityId {return this._deck_id}
+        get dataset_id(): EntityId {return this._dataset_id}
     }
-    export class ActionSelectDeck implements Action {
-        constructor(private _id: string) {}
-        get id(): string {return this._id}
+    export class ActionDeckRemoveDataset implements Action {
+        constructor(private _deck_id: EntityId, private _dataset_id: EntityId) {}   
+        get deck_id(): EntityId {return this._deck_id}
+        get dataset_id(): EntityId {return this._dataset_id} 
+    }
+    export class ActionSetDeckTemplate implements Action {
+        constructor(private _deck_id: EntityId, private _template_id: EntityId) {}
+        get deck_id(): EntityId {return this._deck_id}
+        get template_id(): EntityId {return this._template_id}
+    }
+    
+    /* Dataset actions */
+    export class ActionNewDataset implements Action {
+        constructor() {}
+    }
+    export class ActionDeleteDataset implements Action {
+        constructor(private _id: EntityId) {}
+        get id(): EntityId {return this._id}
+    }
+    export class ActionSetDatasetName implements Action {
+        constructor(private _id: EntityId, private _name: string) {}
+        get id(): EntityId {return this._id}
+        get name(): string {return this._name}
     }
 
-    /* Card actions */
-    export class ActionNewCard implements Action {
-        constructor(private _deck_id: string) {}
-        get deck_id(): string {return this._deck_id}
-    }
-    export class ActionDeleteCard implements Action {
-        constructor(private _id: string) {}
-        get id(): string {return this._id}
-    }
-    export class ActionSelectCard implements Action {
-        constructor(private _id: string) {}
-        get id(): string {return this._id}
-    }
-    export class ActionModifyCard implements Action {
-        constructor(private _id: string, private _prop: string, private _val: string) {}
-        get id(): string {return this._id}
+    /* Record actions */
+    export class ActionNewRecord implements Action {
+        constructor(private _dataset_id: EntityId) {}
+        get dataset_id(): EntityId {return this._dataset_id}
+    }
+    export class ActionDeleteRecord implements Action {
+        constructor(private _id: EntityId) {}
+        get id(): EntityId {return this._id}
+    }
+    export class ActionModifyRecord implements Action {
+        constructor(private _id: EntityId, private _prop: string, private _val: string) {}
+        get id(): EntityId {return this._id}
         get prop(): string {return this._prop}
         get val(): string {return this._val}
     }
+    
+    /* Template actions */
+    export class ActionNewTemplate implements Action {
+        constructor() {}
+    }
+    export class ActionDeleteTemplate implements Action {
+        constructor(private _id: EntityId) {}
+        get id(): EntityId {return this._id}
+    }
 
+    /* Helper class for easy dispatching of actions */
     export class Actions  {
         constructor(private _dispatcher: Dispatcher) {
         }
         public newDeck(): void {
             this._dispatcher.dispatch(new ActionNewDeck());
         }
-        public setDeckName(id:string, name:string): void {
+        public setDeckName(id:EntityId, name:string): void {
             this._dispatcher.dispatch(new ActionSetDeckName(id, name));
         }
-        public setDeckDesc(id:string, desc:string): void {
+        public setDeckDesc(id:EntityId, desc:string): void {
             this._dispatcher.dispatch(new ActionSetDeckDescription(id, desc));
         }
-        public deleteDeck(id: string): void {
+        public setDeckTemplate(deck_id:EntityId, template_id:EntityId): void {
+            this._dispatcher.dispatch(new ActionSetDeckTemplate(deck_id, template_id));
+        }
+        public addDeckDataset(deck_id:EntityId, dataset_id:EntityId): void {
+            this._dispatcher.dispatch(new ActionDeckAddDataset(deck_id, dataset_id));
+        }
+        public removeDeckDataset(deck_id:EntityId, dataset_id:EntityId): void {
+            this._dispatcher.dispatch(new ActionDeckRemoveDataset(deck_id, dataset_id));
+        }
+        public deleteDeck(id: EntityId): void {
             this._dispatcher.dispatch(new ActionDeleteDeck(id));
         }
-        public selectDeck(id: string): void {
-            this._dispatcher.dispatch(new ActionSelectDeck(id));
+        public newDataset(): void {
+            this._dispatcher.dispatch(new ActionNewDataset());
+        }
+        public setDatasetName(id:EntityId, name:string): void {
+            this._dispatcher.dispatch(new ActionSetDatasetName(id, name));
+        }
+        public deleteDataset(id: EntityId): void {
+            this._dispatcher.dispatch(new ActionDeleteDataset(id));
+        }
+        public newTemplate(): void {
+            this._dispatcher.dispatch(new ActionNewTemplate());
+        }
+        public deleteTemplate(id: EntityId): void {
+            this._dispatcher.dispatch(new ActionDeleteTemplate(id));
         }
-        public newCard(deck_id: string): void {
-            this._dispatcher.dispatch(new ActionNewCard(deck_id));
+        public newRecord(dataset_id: EntityId): void {
+            this._dispatcher.dispatch(new ActionNewRecord(dataset_id));
         }
-        public deleteCard(id: string): void {
-            this._dispatcher.dispatch(new ActionDeleteCard(id));
+        public deleteRecord(id: EntityId): void {
+            this._dispatcher.dispatch(new ActionDeleteRecord(id));
         }
-        public selectCard(id: string): void {
-            this._dispatcher.dispatch(new ActionSelectCard(id));
+        public modifyRecord(id: EntityId, prop: string, value: any): void {
+            this._dispatcher.dispatch(new ActionModifyRecord(id, prop, value));
         }
     }
 

client/src/app.ts

         var withDeckId = (i: number, fn: (deckId: string)=>void) => {
             appStore.getDeckList().lift(ids => fn(ids[i]));
         }
+        var withDatasetId = (i: number, fn: (datasetId: string)=>void) => {
+            appStore.getDatasetList().lift(ids => fn(ids[i]));
+        }
+        var withTemplateId = (i: number, fn: (datasetId: string)=>void) => {
+            appStore.getTemplateList().lift(ids => fn(ids[i]));
+        }
         appActions.reset();
+        
+        // Dataset 1
+        appActions.newDataset();
+        withDatasetId(0, id=> {
+            appActions.setDatasetName(id, "Player's Basic Rules spells");
+            appActions.newRecord(id);
+            appActions.newRecord(id);
+            appActions.newRecord(id);
+        });
+
+        // Dataset 2
+        appActions.newDataset();
+        withDatasetId(1, id=> {
+            appActions.setDatasetName(id, "Elemental Evil spells");
+            appActions.newRecord(id);
+            appActions.newRecord(id);
+            appActions.newRecord(id);
+        });
+        
+        // Dataset 3
+        appActions.newDataset();
+        withDatasetId(2, id=> {
+            appActions.setDatasetName(id, "DM's Basic Rules creatures");
+            appActions.newRecord(id);
+            appActions.newRecord(id);
+            appActions.newRecord(id);
+        });
+        
+        // Template 1
+        appActions.newTemplate();
+        
+        // Template 2
+        appActions.newTemplate();
 
         // Deck 1
         appActions.newDeck();
-        withDeckId(0, id=>appActions.setDeckName(id, "Spells"));
-        withDeckId(0, id=>appActions.setDeckDesc(id, "This deck contains"
-            + " basic spells."));
-        withDeckId(0, id=>appActions.newCard(id));
-        withDeckId(0, id=>appActions.newCard(id));
-        withDeckId(0, id=>appActions.newCard(id));
+        withDeckId(0, id=>{
+            appActions.setDeckName(id, "Wizard spells");
+            appActions.setDeckDesc(id, "This deck contains wizard and sorcerer spells.");
+            withTemplateId(0, id2=>appActions.setDeckTemplate(id, id2));
+            withDatasetId(0, id2=>appActions.addDeckDataset(id, id2));
+            withDatasetId(1, id2=>appActions.addDeckDataset(id, id2));
+        });
 
         // Deck 2
         appActions.newDeck();
-        withDeckId(1, id=>appActions.setDeckName(id, "Items"));
-        withDeckId(1, id=>appActions.setDeckDesc(id, "This deck contains"
-            + " mundane and magic items."));
-        appStore.getDeckList().lift(deckIds => appActions.newCard(deckIds[1]));
+        withDeckId(1, id=>{
+            appActions.setDeckName(id, "Cleric spells");
+            appActions.setDeckDesc(id, "This deck contains cleric spells.");
+            withTemplateId(0, id2=>appActions.setDeckTemplate(id, id2));
+            withDatasetId(0, id2=>appActions.addDeckDataset(id, id2));
+            withDatasetId(1, id2=>appActions.addDeckDataset(id, id2));
+        });
 
         // Deck 3
         appActions.newDeck();
-        withDeckId(2, id=>appActions.setDeckName(id, "Creatures"));
-        withDeckId(2, id=>appActions.setDeckDesc(id, "This deck contains"
-            + " creatures."));
+        withDeckId(2, id=>{
+            appActions.setDeckName(id, "Creatures");
+            appActions.setDeckDesc(id, "This deck contains creatures.");
+            withTemplateId(1, id2=>appActions.setDeckTemplate(id, id2));
+            withDatasetId(2, id2=>appActions.addDeckDataset(id, id2));
+        });
     }
 
 }

client/src/stores/dataset.ts

+/// <reference path="./entity.ts"/>
+
+module rpgcards {
+
+    export class CardDataSet extends Entity {
+        public recordIds: EntityId[];
+        public properties: string[];
+
+        constructor(id:EntityId) {
+            super(id);
+            this.recordIds = [];
+            this.properties = [];
+        }
+    }
+
+    export class CardData extends Entity {
+        public data: {[name:string]: any};
+
+        constructor(id:EntityId) {
+            super(id);
+            this.data = {};
+        }
+    }
+}

client/src/stores/deck.ts

 
 module rpgcards {
     export class Deck extends Entity{
-        public cards: string[];
+        public datasetIds: EntityId[];
+        public templateId: EntityId;
         public description: string;
 
-        constructor(id:string) {
+        constructor(id:EntityId) {
             super(id);
-            this.cards = [];
+            this.datasetIds = [];
+            this.templateId = null;
             this.description = "";
         }
 
     }
-
-    export type DeckList = Deck[];
 }

client/src/stores/entity.ts

+/// <reference path="./id.ts"/>
+
 module rpgcards {
 
     export class Entity {
-        private _id: string;
+        private _id: EntityId;
         public name: string;
 
-        constructor(id: string) {
+        constructor(id: EntityId) {
             this._id = id;
             this.name = "";
         }
 
-        get id(): string {return this._id;}
+        get id(): EntityId {return this._id;}
     }
 
 }

client/src/stores/id.ts

 module rpgcards {
     const s = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
     const N = 16;
+    
+    export type EntityId = string;
 
     export function randomID(): string {
         var id = "";

client/src/stores/store.ts

 
     export class Store extends ChangeEventEmitter {
         private _decks: Deck[];
-        private _cards: Card[];
-        private _selectedDeck: string;
-        private _selectedCard: string;
+        private _datasets: CardDataSet[];
+        private _records: CardData[];
+        private _templates: CardTemplate[];
 
         constructor(dispatcher: Dispatcher) {
             super();
             this._decks = [];
-            this._cards = [];
-            this._selectedCard = "";
-            this._selectedDeck = "";
+            this._datasets = [];
+            this._records = [];
+            this._templates = [];
 
             dispatcher.register((action) => {
+                /* Generic */
                 if(action instanceof ActionReset) {
                     this._reset()
-                } else if(action instanceof ActionNewDeck) {
+                }
+                /* Deck */
+                else if(action instanceof ActionNewDeck) {
                     this._newDeck()
-                } else if (action instanceof ActionDeleteDeck) {
+                }
+                else if (action instanceof ActionDeleteDeck) {
                     this._deleteDeck(action.id);
-                } else if (action instanceof ActionSetDeckName) {
+                }
+                else if (action instanceof ActionSetDeckName) {
                     this._modifyDeck(action.id, (deck)=>{
                         deck.name = action.name});
-                } else if (action instanceof ActionSetDeckDescription) {
-                    this._modifyDeck(action.id, (deck)=>{
-                        deck.description = action.desc});
-                } else if (action instanceof ActionSelectDeck) {
-                    this._selectDeck(action.id);
-                } else if (action instanceof ActionNewCard) {
-                    this._newCard(action.deck_id);
-                } else if (action instanceof ActionDeleteCard) {
-                    this._deleteCard(action.id);
-                } else if (action instanceof ActionSelectCard) {
-                    this._selectCard(action.id);
-                } else {
-                    console.log("Unknown action received");
+                }
+                else if (action instanceof ActionSetDeckDescription) {
+                    this._modifyDeck(action.id, deck=>{
+                        deck.description = action.desc;
+                    });
+                }
+                else if (action instanceof ActionSetDeckTemplate) {
+                    this._modifyDeck(action.deck_id, deck=>{
+                        deck.templateId = action.template_id;
+                    });
+                }
+                else if (action instanceof ActionDeckAddDataset) {
+                    this._modifyDeck(action.deck_id, deck=>{
+                        deck.datasetIds.push(action.dataset_id);
+                    });
+                }
+                else if (action instanceof ActionDeckRemoveDataset) {
+                    this._modifyDeck(action.deck_id, deck=>{
+                        deck.datasetIds.filter(id=>id!=action.dataset_id);
+                    });
+                }
+                /* Dataset */
+                else if (action instanceof ActionNewDataset) {
+                    this._newDataset();                
+                }
+                else if (action instanceof ActionDeleteDataset) {
+                    this._deleteDataset(action.id);                
+                }
+                else if (action instanceof ActionSetDatasetName) {
+                    this._modifyDataset(action.id, dataset=>{
+                        dataset.name = action.name;
+                    });                
+                }
+                /* Record */
+                else if (action instanceof ActionNewRecord) {
+                    this._newRecord(action.dataset_id);
+                }
+                else if (action instanceof ActionDeleteRecord) {
+                    this._deleteRecord(action.id);
+                }
+                /* Template */
+                else if (action instanceof ActionNewTemplate) {
+                    this._newTemplate();
+                }
+                else if (action instanceof ActionDeleteTemplate) {
+                    this._deleteTemplate(action.id);
+                }
+                /* Unknown */
+                else {
+                    throw new Error("Unknown action received");
                 }
                 this.emitChange();
             });
         // Accessing data
         // ---------------------------------------------------------------------
 
+        getDatasetList(): AsyncT<string[]> {
+            return AsyncT.just(
+                this._datasets.map(ds => ds.id)
+                );
+        }
+          
+        getDataset(id: EntityId): AsyncT<CardDataSet> {
+            return findEntity(this._datasets, id);
+        }
+              
         getDeckList(): AsyncT<string[]> {
             return AsyncT.just(
                 this._decks.map(deck => deck.id)
                 );
         }
 
-        getDeck(id: string): AsyncT<Deck> {
+        getDeck(id: EntityId): AsyncT<Deck> {
             return findEntity(this._decks, id);
         }
 
-        getCard(id: string): AsyncT<Card> {
-            return findEntity(this._cards, id);
+        getRecord(id: EntityId): AsyncT<CardData> {
+            return findEntity(this._records, id);
         }
-
-        getCardsForDeck(id: string): AsyncT<string[]> {
-            return this.getDeck(id).lift(deck => deck.cards);
+        
+        getTemplateList(): AsyncT<string[]> {
+            return AsyncT.just(
+                this._templates.map(ds => ds.id)
+                );
         }
-
-        getDecksForCard(id: string): AsyncT<string[]> {
-            return AsyncT.just(this._decks
-                .filter(deck => deck.cards.indexOf(id) !== -1)
-                .map(deck => deck.id));
+        
+        getTemplate(id: EntityId): AsyncT<CardTemplate> {
+            return findEntity(this._templates, id);
         }
 
-        // ---------------------------------------------------------------------
-        // Pseudo-routes
-        // ---------------------------------------------------------------------
-        get selectedDeck(): string {return this._selectedDeck}
-        get selectedCard(): string {return this._selectedCard}
-
         // ---------------------------------------------------------------------
         // Methods for changing the state
         // ---------------------------------------------------------------------
         private _reset(): void {
             this._decks = [];
-            this._cards = [];
-            this._selectDeck = null;
-            this._selectCard = null;
+            this._datasets = [];
+            this._records = [];
+            this._templates = [];
         }
+        
         private _newDeck(): void {
             this._decks.push(new Deck(randomID()));
         }
             this._decks.filter(deck => deck.id !== id);
         }
 
-        private _selectDeck(id: string): void {
-            this._selectedDeck = id;
+        private _modifyDeck(id: EntityId, fn: (deck: Deck)=>void): void {
+            this.getDeck(id).lift(deck => fn(deck));
+        }
+        
+        private _newDataset(): void {
+            this._datasets.push(new CardDataSet(randomID()));
         }
 
-        private _modifyDeck(id: string, fn: (deck: Deck)=>void): void {
-            this.getDeck(id).lift(deck => fn(deck));
+        private _deleteDataset(id: EntityId): void {
+            this._datasets.filter(Dataset => Dataset.id !== id);
         }
 
-        private _newCard(deckId: string): void {
-            this.getDeck(deckId)
-                .lift(deck => {
+        private _modifyDataset(id: EntityId, fn: (dataset: CardDataSet)=>void): void {
+            this.getDataset(id).lift(Dataset => fn(Dataset));
+        }
+
+        private _newRecord(datasetId: EntityId): void {
+            this.getDataset(datasetId)
+                .lift(ds => {
                     var cardId = randomID();
-                    this._cards.push(new Card(cardId));
-                    deck.cards.push(cardId);
+                    this._records.push(new CardData(cardId));
+                    ds.recordIds.push(cardId);
                 });
         }
 
-        private _selectCard(id: string): void {
-            this.selectedCard = id;
+        private _deleteRecord(id: EntityId): void {
+            this._records.filter(card => card.id !== id);
         }
-
-        private _deleteCard(id: string): void {
-            this._cards.filter(card => card.id !== id);
+        
+        private _newTemplate(): void {
+            this._templates.push(new CardTemplate(randomID()));
+        }
+        
+        private _deleteTemplate(id: EntityId): void {
+            this._templates.filter(t => t.id !== id);
         }
     }
 }

client/src/stores/template.ts

 
 module rpgcards {
     
+    export class CardTemplate extends Entity{
+        public description: string;
+        public width: number;
+        public height: number;
+        public script: string;
+
+        constructor(id:EntityId) {
+            super(id);
+            this.description = "";
+            this.width = 0;
+            this.height = 0;
+        }
+
+    }
 }

client/src/views/components/deck.ts

         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;
+            a.desc === b.desc;
     }
 
     interface DeckTileState {
     }
 
-    export function tileHeader(props: DeckTileProps) {
+    export function tileHeader(props: DeckTileProps): React.ReactElement<any> {
         return React.DOM.div
             ( { className: 'deck-tile-header', onClick: null }
-            , React.DOM.div({ className: 'deck-tile-header-name' }, props.name)
-            , React.DOM.div({ className: 'deck-tile-header-id' }, props.id)
+            , props.name
             );
     }
 
-    export function tileBody(props: DeckTileProps) {
+    export function tileBody(props: DeckTileProps): React.ReactElement<any> {
         return React.DOM.div
             ( { className: 'deck-tile-body', onClick: null }
-            , props.desc
+            , React.DOM.p(null, props.desc)
             );
     }
 
-    export function tileFooter(props: DeckTileProps) {
-        let cardsText = props.cards + " cards";
-        return React.DOM.div
-            ( { className: 'deck-tile-footer', onClick: null }
-            , cardsText
-            );
+    export function tileFooter(props: DeckTileProps): React.ReactElement<any> {
+        return null;
     }
 
     export class DeckTileSpec extends React.Component<DeckTileProps, DeckTileState> {
 
         render() {
 
-            return React.DOM.div
-                ( { className: 'deck-tile' }
-                , tileHeader(this.props)
-                , tileBody(this.props)
-                , tileFooter(this.props)
-                );
+            return React.DOM.div( { className: 'deck-tile' }
+                , React.DOM.div( { className: 'deck-tile-content' }
+                    , tileHeader(this.props)
+                    , tileBody(this.props)
+                    , tileFooter(this.props)
+                ));
         }
     }
 

client/src/views/decks.ts

     export function renderDecks(store: Store): React.ReactElement<any> {
         var decks = store.getDeckList().fmap(deckIds => deckIds.map(id => {
             let deck = store.getDeck(id);
-            let cards = store.getCardsForDeck(id);
 
-            return AsyncT.liftA2(deck, cards, (deck, cards) => {
+            return deck.lift(deck => {
                 return <React.ReactElement<any>> DeckTile({
                     key : deck.id,
                     id  : deck.id,
                     desc: deck.description,
-                    name: deck.name,
-                    cards: cards.length });
+                    name: deck.name});
             }).caseOf({
                 just: (t) => t,
                 nothing: (e) => errorTile(id, e),

client/tsconfig.json

         "./src/external/react/react.d.ts",
         "./src/stores/asyncT.ts",
         "./src/stores/card.ts",
+        "./src/stores/dataset.ts",
         "./src/stores/deck.ts",
         "./src/stores/entity.ts",
         "./src/stores/eventEmitter.ts",