JSFiddle - React, Tailwind, and code Playground

by Dinocanid

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button class='fightbtn'>Fight</button>

<div id='battleholder'>
  <div id='battlescene'>
    <div class='battletop'>Battle against Enemyname!</div>
    <div id='griffsprite'><img src='http://placekitten.com/140/140'></div>
    <div id='enemysprite'><img src='http://placekitten.com/400/400'></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='https://vignette.wikia.nocookie.net/plerb/images/3/30/Screaming_cat.png/revision/latest?cb=20170111012146'></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='https://i.pinimg.com/236x/18/0b/65/180b65de6c5ae60e43a615065c8622c2.jpg'></div>
    </div>

    <div class='moveholder'>
      <div class='battlemp'>Master, what move do you suggest next?<br><span class='mpleft' style='font-size:25px;'>MP: 500</span></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...

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

.middleholder {
  width: 830px;
  position: absolute;
  top: 360px;
  left: 15px;
}

#griffportrait {
  width: 120px;
  height: 120px;
  border-radius: 5px;
  float: left;
}

#griffportrait img {
  width: 120px;
  height:...

JavaScript

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

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

$(document).ready(function() {

  function beeLeft() {
    $("#griffsprite").animate({
      top: "-=10"
    }, 1000, "swing", beeRight);
  }

  function beeRight() {
    $("#griffsprite").animate({
      top: "+=10"
    }, 1000, "swing", beeLeft);
  }

  beeRight();
});

$(".battlespell").click(function() {
  $("#ehpBar").effect("shake");
});