Merge branch 'main' into moon8

compile-vue-templates.js

@@ -121,7 +121,7 @@ checkComponent(
     'ui', 'hide_corporation', 'hide_hand', 'hide_cards', 'hide_awards_and_milestones', 'hide_tag_overview',
     'hide_turnorder', 'hide_corporation_names', , 'hide_top_bar', 'small_cards', 'remove_background', 'magnify_cards',
     'magnify_card_descriptions', 'show_alerts', 'hide_ma_scores', 'hide_non_blue_cards', 'hide_log',
-    'lang', 'langs', 'enable_sounds',
+    'lang', 'langs', 'enable_sounds', 'smooth_scrolling', 
   ],
 );
 checkComponent(

src/KeyboardNavigation.ts

@@ -0,0 +1,7 @@
+
+export enum KeyboardNavigation {
+  GAMEBOARD = 'Digit1',
+  PLAYERSOVERVIEW = 'Digit2',
+  HAND = 'Digit3',
+  COLONIES = 'Digit4',
+}

src/boards/Board.ts

@@ -13,7 +13,7 @@ import {SerializedBoard, SerializedSpace} from './SerializedBoard';
 export abstract class Board {
   private maxX: number = 0;
   private maxY: number = 0;
-  constructor(public spaces: Array<ISpace>) {
+  protected constructor(public spaces: Array<ISpace>) {
     spaces.forEach((space) => {
       this.maxX = Math.max(this.maxX, space.x);
       this.maxY = Math.max(this.maxY, space.y);

src/boards/ElysiumBoard.ts

@@ -1,4 +1,3 @@
-import {ISpace} from './ISpace';
 import {SpaceBonus} from '../SpaceBonus';
 import {SpaceName} from '../SpaceName';
 import {Board} from './Board';
@@ -8,10 +7,6 @@ import {Player} from '../Player';
 import {Random} from '../Random';
 
 export class ElysiumBoard extends Board {
-  private constructor(spaces: Array<ISpace>) {
-    super(spaces);
-  }
-
   public static newInstance(shuffle: boolean, rng: Random, includeVenus: boolean): ElysiumBoard {
     const builder = new BoardBuilder(includeVenus);
 

src/boards/HellasBoard.ts

@@ -10,10 +10,6 @@ import {SerializedBoard} from './SerializedBoard';
 import {Random} from '../Random';
 
 export class HellasBoard extends Board {
-  private constructor(spaces: Array<ISpace>) {
-    super(spaces);
-  }
-
   public static newInstance(shuffle: boolean, rng: Random, includeVenus: boolean): HellasBoard {
     const builder = new BoardBuilder(includeVenus);
 

src/boards/OriginalBoard.ts

@@ -8,10 +8,6 @@ import {SerializedBoard} from './SerializedBoard';
 import {Random} from '../Random';
 
 export class OriginalBoard extends Board {
-  private constructor(spaces: Array<ISpace>) {
-    super(spaces);
-  }
-
   public static newInstance(shuffle: boolean, rng: Random, includeVenus: boolean): OriginalBoard {
     const builder = new BoardBuilder(includeVenus);
 

src/components/HelpIconology.ts

@@ -207,6 +207,21 @@ export const HelpIconology = Vue.component('help-iconology', {
                 <div class="help-page-label" v-i18n>Influence</div>
             </div>
         </div>
+        <div class="help-page-column">
+            <div>
+                <div class="help-page-section-title" v-i18n>Hotkeys Mapping</div>
+            </div>
+            <div>
+                <div class="help-page-hotkeys">
+                    <div class="keys">
+                        <div v-i18n>Main Board</div>
+                        <div v-i18n>Players Overview Table</div>
+                        <div v-i18n>Cards in Hand</div>
+                        <div v-i18n>Colonies</div>
+                    </div>
+                </div>
+            <div>
+        </div>
     </div>
     `,
 });

src/components/PlayerHome.ts

@@ -18,6 +18,7 @@ import {Button} from './common/Button';
 import {SortableCards} from './SortableCards';
 import {TopBar} from './TopBar';
 import {PreferencesManager} from './PreferencesManager';
+import {KeyboardNavigation} from '../../src/KeyboardNavigation';
 
 const dialogPolyfill = require('dialog-polyfill');
 
@@ -74,6 +75,35 @@ export const PlayerHome = Vue.component('player-home', {
   },
   mixins: [PlayerMixin],
   methods: {
+    navigatePage: function(event: KeyboardEvent) {
+      const inputSource = event.target as Element;
+      if (inputSource.nodeName.toLowerCase() !== 'input') {
+        let id: string | undefined = undefined;
+        switch (event.code) {
+        case KeyboardNavigation.GAMEBOARD:
+          id = 'shortkey-board';
+          break;
+        case KeyboardNavigation.PLAYERSOVERVIEW:
+          id = 'shortkey-playersoverview';
+          break;
+        case KeyboardNavigation.HAND:
+          id = 'shortkey-hand';
+          break;
+        case KeyboardNavigation.COLONIES:
+          id = 'shortkey-colonies';
+          break;
+        }
+        if (id === undefined) {
+          return;
+        }
+        const el = document.getElementById(id);
+        if (el) {
+          event.preventDefault();
+          const scrollingSpeed = PreferencesManager.loadValue('smooth_scrolling') === '1' ? 'smooth' : 'auto';
+          el.scrollIntoView({block: 'center', inline: 'center', behavior: scrollingSpeed});
+        }
+      }
+    },
     getPlayerCssForTurnOrder: (
       player: PlayerModel,
       highlightActive: boolean,
@@ -163,7 +193,7 @@ export const PlayerHome = Vue.component('player-home', {
     );
   },
   template: `
-        <div id="player-home" :class="player.turmoil ? 'with-turmoil': ''">
+        <div v-on:keydown="navigatePage" tabindex="0" id="player-home" :class="'shortkey-no-outline'+(player.turmoil ? ' with-turmoil': '')">
             <section>
                 <dialog id="dialog-default">
                     <form method="dialog">
@@ -213,7 +243,8 @@ export const PlayerHome = Vue.component('player-home', {
                         :temperature="player.temperature"
                         :shouldNotify="true"
                         :aresExtension="player.aresExtension"
-                        :aresData="player.aresData"></board>
+                        :aresData="player.aresData" 
+                        id="shortkey-board"></board>
 
                     <turmoil v-if="player.turmoil" :turmoil="player.turmoil"></turmoil>
 
@@ -223,10 +254,10 @@ export const PlayerHome = Vue.component('player-home', {
                     </div>
                 </div>
 
-                <players-overview class="player_home_block player_home_block--players nofloat:" :player="player" v-trim-whitespace />
+                <players-overview class="player_home_block player_home_block--players nofloat:" :player="player" v-trim-whitespace id="shortkey-playersoverview"/>
 
                 <div class="player_home_block player_home_block--log player_home_block--hide_log nofloat">
-                    <dynamic-title v-if="player.players.length > 1" title="Game log" :color="player.color" :withAdditional="true" :additional="'generation ' + player.generation" />
+                    <dynamic-title v-if="player.players.length > 1" title="Game log" :color="player.color" :withAdditional="true" :additional="'generation ' + player.generation"/>
                     <h2 v-else :class="'player_color_'+ player.color">
                         <span v-i18n>Game log</span>
                         <span class="label-additional" v-html="getGenerationText()"></span>
@@ -236,7 +267,7 @@ export const PlayerHome = Vue.component('player-home', {
 
                 <div class="player_home_block player_home_block--actions nofloat">
                     <a name="actions" class="player_home_anchor"></a>
-                    <dynamic-title title="Actions" :color="player.color" />
+                    <dynamic-title title="Actions" :color="player.color"/>
                     <waiting-for v-if="player.phase !== 'end'" :players="player.players" :player="player" :settings="settings" :waitingfor="player.waitingFor"></waiting-for>
                 </div>
 
@@ -248,12 +279,12 @@ export const PlayerHome = Vue.component('player-home', {
                 </div>
 
                 <a name="cards" class="player_home_anchor"></a>
-                <div class="player_home_block player_home_block--hand" v-if="player.cardsInHand.length > 0">
+                <div class="player_home_block player_home_block--hand" v-if="player.cardsInHand.length > 0" id="shortkey-hand">
                     <dynamic-title title="Cards In Hand" :color="player.color" :withAdditional="true" :additional="player.cardsInHandNbr.toString()" />
                     <sortable-cards :playerId="player.id" :cards="player.cardsInHand" />
                 </div>
 
-                <div class="player_home_block player_home_block--cards">
+                <div class="player_home_block player_home_block--cards"">
                     <dynamic-title title="Played Cards" :color="player.color" :withAdditional="true" :additional="getPlayerCardsPlayed(player, true).toString()" />
                     <div class="hiding-card-button-row">
                         <div :class="getHideButtonClass('ACTIVE')" v-on:click.prevent="toggleActiveCardsHiding()">
@@ -349,7 +380,7 @@ export const PlayerHome = Vue.component('player-home', {
                 </details>
             </div>
 
-            <div v-if="player.colonies.length > 0" class="player_home_block">
+            <div v-if="player.colonies.length > 0" class="player_home_block" ref="colonies" id="shortkey-colonies">
                 <a name="colonies" class="player_home_anchor"></a>
                 <dynamic-title title="Colonies" :color="player.color"/>
                 <div class="colonies-fleets-cont" v-if="player.corporationCard">

src/components/Preferences.ts

@@ -66,6 +66,7 @@ export const Preferences = Vue.component('preferences', {
       'lang': 'en',
       'langs': LANGUAGES,
       'enable_sounds': false as boolean | unknown[],
+      'smooth_scrolling': false as boolean | unknown[],
     };
   },
   methods: {
@@ -327,6 +328,12 @@ export const Preferences = Vue.component('preferences', {
                             <i class="form-icon"></i> <span v-i18n>Enable sounds</span>
                         </label>
                     </div>
+                    <div class="preferences_panel_item">
+                        <label class="form-switch">
+                            <input type="checkbox" v-on:change="updatePreferences" v-model="smooth_scrolling" />
+                            <i class="form-icon"></i> <span v-i18n>Smooth hotkey scrolling</span>
+                        </label>
+                    </div>
                     <div class="preferences_panel_item form-group">
                         <label class="form-label"><span v-i18n>Language</span> (<a href="javascript:document.location.reload(true);" v-i18n>refresh page</a> <span v-i18n>to see changes</span>)</label>
                         <div class="preferences_panel_langs">

src/components/PreferencesManager.ts

@@ -21,6 +21,7 @@ export class PreferencesManager {
       'hide_log',
       'lang',
       'enable_sounds',
+      'smooth_scrolling',
     ];
 
     static preferencesValues: Map<string, boolean | string> = new Map<string, boolean | string>();

src/components/overview/PlayerTags.ts

@@ -32,6 +32,9 @@ export const PlayerTags = Vue.component('player-tags', {
     showVenus: function(): boolean {
       return this.player.venusNextExtension;
     },
+    showMoon: function(): boolean {
+      return this.player.moonExpansion;
+    },
     getTagsPlaceholders: function() {
       const tags: {[x: string]: Tags | SpecialTags} = {...Tags, ...SpecialTags};
       if (this.showColonyCount() === false) {
@@ -43,6 +46,9 @@ export const PlayerTags = Vue.component('player-tags', {
       if (this.showVenus() === false) {
         delete tags.VENUS;
       }
+      if (this.showMoon() === false) {
+        delete tags.MOON;
+      }
       return tags;
     },
     getCardCount: function(): number {

src/models/PlayerModel.ts

@@ -46,6 +46,7 @@ export interface PlayerModel {
     megaCredits: number;
     megaCreditProduction: number;
     milestones: Array<ClaimedMilestoneModel>;
+    moonExpansion: boolean;
     name: string;
     oceans: number;
     oxygenLevel: number;

src/moon/MoonBoard.ts

@@ -23,10 +23,6 @@ class Space implements ISpace {
 }
 
 export class MoonBoard extends Board {
-  private constructor(spaces: Array<ISpace>) {
-    super(spaces);
-  }
-
   public getNoctisCitySpaceIds() {
     return [];
   }

src/server/ServerModel.ts

@@ -71,6 +71,7 @@ export class Server {
       id: player.id,
       megaCredits: player.megaCredits,
       megaCreditProduction: player.getProduction(Resources.MEGACREDITS),
+      moonExpansion: game.gameOptions.moonExpansion,
       name: player.name,
       oceans: game.board.getOceansOnBoard(),
       oxygenLevel: game.getOxygenLevel(),
@@ -394,6 +395,7 @@ function getPlayers(players: Array<Player>, game: Game): Array<PlayerModel> {
       victoryPointsBreakdown: player.getVictoryPoints(game),
       isActive: player.id === game.activePlayer,
       venusNextExtension: game.gameOptions.venusNextExtension,
+      moonExpansion: game.gameOptions.moonExpansion,
       turmoilExtension: game.gameOptions.turmoilExtension,
       venusScaleLevel: game.getVenusScaleLevel(),
       boardName: game.gameOptions.boardName,

src/styles/help-iconology.less

@@ -151,4 +151,23 @@
     background: linear-gradient(#cc8b00, rgb(128, 87, 0),rgb(128, 87, 0));
     box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 2px rgba(0,0,0,0.3);
     transform: scale(0.8);
+  }
+
+  .help-page-hotkeys {
+    display: flex;
+    background: url(assets/help/hotkeys.png);
+    width: 713px;
+    height: 408px;
+    background-size: 713px 408px;
+    color: white;
+    font-family: Prototype;
+    font-weight: normal;
+    text-align: left;
+    margin-left: 200px;
+    line-height: 38px;
+    .keys{
+        position: relative;
+        left: -245px;
+        margin-top: 190px;
+    }
   }

src/styles/player_home.less

@@ -868,5 +868,6 @@
     }
 }
 
-
-
+.shortkey-no-outline {
+    outline: none;
+}

tests/ares/EmptyBoard.ts

@@ -1,12 +1,7 @@
 import {Board} from '../../src/boards/Board';
 import {BoardBuilder} from '../../src/boards/BoardBuilder';
-import {ISpace} from '../../src/boards/ISpace';
 
 export class EmptyBoard extends Board {
-  private constructor(spaces: Array<ISpace>) {
-    super(spaces);
-  }
-
   public static newInstance() {
     const builder = new BoardBuilder(false);