mirror of
https://github.com/Oreolek/gamebookformat.git
synced 2024-06-26 03:41:04 +03:00
141 lines
5 KiB
HTML
141 lines
5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>Format</title>
|
|
<script type="text/javascript" src="gamebookformatplay.js"></script>
|
|
<link rel="stylesheet" href="gamebookformat.css"
|
|
type="text/css" />
|
|
<script>
|
|
if (typeof gamebook !== 'undefined') {
|
|
gamebook.id = 'format2';
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="hideintrolink nodisplay"
|
|
onclick="gamebook.hideIntroSections()">HIDE THE INTRO</div>
|
|
<div class="gamebook">
|
|
<div class="introsection">
|
|
<div class="introsectionheading">Introduction</div>
|
|
<div class="introsectionbody">
|
|
Adding an introduction to the gamebook here. This will create a section, but it will not be shuffled nor numbered with the gamebook sections below.
|
|
</div>
|
|
</div>
|
|
<div class="introsection">
|
|
<div class="introsectionheading">Another Heading</div>
|
|
<div class="introsectionbody">
|
|
This starts another non-shuffled section. (A footnote in Another Heading.)
|
|
|
|
</div>
|
|
</div>
|
|
<div class="resumelink nodisplay"
|
|
onclick="gamebook.loadGame()">Resume saved game.</div>
|
|
|
|
<div class="startlink"
|
|
onclick="gamebook.turnTo(1)">Adventure begins in section 1.</div>
|
|
<script>
|
|
if (typeof gamebook !== 'undefined' && gamebook.hasSavedGame()) {
|
|
var resumeLinks = document.getElementsByClassName('resumelink');
|
|
Array.prototype.forEach.call(resumeLinks, function(e) {
|
|
e.classList.remove('nodisplay');
|
|
});
|
|
}
|
|
</script>
|
|
<div class="section" id="section1">
|
|
<div class="sectionnumber" id="para1">1</div>
|
|
<div class="sectiontext">
|
|
This examples tests gamebook formatting, not so much game mechanics or references. Currently there is nothing here really. This section contains some tricky characters to quote, like } and { and " and ' and \. HTML will probably not like <div> or &boom;. You can make named references <a class="sectionref enabledlink" data-ref="6"
|
|
href="#section6">like this</a> (just happens to be exactly the same syntax as in emacs org-mode btw). This book also includes a <a class="sectionref enabledlink" data-ref="4"
|
|
href="#section4">format-specific section</a>. There should be an image below as well. If something broke, turn to <a class="sectionref enabledlink" data-ref="2"
|
|
href="#section2">2</a>, otherwise turn to <a class="sectionref enabledlink" data-ref="3"
|
|
href="#section3">3</a>. (Good footnote.)
|
|
<img src="testimage.png" class="sectionimage"></img>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
if (typeof gamebook !== 'undefined') {
|
|
gamebook.addSection(1, document.getElementById('section1'));
|
|
}
|
|
</script><div class="section" id="section2">
|
|
<div class="sectionnumber" id="para2">2</div>
|
|
<div class="sectiontext">
|
|
Bad.
|
|
</div>
|
|
</div>
|
|
<script>
|
|
if (typeof gamebook !== 'undefined') {
|
|
gamebook.addSection(2, document.getElementById('section2'));
|
|
}
|
|
</script><div class="section" id="section3">
|
|
<div class="sectionnumber" id="para3">3</div>
|
|
<div class="sectiontext">
|
|
Good!
|
|
</div>
|
|
</div>
|
|
<script>
|
|
if (typeof gamebook !== 'undefined') {
|
|
gamebook.addSection(3, document.getElementById('section3'));
|
|
}
|
|
</script><div class="section" id="section4">
|
|
<div class="sectionnumber" id="para4">4</div>
|
|
<div class="sectiontext">
|
|
This is the format-specific HTML section. Now you <a class="sectionref enabledlink" data-ref="3"
|
|
href="#section3">win</a>.
|
|
</div>
|
|
</div>
|
|
<script>
|
|
if (typeof gamebook !== 'undefined') {
|
|
gamebook.addSection(4, document.getElementById('section4'));
|
|
}
|
|
</script><div class="section" id="section5">
|
|
<div class="sectionnumber" id="para5">5</div>
|
|
<div class="sectiontext">
|
|
Very good. <a class="sectionref enabledlink" data-ref="3"
|
|
href="#section3">You win</a>. (Win footnote.)
|
|
|
|
</div>
|
|
</div>
|
|
<script>
|
|
if (typeof gamebook !== 'undefined') {
|
|
gamebook.addSection(5, document.getElementById('section5'));
|
|
}
|
|
</script><div class="section" id="section6">
|
|
<div class="sectionnumber" id="para6">6</div>
|
|
<div class="sectiontext">
|
|
This is where you should end up when you follow the named reference from the starting section. From here you can go to <a class="sectionref enabledlink" data-ref="5"
|
|
href="#section5">the second named section</a> or to the <a class="sectionref enabledlink" data-ref="3"
|
|
href="#section3">good end</a>.
|
|
</div>
|
|
</div>
|
|
<script>
|
|
if (typeof gamebook !== 'undefined') {
|
|
gamebook.addSection(6, document.getElementById('section6'));
|
|
}
|
|
</script> <div id="counters" class="counters">
|
|
</div>
|
|
<div id="counterTemplate" class="counterTemplate">
|
|
<span class="counterheading"></span>
|
|
<span class="countercontents"></span>
|
|
</div>
|
|
</div>
|
|
<div id="collections" class="collections">
|
|
</div>
|
|
<div id="collectionTemplate" class="collectionTemplate">
|
|
<span class="collectionheading"></span>
|
|
<span class="collectioncontents"></span>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
if (typeof gamebook !== 'undefined') {
|
|
gamebook.prepare();
|
|
}
|
|
</script>
|
|
<div class="displayintrolink nodisplay"
|
|
onclick="gamebook.showIntroSections()">SHOW THE INTRO</div>
|
|
</div>
|
|
</body>
|
|
</html>
|