JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Battle demo, by Gwyn Milcote.<br>
Two classes: frontend and backend. The latter can be ported to PHP, and SQL stuff added in it. This is just an example of how functions may be laid out, and bits of data passed around.

JavaScript

/*
    EXAMPLE DATA
    Pretend these are database tables.
    Backend will 'look up' certain enemies, spells etc.
*/
let pet = {
    name: "Squawk",
    hp: 200,
    maxHP: 200,
    mp: 150,
    maxMP: 150,
    strength: 40,
    speed: 25,
    status: 1,
    moves: [1,2,5,8],
    spells: [3,4,6]
};

const statuses = [
    {id: 1, name: "Fine"},
    {id: 2, name: "Poison"},   // Removes 5% HP every turn.
    {id: 3, name: "Dizzy"}     // Halves accuracy.
];

const monsters = [
    {id: 1, area: 1, name: "Kick", power: 25, acc: 50},
    {id: 2, area: 1, name: "Bite", power: 15, acc: 90},
    {id: 3, area: 2, name: "Scratch", power: 20, acc: 80},
    {id: 4, area: 2, name: "Screech", power: 5, acc: 98},
    {id: 5, area: 3, name: "Squish", power: 30, acc: 35},
    {id: 6, area: 3, name: "Suplex", power: 45, acc: 25},
];

const moves = [
    {id: 1, name: "Kick", power: 25, acc: 50},
    {id: 2, name: "Bite", power: 15, acc: 90},
    {id: 3, name: "Scratch", power: 20, acc: 80},
    {id: 4, name: "Screech", power: 5, acc: 98},
    {id: 5, name: "Squish", power: 30, acc: 35},
    {id: 6, name: "Suplex", power: 45, acc: 25}
];

const spells = [
    {id: 1, name: "Fire", mp: 25, acc: 50},
    {id: 2, name: "Zap", mp: 15, acc: 90},
    {id: 3, name: "Drain", mp: 20, acc: 80},
    {id: 4, name: "Heal", mp: 5, acc: 98},
    {id: 5, name: "Cure", mp: 30, acc: 35},
    {id: 6, name: "Superheal", mp: 45, acc: 25}
];



/*
    FRONTEND
    Render and detect things on the page.
    Move data to/from backend (later using AJAX).
*/
class BattleFrontend {
    constructor(){}

    
    renderMonster(m){
        $("#monster_image").html("[monster image "+ m.image +" ]");
    }
    
    renderPet(p){
        $("#pet_image").html("[pet image "+ p.image +" ]");
    }
    

}


/*
    BACKEND
    Carry out calculations, save data, send back (JSON).
*/
class BattleBackend {
    constructor(area = 1){
        this.beginBattle(area);
    }
    
    // Restart everything, pick a new...