react-emojione/scripts/create-sprites.js

A tiny library to use emojis in React

#!/usr/bin/env node
/* eslint no-console:off */
const Canvas = require('canvas');
const {join, basename} = require('path');
const {writeFileSync, readFileSync} = require('fs');
const emojiDataArray = require('../src/data/emoji-data');
const emojiShortnames = require('emoji-shortnames');

const EMOJIS_PER_ROW = 64;
const EMOJIONE_VERSION = '3.1.2';

const sets = [
    {
        size: 32,
        padding: 1,
        src: join(__dirname, `../assets/emojione-${EMOJIONE_VERSION}-32x32`),
        out: join(__dirname, `../assets/sprites/emojione-${EMOJIONE_VERSION}-32x32.png`),
    },
    {
        size: 64,
        padding: 1,
        src: join(__dirname, `../assets/emojione-${EMOJIONE_VERSION}-64x64`),
        out: join(__dirname, `../assets/sprites/emojione-${EMOJIONE_VERSION}-64x64.png`),
    },
    // {
    //     size: 128,
    //     padding: 1,
    //     src: join(__dirname,`'../assets/emojione-${EMOJIONE_VERSION}-128x128`),
    //     out: join(__dirname,`'../assets/sprites/emojione-${EMOJIONE_VERSION}-128x128.png`),
    // },
];

const emojiDataMap = new Map(emojiDataArray.map(([code, name]) => [name, code]));

// get shortnames
const shortnames = [];
Object.keys(emojiShortnames)
    .forEach(family => shortnames.push(...emojiShortnames[family]));

const readEmoji = (src, code) => {
    const filename = code.split('-').filter(c => !['200d', 'fe0f'].includes(c)).join('-');
    let img = new Canvas.Image();
    try {
        img.src = readFileSync(join(src, `${filename}.png`));
    } catch (e) {
        img = null;
        console.error('error loading:', filename);
    }
    return img;
};

const createSprite = ({size, src, out, padding}) => {
    const width = EMOJIS_PER_ROW * (size + 1);
    const height = Math.ceil(emojiDataMap.size / EMOJIS_PER_ROW) * (size + 1);
    const count = shortnames.length;
    const canvas = new Canvas(width, height);
    const ctx = canvas.getContext('2d');

    // create sprites
    for (let e = 0, x = padding, y = padding; e < count; x = padding, y += size + padding) {
        for (let i = 0; i < EMOJIS_PER_ROW && e < count; i++, e++, x += size + padding) {
            const name = shortnames[e];
            const code = emojiDataMap.get(name);
            // console.log('x:', x, 'y:', y, '\temoji:', e, '/', count, '\tcode:', code, 'name:', name);
            const img = readEmoji(src, code);
            if (img) {
                ctx.drawImage(img, x, y, size, size);
            }
        }
    }

    console.log('Writing sprite', out);
    writeFileSync(out, canvas.toBuffer());
};

const createSpritePositions = () => {
    // sprite positions
    let x = 0, y = 0, e = 0;
    const positions = {};
    while (e < shortnames.length) {
        positions[emojiDataMap.get(shortnames[e])] = [x, y];
        x++;
        if (x >= EMOJIS_PER_ROW) {
            y++;
            x = 0;
        }
        e++;
    }
    const fn = join(__dirname, '../src/styles/emojione-sprite-positions.js');
    console.log('Writing sprite positions', fn);
    const header = `/*eslint-disable*/
// Do not edit!
// This file was auto-generated by ${basename(__filename)}
export default `;

    writeFileSync(fn, `${header} ${JSON.stringify(positions, null, 1)};`);
};

sets.forEach(createSprite);
createSpritePositions();