Monday, December 14, 2015

ODTUG APEX Gaming Competition - How'd They Do It? (Part 6)

At Kscope 15 this year we launched the first ever ODTUG APEX game competition. The APEX community responded with 15 entries! Each and every one of them left me thinking "How'd they do that?" So, let's find out more about the games and those who wrote them.

Let's go down under and talk with Scott Wesley.


First off, tell me a little about yourself.

My name is Scott Wesley and I'm a consultant for Sage Computing Services in Perth, Australia. You can tweet me @swesley_perth and read my blog at grassroots-oracle.com


How many years of APEX experience do you have?
I started learning 3.2 in 2008, so 7. I guess this now eclipses how long I spent on Oracle Forms.


What motivated you to participate in the APEX Gaming Competition?
I originally had no intention of submitting. I was in the middle of writing a book and travelling to Kscope then visiting the states for a month pushed me behind. 
When I returned to Australia I needed to continue writing but was lacking motivation.  I needed to get up to speed with APEX 5.0 and regain momentum, so when I thought of a game that I didn't think would take much to translate to APEX, so I went for it. 
But I bound myself to two major rules - it had to be as simple and declarative as possible.


What is the name of your game?
Boggex (Boggle + APEX)



Briefly describe your game.
Electronically roll 16 alphabet dice and find as many word combinations using the upturned letters as you can in two minutes. 
It's been reported that it can be quite addictive.


How long did it take you to develop your games?
After idea conception I gave myself a week to get it to a stable, working state. This meant nights, and whatever else I could sneak in. I gave it another once over just before the November submission date. Probably less than a working week. 
The productivity factor APEX 5 provides helped... ahem.


What was the most challenging element of your game design and how did you overcome it?
When using the page item and 'Try' button to submit words, the game was about 95% declarative. Mobile users needed to avoid the virtual keyboard, so I had to allow users to press on the board letters to simulate key presses. Enabling the game board for finger tap events made me think a little harder about jQuery selectors. 

Firslty I needed to tap on a letter, then respond by highlighting selected letter and add the letter to the word attempt. The highlight was just done by adding (or removing) a class called 'hover' which made the background of a letter on the game board a different colour. 
/* when hovering, or given hover class */
#p1_board td.t-Report-cell:hover
,#p1_board td.t-Report-cell.hover{
    background-color: #4992de !important;
}

I created an on click dynamic action on a jQuery selector that identified any cell on the game board. 
#p1_board td.t-Report-cell

Then added what turned out to be three lines of JavaScript action, using this.triggeringElement to refer to the cell that was clicked.
// if the cell hasn't already been clicked for this word
if (!$(this.triggeringElement).hasClass('hover')) {
  // add tapped letter to page item
  $s('P1_WORD', $v('P1_WORD') + $(this.triggeringElement).text());
  // sustain the hover style (see page attributes)
  $(this.triggeringElement).addClass('hover');
}

To replicate the highlight when typing the letter with the keyboard was fairly similar. I created a dynamic action Key release of my only visible page item P1_WORD, then added the following JavaScript 

// record the last value, for the tricky delete response
this.triggeringElement.oldvalue = this.triggeringElement.value;

// get value of page item, get last letter, set to upper case.
last_letter = $('#P1_WORD').val().substr($('#P1_WORD').val().length-1).toUpperCase();

// Add highlight to first unhighlighted button encountered with the same letter as that entered. Need to cater for Qu
if (last_letter.length > 0)
  $('#p1_board td.t-Report-cell:not(.hover):contains("'+last_letter+'"):first').addClass('hover');
// select reads: game board, any cell not already with hover class, cell must contain relevant letter

The hard part came when I realised I had to remove the relevant highlight if the user deleted the letter using the keyboard. The key release trigger ended up having a condition to run a set of false actions when the delete key was pressed:
event.which != 8

For iOS users, I also needed to include the TouchPunch.js library on the page. This fills a gap for desktop applications on touch devices. It also enables you to modify click events to respond immediately, instead of waiting 300ms to determine if you wished to click and drag, or just click. As such, this library is also required if you want to use sliders on a touch device.

What I never addressed was the one dice that had 'Qu', as per one of the inline comments.

Monty, you asked for detail, so I couldn't resist ;p

Alright, how can I play?
It's currently hosted on the apex.oracle.com server  https://apex.oracle.com/pls/apex/f?p=70316  
The login screen provides details of a generic user to play with, though in future I may just make the game page public.


Anything else you'd like to add?
Within my game you'll find a page of technical details, roughly describing how I used the SQL, PL/SQL, CSS and jQuery involved in building the game in APEX 5.0. 
I also presented a breakdown of technically interesting game components at the Perth OTN day.  Slides available here. 
I'm also tempted to record a brief video series showing how to construct it yourself. It's basically a single page application with a bunch of dynamic actions.

If you want to learn more about using jQuery in APEX, I finished writing a book this year on just that Click here for details   ;p


Thanks, Scott. By the way, it was great to meet you at KScope 15. In the coming days we'll share more insight into the other games that were part of the contest.

...our journey continues

No comments: