Customization
=============

You can customize the game by editing *config.json* (production/ test folder) or insert javascript code into intializing code in *index.html*

config.json
-----------

* General parameters

.. list-table:: 
   :widths: 30 25 25 50
   :header-rows: 1

   * - Name
     - Type
     - Default
     - Description
   * - defaultCategory
     - Number
     - 0
     - Index of default category
   * - difficulty
     - Number
     - 1
     - Default difficulty: 0 = easy, 1 = medium, 2 = hard
   * - useHelpPanel
     - boolean
     - true
     - Enable or disable help panel
   * - useCreditPanel
     - boolean
     - true
     - Enable or disable credit panel
   * - useBackgroundMusic
     - boolean
     - true
     - Enable or disable background music
   * - moveIteration
     - array
     - [40, 200, 1000]
     - Move iterations for each difficulty level
   * - boardTextures
     - array
     - ["wood1.jpg", ...]
     - List of textures used as game board materials
   * - paddingPatterns
     - array
     - ["pad1.png", ...]
     - Padding pattern for image item


* String resources for changing text interfaces: 
    APP_TITLE, APP_INFO, NEW_GAME, HELP, HELP_TEXT, SETTING, CREDIT, CREDIT_TEXT


* Level customization

.. code-block:: javascript
 :linenos:

  "data":{
    "level":{
      "art":[
        {
          "id":1,
          "board":"4x3",
          "path":"data/art_1.jpg"
        },
        {
          "id":2,
          "board":"5x4",
          "path":"data/art_2.jpg"
        },
      ],
      "animal":[
        {
          "id":1,
          "board":"3x3",
          "path":"data/animals_1.jpg"
        },
        {
          "id":2,
          "board":"4x3",
          "path":"data/animals_2.jpg"
        },
        {
          "id":3,
          "board":"3x4",
          "path":"data/animals_3.jpg"
        }
      ]
    }
  }


Javascript
----------

You can also pass an argument object to the game instance to config its behaviour. Inside "index.html" (production folder) :

.. code-block:: javascript
 :linenos:

  var el = document.querySelector('.rs-sp3d');
  var sp3d = new SlidingPuzzle(el, {
    bevelScale:0.96,
    pieceDepth:22,
    pieceSpecular:0x111111, 
    pieceEmissive: 0x0a0a0a,
    pieceColor: 0xffffff,
    boardThickness:20,
    boardDepth:16,
    boardMaxWidth:780,
    boardMaxHeight:780,
    fitFactor:0.96,
    ambientLight:0x333333,
    lightMovingSpeed:2
  });

.. list-table:: 
   :widths: 30 25 25 50
   :header-rows: 1

   * - Name
     - Type
     - Default
     - Description
   * - bevelScale
     - Number
     - 0.96
     - Bevel scale applied to each puzzle piece
   * - pieceDepth
     - Number
     - 22
     - Depth of each puzzle piece
   * - pieceSpecular
     - Number
     - 0x111111
     - Piece specular color
   * - pieceEmissive
     - Number
     - 0x0a0a0a
     - Piece emissive color
   * - pieceColor
     - Number
     - 0xffffff
     - Piece color
   * - boardThickness
     - Number
     - 20
     - Puzzle board thickness
   * - boardDepth
     - Number
     - 16
     - Puzzle board depth
   * - boardMaxWidth
     - Number
     - 780
     - Maximum width of puzzle board
   * - boardMaxHeight
     - Number
     - 780
     - Maximum height of puzzle board
   * - fitFactor
     - Number
     - 0.96
     - Fit factor applied to each photo
   * - ambientLight
     - Number
     - 0x333333
     - Ambient color of the scene
   * - lightMovingSpeed
     - Number
     - 2
     - Light moving speed