JSFiddle - React, Tailwind, and code Playground
by Gwyn Milcote
HTML
redoing battlefield. note to self: make a battlefield designer tool! maybe players can design custom ones too.
<div id='bf_container'></div>
What action? <span id='bf_selected_action'>Move</span>
--- Where? <span id='bf_highlighted_coords'>?</span> <span id='bf_selected_coords'>?</span>
<br>
<br>Commanding: <span id='bf_selected_name'>?</span>
<br>Movement Range: <span id='bf_selected_range'>?</span>
<br>Moves: <span id='bf_selected_moves'>[]</span>
<br>
<br>Enemy Details: <span id='bf_target_name'>?</span>
<br>Movement Range: <span id='bf_target_range'>?</span>
<br>Moves: <span id='bf_target_moves'>[]</span>
<div id='reports'>Battle in progress!</div>
<div id='bf_pet_info'></div>
<div id='bf_enemy_info'></div>
<div style='display:none'><h2>Eh? Where?</h2><p>No battles are raging here! Shall we <a href='../../battlefield'>go back?</a></p>
</div>
<div style='display:none'><h2>Ah, dramatic!</h2><p>A battle is raging out here... but you're not the mage in charge!</p>Quick, let's <a href='../../battlefield'><b>hurry away</b></a> or we might get caught in the crossfire.</div>
// blocked vs passable tiles
var blocked = ['12-6','13-6','14-6','15-6','12-7','13-7','14-7','15-7','12-8','13-8','12-9','13-9','12-10','13-10','7-6','8-6','9-6','7-5','8-5','9-5','7-4','8-4', '7-3','8-3','7-2','8-2','7-1','8-1','6-1','5-1','7-16','6-16','5-16','4-16','3-16','2-16','6-15','5-15','4-15','3-15','2-15','1-15','1-14','2-14', '3-14','1-13','1-12','4-10','5-10','4-11','5-11','6-11','5-12','6-12','18-3'];
var surrounding = []; var surroundblock = []; // both temporary, around selected griff
function selectPet(){
$('#tilemap').find('div').removeClass('white').addClass('mapbit');
selx = griffx; sely = griffy; $('#seltile').text(selx+'-'+sely); // when switching griffs, clear previous tile selection
// generate list of movable tiles surrounding this griff. Higher movement means bigger range
var cm = '-'; // was comma, now...CSS
#bf_pet_info {
background-color: lightgreen;
}
#bf_enemy_info {
background-color: lightpink;
}
.pet_info, .enemy_info {
width: 150px;
padding: 5px;
margin: 5px;
border: 1px solid grey;
background-color: white;
border-radius: 5px;
display: inline-table;
vertical-align: top;
}
/*
* Battlefield grid/map container. BG image will vary.
*/
#bf_container {
margin: auto;
width: 800px;
height: 480px;
padding: 0px;
text-align: left;
border: 0px solid green;
position: relative;
background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/intermediary/f/b7ec7f39-7663-447f-9b58-6b74e1492c8e/dcwe30u-784cbd25-e1b3-4a1c-813f-54fa731436a9.jpg);
background-position: center;
}
#bf_container br {
display: block;
margin: 0px;
}
/*
* All tiles must be same size.
*/
#bf_container .tile {
width: 40px;
height: 30px;
background-size: cover;
background-repeat: no-repeat;
}
.pet_tile, .enemy_tile {
z-index: 2;
position: absolute;
cursor: pointer;
}
.tile, .open_tile, .blocked_tile {
display: inline-table;
vertical-align: top;
background-image: url(https://orig00.deviantart.net/2234/f/2018/186/a/a/tile_blank_by_bronzehalo-dcgdi58.png);
}
.open_tile {
background-image: url(https://orig00.deviantart.net/5b77/f/2018/186/0/6/tile_yes_by_bronzehalo-dcgdi6b.png);
}
.blocked_tile {
background-image: url(https://orig00.deviantart.net/bbde/f/2018/186/b/b/tile_nogo_by_bronzehalo-dcgdi5o.png);
}
.white_tile {
background-image: url(https://orig00.deviantart.net/e926/f/2018/186/a/a/tile_white_by_bronzehalo-dcgdi60.png);
}
.open_tile:hover, .white_tile:hover {
cursor: pointer;
}
/*
* Highlight map tile and portrait boxes of the
* currently-selected pet and enemy.
*/
.selected_pet_tile, .selected_pet_info {
background-color: lightgreen;
}
.selected_enemy_tile, .selected_enemy_info {
background-color: pink;
}
/*
* Listing a pet or...JavaScript
// These arrays are all representing DB tables.
// The fake Server class interacts with these 'tables'.
const mockup = {
pets: [
{
id: 1, name: "Flower", maxHp: 100, hp: 89,
range: 2, moves: [1,4]
},{
id: 2, name: "Snow", maxHp: 120, hp: 82,
range: 3, moves: [1,2,3]
},{
id: 3, name: "Rain", maxHp: 135, hp: 38,
range: 4, moves: [4,5]
},{
id: 4, name: "Storm", maxHp: 78, hp: 57,
range: 1, moves: [3,6]
},{
id: 5, name: "Breeze", maxHp: 67, hp: 19,
range: 6, moves: [1,6]
},{
id: 6, name: "Flight", maxHp: 83, hp: 83,
range: 1, moves: [4,2]
},{
id: 7, name: "Aura", maxHp: 184, hp: 138,
range: 4, moves: [5,3]
},{
id: 8, name: "Swan", maxHp: 141, hp: 126,
range: 5, moves: [1,2]
},
],
enemies: [
{
id: 1, name: "Growl", maxHp: 50, hp: 39,
range: 1, moves: [6,5]
},{
id: 2, name: "Screech", maxHp: 114, hp: 112,
range: 2, moves: [4,3]
},{
id: 3, name: "Flame", maxHp: 104, hp: 85,
range: 3, moves: [2,1]
},{
id: 4, name: "Claw", maxHp: 68, hp: 53,
range: 4, moves: [1,2,3,4,5]
},{
id: 5, name: "Fart", maxHp: 59, hp: 51,
range: 5, moves: [5,1]
}, {
id: 6, name: "Lice", maxHp: 154, hp: 142,
range: 6, moves: [2,4,3]
}, {
id: 7, name: "Gruff", maxHp: 74, hp: 35,
range: 1, moves: [1]
},{
id: 8, name: "Bitey", maxHp: 168, hp: 153,
range: 2, moves: [4]
},
],
/*
* Snapshot of data about individual battle, to save/load.
* Will be stored in DB later. With 'userId' column too.
*/
battlesInProgress: [
{id: 1, map: 1, turn:...