mnml/client/src/scenes/constants.js

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

const CANVAS_WIDTH = 1600;
const CANVAS_HEIGHT = 1000;

const headerWidth = () => CANVAS_WIDTH;
const headerHeight = () => Math.floor(CANVAS_HEIGHT * 0.05);


const menuCrypListWidth = () => Math.floor(CANVAS_WIDTH * 0.3);
const menuCrypListHeight = () => Math.floor(CANVAS_HEIGHT * 0.5);
const menuCrypListX = () => 0;
const menuCrypListY = () => headerHeight();

const itemListWidth = () => Math.floor(CANVAS_WIDTH * 0.5);
const itemListHeight = () => Math.floor(CANVAS_HEIGHT * 0.5);
const itemListX = () => 0;
const itemListY = () => Math.floor(CANVAS_HEIGHT * 0.5);

const menuNavigationWidth = () => Math.floor(CANVAS_WIDTH * 0.5);
const menuNavigationHeight = () => Math.floor(CANVAS_HEIGHT * 0.3);
const menuNavigationX = () => Math.floor(CANVAS_WIDTH * 0.5);
const menuNavigationY = () => Math.floor(CANVAS_HEIGHT * 0.7);

const menuMainWidth = () => Math.floor(CANVAS_WIDTH * 0.7);
const menuMainHeight = () => Math.floor(CANVAS_HEIGHT * 0.5);
const menuMainX = () => Math.floor(CANVAS_WIDTH * 0.3);
const menuMainY = () => headerHeight();


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

const statsWidth = () => Math.floor(CANVAS_WIDTH - menuCrypListWidth());
const statsHeight = () => CANVAS_HEIGHT - headerHeight();
const statsY = () => headerHeight();
const statsX = () => menuCrypListWidth();
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 = () => headerHeight() + (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: {
        HEADER: {
            width: headerWidth,
            height: headerHeight,
        },

        CRYP_LIST: {
            x: menuCrypListX,
            y: menuCrypListY,
            width: menuCrypListWidth,
            height: menuCrypListHeight,
        },

        MENU_MAIN: {
            x: menuMainX,
            y: menuMainY,
            width: menuMainWidth,
            height: menuMainHeight,

        },

        NAVIGATION: {
            x: menuNavigationX,
            y: menuNavigationY,
            width: menuNavigationWidth,
            height: menuNavigationHeight,
        },

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

        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,
            },
        },
    },

    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,

        SELECT: 0x003300,
    },

    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',
            },
        ],
    },
};