JSFiddle - React, Tailwind, and code Playground

by Dinocanid

HTML

<button class='fightbtn'>Fight</button>

<div id='battleholder'>
<div id='battlescene'>
<div class='battletop'>Battle against Enemyname!</div>
<div id='griffsprite'><img src='..'></div>
<div id='enemysprite'><img src='..'></div>

<div class='statusholder'>
<div class='griffbar' style='float:left;'>
  <div class='fightername' style='text-align:left;'>Griff name here</div>
  <div id='ghpBar' style='float:right;'><div id='ghpInner'></div></div><div class='fighterhp' style='text-align:left;float:left;'>HP: 100/100</div>
</div>
<div class='enemybar' style='float:right;'>
  <div class='fightername' style='text-align:right;'>Enemy name here</div>
  <div id='ehpBar' style='float:left;'><div id='ehpInner'></div></div> <div class='fighterhp' style='text-align:right;float:right;'>HP: 100/100</div>
</div>
</div>

<div class='middleholder'>
<div id='griffportrait'><img src='..'></div>
<div id='battlereports'>Messages here.<br><button class='dialogue'>Switch to cutscene mode</button><br><button class='notdialogue'>Switch to battle mode</button></div>
<div id='enemyportrait'><img src='..'></div>
</div>

<div class='moveholder'>
<div class='battlemp'><div id='energyInner'></div></div>
<div id='battlemoves'>
<button class='battlespell' data-spell='blah'>Some spell</button>
<button class='battlespell' data-spell='blah'>Some spell</button>
<button class='battlespell' data-spell='blah'>Some spell</button>
<button class='battlespell' data-spell='blah'>Some spell</button>
<button class='battlespell' data-spell='blah'>Some spell</button>
<button class='battlespell' data-spell='blah'>Some spell</button>
<button class='battlespell' data-spell='blah'>Some spell</button>
<button class='battlespell' data-spell='blah'>Some spell</button>
<button class='battlespell' data-spell='blah'>Some spell</button>
<button class='battlespell' data-spell='blah'>Some spell</button>
<button class='battlespell' data-spell='blah'>Some spell</button>
<button class='battlespell' data-spell='blah'>Some...

CSS

#battleholder {width:870px;height:620px;box-sizing:border-box;background-color:white;border:5px solid grey;border-radius:10px;}

/* battleholder is fixed in centre of screen, empty. 
the battle scene is loaded into it, with BG and relative position, so divs inside can be positioned absolutely */
#battlescene {width:860px;height:610px;background-image:url('https://images.freeimages.com/images/small-previews/6c8/forest-i-1384045.jpg');background-size:cover;background-position:center bottom;position:relative;text-align:center;}

.battletop {width:870px;height:40px;padding:5px;font-size:30px;color:white;}

#griffsprite {position:absolute;width:140px;height:100px;top:130px;left:160px;}
#griffsprite img {width:140px;height:100px;}
#enemysprite {position:absolute;width:400px;height:200px;top:50px;left:440px;}
#enemysprite img {width:380px;height:180px;}

.statusholder {width:830px;position:absolute;top:275px;left:15px;}
.griffbar,.enemybar {width:365px;height:60px;background-color:rgba(255,255,255,0.7);border:1px solid white;border-radius:10px;padding:3px;}
.fightername {font-size:18px;padding:4px;background-color:white;border-radius:5px;}
.fighterhp {padding:5px;background-color:yellow;border-radius:5px;}
#ghpBar,#ehpBar {margin:5px 0px;width:200px;height:20px;border:1px solid grey;border-radius:5px;padding:1px;text-align:left;background-color: white;display:inline-block;vertical-align:top;}
#ghpInner,#ehpInner {height:100%;width:100%;border-radius:5px;background-color: green;}
#energyInner {height:100%;width:100%;border-radius:5px;background-color: #17A2B8;}

.middleholder {width:830px;position:absolute;top:360px;left:15px;}
#griffportrait {width:120px;height:120px;border-radius:5px;float:left;}
#griffportrait img {width:120px;height:120px;}
#enemyportrait {width:120px;height:120px;border-radius:5px;float:right;}
#enemyportrait img {width:120px;height:120px;}
#battlereports...

JavaScript

$('.fightbtn').click(function(){ 
  $('#battleholder').toggle();
});

$('.dialogue').click(function(){ 
  $('.statusholder,.moveholder').fadeOut(500);
});
$('.notdialogue').click(function(){ 
  $('.statusholder,.moveholder').fadeIn(500);
});