Again, see my disclaimers in the last post.

 

I want to share something from a personal project of mine.  I have a similar need for this type of functionality at work, so I had reason to prototype with a project at home.  It takes a while to figure these tricks out, and I wish someone had posted this OPA code on the Internet.

 

Background: I play D&D with my family, and I have a need to convert D&D 4 encounters to D&D 5e encounters for a campaign that our family has been playing since 2007...

 

Monster/encounter conversion may seem simple, but it isn't simple because D&D 5e comes with its own set of rules for monsters and encounters.  Some of the 5e rules are very involved and thus are not automated anywhere I can find for free on the Internet.  This is the reason manual conversions are so dang difficult.  (Really, I automated about 15 pages of 5e rules.  5e, btw, is considered simpler that 4...)

 

So, I wrote my own encounter ruleset for my family campaign, although I won't share it for fear of legal issues with Wizards of the Coast.  This project is just for our family use anyway...

 

BUT, one challenge that I had was reminding myself all the implications of setting various attributes such as "Hit Die".  I didn't want to clutter up my interview screen with d&d notes...  What to do?

 

Popups:

 

I succeeded with popups in several ways, but I will show a simple method that allows the content of the popup to include attribute values...

 

First, the top of the interview screen is shown here.  Everything in blue has a popup that reminds me of what is possible and impacted per the 5e rules.  Further, the popups have OPA attributes embedded in them.

 

Now a demonstration screenshot of one of the Popups.  (Btw, this popup uses rules to compute the proper hit die per 5e rules when given creature size, constitution, and hp.  The "8d10 + 24" was created with OPA rules and is in an attribute.)

Kind of cool???  Click the blue text and get a popup!  Click the popup and it goes away.

 

In my development tab, it looks as follows:

Notice how I use properties on a label.  Also, note the label/popup has an attribute in it that can change depending on fields in the interview.  That means the text in the popup has to be dynamic... 

 

The javascript:

// Lets make a popup function... Here are the necessary properties:

 

//

// type : Popup

// title : <<Text such as "click me...">>

// id : <<an id for this popup>>

OraclePolicyAutomation.AddExtension({

   customLabel: function(control, interview) {

     if (control.getProperty("type") == "Popup" ) {

     var x;

     var t;

       return {

         mount : function(el){

           x = document.createElement("DIV");

           x.className = "popup";

           x.onclick = function() {

             var popup = document.getElementById(control.getProperty("id"));

             popup.classList.toggle("show"); 

           };

           x.innerHTML = control.getProperty("title");


           t = document.createElement("SPAN");

           t.className = "popuptext";

           t.id = control.getProperty("id");

           t.innerHTML = control.getCaption();


           x.appendChild(t);

           el.appendChild(x);

           },

         update : function(el){

           t.innerHTML = control.getCaption();

          }

        }

     }

  }

});

 

The CSS:

/* Popup container */

 

.popup {

   position: relative;

   display: inline-block;

   margin-left: 10px;

   margin-right: 10px;

   color: blue;

   cursor: pointer;

}


/* The actual popup (appears on top) */

.popup .popuptext {

   visibility: hidden;

   width: 600px;

   background-color: #555;

   color: #fff;

   text-align: left;

   border-radius: 6px;

   padding: 8px 0;

   position: absolute;

   z-index: 1;

   bottom: 125%;

   left: 50%;

   margin-left: -80px;

}


/* Popup arrow */

.popup .popuptext::after {

   content: "";

   position: absolute;

   top: 100%;

   left: 10%;

   margin-left: -5px;

   border-width: 5px;

   border-style: solid;

   border-color: #555 transparent transparent transparent;

}


/* Toggle this class when clicking on the popup container (hide and show the popup) */

.popup .show {

   visibility: visible;

   -webkit-animation: fadeIn 1s;

   animation: fadeIn 1s

}


/* Add animation (fade in the popup) */

@-webkit-keyframes fadeIn {

  from {opacity: 0;}

  to {opacity: 1;}

}


@keyframes fadeIn {

  from {opacity: 0;}

  to {opacity:1 ;}

}

 

Done.

 

PS:

 

Finally, I couldn't resist but use BI Publisher...  (Notice the Hit Die from above populated next to the Hit Points...)  I haven't had time to write rules for special qualities or actions, so ignore those areas.

 

For anyone who wonders, all the coding for D&D 5e creature rules could be done in only two weekends. Try doing that with just Excel...

 

I hope you can make use of this how-to code for popups/tooltips in OPA.   Let me know in comments if you take any of this code and modify it for your own projects, please.