Page 1 of 1

Touch Screen Web Client Mods

Posted: 21 Oct 2015 12:17
by britanica
I have been wanting to pass my commute to work playing Genesis but have encountered several obstacles in accomplishing any successful adventuring, be that questing, herbing or grinding. I learned to touch type playing muds and certain typed responses became second nature to me and happen in the blink of an eye. A touch screen keyboard just doesn't allow for that kind of reaction time.

The main interface problems I encountered on touch screen devices are:
  • * Link moving around is difficult when there are many exits or not supported when there are no obvious exits.
    * Running commands for special actions is slow even if aliased
    * What did I just find? How do I keep it?
    * Starting combat with some creatures when auto correct is enabled takes longer than my train ride.
To tackle the first issue, I decided to append to my 'obvious exits' trigger a key pad that has the cardinal directions laid out in table format.
To address the second issue, I added area specific actions I may need to use to the right of the keypad.
To solve the third issue, I modified my 'You found' trigger to include additional action links.
To allow for random violence, I call 'h all' when the room.info trigger fires, and I colorize the output and add action links.

Below are some aliases and triggers that accomplish this.

Alias: show_keypad
Display the directions keypad and common commands for the area
Script Type: Javascript

Code: Select all

function exitExists(exits, direction) {
  for (var dir in exits)
  {
    if (exits[dir] == direction)
    {
      return true;
    }
  }
  
  return false;
}

var exits = gwc.gmcp.data.room.exits;

var movementSpan = '<span class="exit" style="color: rgb(128,128,64)">';
var actionSpan = '<span class="exit" style="color: rgb(255,255,00)">';

var commandTable = '<table><tr><td>  Move  </td><td></td><td></td><td></td><td>  Actions  <td></td></tr>' +
    '<tr><td> ' + (exitExists(exits, 'northwest') ? actionSpan : movementSpan) + 'northwest</span> </td>' +
    '<td> ' + (exitExists(exits, 'north') ? actionSpan : movementSpan) + 'north</span> </td>' +
    '<td> ' + (exitExists(exits, 'northeast') ? actionSpan : movementSpan) + 'northeast</span> </td>' +
    '<td> ' + (exitExists(exits, 'up') ? actionSpan : movementSpan) + ' up </span> </td>' +
    '<td> </td>' + 
    '<td> ' + actionSpan + 'me' + '</span> </td>' + 
    '<td> ' + actionSpan + 'search here for herbs' + '</span> </td>' + 
    '<td> ' + actionSpan + 'stop' + '</span> </td>' + 
    '</tr><tr>' + 
    '<td> ' + (exitExists(exits, 'west') ? actionSpan : movementSpan) + 'west</span> </td>' +
    '<td><table><tr>' +
    '<td> ' + (exitExists(exits, 'in') ? actionSpan : movementSpan) + 'in</span> </td></tr>' +
    '<tr><td> ' + (exitExists(exits, 'out') ? actionSpan : movementSpan) + 'out</span> </td>' +
    '</tr></table>' +
    '<td> ' + (exitExists(exits, 'east') ? actionSpan : movementSpan) + 'east</span> <td>' +
    '<td> </td>' + 
    '<td> ' + actionSpan + 'exa map' + '</span> </td>' + 
    '<td> ' + actionSpan + 'h all' + '</span> </td>' + 
    '<td> ' + actionSpan + 'look' + '</span> </td>' + 
    '</tr><tr>' + 
    '<td> ' + (exitExists(exits, 'southwest') ? actionSpan : movementSpan) + 'southwest</span> </td>' +
    '<td> ' + (exitExists(exits, 'south') ? actionSpan : movementSpan) + 'south</span> </td>' +
    '<td> ' + (exitExists(exits, 'southeast') ? actionSpan : movementSpan) + 'southeast</span> </td>' +
    '<td> ' + (exitExists(exits, 'down') ? actionSpan : movementSpan) + 'down</span> </td>' +
    '<td> </td>';
