Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<div id="all">
    <div oncontextmenu="return false;" id="main">
  <div id="viewscreen">
    <div class="col-xs-3">
      <table class="inventory" id="inventory">
        <tr>
          <td id="i1" class="slot "></td>
          <td id="i2" class="slot "></td>
          <td id="i3" class="slot "></td>
          <td id="i4" class="slot "></td>
        </tr>
        <tr>
          <td id="i5" class="slot "></td>
          <td id="i6" class="slot "></td>
          <td id="i7" class="slot "></td>
          <td id="i8" class="slot "></td>
        </tr>
        <tr>
          <td id="i9" class="slot "></td>
          <td id="i10" class="slot "></td>
          <td id="i11" class="slot "></td>
          <td id="i12" class="slot "></td>
        </tr>
        <tr>
          <td id="i13" class="slot "></td>
          <td id="i14" class="slot "></td>
          <td id="i15" class="slot "></td>
          <td id="i16" class="slot "></td>
        </tr>
        <tr>
          <td id="i17" class="slot "></td>
          <td id="i18" class="slot "></td>
          <td id="i19" class="slot "></td>
          <td id="i20" class="slot "></td>
        </tr>
        <tr>
          <td id="i21" class="slot "></td>
          <td id="i22" class="slot "></td>
          <td id="i23" class="slot "></td>
          <td id="i24" class="slot "></td>
        </tr>
        <tr>
          <td id="i25" class="slot "></td>
          <td id="i26" class="slot "></td>
          <td id="i27" class="slot "></td>
          <td id="i28" class="slot "></td>
        </tr>
      </table>



      <div class="col-xs-3" id="playerstats">

        <table id="stattable">
          <tr>
            <td class="statsprite -health"></td>
            <td class="statnum"><p id="health"></p></td>
            <td class="statnum"><p id="ice"></p></td>
            <td class="statsprite -ice"></td>
            </tr>

             <tr>
            <td class="statsprite -mana"></td>
            <td class="statnum"><p id="mana"></p></td>
            <td class="statnum"><p id="fire"></p></td>
            <td class="statsprite -fire"></td>
               </tr>
          <tr>
            <td class="statsprite -damage"></td>
            <td class="statnum"><p id="damage"></p></td>
            <td class="statnum"><p id="storm"></p></td>
            <td class="statsprite -storm"></td>
               </tr>
          <tr>
            <td class="statsprite -dodge"></td>
            <td class="statnum"><p id="dodge"></p></td>
            <td class="statnum"><p id="shadow"></p></td>
            <td class="statsprite -shadow"></td>
               </tr>
          <tr>
            <td class="statsprite -critical"></td>
            <td class="statnum"><p id="critical"></p></td>
            <td class="statnum"><p id="nature"></p></td>
            <td class="statsprite -nature"></td>
               </tr>
               <tr>
            <td class="statsprite -magicpow"></td>
            <td class="statnum"><p id="magicpow"></p></td>
            <td class="statnum"><p id="blood"></p></td>
            <td class="statsprite -blood"></td>
               </tr>
               <tr>
            <td class="statsprite -healpow"></td>
            <td class="statnum"><p id="healpow"></p></td>
            <td class="statnum"><p id="lifesteal"></p></td>
            <td class="statsprite -lifesteal"></td>

               </tr>


        </table>


      </div>

    </div>



    <div class="col-xs-6 col-xs-pull-1">

      <div id="screen">

        <div id="battle">

          <div id="totalbosshpbar">

          <div id="bosshpbar"></div>
          </div>


           <div  class="col-xs-2" id="leftinfo"></div>

          <div style="text-align: right;" class="col-xs-2" id="rightinfo"></div>






          <p id="bosshptext" class="text-center">Boss Health</p>

          <p id="bosslevel">LVL</p>


          <div id="boss"><img id="currentboss" class="mobsprites boss3"></img></div>





            <div class="" id="totalplayerhpbar"><div  id="playerhpbar"></div></div>

            <div class="" id="totalplayermanabar"><div  id="playermanabar"></div></div>



        </div>






      <div class="col-xs-6 col-xs-pull-1" id="box">

        <div id="boxy">

     <div id="buttonwrapper">

 <div class="col-xs-4"  id="bosslevelminus"><button id="minus" class="btn btn-block btn-warning">Boss Level Decrease</button></div>

 <div class="col-xs-4" id="fightbuttondiv"><button id="fightbutton" class="btn btn-block btn-success">FIGHT BOSS!</button></div>

 <div class="col-xs-4"  id="bosslevelplus"><button id="plus" class="btn  btn-block btn-warning">Boss Level Increase</button></div>
</div>
<div id="summonbuttons">
 <div class="col-xs-4"  id="summonslower"><button id="minus" class="btn btn-block btn-warning">Slower Boss spawn</button></div>

 <div class="col-xs-4" id="summonsdiv"><button id="summons" class="btn btn-block btn-success">1 spawn per: 1 minute</button></div>

 <div class="col-xs-4"  id="summonfaster"><button id="plus" class="btn  btn-block btn-warning">Faster Boss spawn</button></div>
</div>


<div id="textstats">
 <p id="gold">Gold</p>

 <p id="level"> Level </p>

 <p id="bosssummons">Boss Summons:</p>

 </div>



<div id="sellalldiv" class="col-xs-12"><button id="sellall" class="btn btn-block btn-danger">Sell all inventory!</button></div>

 </div>



          </div>

        </div>

      </div>

    </div>


    <div class="col-xs-3">


      <div class="text-center" id="info">
      </div>


       <div class="text-center" id="upgradeinfo"></div>

      <div id="powerleveldiv"> <p class="text-center" id="powerlevel"></p></div>

      <table id="character">

        <tr>
          <td id="talisman" class="characterslot slot1"></td>
          <td id="head" class="characterslot slot1"></td>
          <td id="ring" class="characterslot slot1"></td>
          <td class="slot inventory"></td>
        </tr>
        <tr>
          <td id="shoulder" class="characterslot slot1"></td>
          <td id="chest" class="characterslot slot1"></td>
          <td id="book" class="characterslot slot1"></td>
          <td class="slot inventory"></td>
        </tr>
        <tr>
          <td id="wrist" class="characterslot slot1"></td>
          <td id="leg" class="characterslot slot1"></td>
          <td id="glove" class="characterslot slot1"></td>
          <td class="slot inventory"><img id="manualauto"></img></td>
        </tr>
        <tr>
          <td id="weapon" class="characterslot slot1"></td>
          <td id="boot" class="characterslot slot1"></td>
          <td id="necklace" class="characterslot slot1"></td>
          <td class="slot inventory"><img id="autobasic"></img></td>
        </tr>


      </table>

    </div>




  </div>



            <div id="spells">

             <table id="spellslots">
                <tr>


    <td class="spellslot inventory "><p class="barnum">1</p><div id="bar1"class="">
    <img class="spellsprite spell1 -basic" id="basic"></img></div></td>

    <td class="spellslot inventory "><p class="barnum">2</p><div id="bar2"class="spellbar">
    <img class="spellsprite spell2 -ice-1" id="icebolt"></img></div></td>

    <td class="spellslot inventory "><p class="barnum">3</p><div id="bar3"class="spellbar">
    <img class="spellsprite spell3 -fire-3" id="firebolt"></img></div></td>

    <td class="spellslot inventory "><p class="barnum">4</p><div id="bar4"class="spellbar">
    <img class="spellsprite spell4 -lightning-2" id="stormbolt"></img></div></td>

    <td class="spellslot inventory "><p class="barnum">5</p><div id="bar5"class="spellbar">
    <img class="spellsprite spell5 -nature-4" id="thorns"></img></div></td>

    <td class="spellslot inventory "><p class="barnum">6</p><div id="bar6"class="spellbar">
    <img class="spellsprite spell6 -shadow-1" id="shadowbolt"></img></div></td>

    <td class="spellslot inventory "><p class="barnum">7</p><div id="bar7"class="spellbar">
    <img class="spellsprite spell7 -blood-2" id="bloodstrike"></img></div></td>

    <td class="spellslot inventory "><p class="barnum">8</p><div id="bar8"class="spellbar">
    <img class="spellsprite spell8 -heal-2" id="heal"></img></div></td>

    <td class="spellslot inventory "><p class="barnum">9</p><div id="bar9"class="spellbar">
    <img class="spellsprite spell9 -defend-3" id="shield"></img></div></td>

    <td class="spellslot inventory "><p class="barnum">10</p><div id="bar10"class="spellbar">
    <img class="spellsprite spell10 -defend-6" id="defenseheal"></img></div></td>

    <td class="spellslot inventory "><p class="barnum">11</p><div id="bar11"class="spellbar">
    <img class="spellsprite spell11 -support-2" id="manarestore"></img></div></td>

    <td class="spellslot inventory "><p class="barnum">12</p><div id="bar12"class="spellbar">
    <img class="spellsprite spell12 -shadow-3" id="buffmagic"></img></div></td>


                </tr>


                <tr>




    <td class="spellslot inventory "><p class="barnum"></p><div id="bar13"class="">
    <img class="spellsprite  -support-4" id="magebuff"></img></div></td>

    <td class="spellslot inventory "><p class="barnum"></p><div id="bar14"class="spellbar">
    <img class="spellsprite -ice-3" id="icebuff"></img></div></td>

    <td class="spellslot inventory "><p class="barnum"></p><div id="bar15"class="spellbar">
    <img class="spellsprite  -fire-5" id="firebuff"></img></div></td>

    <td class="spellslot inventory "><p class="barnum"></p><div id="bar16"class="spellbar">
    <img class="spellsprite -lightning-6" id="stormbuff"></img></div></td>

    <td class="spellslot inventory "><p class="barnum"></p><div id="bar17"class="spellbar">
    <img class="spellsprite  -nature-2" id="natureheal"></img></div></td>

    <td class="spellslot inventory "><p class="barnum"></p><div id="bar18"class="spellbar">
    <img class="spellsprite  -shadow-2" id="shadowbuff"></img></div></td>

    <td class="spellslot inventory "><p class="barnum"></p><div id="bar19"class="spellbar">
    <img class="spellsprite  -blood-3" id="bloodsap"></img></div></td>

    <td class="spellslot inventory "><p class="barnum"></p><div id="bar20"class="spellbar">
    <img class="spellsprite  -heal-3" id="healwings"></img></div></td>

    <td class="spellslot inventory "><p class="barnum"></p><div id="bar21"class="spellbar">
    <img class="spellsprite  -defend-5" id="helmet"></img></div></td>

    <td class="spellslot inventory "><p class="barnum"></p><div id="bar22"class="spellbar">
    <img class="spellsprite  -blood-6" id="attackbuff"></img></div></td>

    <td class="spellslot inventory "><p class="barnum"></p><div id="bar22"class="spellbar">
    <img class="spellsprite  -support-5" id="lotus"></img></div></td>

    <td class="spellslot inventory "><p class="barnum"></p><div id="bar24"class="spellbar">
    <img class="spellsprite  -support-6" id="magicattack"></img></div></td>



                </tr>
              </table>
            </div>

          </div>


</div>
</div>


<div id="showdiv">
  <button class="btn btn-block btn-success" id="equip">Equip</button>
  <button class="btn btn-block btn-info" id="upgrade">Upgrade!</button>
  <button class="btn btn-block btn-warning" id="sell">Sell</button>
</div>


<div id="showdiv1">
  <button class="btn btn-block btn-success" id="unequip">Unequip</button>
  <button class="btn btn-block btn-info" id="upgradeitemonchar">Upgrade!</button>
</div>




<div id="desc">

<table>

<tr>
<td id="spellicon"class="infospells -basicX"></td>
<td class="spelldesc"><p>Basic attack, Damage comes only from Damage and is the only attack with lifesteal!</td>
</tr>
<tr>
<td id="spellicon"class="infospells -ice-1X"></td>
<td class="spelldesc"><p>Icebolt, gets Damage from: Damage, MagicPow and IceDMG.</td>
</tr>
<tr>
<td id="spellicon"class="infospells -fire-3X"></td>
<td class="spelldesc"><p>Firebolt, gets Damage from Damage, MagicPow and FireDMG.</p></td>
</tr>
<tr>
<td id="spellicon"class="infospells -lightning-2X "></td>
<td class="spelldesc"><p>Stormbolt, gets Damage from Damage, MagicPow and StormDMG</p></td>
</tr>
<td id="spellicon"class="infospells -nature-4X"></td>
<td class="spelldesc"><p>Thorns,poison attack, gets Damage from Damage, MagicPow and NatureDMG</p></td>
</tr>
<td id="spellicon"class="infospells -shadow-1X"></td>
<td class="spelldesc"><p>Shadowbolt-delayed nuke,gets Damage from Damage, MagicPow and ShadowDMG</p></td>
</tr>
<td id="spellicon"class="infospells -blood-2X "></td>
<td class="spelldesc"><p>Bloodstrike,sacrifice 50% current health for a lot of Damage, gets Damage from Damage, total HP and BloodDMG</p></td>
</tr>
<td id="spellicon"class="infospells -heal-2X"></td>
<td class="spelldesc"><p>Instant Heal, HealPow increases the healing.</p></td>
</tr>
<td id="spellicon"class="infospells -defend-3X"></td>
<td class="spelldesc"><p>Shield, your dodge chance increases past 100% for a short time.</p></td>
</tr>
<td id="spellicon"class="infospells -support-2X"></td>
<td class="spelldesc"><p>Mana Restore, restores mana based on HealPow.</p></td>
</tr>
<td id="spellicon"class="infospells -nature-2X"></td>
<td class="spelldesc"><p>Nature Heal, 3 tiny consecutive heals based on NatureDMG.</p></td>
</tr>
<td id="spellicon"class="infospells -shadow-3X"></td>
<td class="spelldesc"><p>Magic Buff, buffs magic based on MagicPow.</p></td>
</tr>

</tr>



</table>


</div>




</div>


</div>
              
            
!

CSS

              
                




html {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#centerinfo{
  overflow-y: scroll;
}

#statnum {
  margin-left: 20px;
  margin-top: 5px;

}
.danger{
  color:red;
}
#sellalldiv{
padding-top:2px;
margin:0 auto;
margin-top:10px;

}
#sellall{
margin:0 auto;
width:300px;
}

#textstats{
position:absolute;
margin-top:20px;
margin-left:10px;
}

#upgradeinfo{
  position:absolute;
  width:210px;
  height:160px;
  margin-left:90px;
  margin-top:200px;
  padding:10px;
  float:left;
 }

#buttonwrapper{
  margin:0 auto;
  width:566px;
  padding:5px;

}

