mahjong-keyboard v0.9.1

Mahjong Keyboard

Virtual keyboard that outputs mahjong notation.

Manzu = 1-9m\ Pinzu = 1-9p\ Souzu = 1-9s\ Winds = 1-4z\ Dragons = 5-7z

Check out the Demo.

How to use

• add to your project via npm (TODO)
• create mandatory elements
  • input for the notation (usually an input text field)
  • opener/closer button
• import keyboard's SCSS to your own SCSS file

@import "~mahjong-keyboard";

• import into JS and initialize

import MahjongKeyboard from 'mahjong-keyboard';

const keyboard = new MahjongKeyboard({});
keyboard.init();

• default parameters that can be changed in the constructor

  • keyboard: selector for the input, where the notation is written (default .mj-keyboard)
  • opener: selector of the element you want to open and close the keyboard (default .mj-kb-opener)
  • type: after or fixed (default after). After will place the keyboard after placeAfter, fixed will put it on the bottom like a mobile keyboard.
  • placeAfter: selector of an element that you want to place the keyboard after (default .mj-keyboard)

  • tiles: you can customize each tile's representation. Defaults are UTF-8 mahjong tile glyphs. Format looks like this:

    const keyboard = new MahjongKeyboard({
        tiles: {
            '1m': '<img class="mj-kb-tile-image" src="/images/tiles/m1.png">',
            '2m': '<img class="mj-kb-tile-image" src="/images/tiles/m2.png">',
            '3m': '<img class="mj-kb-tile-image" src="/images/tiles/m3.png">',
            '4m': '<img class="mj-kb-tile-image" src="/images/tiles/m4.png">',
            '5m': '<img class="mj-kb-tile-image" src="/images/tiles/m5.png">',
            '6m': '<img class="mj-kb-tile-image" src="/images/tiles/m6.png">',
            '7m': '<img class="mj-kb-tile-image" src="/images/tiles/m7.png">',
            '8m': '<img class="mj-kb-tile-image" src="/images/tiles/m8.png">',
            '9m': '<img class="mj-kb-tile-image" src="/images/tiles/m9.png">',
    
            '1p': '<img class="mj-kb-tile-image" src="/images/tiles/p1.png">',
            '2p': '<img class="mj-kb-tile-image" src="/images/tiles/p2.png">',
            '3p': '<img class="mj-kb-tile-image" src="/images/tiles/p3.png">',
            '4p': '<img class="mj-kb-tile-image" src="/images/tiles/p4.png">',
            '5p': '<img class="mj-kb-tile-image" src="/images/tiles/p5.png">',
            '6p': '<img class="mj-kb-tile-image" src="/images/tiles/p6.png">',
            '7p': '<img class="mj-kb-tile-image" src="/images/tiles/p7.png">',
            '8p': '<img class="mj-kb-tile-image" src="/images/tiles/p8.png">',
            '9p': '<img class="mj-kb-tile-image" src="/images/tiles/p9.png">',
    
            '1s': '<img class="mj-kb-tile-image" src="/images/tiles/s1.png">',
            '2s': '<img class="mj-kb-tile-image" src="/images/tiles/s2.png">',
            '3s': '<img class="mj-kb-tile-image" src="/images/tiles/s3.png">',
            '4s': '<img class="mj-kb-tile-image" src="/images/tiles/s4.png">',
            '5s': '<img class="mj-kb-tile-image" src="/images/tiles/s5.png">',
            '6s': '<img class="mj-kb-tile-image" src="/images/tiles/s6.png">',
            '7s': '<img class="mj-kb-tile-image" src="/images/tiles/s7.png">',
            '8s': '<img class="mj-kb-tile-image" src="/images/tiles/s8.png">',
            '9s': '<img class="mj-kb-tile-image" src="/images/tiles/s9.png">',
    
            '1z': '<img class="mj-kb-tile-image" src="/images/tiles/z1.png">',
            '2z': '<img class="mj-kb-tile-image" src="/images/tiles/z2.png">',
            '3z': '<img class="mj-kb-tile-image" src="/images/tiles/z3.png">',
            '4z': '<img class="mj-kb-tile-image" src="/images/tiles/z4.png">',
            '5z': '<img class="mj-kb-tile-image" src="/images/tiles/z5.png">',
            '6z': '<img class="mj-kb-tile-image" src="/images/tiles/z6.png">',
            '7z': '<img class="mj-kb-tile-image" src="/images/tiles/z7.png">',
        }
    });