TADS 3 WebUI Demo game and mini-guide

With all this talk of whether TADS is still a viable language or not…hopefully it is, given what it’s capable of. But it’s certainly tough to learn, at least for a non-professional programmer like me. And the hardest part seems to be figuring out how to get WebUI to do things with the browser, as the documentation is rather sparse.

That being said, here’s the demo game ‘enhanced’ to use some WebUI features, and a link to the code (and a mini-guide) on Github. Hopefully this might be useful to anyone who wants to use the game’s ability to interface with the browser, and isn’t sure how. It’s mostly cobbled together from what I’ve gleaned from the code and bits and pieces of advice from this forum. If anyone would like to help improve it, feel free to add or suggest things.

http://gs.tads.io/?storyfile=http://seriousgames.atwebpages.com/WebUIdemo/WebUIdemo.t3

6 Likes

Would you be willing to port the Manual.docx to Markdown or something like that? Otherwise, great resource!

2 Likes

I’m not very familliar with Markdown, but if anyone would like to convert the Word doc, I’d be happy to put it up there. For the time being, I added a .pdf in case that makes it easier for non-MS Word users.

2 Likes

A thousand times, “yes,” this is amazing.

By the way (and certainly do not mean to detract from your excellent guide), I built a stand-alone web server from the available documentation. I found the build tricky but managed it. Some day, should I retrieve my workstation, I’ll post my build documentation.

3 Likes

Would be great if you could! I’m also trying to set up a server, and finding it tricky even with the documentation in the system manual. Working examples are always welcome.

2 Likes

I’ve sent out a call for help for replacing the power supply on my workstation. Your request is a priority–I won’t forget. It will take time but I’ll get it done if I possibly can.

1 Like

That manual is gold. Thank you for posting your findings!

@Otto73 Your example is missing a few files in the source. Mostly the items you added to webuires. I am trying to work on a major WebUI modification and I would like to see the code you did to make those nice buttons. I know they are CSS buttons but the WebUI isn’t allowing me to create those.

I am trying to create an input dialog, another feature that has no instructions on how to use correctly, to allow character selection during the initial connection. I want to make my dialog pretty like you did in the bar at the bottom. WebUI appears to only allow you to create ugly text link buttons.

If you could add your htm, css, and js files from webuires to your source, I might be able to make progress. It might help me figure out how to make a button when clicked to request a resource and not just report the index of the button.

Also, your manual is completely empty, except for 3 section headers. Not very useful in that state. WebUI is determined to block me in my project and I am hoping your code might help me.

Hello,
thanks a much for the demo and guide - it helped me to create the classic graphic adventure look using TADS 3 WebUi - image in top frame, and parser down bellow. The graphics are scaled acording to TADS interpreter window size.
I did not found any demo or guide on web on this topic, the WebUi documentation looks quite sparse, so this may help somebody.
I’m no programmer, and TADS is quite new to me, so it is a messy code, to be honest I do not know what everything does there, but i works at least locally. The guide is pretty good, it helps a lot to understand implementation of WebUi, it is the best material which I found about the topic - read it first before attempting to use code bellow.

Image file name is specified by variable graphicsfilename in rooms in main game. Graphic files should be in webuires project directory.

testRoom: Room 'Test Room'
    desc = "This is simple testing room with graphics"
    graphicsfilename = 'example.jpg'
;


First the modification file, which needs to be added to source files before main game, to allow resources, create the frames and hook the image change to travel action. I’ve had some problems with the resources, it needed the WebResourceResFile vpath first…

modification.t

#charset "us-ascii"
#include <adv3.h>

WebResourceResFile
vpath = static new RexPattern('/webuires/') 
; 

transient graphicsWin: WebCommandWin, WebBannerWin
   vpath = '/grafika.htm'
   src = 'webuires/grafika.htm'
;

