I’ve not worked very much with TADS3 myself, but I was doing some investigation on how powerfull the WebUI is.
Reason being, I’d (maybe) like to use TADS as an parser/story-engine behind/together with a javascript game-engine, eg. Phaser to create an AGI/SCI-like game.
To trigger javascript from within my TADS game I can simply add “” where I want to call it. (And making sure to add the java-code to one of the WebUI html files)
Now the tricky part, from looking at how the command-line is handled, I understand in order to call TADS from within JavaScript is to send an serverRequest(vpath, …) [Method provided by WebUI] and on the TADS side implement a WebResource with corresponding vpath that implements processRequest(…).
Is that correct? And out of curiosity, are there any other solutions?
Since no one replied, I’ll try. Yes, I think you are basically right. You can trigger javascript function by sending script tag, you just need to make sure the script won’t be escaped on the browser side. But that should be ok, since TADS is HTML capable.
If I read it correctly he made a filter, which transforms sound tags (which game programmer inserts) in the output into special events which are send directly to the hidden frame dedicated for playing sounds which stands beside transcript window. That way it seems more systematic approach since he can send structured variable with command and all other informations needed directly without outputting javascript tag in the browser.
You can also look for inspiration to RealtimeDaemon class, since realtime functionality works on web UI too thus game can send events not only in a reaction to player input, but at any time.
And yes, you can send requests from the browser to the game using virtual paths you implement. Everything should work, resources such as images, html layout, javascript files and so on are served this way in the backround whenever browser requests them. Look into the TADS library source codes for inspiration. Although command processing is a little bit complicated (it’s an exchange of multiple events - close command line, print text several times, restore new command line), any additional requests on virtual path should work in parallel.
No one probably tried something like you suggested, but I think that TADS is generally quite powerfull and open enough to allow for such experimentation.
Yes, it’s basically as you said: serverRequest on the client,
WebResource on the server. If you want to add your own window to the
TADS UI - that’s possible too: just use a WebWindow instance instead
of WebResource and your window will be added as another iframe (once
you add it to webMainWin).
If you are familiar with any of the popular web frameworks (rails,
django, etc.), TADS is not much different when it comes to webapp
programming.
The only difference is that with TADS you have to launch a process for
every user, as it’s all about state, whereas your typical webapp is
usually stateless, which means it can use one instance to serve
multiple users by persisting user-specific data in a DB.
This approach has its pros and cons, but it never ceases to amaze how
well though-out (and implemented) TADS and its webui are. It’s a work
of genius, really.
I’m sure you’re right. I have boundless respect for Mike’s vision and implementation. I do recall, though, that when the WebUI was first released, there was almost nothing in the way of documentation on how to use it. As I’m not a real programmer, only a hobbyist, I found the lack of tutorial and reference material rather a tall roadblock. Has that situation changed in the past year or so?
Hmm I think this is a two-folded issue, as there are two sides to this:
On one side there is the HTML/Javascript part and all that can be hooked into this, like controlling Flash or a HTML5-Canvas with JavaScript, .
Basically everthing that has to do with Web developing. This topic is virtually too big to cover in its entirety.
What might be usefull as a good starting point though, would be a small tutorial on how Javascript can be used to add cool effects to your game.
I think the major problem here is that people that don’t know much about Javascript currently have to first learn Javascript and then also understand (all by themself) how it could be used in connection with interactive-fiction/tads.
(For someone without “a coding background” I think the last one is the most difficult)
On the other side there is the way how tads client communicates with the server (in laymens terms, how the web-gui talks to the server that runs your game).
I’d say that the documentation for this part (while it exist to some extend) might be improved upon.
To be more specific, an in depth explanation, maybe using the command-line as example, on how the communication between the web-gui und the server is handled would be quit useful.
Most of what I learning about it, was browsing through the source-code.
(And I’m still not 100% sure I got it. )
Documentation useful for web-ui and related information: tads.org/t3doc/doc/sysman/webui.htm tads.org/t3doc/doc/libref/ob … ource.html bitbucket.org/bcressey/t3ext/ (Look at websound extension, specially websound.t and sound.js)
<TADS 3>/lib/webuires/cmdwin.js & <TADS 3>/lib/webuires/main.js (Similar to sound.js)
<TADS 3>/lib/webui.t (Description of WebResource, WebResourceFile and WebWindow)
[I remember another resource, but can’t find it anymore…]
function myStuffInit() {
utilInit();
// YOUR INIT CODE HERE
getInitState();
}
function onGameEvent(req, resp) {
// Process game event
}
function onGameState(req, resp) {
// Process game state
}
then by invoking “myWindow.sendWinEvent(‘TEXT’);” (TADS code / server) you trigger “onGameEvent(‘myStuff.html’, ‘TEXT’)” (Javascript code / client).
To make passing multiple values easier, use xml-syntax for ‘TEXT’ and decode (on javascript side) using xmlHasChild(resp, “TAG”) and xmlChild(resp, “TAG”).
Open question/confusion: What/How is onGameState(…) triggered?
EDIT: Nevermind this one seems to get called when the window is created or refreshed, which should result in something like onGameState(“getState?window=myWindow”, myWindow.getState(client)).
PS: All of the above is just from reading the source-code, so no guarantee.
The original series of blog posts on LJ about webui is a very
interesting read (as an intro). The system manual has a chapter on
webui which helps to get started. The source code is extremely
helpful; it is clear and has lots of good comments.
)