JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<script src="http://jquery-rotate.googlecode.com/svn/trunk/jquery.rotate.js"></script>
<div id="strategyBoard" class="board">
    <h2>Define your Strategy</h2>

    <div>

        <div class="boardHeader"></div>
        <div class="boardHeader">A</div>
        <div class="boardHeader">B</div>
        <div class="boardHeader">C</div>
        <div class="boardHeader">D</div>
        <div class="boardHeader">E</div>
        <div class="boardHeader">F</div>
        <div class="boardHeader">G</div>
        <div class="boardHeader">H</div>
        <div class="boardHeader">I</div>
        <div class="boardHeader">J</div>
    </div>

    <div>

        <div>
            <div class="sideHeader">1</div>
            <div class="1A boardBody"></div>
            <div class="1B boardBody"></div>
            <div class="1C boardBody"></div>
            <div class="1D boardBody"></div>
            <div class="1E boardBody"></div>
            <div class="1F boardBody"></div>
            <div class="1G boardBody"></div>
            <div class="1H boardBody"></div>
            <div class="1I boardBody"></div>
            <div class="1J boardBody"></div>
        </div>
        <div>
            <div class="sideHeader">2</div>
            <div class="2A boardBody"></div>
            <div class="2B boardBody"></div>
            <div class="2C boardBody"></div>
            <div class="2D boardBody"></div>
            <div class="2E boardBody"></div>
            <div class="2F boardBody"></div>
            <div class="2G boardBody"></div>
            <div class="2H boardBody"></div>
            <div class="2I boardBody"></div>
            <div class="2J boardBody"></div>
        </div>
        <div>
            <div class="sideHeader">3</div>
            <div class="3A boardBody"></div>
            <div class="3B boardBody"></div>
            <div class="3C boardBody"></div>
            <div class="3D boardBody"></div>
            <div class="3E boardBody"></div>
            <div...

CSS

/* ===== Board Game CSS ========================================================
      Author: Team n&n
      ========================================================================== */

   #strategyRoom{
     width: 100%;
     min-height: 768px;
     background: url("/assets/images/batallaNaval.jpg");
     background-position:50% 50%;
     background-repeat: no-repeat;
     font-size: 16px;
   }

   #strategyBoard {
     float: left;
     margin-left: 50px;
   }

   .shipsBoard {
     color: black;
     float: right;
     padding: 40px;
     background-color: gray;
     .Border-radius;
     margin: 50px;

   }

   .hoverClass{
       opacity: 0.4;
   }
   .boardHeader {
       color: white;
    margin: 10px;
   }

   .sideHeader {
       width: 20px;
       padding: 0;
       color: white;
   }

JavaScript

var value = 0;
  $( "#aircraftCarrier, #battleship, #destroyer, #patrolShip, #submarine" ).draggable({ revert: "invalid"});
  $("#aircraftCarrier, #submarine, #patrolShip, #destroyer, #battleship").rotate({
     bind:
       {
             click: function(){
           value +=90;
           $(this).rotate({ animateTo:value})

             }
       }

  });


  $( "#strategyBoard .boardBody" ).droppable({

     drop: function(event, ui) {
      var position=event.target.className;
      alert(position);
      },
       hoverClass: "hoverClass"
  });