modify initDisplay()
{ webMainWin.createFrame(statuslineBanner, 'statusline','0, 0, 100%, 45px');
    statuslineBanner.init();
    statusLine.statusDispMode = StatusModeBrowser;
    
//  set up the command window and status line
    
    webMainWin.createFrame(graphicsWin, 'graphicsdisplay','0%, statusline.bottom, 100%, 60%');
    webMainWin.createFrame(commandWin, 'command','0%, 60%, 100%, 100%');
 }   

modify TravelViaAction
 execAction()
 {
inherited;
 graphicsWin.sendWinEvent('<map><graphicsfilename><<me.location.graphicsfilename>></graphicsfilename></map>');
 }
;

Then we need the html page, javascript and css files in the webuires directory of the project. I am no CSS or JavaScript wizard these are more lucky experiments than anything, but you can get the idea. There are many shananigans with the sizes and positions - I could not get it to fill completely the frame with picture, this is best what I could come with. Wotks differently played in another browser…

grafika.htm

<!-- <!DOCTYPE HTML PUBLIC "-//W3C//Ddiv HTML 4.01 Strict//EN"> -->
<html>
<head>
<script type="text/javascript" src="/webuires/util.js"></script>
<script type="text/javascript" src="/webuires/mapWin.js"></script>
<link rel="stylesheet" type="text/css" href="/webuires/mapWin.css">
<body onload="javascript:mapWinInit();">
<body><div id="1" position: absolute; top: 0; left: 0; height: 100%; width: 100%;></div></body>
</head>
</html>

mapWin.css

html, body, .wrapper {}

body {
 background-color: black;
 background-size: cover;
 font-size: 0px;
 font-family: Verdana, sans-serif;
}
img {
width: 120%;
 height: 100%;
 object-fit: contain;
}

div {
object-fit: contain;
}

#1 img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 3; 
  bottom: 0; 
  min-width: 50%;
  min-height: 50%;
}

And finally mapWin.js

function mapWinInit()
 {
 utilInit();
 getInitState();
 }

function onGameEvent(req, resp)
 {
imgSrc='webuires/' + (xmlChildText(resp, "graphicsfilename"));

// This changes IMG atributes
{document.getElementById("1").innerHTML='<img src="'+imgSrc+'"/>';} 

// DISABLED - This part is if you want to change bgimage, but I could get the resising right (probably not supported by Internet Explorer)
// document.body.style.backgroundImage = "url('"+imgSrc+"')";

// DISABLED - This writes what this script gets for file name - just for debugging
// alert(document.body.style.backgroundImage);
}

function onGameState(req, resp)
 {}

Hi David -

you’re right, for some reason, the /webuires folder was missing from Github. Anyway, I’ve added that, so the .html, .css and .js files are there now. As for the manual, for some reason you only seem to have the first page. I checked, and the whole manual is definitely there (in .docx and .pdf), so I can only suggest downloading again. The html/css/js code’s all in there as well.
If you’re using workbench, do bear in mind that the implementation of the browser it uses is rather old, so not all the css will format correctly - for the full effect, it needs to be run through a modern browser by uploading the game file somewhere on the web and running it through http://gs.tads.io/?storyfile=XXXX, with XXXX being the address where the .t3 game file is hosted. Alternatively, you could just stick to css which works on older browsers.
There’s also a very odd bug which alters the filename of /webuires in the resource folder. You can just delete from the project file and add it back with the correct name as a workaround though. Or alternatively, run Workbench as admin and alter the original /webuires folder.

Hi,

I converted the PDF-manual to markdown (to get benefits like syntax highlighting etc.)
Maybe it’s of use for someone …

TADS 3 WebUI Demo game and mini-guide.md.zip (8.2 KB)

Jens

3 Likes

I hope so! It’s good to know people are still looking at WebUI, although it definitely has a few issues. I hadn’t looked at it for a while, but recently managed to run my WebUI game in a modern browser with no problems. And maybe there will be a solution for the issue of not being able to test offline…