Continued work on planning display

docs/style.md

@@ -16,8 +16,7 @@ Buttons should be lit by a pure white line in top-left corner (~75% of the borde
 * Third color is for neutral/story
 * Fourth color is for highlight
 
-http://paletton.com/#uid=63s0i0kcJwV44YO8FN3hmo6l-eV
-
+<http://paletton.com/#uid=63s0i0kcJwV44YO8FN3hmo6l-eV>
 
 ```
 *** Primary color:

src/core/BattlePlanning.spec.ts

@@ -52,10 +52,10 @@ module TK.SpaceTac.Specs {
 
             planning.addAction(ship, action1, Target.newFromShip(ship));
             check.equals(planning.getShipPlan(ship).actions, [
-                { action: action1.id, target: Target.newFromShip(ship) }
+                { action: action1.id, category: action1.getCategory(), target: Target.newFromShip(ship) }
             ]);
             check.equals(planning.collectAllActions(), [
-                { action: action1.id, target: Target.newFromShip(ship) }
+                { action: action1.id, category: action1.getCategory(), target: Target.newFromShip(ship) }
             ]);
         });
     });

src/core/BattlePlanning.ts

@@ -40,7 +40,7 @@ namespace TK.SpaceTac {
             if (any(plan.actions, iaction => action.is(iaction.action))) {
                 // TODO replace (or remove if toggle action ?)
             } else {
-                plan.actions.push({ action: action.id, target });
+                plan.actions.push({ action: action.id, category: action.getCategory(), target });
             }
         }
 
@@ -68,6 +68,7 @@ namespace TK.SpaceTac {
 
     export type ActionPlan = {
         action: RObjectId
+        category: ActionCategory
         target?: Target
     }
 }

src/core/actions/BaseAction.ts

@@ -1,4 +1,13 @@
 module TK.SpaceTac {
+    /**
+     * Category of action
+     */
+    export enum ActionCategory {
+        MOVE,
+        PASSIVE,
+        ACTIVE
+    }
+
     /**
      * Targetting mode for an action.
      * 
@@ -76,6 +85,13 @@ module TK.SpaceTac {
             this.name = name;
         }
 
+        /**
+         * Get the category for this action
+         */
+        getCategory(): ActionCategory {
+            return ActionCategory.PASSIVE;
+        }
+
         /**
          * Get the verb for this action
          */

src/core/actions/MoveAction.ts

@@ -25,6 +25,10 @@ module TK.SpaceTac {
             }
         }
 
+        getCategory(): ActionCategory {
+            return ActionCategory.MOVE;
+        }
+
         /** 
          * Configure the engine
          */

src/core/actions/TriggerAction.ts

@@ -44,6 +44,10 @@ module TK.SpaceTac {
             copyfields(config, this);
         }
 
+        getCategory(): ActionCategory {
+            return ActionCategory.ACTIVE;
+        }
+
         getVerb(): string {
             return this.range ? "Fire" : "Trigger";
         }

src/ui/battle/Arena.ts

@@ -8,6 +8,9 @@ module TK.SpaceTac.UI {
         // Link to battleview
         view: BattleView
 
+        // Display of battle plan
+        plandisplay: PlanDisplay
+
         // Hint for weapon or move range
         range_hint: RangeHint
 
@@ -58,6 +61,8 @@ module TK.SpaceTac.UI {
             this.layer_weapon_effects = builder.container("effects");
             this.layer_targetting = builder.container("targetting");
 
+            this.plandisplay = new PlanDisplay(this.layer_targetting.getBuilder());
+
             this.range_hint.setLayer(this.layer_hints);
             this.addShipSprites();
             view.battle.drones.list().forEach(drone => this.addDrone(drone, 0));
@@ -274,6 +279,13 @@ module TK.SpaceTac.UI {
             }
         }
 
+        /**
+         * Update the battle plan displayed
+         */
+        refreshPlanDisplay(plan?: BattlePlan): void {
+            this.plandisplay.update(plan || { fleets: [] }, this.getBattle());
+        }
+
         /**
          * Get the boundaries of the arena on display
          */

src/ui/battle/BattleView.spec.ts

@@ -99,7 +99,7 @@ module TK.SpaceTac.UI.Specs {
             battleview.applyPlayerAction(action, Target.newFromLocation(0, 0));
             check.equals(battleview.plannings.length, 2);
             check.equals(battleview.plannings[0].collectAllActions(), [
-                { action: action.id, target: Target.newFromLocation(0, 0) }
+                { action: action.id, category: action.getCategory(), target: Target.newFromLocation(0, 0) }
             ]);
             check.equals(battleview.plannings[1].collectAllActions(), []);
         });

src/ui/battle/BattleView.ts

@@ -203,10 +203,24 @@ module TK.SpaceTac.UI {
                     planning.addAction(this.action_bar.ship, action, target);
                 }
             });
+            this.planningsChanged();
 
             return false;
         }
 
+        /**
+         * Called when the plannings have been modified (this will update the one shown in the arena)
+         */
+        planningsChanged(): void {
+            // By default, show the first plan matching the player
+            const planning = first(this.plannings, planning => this.player.is(planning.player));
+            if (planning) {
+                this.arena.refreshPlanDisplay(planning.getBattlePlan());
+            } else {
+                this.arena.refreshPlanDisplay();
+            }
+        }
+
         /**
          * Display the splash screen at the start of battle
          */

src/ui/battle/PlanDisplay.ts

@@ -4,12 +4,14 @@ module TK.SpaceTac.UI {
      */
     export class PlanDisplay {
         readonly container: UIContainer
+        private battle?: Battle
 
         constructor(builder: UIBuilder) {
             this.container = builder.container("battleplan");
         }
 
-        update(plan: BattlePlan): void {
+        update(plan: BattlePlan, battle?: Battle): void {
+            this.battle = battle;
             this.updateBattle(plan, this.container);
         }
 
@@ -46,6 +48,27 @@ module TK.SpaceTac.UI {
         }
 
         private updateShip(plan: ShipPlan, parent: UIContainer) {
+            const move = first(plan.actions, action => action.category == ActionCategory.MOVE);
+            const ship = this.battle ? this.battle.getShip(plan.ship) : null;
+            if (ship) {
+                this.updateMoveAction(ship, move, parent);
+            } else {
+                console.error("Ship not found to update actions", plan);
+            }
+        }
+
+        private updateMoveAction(ship: Ship, action: ActionPlan | null, parent: UIContainer) {
+            const child = parent.getByName("move");
+            const graphics = child ? as(UIGraphics, child) : parent.getBuilder().graphics("move");
+            graphics.clear();
+            if (action && action.target) {
+                graphics.addLine({
+                    start: ship.location,
+                    end: action.target,
+                    width: 5,
+                    color: 0xa5b7da
+                });
+            }
         }
     }
 }

src/ui/common/Tooltip.ts

@@ -182,7 +182,7 @@ module TK.SpaceTac.UI {
             let builder = this.getBuilder();
             let scontent = (typeof content == "string") ? content : content(builder);
             if (typeof scontent == "string") {
-                builder.text(scontent, 0, 0, { color: "#cccccc", size: 20 });
+                builder.text(scontent, 0, 0, { color: "#DBEFF9", size: 18 });
             }
 
             if (scontent) {