More (or Less) about the WebUI

The demo from Otto73 (the link is in a thread a little further down in the forum) convinced me to have a try at compiling for the WebUI. I attempted to follow faithfully the instructions in the doc. I’m using adv3Lite and Workbench (the most recent versions of everything, I’m pretty sure).

My experience was not good.

After editing the .t3m as instructed, in Notepad++ while Workbench was not open, I launched Workbench and did a full recompile for debugging. All appeared to go well until I typed a command in HTML TADS. (The command was a gonear – that probably isn’t significant, but it might be.) At that point, HTML TADS crashed.

It now crashes consistently when attempting to load that game file. I get a few error message boxes. They look like this:

error_1

Not being able to work in HTML TADS while developing the game would make life difficult. But there’s more.

I next used Workbench to do a Build Web Page Package. This produced a set of files, including a .t3 and an index.htm. But index.htm turns out to be just a stub of an ifdb listing page. It’s not a file that can run the .t3. Nor is there a .css file that can be edited to alter the appearance of the game.

It appears the virtual server is some other piece of software that I don’t have. So where is it? What is it? How can I check what my game looks like when played in a browser, when Workbench doesn’t create anything that will run the game in a browser? I’m mystified.

Comparing this workflow experience to Twine is revealing. In Twine, when you press the Play button, your default browser opens up with the game already running. (Well, Twine doesn’t actually produce games, it produces stories, though Twine users call them games. But that’s a rant for another time.)

I’d love to be able to use T3 to produce a game that will play in a web browser. And I’m not a dummy – I can even write simple javascript if I need to. But at minimum, I would need a set of clear instructions on how to write my T3 code, coupled with a compiler that produced a browser-ready set of files (including a .css file, obviously).

This is probably sounding like a rant, but it isn’t. It’s a plaintive cry of distress. Am I to be forced to resort to I7 with Vorple? I hope not, but it’s looking rather likely at the moment.

2 Likes

@Otto73’s otherwise excellent manual does not provide enough information on converting your project to a WebUI project. Take a look at the TADS documentation. Among other things, you must switch from adv3 to adv3web and I suspect that that is the problem.

For your reference, here is the pertinent passage from the documentation:

To port an existing game based on the traditional console user interface (including HTML TADS games), the first step is to switch to the Web UI libraries. This requires a few changes to your project’s .t3m file.

Attention Workbench users on Windows: It’s possible to make the necessary changes using Workbench, but the procedure is actually a bit easier if you edit the .t3m file manually, so the explanation below assumes you’re going that route. Close Workbench before proceeding, and use a different editor, such as Notepad. Don’t attempt to edit the .t3m file using Workbench or while it’s open in Workbench, since Workbench will overwrite any changes you make as long as Workbench has it open.

Here’s the procedure to update your .t3m file to use the Web UI:

  • Open your project’s .t3m file in a non-Workbench editor (e.g., Notepad on Windows)
  • At the start of the file (after any comments, but before the first source file is listed), add -D TADS_INCLUDE_NET
  • Change the line -lib adv3/adv3 to -lib adv3/adv3web
  • Add the following lines immediately after the -lib adv3/adv3web line we just updated (but after any -x lines that happen to follow it):
    • -lib webui
    • -source tadsnet

As for CSS files, as soon as you’ve converted your project you’ll find an automatically included folder that contains a bunch of CSS and HTML files. You can edit these directly (but your edits would apply to all future TADS web project) or create your own files in a custom webuires folder to override the provided CSS.

1 Like

That’s definitely not the problem. As I noted (or thought I did – maybe I was vague) in my original post, I edited the .t3m file precisely as instructed in that passage.

I created a folder called web directly in Documents as a destination for the web release package. That folder now contains: a zip file that contains only the _rls.t3 file; index.htm (which is the dummy ifdb page); porticon.gif; and storyweb.css. There’s nothing that can actually run the game in a Web browser.

This is a different folder from the one where the project itself lives. The project folder also contains a folder called web – but that’s empty. Nothing there at all.

Thought I found the problem there, but I didn’t. Sorry! Maybe you could use the workbench to create a new web project, then put your *.t files in there. That procedure should do all the work for you, and it should work. I actually followed the WebUI instructions some days ago and it worked well for me.

You cannot open the TADS WebUI generated files directly in a web browser. The generated files may need to be in a web server environment. I prefer to use linux with Apache installed. The file package would then need to be in the “server” web directory /var/www/html/

Place the files within that folder either directly or within a sub folder /var/www/html/mystory

Then, open a browser and navigate the browser to localhost. If there is an index.html file in the root directory it will automatically open that file. If not you will have a selection of folders to select from.

The web server virtual environment can also be installed on your local Windows computer but it is more cumbersome than installing on linux.

This may be a solution is has not already been tried. Sorry if it is too fundamental.

fos1