if (gwc.gmcp.data.room.id === 'Y4soG0') {
  commandTable += '<td> ' + actionSpan + 'get ouzo from tray' + '</span> </td>' + 
    '<td> ' + actionSpan + 'get bachlava from tray' + '</span> </td>';
} else if (gwc.gmcp.data.room.id === 'nVNlw/' || gwc.gmcp.data.room.id === 'jMhXg/') {
  commandTable += '<td> ' + actionSpan + 'ask attendant to summon chariot' + '</span> </td>' + 
    '<td> ' + actionSpan + 'pay attendant' + '</span> </td>' + 
    '<td> ' + actionSpan + 'board' + '</span> </td>';
} else if (gwc.gmcp.data.room.short.indexOf('On a chariot') > -1) {
  commandTable += '<td> ' + actionSpan + 'crack whip' + '</span> </td>';
} else if (gwc.gmcp.data.room.short.indexOf('on the deck') > -1) {
  commandTable += '<td> ' + actionSpan + 'disembark' + '</span> </td>';
} else {
  commandTable += '<td> ' + actionSpan + 'bs' + '</span> </td>';
}
  
commandTable += '</tr></table>';

gwc.output.append('REPLCAE_TOKEN');
gwc.output.replace('REPLCAE_TOKEN', commandTable, true);
gwc.output.color('#888888');

Alias: mm
Display the MobileMove keypad when looking or moving
Script Type: Javascript

Code: Select all

if (!gwc.userdata.MobileMove)
{
  gwc.userdata.MobileMove = true;
}
else
{
  gwc.userdata.MobileMove = false;
}
gwc.output.append('MobileMove ' + (gwc.userdata.MobileMove ? 'enabled.' : 'disabled'));
Hooking up the triggers to display the keypad:


Trigger: ^There (are|is) (.*) obvious (exits|exit): (.*)[\.]
Trigger Type: Regexp
Trigger fires when the obvious exists line is received. It will colorize the exits and if MobileMove is enabled, display the keypad, otherwise display frequently used commands.
Script Type: Javascript

Code: Select all

var coloredSpan = '<span style="color: rgb(00,192,192)">';
var actionSpan = '<span class="exit" style="color: rgb(255,255,00)">';

var replacementString = coloredSpan + args[4].replace(' and ', '</span> and ' + coloredSpan) + '</span>';

if (gwc.userdata.MobileMove !== true) {
  replacementString += '.  Actions: ' +
                   actionSpan + 'search here for herbs' + '</span> ';
}

gwc.output.replace(args[4], replacementString, true);
gwc.userdata.RoomChanged = false;

if (gwc.userdata.MobileMove) {
  gwc.connection.send('show_keypad', true);
}
Trigger: (.*)
Trigger Type: Regexp
Catch all trigger that fires for every line of text received.
(Be careful not to do any heavy processing in this trigger as it is fired for every line)
If MobileMove is enabled and the RoomChanged is true, this function will display the Keypad if there are no obvious exits in the room.
Script Type: Javascript

Code: Select all

if (gwc.userdata.RoomChanged)
{
  gwc.userdata.RoomChanged = false;
  if (gwc.gmcp.data.room.exits.length === 0)
  {
    gwc.connection.send('show_keypad', true);
  }
}

Trigger: ^You find (an|a) (.*)[\.|!]
Trigger Type: Regexp
Trigger fires when a search has completed and the user finds an object.
This trigger will add command links to examine the object and put the object in your pack.
If the found herb is a wanted spell component it is put in the pack automatically.
Script Type: Javascript

Code: Select all

var actionSpan = '<span class="exit" style="color: rgb(64,192,192)">';

gwc.output.replace(args[0], 'Found: <span style="color: rgb(0,255,0)">' + args[2] + '</span> ' + 
                   actionSpan + 'exa ' + args[2] + '</span> ' +
                   actionSpan + 'put ' + args[2] + ' in pack</span> ', true);