#summonbuttons{
    margin:0 auto;
  width:556px;
  margin-top:35px;
}
#bosslevel{
position:absolute;
margin-left:405px;
margin-top:167px;
}

.ui-effects-wrapper {
        display:inline;
        position:absolute;
    }


#desc{
position:absolute;
  display:none;
  border: 2px solid #333;
}
.spelldesc{
  padding-left:10px;
  background-color:#24303E;
}

.Common {
  border-color: #ffffff;
  color: #ffffff;
}

.Magic {
  border-color: #1eff00;
  color: #1eff00;
}

.Rare {
  border-color: #0070dd;
  color: #0070dd;
}

.Epic {
  border-color: #a335ee;
  color: #a335ee;
}

.Legendary {
  border-color: #ff8000;
  color: #ff8000;
}

.barnum {
  position: absolute;
}

.selected {
  outline: 5px solid green;
}

#showdiv1 {
  border: solid 5px #222;
  width: 100px;
  height: auto;
  position: absolute;
  background-color: #24303E;
  display: none;
}

#playerstats {
  padding: 5px;
  width: 222px;
  height: 222px;
  background-color: #24303E;
  border: 0px solid #333;
}

#stattable {
  border: 0px solid #333;
  background-color: #24303E;
}

#fire, #ice, #storm, #nature, #shadow, #blood, #lifesteal {
  float: right;
  padding-right: 5px;
}

#health, #mana, #critical, #dodge, #damage, #healpow, #magicpow {
  float: left;
  padding-left: 5px;
}
#spelldesc{
  display:none;
  position: absolute;
  width:1000px;
  height:600px;
  background-color:#24303E;
  border: 0px solid #333;
}
.statnum {
  width: 90px;
  height: 30px;
}

.characterslot {
  border-width: 1px;
  border-style: solid;
  border-color: #BF942C;
  width: 53px;
  height: 53px;
  background-color: #8F5D38;
  display: fixed;
  background: url("https://res.cloudinary.com/treborx555/image/upload/v1472064620/gui_xyicsn.png");
  background-size: 53px;
}

#autobasic{
  width:48px;
  height:48px;
  background:url("https://res.cloudinary.com/treborx555/image/upload/v1472805367/autobasic_tfoxw3.png");
}

#manualauto{
  width:48px;
  height:48px;
  background:url("https://res.cloudinary.com/treborx555/image/upload/v1472807538/mailed-fist_1_bjsu5v.png");
}

#showdiv {
  border: solid 5px #222;
  width: 100px;
  height: auto;
  position: absolute;
  background-color: #24303E;
  display: none;
}

.line {
  height: 18px;
}

p {
  height: 11px;
  font-weight: bold;
  font-size: 14px;
  color: white;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0px 1px 0 #000, 0px -1px 0 #000, -1px 0px 0 #000, 1px 0px 0 #000, 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000, 0px 2px 0 #000, 0px -2px 0 #000, -2px 0px 0 #000, 2px 0px 0 #000, 1px 2px 0 #000, -1px 2px 0 #000, 1px -2px 0 #000, -1px -2px 0 #000, 2px 1px 0 #000, -2px 1px 0 #000, 2px -1px 0 #000, -2px -1px 0 #000;
  font-weight: bold;
}

#stats1 {
  width: 20%;
  height: 100%;
  padding-top: 10px;
}

#stats2 {
  width: 20%;
  height: 100%;
  float: right;
  text-align: right;
  padding-top: 10px;
}

#boxy {
  width: 865px;
  height: 163px;
  background: url("https://res.cloudinary.com/treborx555/image/upload/v1472066255/texture_xhoaxc.png");
  border: 10px solid #333;
  margin-left: 46px;
  margin-top:125px;
  padding-top:5px;
}

#box {
  margin-top: 5px;
  width: 100%;
  height: 150px;
}

#screen {
  width: 865px;
  height: 300px;
  background-color: #24303E;
  border: 10px solid #333;
  position: block;
  float: left;
  background-size: 100px;
}

#inventory {
  float: left;
}

#info {
  height: 381px;
  width: 222px;
  background-color: #24303E;
  border: 5px solid #333;
  padding-left: 5px;
  float: left;
  margin-left: 83px;
  border: 10px solid #333;
}

.slot {
  border-width: 1px;
  border-style: solid;
  border-color: #BF942C;
  width: 53px;
  height: 53px;
  background-color: #8F5D38;
  display: fixed;
  background: url("https://res.cloudinary.com/treborx555/image/upload/v1472064620/gui_xyicsn.png");
  background-size: 53px;
}

.statslot {
  border-width: 1px;
  border-style: solid;
  border-color: #BF942C;
  width: 30px;
  height: 30px;
  background-color: #8F5D38;
  display: fixed;
}

.spellslot {
  border: 3px solid #333;
  border-right:10px solid ;
  background-color: #24303E;
  width: 60px;
  height: 60px;
  float:left;

}

.fire{
  color:orange;
}

.blood{
  color:red;
}
.ice{
  color:blue;
}
.storm{
  color:yellow;
}
.nature{
  color:green;
}
.dodge{
  color:green;
}

.fire{
  color:orange;
}



.BloodDMG{
  color:red;
}
.IceDMG{
  color:blue;
}
.StormDMG{
  color:yellow;
}
.NatureDMG{
  color:green;
}
.ShadowDMG{
  color:purple;
}
.FireDMG{
  color:orange;
}
.MagicPow{
  color:pink;
}
.HealPow{
  color:yellow;
}

#spells{
  background-color:#24303E;
  border-left:10px solid #333;
  border-right:10px solid #333;
  top:310px;
  width:865px;
  margin-left:239px;

  height:auto;
  position:absolute;

}
#spellslots{
  margin: 0 auto;
}

#infodiv{
  position:absolute;
  left:822px;
  top:-305px;

}
.item {
  max-width: 45px;
  max-height: 45px;
  border-width: 3.5px;
  border-style: solid;
  vertical-align: middle;
  margin: 0 auto;
}

body {
  padding: 10px;
  background-color:transparent;
  width: 100%;
  height: 100vh;
  max-height: 765px;
  max-width: 1366px;
  margin: 0 auto;
}

html{
  background: url("https://res.cloudinary.com/treborx555/image/upload/v1472724902/photo-1457903685934-249e8108a246_v8ugfn.jpg");
  background-size: 100vw 100vh;

}
#powerleveldiv{
  position:absolute;
  margin-top:350px;
  margin-left:90px;
  width:210px;
  height:50px;

}

table {
  background-color: #333;
  border: 10px solid #333;
}

#battle {
  width: 100%;
  height: 300px;
}

#boss {
  margin: 0 auto;
  height: 150px;
  width: 125px;
  outline: 0px solid white;
  border: 5px solid #24303E;
  background-color: #24303E;
  margin-top: 20px;
  margin-bottom:35px;
}

#bosshptext{
  padding-top:10px;
}

#bosshpbar {
  width: 100%;
  height: 30px;
  background: url("https://res.cloudinary.com/treborx555/image/upload/v1472309979/red_ukpo3h.jpg");
  float: left;
}

#totalbosshpbar {
  width: 845px;
  height: 30px;
  background-color: black;
  outline: 4px solid darkred;
}


#totalplayerhpbar {
  width: 845px;
  height: 20px;
  background-color: black;
  }

#totalplayermanabar {
  width: 845px;
  height: 20px;
  background-color: black;

  }


#playermanabar {
  width: 100%;
  height: 20px;
  background: url("https://res.cloudinary.com/treborx555/image/upload/v1472309979/dblue168_zjpw0l.jpg");
  background-size:150px;
  border:5px solid #333;

  top:0;
}
#playerhpbar {
  width: 100%;
  height: 20px;
  background: url("https://res.cloudinary.com/treborx555/image/upload/v1472309979/red_ukpo3h.jpg");
  background-size:150px;
  border:5px solid #333;


}
#leftinfo{
  height:180px;
  width:300px;
  border:5px solid #333;
  overflow-y:scroll;
  margin-top:15px;
  float:left;

}
::-webkit-scrollbar {
    display: none;
}
#rightinfo{

  height:180px;
  width:300px;
  border:5px solid #333;
  overflow-y:scroll;
  float:right;
  margin-top:15px;
  text-align:right;
}


.oncooldown {
  opacity: 0.1;
}

#spellchild {
  margin: 0 auto;
  border: solid 2px #BF942C;
}

#character {
  position:absolute;
  margin-top:380px;
  margin-left:83px;
  width:220px;
}

.sprite {
  background: url("https://res.cloudinary.com/treborx555/image/upload/v1472148365/spritesheet_2_oqummc.png");
  display: block;
  background-repeat: no-repeat;
}

.book-10 {
  width: 48px;
  height: 48px;
  background-position: 0 0;
}

.book-11 {
  width: 48px;
  height: 48px;
  background-position: -48px 0;
}

.book-1 {
  width: 48px;
  height: 48px;
  background-position: -96px 0;
}

.book-2 {
  width: 48px;
  height: 48px;
  background-position: -144px 0;
}

.book-3 {
  width: 48px;
  height: 48px;
  background-position: -192px 0;
}

.book-4 {
  width: 48px;
  height: 48px;
  background-position: -240px 0;
}

.book-5 {
  width: 48px;
  height: 48px;
  background-position: -288px 0;
}

.book-6 {
  width: 48px;
  height: 48px;
  background-position: -336px 0;
}

.book-7 {
  width: 48px;
  height: 48px;
  background-position: -384px 0;
}

.book-8 {
  width: 48px;
  height: 48px;
  background-position: -432px 0;
}

.book-9 {
  width: 48px;
  height: 48px;
  background-position: -480px 0;
}

.boot-10 {
  width: 48px;
  height: 48px;
  background-position: -528px 0;
}

.boot-1 {
  width: 48px;
  height: 48px;
  background-position: -576px 0;
}

.boot-2 {
  width: 48px;
  height: 48px;
  background-position: -624px 0;
}

.boot-3 {
  width: 48px;
  height: 48px;
  background-position: 0 -48px;
}

.boot-4 {
  width: 48px;
  height: 48px;
  background-position: -48px -48px;
}

.boot-5 {
  width: 48px;
  height: 48px;
  background-position: -96px -48px;
}

.boot-6 {
  width: 48px;
  height: 48px;
  background-position: -144px -48px;
}

.boot-7 {
  width: 48px;
  height: 48px;
  background-position: -192px -48px;
}

.boot-8 {
  width: 48px;
  height: 48px;
  background-position: -240px -48px;
}

.boot-9 {
  width: 48px;
  height: 48px;
  background-position: -288px -48px;
}

.wrist-10 {
  width: 48px;
  height: 48px;
  background-position: -336px -48px;
}

.wrist-11 {
  width: 48px;
  height: 48px;
  background-position: -384px -48px;
}

.wrist-12 {
  width: 48px;
  height: 48px;
  background-position: -432px -48px;
}

.wrist-13 {
  width: 48px;
  height: 48px;
  background-position: -480px -48px;
}

.wrist-1 {
  width: 48px;
  height: 48px;
  background-position: -528px -48px;
}

.wrist-2 {
  width: 48px;
  height: 48px;
  background-position: -576px -48px;
}

.wrist-3 {
  width: 48px;
  height: 48px;
  background-position: -624px -48px;
}

.wrist-4 {
  width: 48px;
  height: 48px;
  background-position: 0 -96px;
}

.wrist-5 {
  width: 48px;
  height: 48px;
  background-position: -48px -96px;
}

.wrist-6 {
  width: 48px;
  height: 48px;
  background-position: -96px -96px;
}

.wrist-7 {
  width: 48px;
  height: 48px;
  background-position: -144px -96px;
}

.wrist-8 {
  width: 48px;
  height: 48px;
  background-position: -192px -96px;
}

.wrist-9 {
  width: 48px;
  height: 48px;
  background-position: -240px -96px;
}

.chest-10 {
  width: 48px;
  height: 48px;
  background-position: -288px -96px;
}

.chest-11 {
  width: 48px;
  height: 48px;
  background-position: -336px -96px;
}

.chest-12 {
  width: 48px;
  height: 48px;
  background-position: -384px -96px;
}

.chest-13 {
  width: 48px;
  height: 48px;
  background-position: -432px -96px;
}

.chest-14 {
  width: 48px;
  height: 48px;
  background-position: -480px -96px;
}

.chest-15 {
  width: 48px;
  height: 48px;
  background-position: -528px -96px;
}

.chest-16 {
  width: 48px;
  height: 48px;
  background-position: -576px -96px;
}

.chest-17 {
  width: 48px;
  height: 48px;
  background-position: -624px -96px;
}

.chest-1 {
  width: 48px;
  height: 48px;
  background-position: 0 -144px;
}

.chest-2 {
  width: 48px;
  height: 48px;
  background-position: -48px -144px;
}

.chest-3 {
  width: 48px;
  height: 48px;
  background-position: -96px -144px;
}

.chest-4 {
  width: 48px;
  height: 48px;
  background-position: -144px -144px;
}

.chest-5 {
  width: 48px;
  height: 48px;
  background-position: -192px -144px;
}

.chest-6 {
  width: 48px;
  height: 48px;
  background-position: -240px -144px;
}

.chest-7 {
  width: 48px;
  height: 48px;
  background-position: -288px -144px;
}

.chest-8 {
  width: 48px;
  height: 48px;
  background-position: -336px -144px;
}

.chest-9 {
  width: 48px;
  height: 48px;
  background-position: -384px -144px;
}

.glove-10 {
  width: 48px;
  height: 48px;
  background-position: -432px -144px;
}

.glove-11 {
  width: 48px;
  height: 48px;
  background-position: -480px -144px;
}

.glove-1 {
  width: 48px;
  height: 48px;
  background-position: -528px -144px;
}

.glove-2 {
  width: 48px;
  height: 48px;
  background-position: -576px -144px;
}

.glove-3 {
  width: 48px;
  height: 48px;
  background-position: -624px -144px;
}

.glove-4 {
  width: 48px;
  height: 48px;
  background-position: 0 -192px;
}

.glove-5 {
  width: 48px;
  height: 48px;
  background-position: -48px -192px;
}

.glove-6 {
  width: 48px;
  height: 48px;
  background-position: -96px -192px;
}

.glove-7 {
  width: 48px;
  height: 48px;
  background-position: -144px -192px;
}

.glove-8 {
  width: 48px;
  height: 48px;
  background-position: -192px -192px;
}

.glove-9 {
  width: 48px;
  height: 48px;
  background-position: -240px -192px;
}

