Technologies in Thief 2 Walkthrough

Version 2.0 ©Alex Fung, June 2020.
Up-to-date version available at my Games page.

If you like this walkthrough, consider sending me a donation!

Many new technologies were used in the original Thief 2 Walkthrough. At that time, IE5 was the cutting edge in browser technologies. It was the best programming tool, and I adopted IE5 to develop all my web pages.

Other browsers subsequently took incompatible implemenation methods to achieve some of those features. Afterwards, web standards emerged. Although no browser ever strictly complies to the standards, it has become the proper way to write programs. As of today, there are still many things I can only do in IE but not elsewhere. However, the IE browser share has dropped to non-existent. So I made up my mind in year 2020 to completely rewrite the guide using new technologies.

This document talks about both the technologies used in the original guide and 2020 rewrite.


The original guide used XML extensively.

XML is eXtensible Markup Language. XSLT is eXtensible Stylesheet Language Transformations. XML is an organized way to structure information, and XSLT a declarative method to convert the XML to a presentation you need.

XML is vital in the Thief 2 walkthrough. All the missions are coded in XML. Then XSLT files translate them into the HTML that your browser displays. This avoids a lot of mistakes in the internal structure. This also makes the code cleaner (and easier to debug) and more consistent. Redunduncy is largely eliminated so it makes the walkthrough much more maintainable.

The use of XML turned out to be very useful during the rewrite. It is easy to make many fundamental changes to the HTML by modifying the XSL. It would have been very tendious if the guide had been directly written in HTML (like my Thief Gold guide).

In the original guide, all XSLT are processed by IE when you load the page. Unforunately, modern browsers (other than IE) are not capable of handling some standard XSL commands. In the rewritten guide, I pre-transformed the XML into HTML, and published the HTML output files instead of the original XML files. Your browser will retrieve the HTML directly from the web server without further processing. The preprocessing is tedious, but it is now coordinated by GulpJS.

A second use of XML is the generation of the Table of Contents (TOC). When the walkthrough is loaded, the initialisation code builds an XML structure of the key items. There are six different views of the TOC, all of which are generated from the same XML tree. When you display the TOC (see User Interface on how to show it), two XSLT process the XML data to generate the resulting information.

Again, since modern browsers cannot handle the necessary XSL commands, an alternative is needed. The XML data is now stored as a Javascipt table to be processed by the TOC page.

Dynamic HTML Behavior

Starting with IE 5.0, a new form of code encapsulation appeared: Dynamic HTML Behavior. Attached to any HTML tags, behaviors allow programming control of how the element operates. Basically it allows you to create new HTML tags with any properties and behaviours you need. It offers a neat way to write code, and avoid codes from interfering with each other.

Unforatunately, Dynamic HTML Behavior was never accepted into HTML standard. This is the most difficult part of the rewrite. I need to recode everything without the help of Dynamic HTML Behavior encapsulation.

Popup Windows

Popup is a new feature supported by IE5.5 and above. It is used to create tooltips and the context menu (when you right-click something). If you are running IE 5.0, dHTML will be used to create the tooltip.

Again, modern browsers do not support popup windows. So I need to fall back to the old way of using HTML to build the tooltip and context menu.

Dynamic HTML and Cascaded Style Sheets

Of course, the good old dHTML and CSS are still in use in much the same way as in my other game guides. And as you can expect, dHTML was not accepted as HTML standard (actually nothing pioneered by Microsoft was acceptd by the competitors for admitting into the standard). A lot of rewriting is about finding the equivalent command to use to achieve the same thing (or to learn that it is no longer possible to do).

New technologies during rewrite

  • All the new scripts are written in Typescript and transpiled into Javascript, or more properly called, Ecmascript.
  • XML files are pre-transformed into HTML.
  • Transpilation and transformation are managed by GulpJS.
  • JQuery and JQueryUI are used to improve cross browser support.
  • Polyfills are depoyed to improve cross browser support, because most browsers are still stuck with the ancient ES5 while the guide is basically written in ES2019 syntax.

New User Interface used in my Thief 2 walkthrough.

Back to the Complete-loot Walkthrough for Thief 2

Visit my home page.