Is there a way to host a webpage with a TADS game, and include a custom style sheet? I’d prefer to just link to the Parchment webapp, and not copy-paste its code, just in case there are future updates which implement more HTML TADS 3 features.
4 Likes
Do you mean stay on iplayif.com but allow for custom CSS? That has been an idea for a long time, but it hasn’t ever had much interest:
I’m also not sure of the security implications of loading arbitrary CSS. A decade ago it would’ve been fine but now it feels likely that there’d be some way to make CSS also load some JS. I’m not sure it would be safe to allow it.
Edit: actually it looks like JS isn’t much of a concern now, but privacy still is. Loading someone else’s CSS file would let them see who is opening the link on iplayif.com.
I could perhaps make it possible to specify just some of the CSS variables in the URL? Would that be worthwhile?
4 Likes
It might also be possible to host your own parchment.html and hotlink the files and then add your own CSS. I think it should work to hotlink them.
These are the CSS variables you can change:
4 Likes
Yeah, the intent was to create my own HTML and just pull functionality from an online repo for Parchment, so that when you update Parchment, the updates appear on my HTML as well.
Otherwise it will just be a repeating cycle of
- Check Danii’s repo
- Copy-paste code
- Edit CSS
- Push HTML to my platform
I can’t remember off the top of my head how to do this in HTML or JavaScript, but the C-like logic would be:
#include <HTML_from_Parchment_repo>
#include <JavaScript_from_Parchment_repo>
defineCustomCSS();
loadStoryFile();
beginStory();
2 Likes
I think you can just take this HTML and then add your own CSS after web.css is loaded.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Parchment</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<script src="https://iplayif.com/dist/web/jquery.min.js"></script>
<script src="https://iplayif.com/dist/web/ie.js" nomodule></script>
<script src="https://iplayif.com/dist/web/main.js" type="module"></script>
<link rel="stylesheet" href="https://iplayif.com/dist/web/web.css">
</head>
<body>
<div id="gameport">
<div id="about">
<h1>Parchment</h1>
<p>is an interpreter for Interactive Fiction. <a href="https://github.com/curiousdannii/parchment">Find out more.</a></p>
<p>Find stories to play at the <a href="https://ifdb.org/">Interactive Fiction Database</a>.</p>
<p id="play-url">
<input id="play-url-input" placeholder="Enter a URL of a story file" type="url">
<button id="play-url-button">Go</button>
</p>
<p id="play-url-error"></p>
<label id="custom-file-upload" for="file-upload" tabindex="0" role="button">
<p>Or, click here to play a story file on your device</p>
</label>
<input id="file-upload" type="file" style="display: none"/>
<noscript><p>Parchment requires Javascript. Please enable it in your browser.</p></noscript>
</div>
<div id="windowport"></div>
<div id="loadingpane" style="display:none;">
<img src="https://iplayif.com/dist/web/waiting.gif" alt="LOADING"><br>
<em> Loading...</em>
</div>
<div id="errorpane" style="display:none;"><div id="errorcontent">...</div></div>
</div>
</body>
</html>
5 Likes
Perfect!! This is exactly what I was looking for! Thank you!!
3 Likes
I just added this line:
<script>parchment_options={lib_path:"https://iplayif.com/dist/web/"}</script>
I think I could make this unnecessary in the future, but for now it’s required.
4 Likes
I’ve updated Parchment so it shouldn’t need lib_path to be set. I’ve removed that line from the HTML above.
4 Likes
Okay, two more questions:
- How would I set the font to a sans serif one? I tried making some sneaky edits, and they didn’t stick.
-
I could probably poke at the source code for a bit to figure this one out, but is there a way to set the webpage to a specific game file, and not show the game selection screen?Figured this one out.
2 Likes
I took some time to figure this out. If you don’t post your solution, I’ll post mine, when I get to my computer.
1 Like
Specifically changing the fonts, you mean? Because I still haven’t figured that one out.
To change the font you should just need to set the --glkote-prop-family CSS variable in your CSS. You don’t need to edit the CSS files, just add your own CSS after parchment.css is loaded.
::root {
--glkote-prop-family: "Comic sans", sans-serif;
}
Now I have spent a lot of time getting the fonts to play nicely, so the CSS is carefully calibrated for the small set of fonts I tested. But that mostly concerns getting background colours to display nicely (for ASCII block diagrams etc). If you’re not using background colours (I don’t think you even can in TADS yet) then there shouldn’t be an issue to change to a different font.
To specify a story, just add this JS:
parchment_options = {
story: 'URL',
}
2 Likes
Yeah, I’m mostly trying to use sans fonts instead of serif fonts. Next time I’m at the computer, I’ll try setting that property.
Also, ahahaha, setting the story file that way is a lot easier than the absolute nightmare hack I cobbled together the other day. I injected a path to the story file on IFArchive into the URL as a search parameter, before the Parchment code initialized.
1 Like
You can change bkgdcolors in TADS with HTML tags… I use it for an effect in my game (giving the player the option to turn it back off)
1 Like
This is giving me a CORS error. I have the parchment and .t3 file in the same folder. I don’t mind to continuously select the file, but shortcuts are nice!
Deborah
1 Like
Are you running it from a webserver, or from a local file: URL?
Either way, the site generator is probably the best solution now:
2 Likes