.head-1 {
  width: 48px;
  height: 48px;
  background-position: -288px -192px;
}

.head-2 {
  width: 48px;
  height: 48px;
  background-position: -336px -192px;
}

.head-3 {
  width: 48px;
  height: 48px;
  background-position: -384px -192px;
}

.head-4 {
  width: 48px;
  height: 48px;
  background-position: -432px -192px;
}

.head-5 {
  width: 48px;
  height: 48px;
  background-position: -480px -192px;
}

.misc-10 {
  width: 48px;
  height: 48px;
  background-position: -528px -192px;
}

.misc-11 {
  width: 48px;
  height: 48px;
  background-position: -576px -192px;
}

.misc-12 {
  width: 48px;
  height: 48px;
  background-position: -624px -192px;
}

.misc-13 {
  width: 48px;
  height: 48px;
  background-position: 0 -240px;
}

.misc-14 {
  width: 48px;
  height: 48px;
  background-position: -48px -240px;
}

.misc-15 {
  width: 48px;
  height: 48px;
  background-position: -96px -240px;
}

.misc-16 {
  width: 48px;
  height: 48px;
  background-position: -144px -240px;
}

.misc-17 {
  width: 48px;
  height: 48px;
  background-position: -192px -240px;
}

.misc-18 {
  width: 48px;
  height: 48px;
  background-position: -240px -240px;
}

.misc-19 {
  width: 48px;
  height: 48px;
  background-position: -288px -240px;
}

.misc-1 {
  width: 48px;
  height: 48px;
  background-position: -336px -240px;
}

.misc-20 {
  width: 48px;
  height: 48px;
  background-position: -384px -240px;
}

.misc-21 {
  width: 48px;
  height: 48px;
  background-position: -432px -240px;
}

.misc-22 {
  width: 48px;
  height: 48px;
  background-position: -480px -240px;
}

.misc-2 {
  width: 48px;
  height: 48px;
  background-position: -528px -240px;
}

.misc-3 {
  width: 48px;
  height: 48px;
  background-position: -576px -240px;
}

.misc-4 {
  width: 48px;
  height: 48px;
  background-position: -624px -240px;
}

.misc-5 {
  width: 48px;
  height: 48px;
  background-position: 0 -288px;
}

.misc-6 {
  width: 48px;
  height: 48px;
  background-position: -48px -288px;
}

.misc-7 {
  width: 48px;
  height: 48px;
  background-position: -96px -288px;
}

.misc-8 {
  width: 48px;
  height: 48px;
  background-position: -144px -288px;
}

.misc-9 {
  width: 48px;
  height: 48px;
  background-position: -192px -288px;
}

.necklace-1 {
  width: 48px;
  height: 48px;
  background-position: -240px -288px;
}

.necklace-2 {
  width: 48px;
  height: 48px;
  background-position: -288px -288px;
}

.necklace-3 {
  width: 48px;
  height: 48px;
  background-position: -336px -288px;
}

.necklace-4 {
  width: 48px;
  height: 48px;
  background-position: -384px -288px;
}

.necklace-5 {
  width: 48px;
  height: 48px;
  background-position: -432px -288px;
}

.necklace-6 {
  width: 48px;
  height: 48px;
  background-position: -480px -288px;
}

.necklace-7 {
  width: 48px;
  height: 48px;
  background-position: -528px -288px;
}

.leg-1 {
  width: 48px;
  height: 48px;
  background-position: -576px -288px;
}

.leg-2 {
  width: 48px;
  height: 48px;
  background-position: -624px -288px;
}

.leg-3 {
  width: 48px;
  height: 48px;
  background-position: 0 -336px;
}

.leg-4 {
  width: 48px;
  height: 48px;
  background-position: -48px -336px;
}

.leg-5 {
  width: 48px;
  height: 48px;
  background-position: -96px -336px;
}

.leg-6 {
  width: 48px;
  height: 48px;
  background-position: -144px -336px;
}

.leg-7 {
  width: 48px;
  height: 48px;
  background-position: -192px -336px;
}

.ring-10 {
  width: 48px;
  height: 48px;
  background-position: -240px -336px;
}

.ring-11 {
  width: 48px;
  height: 48px;
  background-position: -288px -336px;
}

.ring-1 {
  width: 48px;
  height: 48px;
  background-position: -336px -336px;
}

.ring-2 {
  width: 48px;
  height: 48px;
  background-position: -384px -336px;
}

.ring-3 {
  width: 48px;
  height: 48px;
  background-position: -432px -336px;
}

.ring-4 {
  width: 48px;
  height: 48px;
  background-position: -480px -336px;
}

.ring-5 {
  width: 48px;
  height: 48px;
  background-position: -528px -336px;
}

.ring-6 {
  width: 48px;
  height: 48px;
  background-position: -576px -336px;
}

.ring-7 {
  width: 48px;
  height: 48px;
  background-position: -624px -336px;
}

.ring-8 {
  width: 48px;
  height: 48px;
  background-position: 0 -384px;
}

.ring-9 {
  width: 48px;
  height: 48px;
  background-position: -48px -384px;
}

.shoulder-10 {
  width: 48px;
  height: 48px;
  background-position: -96px -384px;
}

.shoulder-1 {
  width: 48px;
  height: 48px;
  background-position: -144px -384px;
}

.shoulder-2 {
  width: 48px;
  height: 48px;
  background-position: -192px -384px;
}

.shoulder-3 {
  width: 48px;
  height: 48px;
  background-position: -240px -384px;
}

.shoulder-4 {
  width: 48px;
  height: 48px;
  background-position: -288px -384px;
}

.shoulder-5 {
  width: 48px;
  height: 48px;
  background-position: -336px -384px;
}

.shoulder-6 {
  width: 48px;
  height: 48px;
  background-position: -384px -384px;
}

.shoulder-7 {
  width: 48px;
  height: 48px;
  background-position: -432px -384px;
}

.shoulder-8 {
  width: 48px;
  height: 48px;
  background-position: -480px -384px;
}

.shoulder-9 {
  width: 48px;
  height: 48px;
  background-position: -528px -384px;
}

.talisman-10 {
  width: 48px;
  height: 48px;
  background-position: -576px -384px;
}

.talisman-11 {
  width: 48px;
  height: 48px;
  background-position: -624px -384px;
}

.talisman-12 {
  width: 48px;
  height: 48px;
  background-position: 0 -432px;
}

.talisman-13 {
  width: 48px;
  height: 48px;
  background-position: -48px -432px;
}

.talisman-14 {
  width: 48px;
  height: 48px;
  background-position: -96px -432px;
}

.talisman-15 {
  width: 48px;
  height: 48px;
  background-position: -144px -432px;
}

.talisman-16 {
  width: 48px;
  height: 48px;
  background-position: -192px -432px;
}

.talisman-17 {
  width: 48px;
  height: 48px;
  background-position: -240px -432px;
}

.talisman-18 {
  width: 48px;
  height: 48px;
  background-position: -288px -432px;
}

.talisman-19 {
  width: 48px;
  height: 48px;
  background-position: -336px -432px;
}

.talisman-1 {
  width: 48px;
  height: 48px;
  background-position: -384px -432px;
}

.talisman-20 {
  width: 48px;
  height: 48px;
  background-position: -432px -432px;
}

.talisman-21 {
  width: 48px;
  height: 48px;
  background-position: -480px -432px;
}

.talisman-22 {
  width: 48px;
  height: 48px;
  background-position: -528px -432px;
}

.talisman-23 {
  width: 48px;
  height: 48px;
  background-position: -576px -432px;
}

.talisman-2 {
  width: 48px;
  height: 48px;
  background-position: -624px -432px;
}

.talisman-3 {
  width: 48px;
  height: 48px;
  background-position: 0 -480px;
}

.talisman-4 {
  width: 48px;
  height: 48px;
  background-position: -48px -480px;
}

.talisman-5 {
  width: 48px;
  height: 48px;
  background-position: -96px -480px;
}

.talisman-6 {
  width: 48px;
  height: 48px;
  background-position: -144px -480px;
}

.talisman-7 {
  width: 48px;
  height: 48px;
  background-position: -192px -480px;
}

.talisman-8 {
  width: 48px;
  height: 48px;
  background-position: -240px -480px;
}

.talisman-9 {
  width: 48px;
  height: 48px;
  background-position: -288px -480px;
}

.weapon-10 {
  width: 48px;
  height: 48px;
  background-position: -336px -480px;
}

.weapon-11 {
  width: 48px;
  height: 48px;
  background-position: -384px -480px;
}

.weapon-12 {
  width: 48px;
  height: 48px;
  background-position: -432px -480px;
}

.weapon-13 {
  width: 48px;
  height: 48px;
  background-position: -480px -480px;
}

.weapon-14 {
  width: 48px;
  height: 48px;
  background-position: -528px -480px;
}

.weapon-15 {
  width: 48px;
  height: 48px;
  background-position: -576px -480px;
}

.weapon-16 {
  width: 48px;
  height: 48px;
  background-position: -624px -480px;
}

.weapon-17 {
  width: 48px;
  height: 48px;
  background-position: 0 -528px;
}

.weapon-18 {
  width: 48px;
  height: 48px;
  background-position: -48px -528px;
}

.weapon-19 {
  width: 48px;
  height: 48px;
  background-position: -96px -528px;
}

.weapon-1 {
  width: 48px;
  height: 48px;
  background-position: -144px -528px;
}

.weapon-20 {
  width: 48px;
  height: 48px;
  background-position: -192px -528px;
}

.weapon-21 {
  width: 48px;
  height: 48px;
  background-position: -240px -528px;
}

.weapon-22 {
  width: 48px;
  height: 48px;
  background-position: -288px -528px;
}

.weapon-23 {
  width: 48px;
  height: 48px;
  background-position: -336px -528px;
}

.weapon-24 {
  width: 48px;
  height: 48px;
  background-position: -384px -528px;
}

.weapon-25 {
  width: 48px;
  height: 48px;
  background-position: -432px -528px;
}

.weapon-26 {
  width: 48px;
  height: 48px;
  background-position: -480px -528px;
}

.weapon-27 {
  width: 48px;
  height: 48px;
  background-position: -528px -528px;
}

.weapon-28 {
  width: 48px;
  height: 48px;
  background-position: -576px -528px;
}

.weapon-29 {
  width: 48px;
  height: 48px;
  background-position: -624px -528px;
}

.weapon-2 {
  width: 48px;
  height: 48px;
  background-position: 0 -576px;
}

.weapon-30 {
  width: 48px;
  height: 48px;
  background-position: -48px -576px;
}

.weapon-31 {
  width: 48px;
  height: 48px;
  background-position: -96px -576px;
}

.weapon-32 {
  width: 48px;
  height: 48px;
  background-position: -144px -576px;
}

.weapon-33 {
  width: 48px;
  height: 48px;
  background-position: -192px -576px;
}

.weapon-34 {
  width: 48px;
  height: 48px;
  background-position: -240px -576px;
}

.weapon-35 {
  width: 48px;
  height: 48px;
  background-position: -288px -576px;
}

.weapon-36 {
  width: 48px;
  height: 48px;
  background-position: -336px -576px;
}

.weapon-37 {
  width: 48px;
  height: 48px;
  background-position: -384px -576px;
}

.weapon-38 {
  width: 48px;
  height: 48px;
  background-position: -432px -576px;
}

.weapon-39 {
  width: 48px;
  height: 48px;
  background-position: -480px -576px;
}

.weapon-3 {
  width: 48px;
  height: 48px;
  background-position: -528px -576px;
}

.weapon-40 {
  width: 48px;
  height: 48px;
  background-position: -576px -576px;
}

.weapon-41 {
  width: 48px;
  height: 48px;
  background-position: -624px -576px;
}

.weapon-42 {
  width: 48px;
  height: 48px;
  background-position: 0 -624px;
}

.weapon-43 {
  width: 48px;
  height: 48px;
  background-position: -48px -624px;
}

.weapon-44 {
  width: 48px;
  height: 48px;
  background-position: -96px -624px;
}

.weapon-45 {
  width: 48px;
  height: 48px;
  background-position: -144px -624px;
}

.weapon-46 {
  width: 48px;
  height: 48px;
  background-position: -192px -624px;
}

.weapon-47 {
  width: 48px;
  height: 48px;
  background-position: -240px -624px;
}

.weapon-48 {
  width: 48px;
  height: 48px;
  background-position: -288px -624px;
}

.weapon-49 {
  width: 48px;
  height: 48px;
  background-position: -336px -624px;
}

.weapon-4 {
  width: 48px;
  height: 48px;
  background-position: -384px -624px;
}

.weapon-50 {
  width: 48px;
  height: 48px;
  background-position: -432px -624px;
}

.weapon-51 {
  width: 48px;
  height: 48px;
  background-position: -480px -624px;
}

.weapon-52 {
  width: 48px;
  height: 48px;
  background-position: -528px -624px;
}

.weapon-53 {
  width: 48px;
  height: 48px;
  background-position: -576px -624px;
}

.weapon-54 {
  width: 48px;
  height: 48px;
  background-position: -624px -624px;
}

.weapon-55 {
  width: 48px;
  height: 48px;
  background-position: -672px 0;
}

.weapon-56 {
  width: 48px;
  height: 48px;
  background-position: -672px -48px;
}

.weapon-5 {
  width: 48px;
  height: 48px;
  background-position: -672px -96px;
}

.weapon-6 {
  width: 48px;
  height: 48px;
  background-position: -672px -144px;
}

.weapon-7 {
  width: 48px;
  height: 48px;
  background-position: -672px -192px;
}

.weapon-8 {
  width: 48px;
  height: 48px;
  background-position: -672px -240px;
}

.weapon-9 {
  width: 48px;
  height: 48px;
  background-position: -672px -288px;
}


/* SPELL SPRITES NOW */
.spellsprite {
  background-image: url("https://res.cloudinary.com/treborx555/image/upload/v1472247353/spritesheet_ne1oxv.png");
  background-repeat: no-repeat;
  display: block;
}

.-basic {
  width: 60px;
  height: 60px;
  background-position: 0 0;
}

.-blood-1 {
  width: 60px;
  height: 60px;
  background-position: -60px 0;
}

.-blood-2 {
  width: 60px;
  height: 60px;
  background-position: -120px 0;
}

.-blood-3 {
  width: 60px;
  height: 60px;
  background-position: -180px 0;
}

.-blood-4 {
  width: 60px;
  height: 60px;
  background-position: -240px 0;
}

.-blood-5 {
  width: 60px;
  height: 60px;
  background-position: -300px 0;
}