PS. TADS is my preferred development system. I have placed it on the back burner due to fiddly publishing issues and lack of current development. Unfortunately, I don’t have the programming skills to help develop a solution. :frowning:

I installed a localhost this morning in order to run a Vorple Inform test game. That works, so I know the localhost is okay. I copied the stuff created by Workbench (as listed above) to a subfolder in the localhost’s html folder – but when I navigate to that index.htm file in that location, it’s STILL just an ifdb stub page, not something that can run the game. So what am I doing wrong?

I just completed a very simple game after selecting the adv3lite WebUI with the new project workbench IDE.

I compiled all. When I go to the webui package, it opens to an IFDB type page. When I select the download option from there, and then unzip, it opens the game in an HTML Tads Interpreter.

Beyond that, I can’t help at this point. It has been a couple of years… I will continue to work with options. Maybe someone else can provide further guidance more quickly.

Jeff

As far as I know, not having written any HTML Tads, the writing of the T3 code only has minor differences with WebUI, if you’re using workbench. But you still need an interpreter to run the game, even if it’s WebUI - is that the part that wasn’t clear? I don’t think the ‘Build Web Page Package’ is the option you want. There are basically three ways I’ve found to run a WebUI game, in increasing order of complexity:

  1. ‘Compile and Run’ on a WebUI game in Workbench creates a local browser window of sorts, in which the WebUI game runs. Apparently, TADS somehow creates a local server and uses IE for the browser window, although it’s not regular IE but some native Windows version (I have no idea how that works). This is somewhat problematic for a couple of reasons, firstly, there’s no DevTools, which makes editing the HTML/CSS/JS cumbersome. And secondly, it keeps crashing. I’m not sure about converting from HTML TADS to WebUI, as I just went straight to WebUI, but it should work - kind of. I’d assumed that the crashing problem was however Workbench runs the game not really being compatible with modern Windows. Maybe it doesn’t like WebUI? I’m not sure how stable it is with HMTL TADS. Anyway, it should be possible to run a converted game at a pinch, but it will be very unstable. It works sometimes, crashes sometimes - there seems to be no rhyme or reason, or at least, it’s beyond me. As far as I can tell, getting Workbench to open a WebUI game locally in say, Chrome or Firefox would be very, very difficult. Which is a shame.

  2. The ‘compile for release’ option creates a .t3 file for WebUI (I guess this is the same as for HTML TADS?). All of the ‘web’ stuff (the html, css and js files) is bundled together in that file - so you don’t need to do anything with webpages outside of the Workbench IDE. If you can put that .t3 file up anywhere on the web, then you don’t need to worry about setting up an interpreter on a server, because someone has kindly done all that stuff and made it available. You can just use the address ‘http://gs.tads.io/?storyfile=XXXX’, with XXXX being the address where the .t3 game file is hosted (e.g. http://mywebsite/games/mygame.t3). I use Awardspace, because it’s free and it seems to work most of the time, although being free, it’s also somewhat slow if you have any major graphics. This is very stable for me (I can’t remember it crashing at all), and gives the advantage of being able to open the game in a modern browser and use DevTools.

  3. Set up a LAMP stack, install Frobtads, fetch the gamefile - there are so many steps there (including needing to know a little Linux and SQL) that I won’t go into detail. I do have it written down step by step somewhere, and I will add something to the guide if I have time. It’s fairly easy to get a small virtual server going on AWS.

Hope some of that helps! As far as workflow is concerned though, it’s not ideal - if I want to debug the actual TADS code, I do it locally as I’d be lost without the Workbench debugger, but to check whether my html/css/js is ok in a modern broswer, I need to upload it and run it through the ‘http://gs.tads.io/?storyfile=XXXX’ address.

2 Likes

Here’s an example of a game I wrote with WebUI, running through gs.tads.io:

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

2 Likes

That may be the key piece of the puzzle. I’ll give it a try. Thanks!

1 Like

Exactly. I have now verified that it works! Break out the champagne! The appearance is still bog-standard, and I have no idea how to add styles, but even if that proves awkward, IFComp judges can still play the silly thing in their browser, and that’s what matters.

As long as I’m careful not to use any coding that conflicts with standard html, I should be able to write the whole game in standard adv3Lite and then port it over after it’s tested and debugged.

2 Likes

Obviously I’m a little late to the party, but for what it’s worth, you can get the address of the local server the TADS workbench (or interpreter) starts when you debug or run a WebUI game. I’ve been using this code in my game to get it, which I can then have the game output, and I can then copy it into a real browser.

local url = webSession.getCollabUrl();
local urlLength = url.find('=');
url = url.substr(1, urlLength) + webSession.sessionKey;

You should get something like this as your url:
http://localhost:62479/?TADS_session=d2d8d50e-0f9c-77d7-3f36cc5a16c4-1bb7

It seems to work ok in Chrome, although it has been crashing in Firefox.

1 Like