// Display.js

// css columns
//https://developer.mozilla.org/en-US/docs/Web/CSS/columns
(function () {
  /*global adventurejs A*/
  "use strict";

  /**
   * @class adventurejs.Display
   * @ajsnavheading FrameworkReference
   * @param {Game} game A reference to the game instance.
   * @param {displayElId|HTMLElement} displayElId An ID for an HTML element to use as a display.
   * @summary Manages the main game display including all related HTML elements.
   * @classdesc
   * <p>
   * <strong>Display</strong> creates and manages the game display,
   * including the main input and output areas and the status bar.
   * It also manages custom compasses, verb docks and inventory
   * docks. Authors can customize the display with custom CSS.
   * CSS styles for Display can be found in
   * <a href="/css/adventurejs.css">adventurejs.css</a>.
   * To learn more, see the
   * </p>
   */
  class Display {
    constructor(displayElId, game) {
      game.log("log", 1, "Display.js > Constructing display.", "Display");

      /**
       * A reference back to the main {@link adventurejs.Game|Game} object.
       * @var {Object} adventurejs.Display#game
       * @default {}
       */
      this.game = game;

      /**
       * An array that contains a list of references to the
       * HTML element of any compasses, including the one
       * in the status bar as well as any custom compasses.
       * @var {compasses} adventurejs.Display#compasses
       * @default []
       */
      this.compasses = [];

      /**
       * An array that contains a list of references to the
       * HTML elements of any verb docks.
       * @var {verbdocks} adventurejs.Display#verbdocks
       * @default []
       */
      this.verbdocks = [];

      /**
       * An array that contains a list of references to the
       * HTML elements of any inventory docks.
       * @var {inventorydocks} adventurejs.Display#inventorydocks
       * @default []
       */
      this.inventorydocks = [];

      /**
       * An array that contains a list of references to the
       * HTML elements of any image docks.
       * @var {imagedocks} adventurejs.Display#imagedocks
       * @default []
       */
      this.imagedocks = [];

      /**
       * A reference to the game's HTML display element.
       * @var {HTMLElement} adventurejs.Display#displayEl
       * @default null
       */
      this.displayEl = null;

      /**
       * The ID of the game's HTML display element.
       * @var {HTMLElement} adventurejs.Display#displayElId
       * @default null
       */
      this.displayElId = null;

      this.initialize(displayElId);
    }

    /**
     * The game's title.
     * @var {String} adventurejs.Display#title
     * @default ""
     */
    get title() {
      return this.titleEl.innerText;
    }
    set title(title) {
      this.titleEl.innerText = title;
    }

    /**
     * The game's version.
     * @var {String} adventurejs.Display#version
     * @default ""
     */
    get version() {
      return this.versionEl.innerText;
    }
    set version(version) {
      this.versionEl.innerText = version;
    }

    /**
     * The game's author.
     * @var {String} adventurejs.Display#author
     * @default ""
     */
    get author() {
      return this.authorEl.innerText;
    }
    set author(author) {
      this.authorEl.innerText = author;
    }

    /**
     * The current room's name.
     * @var {String} adventurejs.Display#room
     * @default ""
     */
    get room() {
      return this.roomEl.innerText;
    }
    set room(room) {
      this.roomEl.innerHTML = room;
    }

    /**
     * The current score.
     * @var {String} adventurejs.Display#score
     * @default ""
     */
    get score() {
      return this.scoreEl.innerText;
    }
    set score(score) {
      this.scoreEl.innerText = score;
    }
  }
  adventurejs.Display = Display;
})();