.-blood-6 {
  width: 60px;
  height: 60px;
  background-position: -360px 0;
}

.-defend-1 {
  width: 60px;
  height: 60px;
  background-position: 0 -60px;
}

.-defend-2 {
  width: 60px;
  height: 60px;
  background-position: -60px -60px;
}

.-defend-3 {
  width: 60px;
  height: 60px;
  background-position: -120px -60px;
}

.-defend-4 {
  width: 60px;
  height: 60px;
  background-position: -180px -60px;
}

.-defend-5 {
  width: 60px;
  height: 60px;
  background-position: -240px -60px;
}

.-defend-6 {
  width: 60px;
  height: 60px;
  background-position: -300px -60px;
}

.-fire-1 {
  width: 60px;
  height: 60px;
  background-position: -360px -60px;
}

.-fire-2 {
  width: 60px;
  height: 60px;
  background-position: 0 -120px;
}

.-fire-3 {
  width: 60px;
  height: 60px;
  background-position: -60px -120px;
}

.-fire-4 {
  width: 60px;
  height: 60px;
  background-position: -120px -120px;
}

.-fire-5 {
  width: 60px;
  height: 60px;
  background-position: -180px -120px;
}

.-fire-6 {
  width: 60px;
  height: 60px;
  background-position: -240px -120px;
}

.-heal-1 {
  width: 60px;
  height: 60px;
  background-position: -300px -120px;
}

.-heal-2 {
  width: 60px;
  height: 60px;
  background-position: -360px -120px;
}

.-heal-3 {
  width: 60px;
  height: 60px;
  background-position: 0 -180px;
}

.-heal-4 {
  width: 60px;
  height: 60px;
  background-position: -60px -180px;
}

.-heal-5 {
  width: 60px;
  height: 60px;
  background-position: -120px -180px;
}

.-heal-6 {
  width: 60px;
  height: 60px;
  background-position: -180px -180px;
}

.-ice-1 {
  width: 60px;
  height: 60px;
  background-position: -240px -180px;
}

.-ice-2 {
  width: 60px;
  height: 60px;
  background-position: -300px -180px;
}

.-ice-3 {
  width: 60px;
  height: 60px;
  background-position: -360px -180px;
}

.-ice-4 {
  width: 60px;
  height: 60px;
  background-position: 0 -240px;
}

.-ice-5 {
  width: 60px;
  height: 60px;
  background-position: -60px -240px;
}

.-ice-6 {
  width: 60px;
  height: 60px;
  background-position: -120px -240px;
}

.-lightning-1 {
  width: 60px;
  height: 60px;
  background-position: -180px -240px;
}

.-lightning-2 {
  width: 60px;
  height: 60px;
  background-position: -240px -240px;
}

.-lightning-3 {
  width: 60px;
  height: 60px;
  background-position: -300px -240px;
}

.-lightning-4 {
  width: 60px;
  height: 60px;
  background-position: -360px -240px;
}

.-lightning-5 {
  width: 60px;
  height: 60px;
  background-position: 0 -300px;
}

.-lightning-6 {
  width: 60px;
  height: 60px;
  background-position: -60px -300px;
}

.-nature-1 {
  width: 60px;
  height: 60px;
  background-position: -120px -300px;
}

.-nature-2 {
  width: 60px;
  height: 60px;
  background-position: -180px -300px;
}

.-nature-3 {
  width: 60px;
  height: 60px;
  background-position: -240px -300px;
}

.-nature-4 {
  width: 60px;
  height: 60px;
  background-position: -300px -300px;
}

.-nature-5 {
  width: 60px;
  height: 60px;
  background-position: -360px -300px;
}

.-nature-6 {
  width: 60px;
  height: 60px;
  background-position: 0 -360px;
}

.-shadow-1 {
  width: 60px;
  height: 60px;
  background-position: -60px -360px;
}

.-shadow-2 {
  width: 60px;
  height: 60px;
  background-position: -120px -360px;
}

.-shadow-3 {
  width: 60px;
  height: 60px;
  background-position: -180px -360px;
}

.-shadow-4 {
  width: 60px;
  height: 60px;
  background-position: -240px -360px;
}

.-shadow-5 {
  width: 60px;
  height: 60px;
  background-position: -300px -360px;
}

.-shadow-6 {
  width: 60px;
  height: 60px;
  background-position: -360px -360px;
}

.-support-1 {
  width: 60px;
  height: 60px;
  background-position: -420px 0;
}

.-support-2 {
  width: 60px;
  height: 60px;
  background-position: -420px -60px;
}

.-support-3 {
  width: 60px;
  height: 60px;
  background-position: -420px -120px;
}

.-support-4 {
  width: 60px;
  height: 60px;
  background-position: -420px -180px;
}

.-support-5 {
  width: 60px;
  height: 60px;
  background-position: -420px -240px;
}

.-support-6 {
  width: 60px;
  height: 60px;
  background-position: -420px -300px;
}



.statsprite{
    background:url("https://res.cloudinary.com/treborx555/image/upload/v1472414022/spritesheet_9_vyyt5q.png");
    background-repeat: no-repeat;
    display: block;
}

.-blood {
    width: 30px;
    height: 30px;
    background-position: 0 0;
}

.-critical {
    width: 30px;
    height: 30px;
    background-position: -30px 0;
}

.-damage {
    width: 30px;
    height: 30px;
    background-position: -60px 0;
}

.-dodge {
    width: 30px;
    height: 30px;
    background-position: 0 -30px;
}

.-fire {
    width: 30px;
    height: 30px;
    background-position: -30px -30px;
}

.-healpow {
    width: 30px;
    height: 30px;
    background-position: -60px -30px;
}

.-health {
    width: 30px;
    height: 30px;
    background-position: 0 -60px;
}

.-ice {
    width: 30px;
    height: 30px;
    background-position: -30px -60px;
}

.-lifesteal {
    width: 30px;
    height: 30px;
    background-position: -60px -60px;
}

.-magicpow {
    width: 30px;
    height: 30px;
    background-position: -90px 0;
}

.-mana {
    width: 30px;
    height: 30px;
    background-position: -90px -30px;
}

.-nature {
    width: 30px;
    height: 30px;
    background-position: -90px -60px;
}

.-shadow {
    width: 30px;
    height: 30px;
    background-position: 0 -90px;
}

.-storm {
    width: 30px;
    height: 30px;
    background-position: -30px -90px;
}



.mobsprites {
  background-image: url("https://res.cloudinary.com/treborx555/image/upload/v1472288881/spritesheet_7_guocsq.png");
  background-repeat: no-repeat;
  display: block;
}

.boss10 {
  width: 125px;
  height: 150px;
  background-position: 0 0;
}

.boss11 {
  width: 125px;
  height: 150px;
  background-position: -125px 0;
}

.boss12 {
  width: 125px;
  height: 150px;
  background-position: -250px 0;
}

.boss13 {
  width: 125px;
  height: 150px;
  background-position: 0 -150px;
}

.boss1 {
  width: 125px;
  height: 150px;
  background-position: -125px -150px;
}

.boss2 {
  width: 125px;
  height: 150px;
  background-position: -250px -150px;
}

.boss3 {
  width: 125px;
  height: 150px;
  background-position: 0 -300px;
}

.boss4 {
  width: 125px;
  height: 150px;
  background-position: -125px -300px;
}

.boss5 {
  width: 125px;
  height: 150px;
  background-position: -250px -300px;
}

.boss6 {
  width: 125px;
  height: 150px;
  background-position: -375px 0;
}

.boss7 {
  width: 125px;
  height: 150px;
  background-position: -375px -150px;
}

.boss8 {
  width: 125px;
  height: 150px;
  background-position: -375px -300px;
}

.boss9 {
  width: 125px;
  height: 150px;
  background-position: 0 -450px;
}


.tinyspellsprites {
    background-image: url("https://res.cloudinary.com/treborx555/image/upload/v1472327630/spritesheet_8_igvtbg.png");
    background-repeat: no-repeat;
    display: block;
}


.basic {
    width: 30px;
    height: 30px;
    background-position: 0 0;
}

.blood-1 {
    width: 30px;
    height: 30px;
    background-position: -30px 0;
}

.blood-2 {
    width: 30px;
    height: 30px;
    background-position: -60px 0;
}

.blood-3 {
    width: 30px;
    height: 30px;
    background-position: -90px 0;
}

.blood-4 {
    width: 30px;
    height: 30px;
    background-position: -120px 0;
}

.blood-5 {
    width: 30px;
    height: 30px;
    background-position: -150px 0;
}

.blood-6 {
    width: 30px;
    height: 30px;
    background-position: -180px 0;
}

.defend-1 {
    width: 30px;
    height: 30px;
    background-position: 0 -30px;
}

.defend-2 {
    width: 30px;
    height: 30px;
    background-position: -30px -30px;
}

.defend-3 {
    width: 30px;
    height: 30px;
    background-position: -60px -30px;
}

.defend-4 {
    width: 30px;
    height: 30px;
    background-position: -90px -30px;
}

.defend-5 {
    width: 30px;
    height: 30px;
    background-position: -120px -30px;
}

.defend-6 {
    width: 30px;
    height: 30px;
    background-position: -150px -30px;
}

.fire-1 {
    width: 30px;
    height: 30px;
    background-position: -180px -30px;
}

.fire-2 {
    width: 30px;
    height: 30px;
    background-position: 0 -60px;
}

.fire-3 {
    width: 30px;
    height: 30px;
    background-position: -30px -60px;
}

.fire-4 {
    width: 30px;
    height: 30px;
    background-position: -60px -60px;
}

.fire-5 {
    width: 30px;
    height: 30px;
    background-position: -90px -60px;
}

.fire-6 {
    width: 30px;
    height: 30px;
    background-position: -120px -60px;
}

.heal-1 {
    width: 30px;
    height: 30px;
    background-position: -150px -60px;
}

.heal-2 {
    width: 30px;
    height: 30px;
    background-position: -180px -60px;
}

.heal-3 {
    width: 30px;
    height: 30px;
    background-position: 0 -90px;
}

.heal-4 {
    width: 30px;
    height: 30px;
    background-position: -30px -90px;
}

.heal-5 {
    width: 30px;
    height: 30px;
    background-position: -60px -90px;
}

.heal-6 {
    width: 30px;
    height: 30px;
    background-position: -90px -90px;
}

.ice-1 {
    width: 30px;
    height: 30px;
    background-position: -120px -90px;
}

.ice-2 {
    width: 30px;
    height: 30px;
    background-position: -150px -90px;
}

.ice-3 {
    width: 30px;
    height: 30px;
    background-position: -180px -90px;
}

.ice-4 {
    width: 30px;
    height: 30px;
    background-position: 0 -120px;
}

.ice-5 {
    width: 30px;
    height: 30px;
    background-position: -30px -120px;
}

.ice-6 {
    width: 30px;
    height: 30px;
    background-position: -60px -120px;
}

.storm-1 {
    width: 30px;
    height: 30px;
    background-position: -90px -120px;
}

.storm-2 {
    width: 30px;
    height: 30px;
    background-position: -120px -120px;
}

.storm-3 {
    width: 30px;
    height: 30px;
    background-position: -150px -120px;
}

.storm-4 {
    width: 30px;
    height: 30px;
    background-position: -180px -120px;
}

.storm-5 {
    width: 30px;
    height: 30px;
    background-position: 0 -150px;
}

.storm-6 {
    width: 30px;
    height: 30px;
    background-position: -30px -150px;
}

.nature-1 {
    width: 30px;
    height: 30px;
    background-position: -60px -150px;
}

.nature-2 {
    width: 30px;
    height: 30px;
    background-position: -90px -150px;
}

.nature-3 {
    width: 30px;
    height: 30px;
    background-position: -120px -150px;
}

.nature-4 {
    width: 30px;
    height: 30px;
    background-position: -150px -150px;
}

.nature-5 {
    width: 30px;
    height: 30px;
    background-position: -180px -150px;
}

.nature-6 {
    width: 30px;
    height: 30px;
    background-position: 0 -180px;
}

.shadow-1 {
    width: 30px;
    height: 30px;
    background-position: -30px -180px;
}

.shadow-2 {
    width: 30px;
    height: 30px;
    background-position: -60px -180px;
}

.shadow-3 {
    width: 30px;
    height: 30px;
    background-position: -90px -180px;
}

.shadow-4 {
    width: 30px;
    height: 30px;
    background-position: -120px -180px;
}

.shadow-5 {
    width: 30px;
    height: 30px;
    background-position: -150px -180px;
}

.shadow-6 {
    width: 30px;
    height: 30px;
    background-position: -180px -180px;
}

.support-1 {
    width: 30px;
    height: 30px;
    background-position: -210px 0;
}

.support-2 {
    width: 30px;
    height: 30px;
    background-position: -210px -30px;
}

.support-3 {
    width: 30px;
    height: 30px;
    background-position: -210px -60px;
}

.support-4 {
    width: 30px;
    height: 30px;
    background-position: -210px -90px;
}

.support-5 {
    width: 30px;
    height: 30px;
    background-position: -210px -120px;
}

.support-6 {
    width: 30px;
    height: 30px;
    background-position: -210px -150px;
}







.infospells{
    background-image: url("https://res.cloudinary.com/treborx555/image/upload/v1472455892/spritesheet_10_mgjpmb.png");
    background-repeat: no-repeat;
    display: block;
}

.-basicX {
    width: 30px;
    height: 30px;
    background-position: 0 0;
}

.-blood-2X {
    width: 30px;
    height: 30px;
    background-position: -30px 0;
}

.-blood-3X {
    width: 30px;
    height: 30px;
    background-position: -60px 0;
}

.-defend-3X {
    width: 30px;
    height: 30px;
    background-position: 0 -30px;
}

.-fire-3X {
    width: 30px;
    height: 30px;
    background-position: -30px -30px;
}

.-heal-2X {
    width: 30px;
    height: 30px;
    background-position: -60px -30px;
}

.-ice-1X {
    width: 30px;
    height: 30px;
    background-position: 0 -60px;
}

.-lightning-2X {
    width: 30px;
    height: 30px;
    background-position: -30px -60px;
}

.-nature-2X {
    width: 30px;
    height: 30px;
    background-position: -60px -60px;
}

.-nature-4X {
    width: 30px;
    height: 30px;
    background-position: -90px 0;
}

.-shadow-1X {
    width: 30px;
    height: 30px;
    background-position: -90px -30px;
}

.-shadow-3X {
    width: 30px;
    height: 30px;
    background-position: -90px -60px;
}

.-support-2X {
    width: 30px;
    height: 30px;
    background-position: 0 -90px;
}






