combine all png into 1 image per theme

TODO

@@ -3,6 +3,7 @@ TODO
 DONE         CREATED      DESCRIPTION
 -          : 2020-05-01 : save table data in memory for live and archive + instant switch between them
 ~          : 2020-04-17 : load archive games without loading a new page
+2020-05-02 : 2020-05-01 : combine all png into 1 image, for each theme => faster loading
 2020-05-01 : 2020-05-01 : delay google ads + analytics
 2020-05-01 : 2020-05-01 : show the seasons in archive
 2020-05-01 : 2020-05-01 : control highlight color + size, and display it on the board
@@ -109,7 +110,6 @@ low:
 -          : 2020-04-23 : redesign event stats: use boxes => more efficient available screen space usage
 -          : 2029-04-29 : add SVG connectors to the bracket
 -          : 2020-04-13 : add 3d rendering option to the chessboard
--          : 2020-05-01 : combine all png into 1 image, for each theme => faster loading
 lowest:
 ~          : 2020-04-13 : add 3d board
 ~          : 2020-04-13 : add 3d pieces

js/game.js

@@ -62,6 +62,14 @@ let BOARD_THEMES = {
     NAMESPACE_SVG = 'http://www.w3.org/2000/svg',
     num_ply,
     PIECE_KEYS  = Split('alpha chess24 dilena leipzig metro symbol uscf wikipedia'),
+    PIECE_SIZES = {
+        _: 80,
+        metro: 160,
+    },
+    PIECE_TYPES = {
+        _: 'png',
+        // wikipedia: 'svg',            // will enable in the future
+    },
     pgn_moves = [],
     players = [{}, {}],                 // current 2 players
     prev_pgn,
@@ -76,9 +84,6 @@ let BOARD_THEMES = {
         1: 'win',
         '=': 'draw',
     },
-    SVG_THEMES = {
-        wikipedia: 1,
-    },
     table_data = {},
     TABLES = {
         crash: 'gameno=G#|White|Black|Reason|decision=Final decision|action=Action taken|Result|Log',
@@ -242,10 +247,11 @@ function create_boards() {
 function update_board_theme() {
     let board_theme = BOARD_THEMES[Y.board_theme],
         theme = Y.piece_theme,
-        theme_ext = SVG_THEMES[theme]? 'svg': 'png';
+        theme_ext = PIECE_TYPES[theme] || PIECE_TYPES._,
+        theme_size = PIECE_SIZES[theme] || PIECE_SIZES._;
 
     Keys(xboards).forEach(key => {
-        xboards[key].set_theme(board_theme, theme, theme_ext, Y.highlight_color, Y.highlight_size);
+        xboards[key].set_theme(board_theme, theme, theme_ext, theme_size, Y.highlight_color, Y.highlight_size);
     });
 }
 

js/network.js

@@ -22,6 +22,7 @@ let globalRoom = 0,
  * + handle all messages
  */
 function init_sockets() {
+    return;
     socket = io.connect(HOST);
     unlistenLogMain();
 

js/xboard.js

@@ -39,6 +39,7 @@ let COLUMN_LETTERS = 'abcdefghijklmnopqrst'.split(''),
         cube: 'Change view',
     },
     LETTER_COLUMNS = Assign({}, ...COLUMN_LETTERS.map((letter, id) => ({[letter]: id}))),
+    SPRITE_OFFSETS = Assign({}, ...'bknpqrBKNPQR'.split('').map((key, id) => ({[key]: id}))),
     // https://en.wikipedia.org/wiki/Forsyth%E2%80%93Edwards_Notation
     // KQkq is also supported instead of AHah
     START_FEN = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w AHah - 0 1';
@@ -84,8 +85,9 @@ class XBoard {
         this.size = options.size || 16;
         this.smooth = options.smooth;
         this.target = options.target || 'html';
-        this.theme = 'wikipedia';
-        this.theme_ext = 'svg';
+        this.theme = 'chess24';
+        this.theme_ext = 'png';
+        this.theme_size = 80;
     }
 
     /**
@@ -389,7 +391,12 @@ class XBoard {
         if (dirty & 2) {
             if (DEV.board & 1)
                 LS(`render_html: num_piece=${this.pieces.length}`);
-            let nodes = [],
+            let image = `theme/${this.theme}.${this.theme_ext}`,
+                nodes = [],
+                piece_size = this.theme_size,
+                diff = (piece_size - size) / 2,
+                style = `background-image:url(${image});height:${piece_size}px;width:${piece_size}px`,
+                transform = `transform:scale(${size / piece_size}) translate(-${diff}px,-${diff}px)`,
                 xpieces = _('div.xpieces', this.node);
 
             Class(xpieces, 'smooth', this.smooth);
@@ -399,15 +406,12 @@ class XBoard {
                 let char = piece.char,
                     dead = (piece.flag & 1),
                     coord = piece.coord,
-                    lower = Lower(char),
                     node = piece.node,
-                    name = (char == lower)? `b${lower}`: `w${lower}`,
-                    image = `theme/${this.theme}/${name}.${this.theme_ext}`;
+                    offset = -SPRITE_OFFSETS[char] * piece_size;
 
-                if (node)
-                    node.firstElementChild.src = image;
-                else {
-                    node = CreateNode('div', `<img src="${image}">`, {class: 'xpiece'});
+                if (!node) {
+                    let html = `<div style="${style};background-position-x:${offset}px"></div>`;
+                    node = CreateNode('div', html, {class: 'xpiece'});
                     nodes.push(node);
                     piece.node = node;
                 }
@@ -421,7 +425,7 @@ class XBoard {
                         x = 7 - x;
                         y = 7 - y;
                     }
-                    Style(node, `transform:translate(${x * size}px,${y * size}px)`);
+                    Style(node, `${transform} translate(${x * piece_size}px,${y * piece_size}px)`);
                 }
             }
 
@@ -537,15 +541,17 @@ class XBoard {
      * @param {string[]} colors [light, dark]
      * @param {Object} theme
      * @param {string} theme_ext extension for the theme images
+     * @param {number} theme_size square dimension in px
      * @param {string} high_color
      * @param {number} high_size
      */
-    set_theme(colors, theme, theme_ext, high_color, high_size) {
+    set_theme(colors, theme, theme_ext, theme_size, high_color, high_size) {
         if (DEV.board & 1)
             LS('set_theme');
         this.colors = colors;
         this.theme = theme;
         this.theme_ext = theme_ext;
+        this.theme_size = theme_size;
         this.high_color = high_color;
         this.high_size = high_size;
 

script/convert_theme.py

@@ -8,6 +8,7 @@
 1)  - theme.js  = 387KB
     - saved png = 184KB ... half the size
     - quant png = 114KB
+    - combined  = 83KB
 2) only the desired theme will be loaded, if it's chess24, then it's only 21KB to load, instead of 387KB
 """
 
@@ -46,9 +47,6 @@ def go(self):
                 print(f'{num_theme}) {theme}')
                 continue
 
-            if theme == 'wikipedia':
-                continue
-
             if 'base64' not in line:
                 continue
 

script/sync.py

@@ -14,6 +14,8 @@
 from time import time
 from typing import Any
 
+from PIL import Image, ImageFile
+
 from common import makedirs_safe, read_text_safe, write_text_safe
 from css_minify import css_minify
 
@@ -69,6 +71,40 @@ def __init__(self, **kwargs):
 
         self.logger = getLogger(self.__class__.__name__)
 
+    def combine_pieces(self, folder: str):
+        """Combine chess pieces png files into 1 file
+        """
+        if 'metro' in folder:
+            height = 160
+            width = 160
+        else:
+            height = 80
+            width = 80
+        combined = Image.new('RGBA', (width * 12, height), (0, 255, 0, 0))
+        output = f'{folder}.png'
+
+        i = 0
+        pieces = 'bknpqr'
+        for color in 'bw':
+            for piece in pieces:
+                name = f'{color}{piece}'
+                image = Image.open(os.path.join(folder, f'{name}.png'))
+                offset = (i * width, 0)
+                combined.paste(image, offset)
+                i += 1
+
+        combined.save(output, format='png')
+        print('a', end='')
+
+    def combine_themes(self, folder: str):
+        """Combine all pieces of each theme
+        """
+        sources = os.listdir(folder)
+        for source in sources:
+            filename = os.path.join(folder, source)
+            if os.path.isdir(filename):
+                self.combine_pieces(filename)
+
     def compress_3d(self, data: str) -> str:
         """Compress THREE javascript
         """
@@ -263,6 +299,11 @@ def synchronise(self) -> bool:
 if __name__ == '__main__':
     start = time()
     sync = Sync()
-    sync.synchronise()
+
+    if 0:
+        sync.combine_themes(os.path.join(BASE, 'theme'))
+    else:
+        sync.synchronise()
+
     end = time()
     print(f'\nELAPSED: {end-start:.3f} seconds')