mnml/client/src/scenes/constants.js

// POSITIONING FNS
// floors prevent subpixel rendering which looks trash

const CANVAS_WIDTH = 1600;
const CANVAS_HEIGHT = 1000;

const menuWidth = () => CANVAS_WIDTH;
const menuHeight = () => 25;

const combatWidth = () => CANVAS_WIDTH;
const combatHeight = () => CANVAS_HEIGHT - menuHeight();
const combatY = () => menuHeight();
const combatX = () => 0;

const crypListWidth = () => Math.floor(CANVAS_WIDTH * 0.2);
const crypListHeight = () => CANVAS_HEIGHT - menuHeight();
const cryplistRowHeight = cryps => crypListHeight() / cryps.length;
const crypListY = () => menuHeight();
const crypListX = () => 0;

const gameListWidth = () => Math.floor(CANVAS_WIDTH * 0.2);
const gameListHeight = () => Math.floor(CANVAS_HEIGHT / 10);
const gameListX = () => crypListWidth() + itemListWidth();
const gameListY = i => menuHeight() + (gameListHeight() * i);
const gameListRowY = i => menuHeight() + (gameListHeight() * (i + 2));

const itemListWidth = () => Math.floor(CANVAS_WIDTH * 0.2);
const itemListHeight = () => Math.floor(CANVAS_HEIGHT / 10);
const itemListX = () => crypListWidth();
const itemListY = i => menuHeight() + (itemListHeight() * i);
const itemListRowY = i => menuHeight() + (itemListHeight() * (i + 2));

const statsWidth = () => Math.floor(CANVAS_WIDTH - crypListWidth() - gameListWidth());
const statsHeight = () => CANVAS_HEIGHT - menuHeight();
const statsY = () => menuHeight();
const statsX = () => crypListWidth() + gameListWidth();
const statsKnownX = () => Math.floor(statsX() + statsWidth() / 4);
const statsLearnableX = () => Math.floor(statsX() + statsWidth() / 2);
const statsTextMargin = () => 24;
const statsLearnableMargin = () => 12;

const logWidth = () => combatWidth();
const logHeight = () => combatHeight() * 0.3;
const logY = () => menuHeight() + (combatHeight() * 0.7);
const logX = () => combatWidth() * 0.6;


module.exports = {
    TEXT: {
        NORMAL: { fontFamily: 'monospace', fontSize: 16, color: '#ffffff' },
        LEARNABLE: { fontFamily: 'monospace', fontSize: 12, color: '#ffffff' },
        HEADER: { fontFamily: 'monospace', fontSize: 24, color: '#ffffff', fontStyle: 'bold' },
    },

    POSITIONS: {
        MENU: {
            width: menuWidth,
            height: menuHeight,
        },

        CRYP_LIST: {
            x: crypListX,
            y: crypListY,
            width: crypListWidth,
            height: crypListHeight,
            rowHeight: cryplistRowHeight,
            rowWidth: crypListWidth,
        },

        STATS: {
            x: statsX,
            y: statsY,
            width: statsWidth,
            height: statsHeight,
            knownX: statsKnownX,
            learnableX: statsLearnableX,
            textMargin: statsTextMargin,
            learnableMargin: statsLearnableMargin,
        },

        COMBAT: {
            x: combatX,
            y: combatY,
            width: combatWidth,
            height: combatHeight,

            LOG: {
                x: logX,
                y: logY,
                width: logWidth,
                height: logHeight,
            },
        },

        GAME_LIST: {
            x: gameListX,
            y: gameListY,
            width: gameListWidth,
            height: gameListHeight,
            rowY: gameListRowY,
        },

        ITEM_LIST: {
            x: itemListX,
            y: itemListY,
            width: itemListWidth,
            height: itemListHeight,
            rowY: itemListRowY,
        },
    },

    COLOURS: {
        BLUE: 0x004bfe,
        CYAN: 0x27e7c0,
        PURPLE: 0x61008c,
        YELLOW: 0xfdfe02,
        ORANGE: 0xff9215,
        PINK: 0xe766b6,
        GRAY: 0x9d9ea0,
        LBLUE: 0x87c6f2,
        GREEN: 0x166c4f,
        BROWN: 0x583108,
        BLACK: 0x000000,
        RED: 0xff0000,
        WHITE: 0xffffff,
    },

    DELAYS: {
        MOVE_CREEP: 500,
        DAMAGE_TICK: 500,
        ANIMATION_DURATION: 1000,
        // wall: [500],
        // spit: [300, 500],
        // gravBomb: [300, 500],
        // gravBlast: [300, 500],
        // chargeBall: [300, 500],
    },

    SKILLS: {
        LEARNABLE: [
            {
                name: 'Attack',
                description: 'a fast physical attack with phys dmg',
            },
            {
                name: 'Block',
                description: 'decreases incoming physical damage for 1T',
            },
            {
                name: 'Parry',
                description: 'prevents all physical damage for 1T',
            },
            {
                name: 'Evade',
                description: 'gives a chance to evade physical damage for 1T',
            },
            {
                name: 'Snare',
                description: 'prevents physical skills from being used for 2T',
            },
            {
                name: 'Stun',
                description: 'physical skill that prevents target cryp from using any skills',
            },
            {
                name: 'Evasion',
                description: 'grants Evade effect to a cryp',
            },
            {
                name: 'Heal',
                description: 'heal a cryp with spell dmg',
            },
            {
                name: 'Triage',
                description: 'grants a spell dmg based healing over time buff',
            },
            {
                name: 'Throw',
                description: 'stuns and makes the target take increased physical damage',
            },
            {
                name: 'Blast',
                description: 'blast the target with magic damage',
            },
            {
                name: 'Amplify',
                description: 'increase the magic damage dealt by a cryp',
            },
            {
                name: 'Decay',
                description: 'afflict a cryp with a spell damage based damage over time debuff',
            },
            {
                name: 'Drain',
                description: 'drain hp from target cryp with a spell damage based debuff',
            },
            {
                name: 'Curse',
                description: 'target cryp takes increased magic damage',
            },
            {
                name: 'Empower',
                description: 'increase the physical damage dealt by a cryp',
            },
            {
                name: 'Shield',
                description: 'grants immunity to magical skills to target cryp',
            },
            {
                name: 'Silence',
                description: 'prevent target cryp from casting magical skills',
            },
            {
                name: 'Purify',
                description: 'remove physical debuffs from target cryp',
            },
            {
                name: 'Purge',
                description: 'remove magical debuffs from target cryp',
            },
            {
                name: 'Banish',
                description: 'target cryp is prevented from casting any skills and taking any damage',
            },
            {
                name: 'Hex',
                description: 'magical based skill that prevents target cryp from using any skills',
            },
        ],
    },
};