gwc.output.color('#888888');

if (args[2].indexOf('sharp short leaf') > -1)
{
  gwc.connection.send('put sharp short leaf in pack');    
}
if (args[2].indexOf('frosty red berry') > -1)
{
  gwc.connection.send('put frosty red berry in pack');    
}

Trigger: room.info
Trigger Type: GMCP
Trigger fires when the room info is changed.
Script Type: Javascript

Code: Select all

// The data received by this update is from the previous room
gwc.userdata.PreviousRoom = gwc.gmcp.data.room;
gwc.userdata.RoomChanged = true;

try {
  var dif = Math.abs((gwc.userdata.LastHealthCheck.getTime() - new Date().getTime())/1000);

  if (dif > 2)
  {
    gwc.connection.send('h all');
    gwc.userdata.LastHealthCheck = new Date();
  }
}
catch(exception) {
  gwc.userdata.LastHealthCheck = new Date();
}


Trigger: The (.*) \bis\b (at death's door|barely alive|terribly hurt|in a very bad shape|in agony|in a bad shape|very hurt|suffering|hurt|aching|somewhat hurt|slightly hurt|sore|feeling well|feeling very well)
Trigger Type: Regexp
Trigger fires when h all is run and another living creature exists. Colorize the heath line based upon the level and add commands to kill and exa the creature.
Script Type: Javascript

Code: Select all


switch(args[2])
{
  case 'at death's door':
  case 'barely alive':
  case 'terribly hurt':
  case 'in a very bad shape':
  case 'in agony':
  case 'in a bad shape':    
    gwc.output.color('#CC2211');
    break;
  case 'very hurt':
  case 'suffering':
  case 'hurt':
    gwc.output.color('#994400');
    break;
  case 'aching':
  case 'somewhat hurt':
  case 'slightly hurt':
  case 'sore':
    gwc.output.color('#AA8800');
    break;
  case 'feeling well':
  case 'feeling very well':
    gwc.output.color('#00AA00');
    break;
  default:
    gwc.output.color('#00AAAA');
    break;
}

gwc.output.replace(args[0], args[0] +
                   ' <span style="color:rgb(0, 192, 192)" class="exit">kill '+ args[1] +'</span>' +
                   ' <span style="color:rgb(192, 192, 192)" class="exit">exa '+ args[1] +'</span>');


I have found with these modifications, touch screen mudding can be enjoyable!

Does anybody have any other touch screen tips for the web client or know how to create action links that will execute the full command and only display a shorter version?

Re: Touch Screen Web Client Mods

Posted: 21 Oct 2015 13:54
by cotillion
Awesome!

Adding action buttons from settings is on the todo list.
Hope to get around to it some day...

Re: Touch Screen Web Client Mods

Posted: 22 Oct 2015 07:42
by Avatar
I feel very old, right now. Back in 1991 there was nothing but aliases to enhance ones playing experience.

And now.....

This is most impressive :)

Re: Touch Screen Web Client Mods

Posted: 22 Oct 2015 09:50
by britanica
In 1991, I found muds and only had tiny talk, in 1992 I found tiny fugue and the joys of triggers.
In 1993, it was one of my dreams to be able to mud from my HP48GX.

2015 Living the dream ... :D

Re: Touch Screen Web Client Mods

Posted: 22 Oct 2015 14:28
by Aristos
britanica wrote:In 1991, I found muds and only had tiny talk, in 1992 I found tiny fugue and the joys of triggers.
In 1993, it was one of my dreams to be able to mud from my HP48GX.

2015 Living the dream ... :D

2015 - still using tinyfugue here.

Re: Touch Screen Web Client Mods

Posted: 23 May 2017 23:59
by Tarax the Terrible
Can someone post a screenshot what this looks like in action?

Looks like it adds tapable commands below every room desc?