Showing a board - ThePix/QuestJS GitHub Wiki

A board is a visual representation on the screen of a square grid, in an isometric view. It could be for playing a game on, it could be a map. There are probably not a lot of uses in most games, though it might one day be developed into a proper mapping tool.

To add a board to you game you first need to add it to the included libraries, by adding this line to settings.js:

settings.libraries.push('board')

Still in settings.js, you need to set up your board. This is done by calling board.setup with a dictionary that defines your board inside a function called settings.setup. The settings.setup is where all code you want to run at the start after the UI is in place will be, so you could have code there already; that is fine just add this.

There are a lot of options, but basically all the code does is create a dictionary called "boardSettings", assign a bunch of values to it, and then send that to board.setup.

settings.setup = function() {
  const boardSettings = {
    cellSize:40,                    // size of each cell (must be square)
    size:11,                        // number of cells on each side (must be square)
    height:400,                     // the height of the pane the board will appear in
    width:1000,                     // the width of the pane
    angle:75,                       // the angle of board (increase to make it flatter)
    offsetX:20,                     // increase to move the board to the right
    offsetY:25,                     // increase to move the board to the bottom
    baseHeight:100,                 // the height of the base (optional)
    compass:{x: 1000, y:300},       // where to place the compass (optional)
    title:'The Game!',              // The title (optional)
    titleStyle:'font: 20pt bold',   // CSS styling for the title (optional)
    getColourAt:function(x, y) {
      return 'green'
    },
    features:{
      man:{width:30, height:60, x:0, y:-2, file:'icon_man.png',},
      example_text:{text:'Something', style:"font-weight:bold", colour:"orange",},
      example_script:{width:30, height:60, script:function(x, y) {
        return '<text x="' + x + '" y="' + (y-5) + '" style="font-weight:bold;text-anchor:middle" fill="orange">Grumpy!</text>'
      }},
    },
    getFeaturesAt:function(x, y) {
      if (x === 3 && y === 7) return ['man']
      return []
    },
  }
  
  board.setup(boardSettings)
}

Most of the settings are explained above; some are not.

The getColourAt attribute must define a function that takes parameters x and y, and should return the colour of the cell at that position. The above example returns "green" for any value of x and y, so every cell is green.

The features attribute must be a dictionary of things that can be displayed on the board. The image at the top has a man on the board, that is one feature. You can think of this as setting up all the things that can be displayed; we will place them on the board later. In the code you can see three features are set up, each of which is a dictionary. The first has a file attribute, so will display an image from file - this is how the man was done. The second entry has a "text" attribute, so will show text. The third has a "script" attribute, a function that returns SVG text (this is sent four parameters, the x and y coordinates where the thing is to be show on the screen - specifically the lowest point in the square - followed by the x and y coordinates of the cell on the grid.

The getFeaturesAt attribute must define a function that takes parameters x and y, and should return an array of things to draw in that cell - or rather an array of strings, where each string is a key in the features attribute. If there is nothing in the cell, return an empty array. If there are multiple things, they will get drawn in order, so the first item will be at the back, the last item at the front (though text will get displayed on top of everything else). In the example, at one specific square an array containing "man" is returned, so the "man" entry in the features dictionary is used.

You can add some switches to the display, perhaps to toggle whether labels are shown or not. These are set in the "switches" attribute, an array of dictionaries. Each dictionary should have the "on" colour and the "off" colour, the attribute to toggle (an attribute of these settings) and some text to display. You can set the position of the switches with the "switchesPos" attribute, and if you add a "switchesWidth" attribute, they will be put in a box. For example:

showLabels:true,
switchesPos:{x:900, y:80},
switchesWidth:240,
switches:[
  {on:'black', off:'silver', att:'showLabels', text:'Toggle label display'},
],
getFeaturesAt:function(x, y) {
  const result = []
  const city = nation.cityAt(x,y)
  if (city) {
    result.push('city' + city.pop)
    if (this.showLabels) result.push('cityName')
  }
  return result
},

So "showLabels" is set to default to true at the top. The switch is set to toggle it, and in getFeaturesAt, the script checks its value before deciding whether to show the name of the city.

Use "getLeftBorder" and "getRightBorder" to place lines at the bottom left and bottom right of a cell. These should return a string with the HTML attributes "stroke" and "stroke-width", or false if nothing is to be drawn.

getLeftBorder:function(x, y) {
  if (nation.map[x][y].riverLeft) return 'stroke="blue" stroke-width="' + nation.map[x][y].riverLeft + '"'
  return false
},
getRightBorder:function(x, y) {
  if (nation.map[x][y].riverRight) return 'stroke="blue" stroke-width="' + nation.map[x][y].riverRight + '"'
  return false
},

Showing a board - ThePix/QuestJS GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️