JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Arena mockup. Choose a level band to search for teams of 1-4 opponents. Assemble your own team(s) of 1-4, pick one to use against a rival team. Then launch pop-up battle with them.

<hr>

Level: <select id='arena-select-band'>
    <option value='1'>1-10</option>
    <option value='2'>11-20</option>
    <option value='3'>21-30</option>
    <option value='4'>31-40</option>
    <option value='5'>41-50</option>
    <option value='6'>51-60</option>
    <option value='7'>61-70</option>
    <option value='8'>71-80</option>
    <option value='9'>81-90</option>
    <option value='10'>91-100</option>
</select>
<button id='arena-search-btn'>Search for Opponents</button>

<hr>

There are <b><span id='arena-search-count'>?</span></b> rival teams available.
<div id='arena-search-result'></div>

<hr>

<b>Assemble your team of 1-4</b><br>Can't have more Mythics than the rival team. If you have fewer, they'll get more EXP for defeating the rivals.
<div id='arena-mythics-list'></div>

JavaScript

const db = {

    mythics: [
        {id: 1, name: "Barry", sex: 1, breed: 1},
        {id: 2, name: "Gloria", sex: 2, breed: 2},
        {id: 3, name: "Dave", sex: 1, breed: 3},
        {id: 4, name: "Sara", sex: 2, breed: 4},
        {id: 5, name: "Charles", sex: 1, breed: 5},
        {id: 6, name: "Allie", sex: 2, breed: 6},
        {id: 7, name: "Sunny", sex: 1, breed: 7},
        {id: 8, name: "Hazel", sex: 2, breed: 8},
        {id: 9, name: "Sparky", sex: 1, breed: 9},
        {id: 10, name: "Terra", sex: 2, breed: 10},
        {id: 11, name: "Henry", sex: 1, breed: 11},
        {id: 12, name: "Lena", sex: 2, breed: 12}
    ],
    
    teams: [
        {
            userId: 1, isFightable: 1, isBusy: 0,
            mythic1: 1, mythic2: 2,
            mythic3: 3, mythic4: 0
        },{
            userId: 1, isFightable: 1, isBusy: 0,
            mythic1: 4, mythic2: 5,
            mythic3: 6, mythic4: 7
        },{
            userId: 1, isFightable: 1, isBusy: 0,
            mythic1: 9, mythic2: 10,
            mythic3: 0, mythic4: 0
        }
    ]

}

/*
- user can pre-build own team combos, to pick from.
- same mythic can be in many teams.
- all mythics must be idle/available and have energy/hp, at moment the team is picked, or can't start the fight.
- you can make a team 'available for sparring', so others can challenge them. all mythics in that team will be set as busy. so they obv won't be available for your own battling until that team is taken off the list.
*/

class Arena {

    constructor(){}
    
    renderTeam(mythics){
    }

}


class Explore {

    constructor(){
        this.randomTeam();
    }

    randomTeam(){
        this.team = [
            db.mythics[2],
            db.mythics[3],
            db.mythics[5],
            db.mythics[7]
        ];
    }
    
    setTeam(team){
        this.team = team;
    }
    
    setLocation(location){
        this.location = location;
    }
    setSeason(season){
        this.season = season;
   ...