Place code into a <head> section of HTML game file

Twine 2.3.15
Harlowe 3.2.3

Hi, I am using Twine as a tool for a kind of treasure hunt outdoor game and I need to implement leafletjs map in it. The problem is that I need to write a code into section of the HTML file. I can do that manually and it works fine but every time I make a change in the Twine, the section is logically rewritten back. Is there any way how to put the code into the via Twine to prevent the rewriting problem?

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

Thanks!

1 Like

The Twine 2.x application has no feature for adding content to the <head> section of the HTML file it generates, so you would either need to:

  1. Use JavaScript within your project to inject the required content into that section at run-time.
  2. Manually edited the generated HTML files to add the content yourself.
  3. Convert your Twine application based project to a TWEE Notation based one, and use a TWEE complier that supports adding content to that section to generate your HTML files.
    see: TweeGo’s --module option.

re: Using JavaScript at run-time
While it is normally possible to inject elements into the <head> section there are two potential issues that make affect your ability to achieve the outcome you want:

  1. You would be trying to use a <meta> element to alter the settings of the “viewport” after the web-browser has already processed the <head> section, and this doesn’t work for some (all?) web-browsers.
  2. Harlowe has been deliberately designed by its Developer to restrict the Author’s ability to use JavaScript to extend the functionality of the story format.