@media screen and (max-width: 1360px) {
  body {
      -moz-transform: scale(0.9, 0.9); /* Moz-browsers */
      zoom: 0.9; /* Other non-webkit browsers */
      zoom: 90%; /* Webkit browsers */
  }
}


@media screen and (max-width: 1230px) {
  body {
      -moz-transform: scale(0.8, 0.8); /* Moz-browsers */
      zoom: 0.8; /* Other non-webkit browsers */
      zoom: 80%; /* Webkit browsers */
  }
}

@media screen and (max-width: 1155px) {
  body {
      -moz-transform: scale(0.7, 0.7); /* Moz-browsers */
      zoom: 0.7; /* Other non-webkit browsers */
      zoom: 70%; /* Webkit browsers */
  }
}

@media screen and (max-width: 1050px) {
  body {
      -moz-transform: scale(0.6, 0.6); /* Moz-browsers */
      zoom: 0.6; /* Other non-webkit browsers */
      zoom: 60%; /* Webkit browsers */
  }
}
@media screen and (max-width: 950px) {
  body {
      -moz-transform: scale(0.55, 0.55); /* Moz-browsers */
      zoom: 0.55; /* Other non-webkit browsers */
      zoom: 55%; /* Webkit browsers */
  }
}
@media screen and (max-width: 850px) {
  body {
      -moz-transform: scale(0.45, 0.45); /* Moz-browsers */
      zoom: 0.45; /* Other non-webkit browsers */
      zoom: 45%; /* Webkit browsers */
  }
}
              
            
!

JS

              
                
