intfiction.org

The Interactive Fiction Community Forum
It is currently Fri May 24, 2013 5:47 am

All times are UTC - 6 hours [ DST ]




Post new topic Reply to topic  [ 7 posts ] 
Author Message
 Post subject: Web UI Coding
PostPosted: Fri May 25, 2012 5:42 pm 
Offline

Joined: Sun Mar 01, 2009 8:02 pm
Posts: 902
Please forgive my obtuseness. I thought I'd have a go at adding just a tiny bit of HTML to a TADS 3.1 game, and I'm having no luck at all getting it to work.

Let's suppose I want to have a particular phrase display in an unusual color or font -- never mind why. So I go over to the webuires folder and edit main.htm, adding this to the head:

Code:
<style>
.zowie {
   color: #c00000;
   font-size: 3em;
}
</style>

Windows cleverly won't let me save main.htm back to the default TADS program directory, because it's inside of Program Files (x86), but never mind that -- I save my edited file to the desktop and then drag it by hand back into webuires.

I then edit the room description of the starter game as follows:
Code:
"This large, formal entryway is slightly intimidating:
    the walls are lined with <span class=\"zowie\">somber portraits</span> of gray-haired
    men from decades past; a medieval suit of armor<<describeAxe>>
    towers over a single straight-backed wooden chair.  The
    front door leads back outside to the south.  A hallway leads
    north. "

This compiles, but the span tag does nothing. Now, quite possibly I'm making a dumb CSS error, but maybe not. The problem may be, instead, that I have to escape the quotation marks around the class= bit in order to get the game to compile, and that causes the web page not to recognize the class.

I'm pretty sure HTML tags can be used in game text, because if I substitute strong or em tags for the span tags, the result is displayed in the game. So the first question is, how do I get game text to recognize the class of a span tag?

The second question is, is there a way to create a stylesheet inside of the game code and post it to the main window (using Javascript, for instance), or do I have to edit the main.htm file directly?

Thanks for any tips!


Top
 Profile Send private message  
 
 Post subject: Re: Web UI Coding
PostPosted: Fri May 25, 2012 8:18 pm 
Offline

Joined: Tue Apr 27, 2010 1:02 pm
Posts: 797
Jim Aikin wrote:
I'm pretty sure HTML tags can be used in game text, because if I substitute strong or em tags for the span tags, the result is displayed in the game. So the first question is, how do I get game text to recognize the class of a span tag?


I haven't tested this, but I think you need to add your custom style to cmdwin.css - cmdwin.htm is the IFRAME where the main blocks of text are printed.

Jim Aikin wrote:
The second question is, is there a way to create a stylesheet inside of the game code and post it to the main window (using Javascript, for instance), or do I have to edit the main.htm file directly?


I recommend keeping your custom styles in a separate .css file that gets added as a resource in the .t3 file, and pulled in by the cmdwin.htm header. (Ditto with custom JS.) The reason is that if you need to tweak / fix those files post-release, you can do it without changing the VM image; otherwise you have to recompile the game and will break any save files.

If the styles need to be generated at runtime, I suggest just outputting style tags directly. You can make this more palatable with a T3 function:

Code:
zowify(txt) {
    return '<span style="...">' + txt + '</span>';
}


Top
 Profile Send private message  
 
 Post subject: Re: Web UI Coding
PostPosted: Fri May 25, 2012 9:24 pm 
Offline

Joined: Sun Mar 01, 2009 8:02 pm
Posts: 902
Thanks! Adding the style to cmdwin.css works perfectly. I was also able to add an onclick handler for the span, and it works.

At this stage, what I'm accomplishing is quite trivial, but ya gotta start with baby steps.

I also uninstalled Workbench and reinstalled it to the root of the C: drive. This lets me edit the .css and .js files directly in Workbench and save them again, without Windows getting all weird and refusing to save.


Top
 Profile Send private message  
 
 Post subject: Re: Web UI Coding
PostPosted: Fri Jan 18, 2013 12:41 pm 
Offline

Joined: Sun Jan 13, 2013 5:32 pm
Posts: 18
Jim, sorry to resurrect this old thread, but I've been trying to do much the same thing, specifically to create a new CSS/JS file as a t3 file resource (as part of my game's source code) and then include it in the Web deployment.

I'd rather not modify anything from webuires, since it will then apply to everything I compile obviously - I'd rather keep modifications neatly encapsulated in the t3 file.

There doesn't seem to be much documentation about doing this that I can find. I can continue to hack on this but if you have an example of how to do it, I'd appreciate it.


Top
 Profile Send private message  
 
 Post subject: Re: Web UI Coding
PostPosted: Fri Jan 18, 2013 2:01 pm 
Offline

Joined: Sat Jul 16, 2011 3:48 pm
Posts: 55
Well, I have a "webuires" folder created in my game folder beside source code files and makefile. In this folder I have modified copies of those original webuires files I needed to modify and in the makefile I just have line saying "resource: webuires". I think that important is, that this line is in the makefile after "-lib webui". And it overshadows those original files with my customized version just for this project.


Top
 Profile Send private message  
 
 Post subject: Re: Web UI Coding
PostPosted: Fri Jan 18, 2013 4:40 pm 
Offline

Joined: Sun Jan 13, 2013 5:32 pm
Posts: 18
Hmm. I can't get this to compile for TADS3: if I try this makefile:

Code:
-D LANGUAGE=en_us
-D MESSAGESTYLE=neu
-D TADS_INCLUDE_NET
-Fy obj -Fo obj
-o myGame.t3
-lib system
-lib adv3/adv3web
-lib webui
resource: webuires
-source tadsnet
-source rooms
-source myGame

I get an error looking for a .t file basically:

Code:
unable to open source file "resource:.t"

Or, if I drop the space between resource:webuires:

Code:
unable to open source file "resource:webuires.t"

I tried a few other combinations but with no luck. I googled a bunch for tads makefile resources, but came up dry.


Top
 Profile Send private message  
 
 Post subject: Re: Web UI Coding
PostPosted: Fri Jan 18, 2013 6:27 pm 
Offline

Joined: Sat Jul 16, 2011 3:48 pm
Posts: 55
falmon wrote:
Hmm. I can't get this to compile for TADS3: if I try this makefile:


Sorry, please try the following:

Code:
-D LANGUAGE=en_us
-D MESSAGESTYLE=neu
-D TADS_INCLUDE_NET
-Fy obj -Fo obj
-o myGame.t3
-lib system
-lib adv3/adv3web
-lib webui
-source tadsnet
-source rooms
-source myGame
-res webuires


I was quite rash, the code I've suggested earlier is actually taken from library definition file, which has a little different syntax.


Top
 Profile Send private message  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 7 posts ] 

All times are UTC - 6 hours [ DST ]


Who is online

Users browsing this forum: Google [Bot] and 0 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB® Forum Software © phpBB Group