-
Notifications
You must be signed in to change notification settings - Fork 12
How to do Formatting
So, you want to make a script page. For script pages, we follow specific formatting. The easiest thing to do is of course to compare to an existing page, preferably a new one.
Here's an introduction on how to format like a pro!
The general page layout can be easily created by copying the 1template.html file into a new file. Don't forget to change the (displaytitle) at the top of the page to match the page's formal title. The text inbetween the <title> tags decides what text is displayed when somebody embeds a link to that page.
All other content of a page should go inbetween the <main> tags.
To start with, add the title to the top of the main section using a <h1> tag. This title should match whatever is set for the display title. Underneath that, give a short explanation of the page's contents. "All text relating to x room/event/story scene." is usually enough. Additionally, list which sources from the game
If this is a story or event page that compiles sections of different pages, make a list showing which pages it draws from with links to those pages. An example would be the Miraquest page under public/acts/act3-4/miraquest.html
The start of a page might look something like this:
<h1>Miraquest</h1>
<small>Text compiled by: (user)</small>
<p>All dialogue and text for Mirabelle's Friendquest.</p>
<p><b>Sources:</b> Map 021 (Miraquest), Map030 (Dormont), Map102 (MiraRoom), Common Event 167 (WhatToDo Act 3-4)</p>
<br>
<p>This page contains compiled sections from:</p>
<ul>
<li><a href="/rooms/loop/whattodoact34.html">Loop What To Do ACT 3 & 4</a></li>
<li><a href="/rooms/dormont/miratalk.html">Mirabelle Beginning Talk</a></li>
<li><a href="/rooms/floor3/miradorm.html">Mirabelle's Dorm Room</a></li>
</ul>
<hr>
<br>
Next, create an index. It's easiest to create an index after the fact - Lay out what sections you need in a page and create appropriate headings. In the case of story or event pages, headings are separated by scene, in room pages, headings are separated by interactable object.
Give every single heading a unique ID within the page itself, like so:
<h1 id="loop1">Loop Talk 1</h1>
Once all headings are completed, create an index by listing the headings in order of appearance and linking to them, like so:
<h1>Index</h1> <ul> <li><a href="#loop1">Loop Talk 1</a></li> <li><a href="#mira1">First Talk with Mirabelle</a></li> <li><a href="#loop2">Loop Talk 2</a></li> <li><a href="#miradorm">Mirabelle's Dorm Room</a></li> <li><a href="#loop3">Loop Talk 3</a></li> <li><a href="#mira2">Second Talk with Mirabelle</a></li> <li><a href="#main">Hanging out with Mirabelle</a> (Main Scene)</li> <li><a href="#loop4">Loop Talk 4</a></li> <li><a href="#skipped">Skipped Quest</a></li> </ul> <hr> <br>
As you may have noticed previously, all sections are separated by a horizontal line (<hr>) and a line break (<br>).
As for actual dialogue sections, it is perhaps best to demonstrate first.
<h1 id="loop1">Loop Talk 1</h1>
<p><b>Full page:</b> <a href="/rooms/loop/whattodoact34.html">Loop What To Do ACT 3 & 4</a></p>
<br>
<div class="dialogue">
<p class="dialogue-line">
(You need help on how to...) "...help everyone."
</p>
<br>
<p class="dialogue-line">
<span class="dialogue-head">
<span class="dialogue-name">Loop</span>
<span class="dialogue-expression">(hm1)</span>
</span>
Hm, well...
</p>
<p class="dialogue-line">
<span class="dialogue-head">
<span class="dialogue-name">Loop</span>
<span class="dialogue-expression">(happy3)</span>
</span>
Sounds like your Housemaiden wanted to talk to you, didn't she? You might as well talk to her this loop, before you forget.
</p>
</div>
<hr>
<br>
As you can see here, first is the heading (as should be obvious), followed by a link to the full page only in the case of compilation pages.
Each chunk of dialogue is wrapped inside a div with the class "dialogue", which creates the white border around it, and sets the font to VCR OSD MONO.
<div class="dialogue"> All dialogue goes here! </div>
Every individual line is in a p element with the class "dialogue line".
<p class="dialogue-line"> Dialogue here! </p>
If a line is just interal monologue, then that is all. If a line is spoken by a character, though...
Spoken dialogue follows the structure of head -> name -> expression. Expression may be omitted if not applicable. The name class bolds it, the expression class dims it, and makes it toggle-able.
<p class="dialogue-line">
<span class="dialogue-head">
<span class="dialogue-name">Loop</span>
<span class="dialogue-expression">(happy3)</span>
</span>
Sounds like your Housemaiden wanted to talk to you, didn't she? You might as well talk to her this loop, before you forget.
</p>
Expressions are taken from the actual json files of the game.