$(document).ready(function() {



var player = {
  level: 1,
  gold: 0,
  experience: 0,
  summons: 30,
  summonbosscounter: 0,
  summoninterval: 10000,
  bosslevel: 1,

  head: {},
  chest: {},
  leg: {},
  boot: {},
  ring: {},
  talisman: {},
  necklace: {},
  weapon: {},
  wrist: {},
  shoulder: {},
  book: {},
  glove: {},

  totalHealth: 0,
  totalMana: 0,
  totalDodge: 0,
  totalMagicPow: 0,
  totalDamage: 0,
  totalIceDMG: 0,
  totalFireDMG: 0,
  totalStormDMG: 0,
  totalCritical: 0,
  totalBloodDMG: 0,
  totalShadowDMG: 0,
  totalNatureDMG: 0,
  totalHealPow: 0,
  totalLifesteal: 0,

   basicattackcooldown:false,
   iceboltcooldown:false,
   fireboltcooldown:false,
   stormboltcooldown:false,
   shadowboltcooldown:false,
   thornscooldown:false,
   bloodstrikecooldown:false,
   healcooldown:false,
   shieldcooldown:false,
   buffmagiccooldown:false,
   naturehealcooldown:false,
   manarestorecooldown:false,

   icebuffcooldown: false,
   firebuffcooldown: false,
   stormbuffcooldown: false,
   shadowbuffcooldown: false,
   bloodsapcooldown: false,
   healwingscooldown: false,
   helmetcooldown: false,
   attackbuffcooldown:false,
   magebuffcooldown: false,
   lotuscooldown: false,
   magicattackcooldown: false,
   defensehealcooldown: false,


    buffHealth : 0,
    buffMana : 0,
    buffDodge : 0,
    buffMagicPow : 0,
    buffDamage : 0,
    buffIceDMG : 0,
    buffFireDMG : 0,
    buffStormDMG : 0,
    buffBloodDMG : 0,
    buffCritical : 0,
    buffShadowDMG : 0,
    buffNatureDMG : 0,
    buffHealPow : 0,
    buffLifesteal : 0,

    nerfHealth : 0,
    nerfMana : 0,
    nerfDodge : 0,
    nerfMagicPow : 0,
    nerfDamage : 0,
    nerfIceDMG : 0,
    nerfFireDMG : 0,
    nerfStormDMG : 0,
    nerfBloodDMG : 0,
    nerfCritical : 0,
    nerfShadowDMG : 0,
    nerfNatureDMG : 0,
    nerfHealPow : 0,
    nerfLifesteal : 0,


 }



var Health = 200*player.level + player.buffHealth + player.totalHealth - player.nerfHealth;
var Mana = 100*player.level + player.buffMana + player.totalMana - player.nerfMana;
var Dodge = 5*player.level + player.buffDodge + player.totalDodge - player.nerfDodge;
var MagicPow = 10*player.level + player.buffMagicPow + player.totalMagicPow - player.nerfMagicPow;
var Damage = 10*player.level + player.buffDamage + player.totalDamage - player.nerfDamage;
var IceDMG = 5*player.level + player.buffIceDMG + player.totalIceDMG - player.nerfIceDMG;
var FireDMG = 5*player.level + player.buffFireDMG + player.totalFireDMG - player.nerfFireDMG;
var StormDMG = 5*player.level + player.buffStormDMG + player.totalStormDMG - player.nerfStormDMG;
var Critical = 1 + player.buffCritical + player.totalCritical - player.nerfCritical;
var BloodDMG = 5*player.level + player.buffBloodDMG + player.totalBloodDMG - player.nerfBloodDMG;
var ShadowDMG = 5*player.level + player.buffShadowDMG + player.totalShadowDMG - player.nerfShadowDMG;
var NatureDMG = 5*player.level + player.buffNatureDMG + player.totalNatureDMG - player.nerfNatureDMG;
var HealPow = 5*player.level + player.buffHealPow + player.totalHealPow - player.nerfHealPow;
var Lifesteal = player.buffLifesteal + player.totalLifesteal - player.nerfLifesteal;

var currentplayerhealth;
var currentplayermana;
var currentbosshealth;
var currentbosslevel;


var battle=false;
var boss = {
  level: 1,
  health: this.level * 500 + Math.floor(this.level/10 * 5000),
  damage: this.level * 15,

}
var playerdamage = false;

var clickeditemid;
var affixnames = [
  "Blindness",
  "Bravery",
  "Burning",
  "Burrowing",
  "Conjuration",
  "Darkness",
  "Dawn",
  "Death",
  "Deception",
  "Defense",
  "Deflection",
  "Delerium",
  "Desire",
  "Despair",
  "Destruction",
  "Domination",
  "Doom",
  "Dragonslaying",
  "Dreaming",
  "Durability",
  "Dusk",
  "Evocation",
  "Fire",
  "Flame",
  "Freezing",
  "Fury",
  "Glory",
  "Growth",
  "Healing",
  "Heroism",
  "Hope",
  "Horror",
  "Ice",
  "Illusion",
  "Impact",
  "Imprisonment",
  "Incineration",
  "Insanity",
  "Invulnerability",
  "Invisibility",
  "Justice",
  "Life",
  "Light",
  "Lightlessness",
  "Lightning",
  "Love",
  "Madness",
  "Malice",
  "Mercy",
  "Midnight",
  "Obedience",
  "Peace",
  "Petrification",
  "Piercing",
  "Planeswalking",
  "Prophecy",
  "Rage",
  "Resurrection",
  "Retribution",
  "Seeking",
  "Shadow",
  "Shadowbinding",
  "Shattering",
  "Shieldbreaking",
  "Shielding",
  "Shocking",
  "Siege",
  "Sightblinding",
  "Silence",
  "Smiting",
  "Solidity",
  "Soul",
  "Soulbinding",
  "Soulcutting",
  "Spellbreaking",
  "Starlight",
  "Stealth",
  "Stonecutting",
  "Striking",
  "Sundering",
  "the Angel",
  "the Banshee",
  "the Centaur",
  "the Demon",
  "the Desert",
  "the Dragon",
  "the Dwarf",
  "the Elf",
  "the Elements",
  "the Fairie",
  "the Gargoyle",
  "the Genie",
  "the Ghost",
  "the Ghoul",
  "the Giant",
  "the Gnome",
  "the Goblin",
  "the God",
  "the Gremlin",
  "the Gryphon",
  "the Homunculus",
  "the Lich",
  "the Mermaid",
  "the Monster",
  "the Ogre",
  "the Orc",
  "the Titan",
  "the Troll",
  "the Vampire",
  "the Werebeast",
  "the Werewolf",
  "the Wight",
  "Thought",
  "Townsaving",
  "Treachery",
  "True Sight",
  "Twilight",
  "Valor",
  "Vengeance",
  "Void",
  "Warding",
  "Wayfinding",
  "Weightlessness",
  "Wind",
  "Winter",
  "Wisdom",
  "Woundhealing",
];
var itemname = "";
var itemslotnames = ["Talisman", "Helmet", "Ring", "Shoulders", "Chestplate", "Book", "Bracelet", "Leggings", "Gloves", "Weapon", "Boots", "Necklace"];
var slotplayernames = ["talisman", "head", "ring", "shoulder", "chest", "book", "wrist", "leg", "glove", "weapon", "boot", "necklace"];
var itemslot = 0;
var generateditem = {};
var rarities = ["Common", "Magic", "Rare", "Epic", "Legendary"];
var affixnumber = "";
var itemrarity;
var currentitemid = "";
// affixes : name > starting stat > stat per level
var affixes = [
  ["Health", 15, 15],
  ["Mana", 15, 15],
  ["Dodge", 7, 0],
  ["Critical", 10, 0],
  ["Damage", 5, 5],
  ["MagicPow", 7, 7],
  ["ShadowDMG", 10, 10],
  ["NatureDMG", 10, 10],
  ["IceDMG", 10, 10],
  ["FireDMG", 10, 10],
  ["BloodDMG", 10, 10],
  ["StormDMG", 10, 10],
  ["HealPow", 7, 7],
  ["Lifesteal",6,6]
]
var randomstat;
var usedstats = [];
var itempicturenum;
var iconnumbers = {
  head: 5,
  chest: 17,
  leg: 7,
  boot: 10,
  ring: 11,
  talisman: 23,
  weapon: 56,
  wrist: 13,
  shoulder: 10,
  book: 11,
  glove: 11,
  necklace: 7,
}

var inventory = {
  i1: {},
  i2: {},
  i3: {},
  i4: {},
  i5: {},
  i6: {},
  i7: {},
  i8: {},
  i9: {},
  i10: {},
  i11: {},
  i12: {},
  i13: {},
  i14: {},
  i15: {},
  i16: {},
  i17: {},
  i18: {},
  i19: {},
  i20: {},
  i21: {},
  i22: {},
  i23: {},
  i24: {},
  i25: {},
  i26: {},
  i27: {},
}


var mouseX;
var mouseY;
$(document).mousemove(function(e) {
  mouseX = e.pageX;
  mouseY = e.pageY;
});




function playerattack(object){
countplayerstats();
updatespells();

  var i = 0;


  function resetcooldown(){
    player[object.namefunction+"cooldown"] = false;
    $(object.nameid).removeClass("oncooldown");

  }

  function f() {
    if (player[object.namefunction +"cooldown"] === false && currentplayermana >= object.manacost && battle === true){
      player[object.namefunction+"cooldown"]=true;

// 0 means 1 spell use per battle
      useattack();
      if (object.cooldown !== 0 ){
      setTimeout(resetcooldown,object.cooldown,object.namefunction);
    }
    }

    function removebuff(){
      player[object.buffname]= 0;
    }

    function useattack(){

    if (object.buffamount != 0 && i === 0){
      player[object.buffname] = object.buffamount;
      var classname = object.buffname.replace("buff","");
      $("#rightinfo").prepend("<p class='"+ classname +"'>"+object.buffname.replace("buff","")+" buffed: "+object.buffamount+"</p>");
      if (object.buffduration != 0){
      setTimeout (removebuff, object.buffduration);
    }
    }

    if (object.damage > 0 ){
      var critroll = Math.floor(Math.random() * (100 - Critical)) + 1;
      var ifcrit = " does ";

        if (critroll < Critical) {
          object.damage = object.damage * 2;
          ifcrit = " CRITS for";
        }
      currentbosshealth = currentbosshealth - object.damage;
      if(  object.namefunction != "basicattack"){
      $("#rightinfo").prepend("<p>"+ object.nameplayer + ifcrit + ": "+ object.damage + " DMG! </p>");
    }
    }

    if (object.spellfunction != undefined){
      object.spellfunction();
    }
    if (object.manacost > 0){
      currentplayermana = currentplayermana - object.manacost;
    }

    if (object.healthcost > 0){
      currentplayerhealth = currentplayerhealth - object.healthcost;
    }

    if (object.manarestore > 0 ){
      currentplayermana = currentplayermana + object.manarestore;
      if ( object.namefunction != "basicattack"){
      $("#rightinfo").prepend("<p>You restore: " + object.manarestore + " Mana!")
    }
    }

    if (object.healthrestore > 0){
      currentplayerhealth = currentplayerhealth + object.healthrestore;
      if ( object.namefunction != "basicattack"){
      $("#rightinfo").prepend("<p>You restore: " + object.healthrestore + " Health!");
    }
    }

      i++;
      if( i < object.repeat ){setTimeout(useattack, object.delay );}
    }
  }
if (player[object.namefunction +"cooldown"] === false && currentplayermana >= object.manacost && battle === true){
  $(object.nameid).addClass("oncooldown");
  setTimeout(f,object.delay);
}


}

var spellobject;


function updatespells(){

 spellobject = {

    basicattack: {
      nameplayer: "Attack",
      namefunction: "basicattack",
      nameid: ".-basic",
      damage: Damage,
      manacost: 0,
      healthcost: 0,
      manarestore: Math.floor(Mana/10),
      healthrestore: Math.floor(Lifesteal/4),
      repeat: 0,
      delay: 0,
      buffname: 0,
      buffamount: 0,
      cooldown: 2000,

    },

    icebolt: {
      nameplayer: "Icebolt",
      namefunction: "icebolt",
      nameid: "#icebolt",
      damage: Math.floor(Damage/2 + IceDMG + MagicPow/2) ,
      manacost: boss.level * 15,
      healthcost: 0,
      manarestore: 0,
      healthrestore: 0,
      repeat: 0,
      delay: 0,
      buffname: 0,
      buffamount: 0,
      cooldown: 5000,
      
    },

    firebolt: {
      nameplayer: "Firebolt",
      namefunction: "firebolt",
      nameid: "#firebolt",
      damage: Math.floor(Damage/2 + FireDMG + MagicPow/2) ,
      manacost: boss.level * 15,
      healthcost: 0,
      manarestore: 0,
      healthrestore: 0,
      repeat: 0,
      delay: 0,
      buffname: 0,
      buffamount: 0,
      cooldown: 5000,
    },


    stormbolt: {
      nameplayer: "Stormbolt",
      namefunction: "stormbolt",
      nameid: "#stormbolt",
      damage: Math.floor(Damage/2 + StormDMG + MagicPow/2) ,
      manacost: boss.level * 15,
      healthcost: 0,
      manarestore: 0,
      healthrestore: 0,
      repeat: 0,
      delay: 0,
      buffname: 0,
      buffamount: 0,
      cooldown: 5000,
    },


    shadowbolt: {
      nameplayer: "Shadowbolt",
      namefunction: "shadowbolt",
      nameid: "#shadowbolt",
      damage: Math.floor(Damage/2 + ShadowDMG + MagicPow/2) ,
      manacost: boss.level * 15,
      healthcost: 0,
      manarestore: 0,
      healthrestore: 0,
      repeat: 0,
      delay: 2000,
      buffname: 0,
      buffamount: 0,
      cooldown: 5000,
    },


    bloodstrike: {
      nameplayer: "Bloodstrike",
      namefunction: "bloodstrike",
      nameid: "#bloodstrike",
      damage: Math.floor(BloodDMG + Damage),
      manacost: boss.level * 5,
      healthcost: boss.level * 30,
      manarestore: 0,
      healthrestore: 0,
      repeat: 0,
      delay: 0,
      buffname: "buffLifesteal",
      buffamount: Math.floor(BloodDMG / 2),
      cooldown: 5000,
    },

    thorns: {
      nameplayer: "Thorns",
      namefunction: "thorns",
      nameid: "#thorns",
      damage: Math.floor(Damage/6 + NatureDMG/3 + MagicPow/6) ,
      manacost: boss.level * 4,
      healthcost: 0,
      manarestore: 0,
      healthrestore: 0,
      repeat: 3,
      delay: 1000,
      buffname: 0,
      buffamount: 0,
      cooldown: 5000,
    },

    natureheal: {
      nameplayer: "Natureheal",
      namefunction: "natureheal",
      nameid: "#natureheal",
      damage: 0,
      manacost: boss.level * 5,
      healthcost: 0,
      manarestore: 0,
      healthrestore: Math.floor(NatureDMG/4),
      repeat: 3,
      delay: 1000,
      buffname: "buffNatureDMG",
      buffamount: Math.floor(NatureDMG),
      buffduration: 5000,
      cooldown: 10000,
    },

    heal: {
      nameplayer: "Heal",
      namefunction: "heal",
      nameid: "#heal",
      damage: 0,
      manacost: boss.level * 4,
      healthcost: 0,
      manarestore: 0,
      healthrestore: HealPow*2,
      repeat: 0,
      delay: 0,
      buffname: 0,
      buffamount: 0,
      cooldown: 10000,
    },

    shield: {
      nameplayer: "Shield",
      namefunction: "shield",
      nameid: "#shield",
      damage: 0,
      manacost: boss.level * 15,
      healthcost: 0,
      manarestore: 0,
      healthrestore: 0,
      repeat: 0,
      delay: 0,
      buffname: "buffDodge",
      buffamount: 100,
      cooldown: 10000,
      buffduration: 5000,

    },

    manarestore: {
      nameplayer: "Manarestore",
      namefunction: "manarestore",
      nameid: "#manarestore",
      damage: 0,
      manacost: 0,
      healthcost: 0,
      manarestore:  Math.floor(MagicPow/2),
      healthrestore:0,
      repeat: 0,
      delay: 0,
      buffname: 0,
      buffamount: 0,
      cooldown: 10000,
    },

    lotus: {
      nameplayer: "Lotus",
      namefunction: "lotus",
      nameid: "#lotus",
      damage: 0,
      manacost: 0,
      healthcost: 0,
      manarestore:  Math.floor(MagicPow/2),
      healthrestore:0,
      repeat: 5,
      delay: 1000,
      buffname: 0,
      buffamount: 0,
      cooldown: 0,
    },

    buffmagic: {
      nameplayer: "Magic Bottle",
      namefunction: "buffmagic",
      nameid: "#buffmagic",
      damage: 0,
      manacost: boss.level * 25,
      healthcost: 0,
      manarestore: 0,
      healthrestore: 0,
      repeat: 0,
      delay: 0,
      buffname: "buffMagicPow",
      buffamount: Math.floor(MagicPow/2),
      cooldown: 10000,
      buffduration: 5000,
    },

    icebuff: {
      nameplayer: "Ice Mask",
      namefunction: "icebuff",
      nameid: "#icebuff",
      damage:  Math.floor(IceDMG / 2),
      manacost: boss.level * 10,
      healthcost: 0,
      manarestore: 0,
      healthrestore: 0,
      repeat: 0,
      delay: 0,
      buffname: "buffIceDMG",
      buffamount: Math.floor(IceDMG),
      cooldown: 10000,
      buffduration: 5000,
    },

    firebuff: {
      nameplayer: "Hand of Fire",
      namefunction: "firebuff",
      nameid: "#firebuff",
      damage:  Math.floor(FireDMG / 2),
      manacost: boss.level * 10,
      healthcost: 0,
      manarestore: 0,
      healthrestore: 0,
      repeat: 0,
      delay: 0,
      buffname: "buffFireDMG",
      buffamount: Math.floor(FireDMG),
      cooldown: 10000,
      buffduration: 5000,
    },

    shadowbuff: {
      nameplayer: "Eye of Shadow",
      namefunction: "shadowbuff",
      nameid: "#shadowbuff",
      damage:  Math.floor(ShadowDMG / 2),
      manacost: boss.level * 10,
      healthcost: 0,
      manarestore: 0,
      healthrestore: 0,
      repeat: 0,
      delay: 0,
      buffname: "buffShadowDMG",
      buffamount: Math.floor(ShadowDMG),
      cooldown: 10000,
      buffduration: 5000,
    },

    stormbuff: {
      nameplayer: "Tree of Storm",
      namefunction: "stormbuff",
      nameid: "#stormbuff",
      damage: Math.floor(StormDMG/2),
      manacost: boss.level * 10,
      healthcost: 0,
      manarestore: 0,
      healthrestore: 0,
      repeat: 0,
      delay: 0,
      buffname: "buffStormDMG",
      buffamount: Math.floor(StormDMG ),
      cooldown: 10000,
      buffduration: 5000,
    },

    magebuff: {
      nameplayer: "Mage Burst",
      namefunction: "magebuff",
      nameid: "#magebuff",
      damage: Math.floor(MagicPow /2),
      manacost: Math.floor(currentplayermana / 2),
      healthcost: 0,
      manarestore: 0,
      healthrestore: 0,
      repeat: 0,
      delay: 0,
      buffname: "buffMagicPow",
      buffamount: Math.floor(MagicPow /2),
      cooldown: 10000,
      buffduration: 10000,
    },

    bloodsap: {
      nameplayer: "Blood Sap",
      namefunction: "bloodsap",
      nameid: "#bloodsap",
      damage: Math.floor(BloodDMG/3),
      manacost: 0,
      healthcost: Math.floor(Health / 4),
      manarestore: 0,
      healthrestore: Math.floor(BloodDMG/3),
      repeat: 3,
      delay: 1000,
      buffname: "buffBloodDMG",
      buffamount: Math.floor(BloodDMG ),
      cooldown: 10000,
      buffduration: 5000,
    },

    healwings: {
      nameplayer: "Heal Wings",
      namefunction: "healwings",
      nameid: "#healwings",
      damage: 0,
      manacost: Math.floor(Mana / 10),
      healthcost: 0,
      manarestore: 0,
      healthrestore: HealPow,
      repeat: 5,
      delay: 800,
      buffname: 0,
      buffamount: 0,
      cooldown: 10000,
    },

    defenseheal: {
      nameplayer: "Palace of Gods",
      namefunction: "defenseheal",
      nameid: "#defenseheal",
      damage: 0,
      manacost: boss.level*7,
      healthcost: 0,
      manarestore: 0,
      healthrestore: Math.floor(HealPow/2),
      repeat: 3,
      delay: 1000,
      buffname: "buffDodge",
      buffamount: 30,
      buffduration: 4000,
      cooldown: 10000,
    },

    attackbuff: {
      nameplayer: "Damage Buff",
      namefunction: "attackbuff",
      nameid: "#attackbuff",
      damage: 0,
      manacost: boss.level * 15,
      healthcost: 0,
      manarestore: 0,
      healthrestore: 0,
      repeat: 0,
      delay: 0,
      buffname: "buffDamage",
      buffamount: Math.floor(Damage),
      cooldown: 10000,
      buffduration: 10000,
    },

    helmet: {
      nameplayer: "Vigor Of Vikings",
      namefunction: "helmet",
      nameid: "#helmet",
      damage: 0,
      manacost: boss.level * 15,
      healthcost: 0,
      manarestore: 0,
      healthrestore: 0,
      repeat: 0,
      delay: 0,
      buffname: "buffHealth",
      buffamount: Math.floor(Mana / 2),
      cooldown: 10000,
      buffduration: 0,
    },

    magicattack: {
      nameplayer: "Finger Bolt",
      namefunction: "magicattack",
      nameid: "#magicattack",
      damage: MagicPow,
      manacost: boss.level * 10,
      healthcost: 0,
      manarestore: 0,
      healthrestore: 0,
      repeat: 0,
      delay: 0,
      buffname: 0,
      buffamount: 0,
      cooldown: 7000,
      buffduration: 0,
    },


  }


}

updatespells();


$("#magicattack").click(function(){playerattack(spellobject.magicattack);});
$("#helmet").click(function(){playerattack(spellobject.helmet);});
$("#defenseheal").click(function(){playerattack(spellobject.defenseheal);});
$("#attackbuff").click(function(){playerattack(spellobject.attackbuff);});
$("#lotus").click(function(){playerattack(spellobject.lotus);});
$("#healwings").click(function(){playerattack(spellobject.healwings);});
$("#bloodsap").click(function(){playerattack(spellobject.bloodsap);});
$("#magebuff").click(function(){playerattack(spellobject.magebuff);});
$("#shadowbuff").click(function(){playerattack(spellobject.shadowbuff);});
$("#stormbuff").click(function(){playerattack(spellobject.stormbuff);});
$("#firebuff").click(function(){playerattack(spellobject.firebuff);});
$("#icebuff").click(function(){playerattack(spellobject.icebuff);});

$("#icebolt").click(function(){playerattack(spellobject.icebolt);});
$("#firebolt").click(function(){playerattack(spellobject.firebolt);});
$("#stormbolt").click(function(){playerattack(spellobject.stormbolt);});
$("#thorns").click(function(){playerattack(spellobject.thorns);});
$("#shadowbolt").click(function(){playerattack(spellobject.shadowbolt);});
$("#heal").click(function(){playerattack(spellobject.heal);});
$("#natureheal").click(function(){playerattack(spellobject.natureheal);});
$("#manarestore").click(function(){playerattack(spellobject.manarestore);});
$("#bloodstrike").click(function(){playerattack(spellobject.bloodstrike);});
$("#shield").click(function(){playerattack(spellobject.shield);});
$("#buffmagic").click(function(){playerattack(spellobject.buffmagic);});
$(".-basic").click(function(){playerattack(spellobject.basicattack);});


// keyboard spell clicking support! Woo :D
$('body').bind('keypress',function (event){
  if (event.keyCode === 49){$(".spell1").trigger('click');}
  if (event.keyCode === 50){$(".spell2").trigger('click');}
  if (event.keyCode === 51){$(".spell3").trigger('click');}
  if (event.keyCode === 52){$(".spell4").trigger('click');}
  if (event.keyCode === 53){$(".spell5").trigger('click');}
  if (event.keyCode === 54){$(".spell6").trigger('click');}
  if (event.keyCode === 55){$(".spell7").trigger('click');}
  if (event.keyCode === 56){$(".spell8").trigger('click');}
  if (event.keyCode === 57){$(".spell9").trigger('click');}

  if (event.charCode === 49){$(".spell1").trigger('click');}
  if (event.charCode === 50){$(".spell2").trigger('click');}
  if (event.charCode === 51){$(".spell3").trigger('click');}
  if (event.charCode === 52){$(".spell4").trigger('click');}
  if (event.charCode === 53){$(".spell5").trigger('click');}
  if (event.charCode === 54){$(".spell6").trigger('click');}
  if (event.charCode === 55){$(".spell7").trigger('click');}
  if (event.charCode === 56){$(".spell8").trigger('click');}
  if (event.charCode === 57){$(".spell9").trigger('click');}

});


var autobasic1;
$("#autobasic").click(function(){
function autobasicatk(){
$(".spell1").trigger('click');
}
 autobasic1 = setInterval(autobasicatk, 300);
});

$("#manualauto").click(function(){
clearInterval(autobasic1);
});

function displaystats() {

$("#health").text(Math.floor(Health));
$("#mana").text(Math.floor(Mana));
$("#damage").text(Math.floor(Damage));
$("#critical").text(Math.floor(Critical));
$("#dodge").text(Math.floor(Dodge));
$("#healpow").text(Math.floor(HealPow));
$("#magicpow").text(Math.floor(MagicPow));
$("#ice").text(Math.floor(IceDMG));
$("#fire").text(Math.floor(FireDMG));
$("#storm").text(Math.floor(StormDMG));
$("#nature").text(Math.floor(NatureDMG));
$("#shadow").text(Math.floor(ShadowDMG));
$("#blood").text(Math.floor(BloodDMG));
$("#lifesteal").text(Math.floor(Lifesteal));

$("#gold").text("Gold: "+Math.floor(player.gold));
$("#level").text("Level: "+player.level);
}


function countplayerstats() {

  player.totalHealth = 0;
  player.totalMana = 0;
  player.totalDodge = 0;
  player.totalMagicPow = 0;
  player.totalDamage = 0;
  player.totalIceDMG = 0;
  player.totalFireDMG = 0;
  player.totalStormDMG = 0;
  player.totalCritical = 0;
  player.totalBloodDMG = 0;
  player.totalShadowDMG = 0;
  player.totalNatureDMG = 0;
  player.totalHealPow = 0;
  player.totalLifesteal = 0;

  for (var d = 0; d < slotplayernames.length; d++) {

    if ($.isEmptyObject(player[slotplayernames[d]]) === false) {

      for (var f = 0; f < affixes.length; f++) {

        player["total" + affixes[f][0]] = player["total" + affixes[f][0]] + player[slotplayernames[d]]['totalstats'][affixes[f][0]];

      }
    }
  } // for loops d f

  Health = 200*player.level + player.buffHealth + player.totalHealth - player.nerfHealth;
  Mana = 100*player.level + player.buffMana + player.totalMana - player.nerfMana;
  Dodge = player.buffDodge + player.totalDodge - player.nerfDodge;
  MagicPow = 20*player.level + player.buffMagicPow + player.totalMagicPow - player.nerfMagicPow;
  Damage = 10*player.level + player.buffDamage + player.totalDamage - player.nerfDamage;
  IceDMG = 15*player.level + player.buffIceDMG + player.totalIceDMG - player.nerfIceDMG;
  FireDMG = 15*player.level + player.buffFireDMG + player.totalFireDMG - player.nerfFireDMG;
  StormDMG = 15*player.level + player.buffStormDMG + player.totalStormDMG - player.nerfStormDMG;
  Critical = 1 + player.buffCritical + player.totalCritical - player.nerfCritical;
  BloodDMG = 15*player.level + player.buffBloodDMG + player.totalBloodDMG - player.nerfBloodDMG;
  ShadowDMG = 15*player.level + player.buffShadowDMG + player.totalShadowDMG - player.nerfShadowDMG;
  NatureDMG = 15*player.level + player.buffNatureDMG + player.totalNatureDMG - player.nerfNatureDMG;
  HealPow = 15*player.level + player.buffHealPow + player.totalHealPow - player.nerfHealPow;
  Lifesteal = 15*player.level + player.buffLifesteal + player.totalLifesteal - player.nerfLifesteal;


  if (Dodge<0){Dodge=0;}
  if (MagicPow<0){MagicPow=0}
  if (Damage<0){Damage=0}
  if (IceDMG<0){IceDMG=0}
  if (FireDMG<0){FireDMG=0;}
  if (StormDMG<0){StormDMG=0;}
  if (NatureDMG<0){NatureDMG=0;}
  if (ShadowDMG<0){ShadowDMG=0;}
  if (NatureDMG<0){NatureDMG=0;}
  if (HealPow<0){HealPow=0;}
  if (Critical<0){Critical=0;}
  if (Lifesteal<0){Lifesteal=0;}
  if (BloodDMG<0){BloodDMG=0;}
  if (Mana<0){Mana=0;}

  updatespells();
  displaystats();

    } // count stats function

var finishedgenerating = true;


function upgradeitem(){

var theitem=inventory[clickeditemid];
var upgraderarity= Math.floor(Math.random()*rarities.length);

if (theitem["upgrade"]["level"] < 5 && player.gold > theitem["level"]*5){
  player.gold = player.gold - theitem["level"]*5;

  var randomupgradestat= Math.floor(Math.random()*affixes.length);
  var upgradestatamount= Math.floor((upgraderarity+1)*(theitem.level*affixes[randomupgradestat][2])/5);
  var maxupgradestatamount= Math.floor(5*(theitem.level*affixes[randomupgradestat][2])/5);
  var upgradestatrarity= rarities[upgraderarity];

  theitem.upgrade.stats[affixes[randomupgradestat][0]] = [upgradestatamount, maxupgradestatamount, upgradestatrarity];
  theitem.upgrade.level++;

 function countitemstats(){

  for (var i=0;i<affixes.length;i++){

    theitem.totalstats[affixes[i][0]]=theitem.stats[affixes[i][0]][0] + theitem.upgrade.stats[affixes[i][0]][0];
  }

 }
countitemstats();

 } // if upgrade level
} // function upgrade

 function upgradeitemonchar(){

  theitem=player[clickeditemid];

 upgraderarity= Math.floor(Math.random()*rarities.length);

 if (theitem["upgrade"]["level"] < 5 && player.gold > theitem["level"]*5){
   player.gold = player.gold - theitem["level"]*5;

    randomupgradestat= Math.floor(Math.random()*affixes.length);
    upgradestatamount= Math.floor((upgraderarity+1)*(theitem.level*affixes[randomupgradestat][2])/5);
    maxupgradestatamount= Math.floor(5*(theitem.level*affixes[randomupgradestat][2])/5);
    upgradestatrarity= rarities[upgraderarity];

   theitem.upgrade.stats[affixes[randomupgradestat][0]] = [upgradestatamount, maxupgradestatamount, upgradestatrarity];
   theitem.upgrade.level++;

  function countitemstats(){

   for (var i=0;i<affixes.length;i++){

     theitem.totalstats[affixes[i][0]]=theitem.stats[affixes[i][0]][0] + theitem.upgrade.stats[affixes[i][0]][0];
   }

  }
 countitemstats();

  } // if upgrade level


} // function upgrade


$("#upgrade").click(function(){
upgradeitem();
});
$("#upgradeitemonchar").click(function(){
upgradeitemonchar();
});

function createitem(bossLevel) {
  finishedgenerating = false;
  // choose rarity, slot and affix for item
  var randomslot = Math.floor(Math.random() * 12) + 1;
  var randomaffix = Math.floor(Math.random() * affixnames.length);
  var affixnumber = Math.floor(Math.random() * rarities.length) + 1;
  usedstats = [];
  // now generate the item
  function randomitem(slot) {

    for (var i = 0; i < affixnumber; i++) {

      if (i === 0) {
        generateditem = {};
        usedstats = [];
        itemname = itemslotnames[slot - 1] + " of " + affixnames[randomaffix];
        itemslot = slotplayernames[slot - 1];
        itemrarity = rarities[affixnumber - 1];

        generateditem.name = itemname;
        generateditem.slot = itemslot;
        generateditem.stats = {};
        generateditem.rarity = itemrarity;
        generateditem.value = affixnumber * bossLevel;
        generateditem.upgrade = {};
        generateditem.upgrade.level = 0;
        generateditem.upgrade.stats = {};
        generateditem.level = bossLevel;
        generateditem.totalstats = {};

         // this generates all possible stats so there's no need for undefined checks and makes calculation easier
        for (var g = 0; g < affixes.length; g++) {
          generateditem.totalstats[affixes[g][0]] = 0;
          generateditem.stats[affixes[g][0]] = [0,0,0];
          generateditem.upgrade.stats[affixes[g][0]] = [0,0,0];
        }

        itempicturenum = iconnumbers[itemslot];
        var randompicturenum = Math.floor(Math.random() * itempicturenum) + 1;
        generateditem.icon = itemslot.toString() + "-" + randompicturenum.toString();

      };

      randomstat = Math.floor(Math.random() * affixes.length);
      while (usedstats.indexOf(randomstat) != -1) {
        randomstat = Math.floor(Math.random() * affixes.length);
      }
      usedstats.push(randomstat);

      var statnumber = Math.floor(Math.random() * (affixes[randomstat][1] + (affixes[randomstat][2] * bossLevel)));
      var statmax = affixes[randomstat][1] + (affixes[randomstat][2] * bossLevel);

      var statcolor = "Common";
      if (statnumber > statmax * 0.2) {
        statcolor = "Magic"
      };
      if (statnumber > statmax * 0.4) {
        statcolor = "Rare"
      };
      if (statnumber > statmax * 0.6) {
        statcolor = "Epic"
      };
      if (statnumber > statmax * 0.8) {
        statcolor = "Legendary"
      };

      //we finalize the item stats here
      generateditem.stats[affixes[randomstat][0]] = [statnumber, statmax, statcolor];
      generateditem.totalstats[affixes[randomstat][0]] = statnumber;
    }
    var invcount, itemidcount, itemid, allclasses;

    // item done generating
    for (var f = 1; f < 29; f++) {
      invcount = "i" + f;
      itemidcount = "#" + invcount;
      itemid = itemidcount + "S";
      if (jQuery.isEmptyObject(inventory[invcount])) {
        allclasses = "item sprite " + generateditem.icon + " " + generateditem.rarity;
        $(itemidcount).append("<img id='" + itemid + "'class='" + allclasses + "' '></img>");
        f = 50;
        inventory[invcount] = generateditem;

      }
    }

    finishedgenerating = true;
  }

  // this choses item slot

  randomitem(randomslot);
}


//so right click doesn't fuck up my options menu
document.oncontextmenu = function() {
  return false;
};


function addsummon(){
player.summonbosscounter++;


if (player.summonbosscounter > 5){
player.summonbosscounter=0;
player.summons++;
var fightcount = "Boss Summons: " + player.summons;
$("#bosssummons").text(fightcount);
}

}

// easy leveling function
function checkexp(){

  if (player.experience > 3 * player.level){
    player.experience=0;
    player.level++;
  }

  fightcount = "Boss Summons: " + player.summons;
  $("#bosssummons").text(fightcount);

}

function bosslevelkilled(x){

    player.bosslevel = x;

console.log(player.bosslevel);
}



function startfight(){
  battle=true;

  $("#leftinfo").prepend("<p>Fight has started!</p>");


 player.basicattackcooldown=false;
 player.iceboltcooldown=false;
 player.fireboltcooldown=false;
 player.stormboltcooldown=false;
 player.shadowboltcooldown=false;
 player.thornscooldown=false;
 player.bloodstrikecooldown=false;
 player.healcooldown=false;
 player.shieldcooldown=false;
 player.buffmagiccooldown=false
 player.naturehealcooldown=false;
 player.manarestorecooldown=false;

 player.icebuffcooldown= false;
 player.firebuffcooldown= false;
 player.stormbuffcooldown= false;
 player.shadowbuffcooldown= false;
 player.bloodsapcooldown= false;
 player.healwingscooldown= false;
 player.helmetcooldown= false;
 player.attackbuffcooldown=false;
 player.magebuffcooldown= false;
 player.lotuscooldown= false;
 player.magicattackcooldown= false;
 player.defensehealcooldown= false;


 $(".oncooldown").removeClass("oncooldown");


  resetplayerstats();
  var randombossname= Math.floor(Math.random()*13)+1;
  var bossname="boss"+randombossname+" "+" mobsprites bosspic";
  var bosshitroll;

// there is bonus every 25 levels so you have to stop and get better gear, this is to balance the game
  boss.health = boss.level * 500 + (Math.floor(boss.level/25)*20000)+(Math.floor(boss.level/100)*50000) ;
  boss.damage = boss.level*20 + (Math.floor(boss.level/25)*150)+(Math.floor(boss.level/100)*250);


   currentbosshealth = boss.health;
   currentplayerhealth = Health;
   currentplayermana = Mana;

    var  bossdamage= boss.damage;
    var  bosscritdamage=boss.damage*2;

  $("#boss").html("<img class='"+bossname+ "' ></img>");
  $("#bosshptext").text(currentbosshealth+"/"+currentbosshealth);
  $("#bosshpbar").css("width","100%");


  function updatehealthbar(){
    var barpercent = currentbosshealth / boss.health*100;
    var playerhpbar = currentplayerhealth / Health *100;
    var playermanabar =currentplayermana / Mana *100;

    if (playerhpbar > 100){playerhpbar = 100;}
    if (playermanabar > 100){playermanabar = 100;}

    $("#bosshpbar").animate({width: barpercent+"%"},"slow");
    $("#bosshptext").text(currentbosshealth + "/"+boss.health);
    $("#playerhpbar").animate({width: playerhpbar+"%"},"slow");
    $("#playermanabar").animate({width: playermanabar+"%"},"slow");
  }



   function bossattack(){
     bossdamage= boss.damage;
     bosscritdamage=boss.damage*5;
     bosshitroll = Math.floor(Math.random() * (100 - Dodge)) + 1;


      function attackbasicplayer(){
      bosshitroll = Math.floor(Math.random() * (100 - Dodge)) + 1;

      if (bosshitroll > Dodge){
      $("#leftinfo").prepend("<p>Boss Attacks for: " + bossdamage +" DMG!"+"</p>");
      currentplayerhealth = currentplayerhealth - bossdamage;}
      if(bosshitroll < Dodge){$("#leftinfo").prepend("<p>Boss Missed a basic attack.</p>");}
    }


    function critplayer(){
       bosshitroll = Math.floor(Math.random() * (100 - Dodge)) + 1;

      if (bosshitroll > Dodge){
       $("#leftinfo").prepend("<p>Boss CRITS for: " + bosscritdamage +" DMG!"+"</p>");
       currentplayerhealth = currentplayerhealth - bosscritdamage;}
      if(bosshitroll < Dodge){$("#leftinfo").prepend("<p>Boss Missed the crit.</p>");}

    }


    function castHealPowreduce(){
      player.nerfHealPow = 999999991000;
      function HealPowreduceremove(){
        player.nerfHealPow=0;
      }
      setTimeout(HealPowreduceremove,10000);
      $("#leftinfo").prepend("<p  class='heal' > Boss Casts NERF HealPow!</p>");
    }


    function castIceDMGreduce(){
      player.nerfIceDMG = 999991000;
      function IceDMGreduceremove(){
        player.nerfIceDMG=0;
      }
      setTimeout(IceDMGreduceremove,10000);
      $("#leftinfo").prepend("<p  class='ice'> Boss Casts NERF IceDMG!</p>");
    }


    function castFireDMGreduce(){
      player.nerfFireDMG = 9999991000;
      function FireDMGreduceremove(){
        player.nerfFireDMG=0;
      }
      setTimeout(FireDMGreduceremove,10000);
      $("#leftinfo").prepend("<p  class='fire'> Boss Casts NERF FireDMG!</p>");
    }

    function castStormDMGreduce(){
      player.nerfStormDMG = 9999991000;
      function StormDMGreduceremove(){
        player.nerfStormDMG=0;
      }
      setTimeout(StormDMGreduceremove,10000);
      $("#leftinfo").prepend("<p  class='storm'> Boss Casts NERF StormDMG!</p>");
    }

    function castShadowDMGreduce(){
      player.nerfShadowDMG = 9999991000;
      function ShadowDMGreduceremove(){
        player.nerfShadowDMG=0;
      }
      setTimeout(ShadowDMGreduceremove,10000);
      $("#leftinfo").prepend("<p  class='shadow'> Boss Casts NERF ShadowDMG!</p>");
    }

    function castNatureDMGreduce(){
      player.nerfNatureDMG = 9999991000;
      function NatureDMGreduceremove(){
        player.nerfNatureDMG=0;
      }
      setTimeout(NatureDMGreduceremove,10000);
      $("#leftinfo").prepend("<p class='nature'> Boss Casts NERF NatureDMG!</p>");
    }

    function castBloodDMGreduce(){
      player.nerfBloodDMG = 9999991000;
      function BloodDMGreduceremove(){
        player.nerfBloodDMG=0;
      }
      setTimeout(BloodDMGreduceremove,10000);
      $("#leftinfo").prepend("<p class='danger'> Boss Casts NERF BloodDMG!</p>");
    }


      var bosschoosespell = Math.floor(Math.random()*100);


      if (bosschoosespell <10){$("#leftinfo").prepend("<p class='danger'> CRITICAL INCOMING!</p>");setTimeout(critplayer,3000);}
      else if (bosschoosespell < 12){castBloodDMGreduce();}
      else if (bosschoosespell < 14){castIceDMGreduce();}
      else if (bosschoosespell < 16){castFireDMGreduce();}
      else if (bosschoosespell < 18){castStormDMGreduce();}
      else if (bosschoosespell < 20){castNatureDMGreduce();}
      else if (bosschoosespell < 22){castHealPowreduce();}
      else if (bosschoosespell < 24){castShadowDMGreduce();}
      else if (bosschoosespell < 101){attackbasicplayer();}


    updatehealthbar();
  }


  function checkdeath(){

    if (currentbosshealth < 1) {
      currentbosslevel = boss.level;
      battle=false;
      clearInterval(bossattack);
      clearInterval(checkdeath);
      currentbosshealth=boss.health;
      createitem(currentbosslevel);
      createitem(currentbosslevel);
      resetplayerstats();
      countplayerstats();
      currentplayerhealth = Health;
      currentplayermana = Mana;
      currentplayerhealth = Health;
      updatehealthbar();
      player.experience++;
      bosslevelkilled(currentbosslevel)
     }

    if (currentplayerhealth < 1) {
      battle=false;
      clearInterval(bossattack);
      clearInterval(checkdeath);
      resetplayerstats();
      countplayerstats();
      currentplayerhealth = Health;
      currentplayermana = Mana;
      currentplayerhealth = Health;
      currentbosshealth=boss.health;
      updatehealthbar();
    }

    // so mana doesn't overflow..
    if (currentplayermana > Mana){currentplayermana=Mana};
    if (currentplayerhealth > Health){currentplayerhealth=Health};
    if (currentplayermana < 0){currentplayermana=0};


    updatehealthbar();
  }


  var checkdeath=setInterval(checkdeath,1000);
  var bossattack=setInterval(bossattack,3000);


}



$("#summonfaster").click(function(){
if (player.summoninterval-10000 > 0){
player.summoninterval=player.summoninterval - 10000;
$("#summons").text("1 spawn per: "+Math.floor(player.summoninterval/10000)+"min");
}
});

$("#summonslower").click(function(){
player.summoninterval=player.summoninterval + 10000;
$("#summons").text("1 spawn per: "+Math.floor(player.summoninterval/10000)+"min");
});


$("#minus").click(function(){
if( boss.level > 1 && battle != true){
boss.level--;
$("#bosslevel").text("LVL: "+boss.level);
}
});

$("#plus").click(function(){
if (battle != true){
boss.level++;
$("#bosslevel").text("LVL: "+boss.level);
}
});

//inventory options
$(".slot").mousedown(function(e) {
  if (e.button == 2) {
     clickeditemid = this.id;
     $("#showdiv").css({
    'display': 'none'
  });
   $("#showdiv1").css({
    'display': 'none'
  });

    $("#showdiv").css({
      'top': mouseY,
      'left': mouseX,
      'display': 'block'
    });
  }
});

//inventory options
$(".spellbar").mousedown(function(e) {
  if (e.button == 2) {
     clickeditemid = this.id;
     $("#showdiv").css({
    'display': 'none'
  });
   $("#showdiv1").css({
    'display': 'none'
  });
    $("#desc").css({
      'top': top,
      'left': 0,
      'display': 'block'
    });
  }
});


$("#unequip").click(function() {

  for (var ff = 1; ff < 29; ff++) {
    var invcount1 = "i" + ff;
    var itemidcount1 = "#" + invcount1;

    if (jQuery.isEmptyObject(inventory[invcount1])) {
      $("#" + clickeditemid).children().appendTo(itemidcount1);
      ff = 50;
      inventory[invcount1] = player[clickeditemid];
      player[clickeditemid] = {};

    }
  }
  countplayerstats()

});

// closes all menus
$("#main").click(function() {
  $("#showdiv").css({
    'display': 'none'
  });
   $("#showdiv1").css({
    'display': 'none'
  });

    $("#desc").css({
    'display': 'none'
  });


});

$("#sellall").click(function(){
 function clicked() {

       if (confirm('Are you sure you want to sell your whole inventory?')){
           sellall();
       } else {
           return false;
       }
    }
    clicked();

});

function sellall(){

  for (var i=1; i<29;i++){

  var sellitemid = "i" + i;

 if (inventory[sellitemid]["value"] != undefined && inventory[sellitemid]["value"] != null){
  player.gold = player.gold + inventory[sellitemid]["value"];
  $("#" + sellitemid).empty();
  inventory[sellitemid] = {};

}

}

}

$("#sell").click(function() {

  function sell() {

  // this is to stop bug when you click an empty inventory slot...
  if (inventory[clickeditemid]["value"] != undefined && inventory[clickeditemid]["value"] != null){
  player.gold = player.gold + inventory[clickeditemid]["value"];
  $("#" + clickeditemid).empty();
  inventory[clickeditemid] = {};
}

}

  sell();
});
$("#equip").click(function() {

  function equip() {
    var equipslot = inventory[clickeditemid]["slot"];

    if ($.isEmptyObject(player[equipslot])) {
      $("#" + clickeditemid).children().appendTo("#" + equipslot);
      $("#" + clickeditemid).empty();
      // now to delete and transfer data
      player[equipslot] = inventory[clickeditemid];
      inventory[clickeditemid] = {};
    }
  }

  equip();
  countplayerstats();

});



$("#fightbutton").click(function(){

function startfightonclick(){

if (player.summons < 1 && battle !=true){
$("#leftinfo").prepend("<p>You don't have enough Boss summons!</p>");
  }

if (battle == true){
$("#leftinfo").prepend("<p>Cannot start battle while in combat</p>");
}
if (player.summons > 0 && battle != true ) {

  battle = true;
  $("#leftinfo").empty();
  $("#rightinfo").empty();
  $("#leftinfo").prepend("<p>Fight is starting.</p>");

player.summons--;
setTimeout(startfight,5000);
}}
startfightonclick();
});


//INVENTORY CLICK
$(".slot").click(function() {

  clickeditemid = this.id; // this selects the item id so it can be used for other things in the menu

  $('td').children().removeClass("selected");
  $("#" + clickeditemid).children().addClass("selected");
  var rarityarr = [];

  $("#info").empty();
  $("#upgradeinfo").empty();
  $("#powerlevel").empty();

  for (var y = 0; y < affixes.length; y++) {
    var statstuff = inventory[clickeditemid]["stats"][affixes[y][0]];
    var upgradestatstuff = inventory[clickeditemid]["upgrade"]["stats"][affixes[y][0]];
    rarityarr.push(inventory[clickeditemid]["upgrade"]["stats"][affixes[y][0]][2] );
    rarityarr.push(inventory[clickeditemid]["stats"][affixes[y][0]][2] );

    if (y === 0) {
      var namerarity = inventory[clickeditemid]["rarity"];
      var clickeditemname = inventory[clickeditemid]["name"];

      $("#info").append("<p class='" + namerarity + "'>" + clickeditemname + "</p><div class='line'></div>");
      $("#upgradeinfo").html("<p> Upgrade stats:</p>");
    }

    if (statstuff != undefined && statstuff[0]>0) {
      $("#info").append(
        "<p>" + affixes[y][0] + ": <span class='" + statstuff[2] + "'>" + statstuff[0] + "/" + statstuff[1] + "</span></p>"
      );
    }

    if (upgradestatstuff[0] != undefined && upgradestatstuff[0] >0) {
      $("#upgradeinfo").append(
        "<p>" + affixes[y][0] + ": <span class='" + upgradestatstuff[2] + "'>" + upgradestatstuff[0] + "/" + upgradestatstuff[1] + "</span></p>"
      );
   }

    if (y === affixes.length - 1) {
      $("#info").append("<p>Item Level: " + inventory[clickeditemid]["level"] + "</p>");
    }

    }

    var totalperc = 0;
    for (var i=0; i<rarityarr.length;i++){
      if (rarityarr[i] === "Common"){totalperc = totalperc + 1;}
      if (rarityarr[i] === "Magic"){totalperc = totalperc + 2;}
      if (rarityarr[i] === "Rare"){totalperc = totalperc + 3;}
      if (rarityarr[i] === "Epic"){totalperc = totalperc + 4;}
      if (rarityarr[i] === "Legendary"){totalperc = totalperc + 5;}
    }

    totalperc = Math.floor(totalperc / 45 * 100)+"%";
    inventory[clickeditemid].powerlevel = totalperc;
    $("#powerlevel").text("Power Level:"+inventory[clickeditemid].powerlevel);

});

//CHARACTER CLICK
$(".slot1").click(function() {
  clickeditemid = this.id; // this selects the item id so it can be used for other things in the menu

  $('td').children().removeClass("selected");
  $("#" + clickeditemid).children().addClass("selected");
  var rarityarr =[];

  $("#powerlevel").empty();
  $("#info").empty();
  $("#upgradeinfo").empty();

  for (var y = 0; y < affixes.length; y++) {
    var statstuff = player[clickeditemid]["stats"][affixes[y][0]];
    var upgradestatstuff = player[clickeditemid]["upgrade"]["stats"][affixes[y][0]];
    rarityarr.push(player[clickeditemid]["upgrade"]["stats"][affixes[y][0]][2] );
    rarityarr.push(player[clickeditemid]["stats"][affixes[y][0]][2] );


    if (y === 0) {
      var namerarity = player[clickeditemid]["rarity"];
      var clickeditemname = player[clickeditemid]["name"];

      $("#info").append("<p class='" + namerarity + "'>" + clickeditemname + "</p><div class='line'></div>");
      $("#upgradeinfo").html("<p> Upgrade stats:</p>");
    }

    if (statstuff != undefined  && statstuff[0]>0) {
      $("#info").append(
        "<p>" + affixes[y][0] + ": <span class='" + statstuff[2] + "'>" + statstuff[0] + "/" + statstuff[1] + "</span></p>"
      );
    }
      if (upgradestatstuff[0] != undefined && upgradestatstuff[0] >0) {
      $("#upgradeinfo").append(
         "<p>" + affixes[y][0] + ": <span class='" + upgradestatstuff[2] + "'>" + upgradestatstuff[0] + "/" + upgradestatstuff[1] + "</span></p>"
      );
   }
    if (y === affixes.length - 1) {
      $("#info").append("<p>Item Level: " + player[clickeditemid]["level"] + "</p>");
    }
  }

  var totalperc = 0;
  for (var i=0; i<rarityarr.length;i++){
    if (rarityarr[i] === "Common"){totalperc = totalperc + 1;}
    if (rarityarr[i] === "Magic"){totalperc = totalperc + 2;}
    if (rarityarr[i] === "Rare"){totalperc = totalperc + 3;}
    if (rarityarr[i] === "Epic"){totalperc = totalperc + 4;}
    if (rarityarr[i] === "Legendary"){totalperc = totalperc + 5;}
  }

  totalperc = Math.floor(totalperc / 45 * 100)+"%";
  player[clickeditemid].powerlevel = totalperc;
  $("#powerlevel").text("Power Level:"+player[clickeditemid].powerlevel);

});


// to unequip items
$(".slot1").mousedown(function(e) {
  if (e.button == 2) {
     clickeditemid = this.id;
     $("#showdiv").css({
    'display': 'none'
  });
   $("#showdiv1").css({
    'display': 'none'
  });
    $("#showdiv1").css({
      'top': mouseY,
      'left': mouseX,
      'display': 'block'
    });
  }
});



function resetplayerstats(){

 player.buffHealth = 0;
 player.buffMana = 0;
 player.buffDodge = 0;
 player.buffMagicPow = 0;
 player.buffDamage = 0;
 player.buffIceDMG = 0;
 player.buffFireDMG = 0;
 player.buffStormDMG = 0;
 player.buffBloodDMG = 0;
 player.buffCritical = 0;
 player.buffShadowDMG = 0;
 player.buffNatureDMG = 0;
 player.nerfHealPow = 0;

 player.nerfHealth = 0;
 player.nerfMana = 0;
 player.nerfDodge = 0;
 player.nerfMagicPow = 0;
 player.nerfDamage = 0;
 player.nerfIceDMG = 0;
 player.nerfFireDMG = 0;
 player.nerfStormDMG = 0;
 player.nerfBloodDMG = 0;
 player.nerfCritical = 0;
 player.nerfShadowDMG = 0;
 player.nerfNatureDMG = 0;
 player.nerfHealPow = 0;

}


function reloadeverything(){
   // we load inventory items
      for (var f = 1; f < 29; f++) {
      var invcount1 = "i" + f;
      var itemidcount1 = "#" + invcount1;
      var itemid1 = itemidcount1 + "S";
      if (jQuery.isEmptyObject(inventory[invcount1])===false) {
        var allclasses1 = "item sprite " + inventory[invcount1]["icon"] + " " + inventory[invcount1]['rarity'];
        $(itemidcount1).append("<img id='" + itemid1 + "'class='" + allclasses1 + "' '></img>");

      }
    }
// we also load character items
   for (var x = 0; x <slotplayernames.length; x++) {
      var itemslot1= slotplayernames[x];
      var itemid1 = "#" + slotplayernames[x];
      var newid1="#c"+x;

     if (jQuery.isEmptyObject(player[itemslot1])===false) {
        var allclasses1 = "item sprite " + player[itemslot1]["icon"] + " " + player[itemslot1]['rarity'];
        $(itemid1).append("<img id='" +newid1+ "'class='" + allclasses1 + "' '></img>");

      }
    }


}


function autoitems(){
  createitem(player.bosslevel);
}


setInterval(checkexp,20000);
setInterval(countplayerstats, 300);


function save() {
  var save = {
    player1: player,
    inventory1: inventory,
    boss1: boss,
  }
  localStorage.setItem("save", JSON.stringify(save));
}

function load() {

  var savegame = JSON.parse(localStorage.getItem("save"));
   var basicint = setInterval(addsummon,10000);

  if (savegame != null && savegame != undefined){
  clearInterval(basicint);
  inventory = savegame.inventory1;
  player = savegame.player1;
  resetplayerstats();
  reloadeverything();
  countplayerstats();
  displaystats();
  boss = savegame.boss1;
  $("#bosslevel").text("LVL: "+boss.level);
  $("#summons").text("1 spawn per: "+Math.floor(player.summoninterval/10000)+"min");
  setInterval(addsummon,player.summoninterval);
  setInterval(autoitems, 600000);
}


}

setInterval(save, 10000);

window.onload = function() {
  load();
  }


}); // doc rdy

              
            
!
999px

Console