-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
195 lines (168 loc) · 9.08 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horse & Halberd, a Talefabric Demo</title>
<link rel="stylesheet" href="https://bootswatch.com/5/litera/bootstrap.min.css"/>
<link rel="stylesheet" href="./assets/css/style.scss" />
<style>
.dark-mode {
background-color: #22181C!important;
color: #F6EEDF;
}
</style>
</head>
<body>
<!-- navigation -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Talefabric demo <span class="author">by Jesse Lawson</span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav m-3 mt-lg-0">
<li class="nav-item">
<a class="nav-link" onclick="toggleAdventureJournal()">Adventure Journal</a>
</li>
<li class="nav-item">
<a class="nav-link" onclick="toggleSettings()">⚙️ Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" onclick="toggleNightMode()">Toggle night mode</a>
</li>
<li class="nav-item">
<a class="nav-link" onclick="toggleHowToPlay()">How to play</a>
</li>
<li class="nav-item">
<a class="nav-link" onclick="toggleAbout()">About</a>
</li>
</ul>
</div>
</nav>
<main id="container" role="main" class="container">
</main>
<div id="dicebox-container" class="dicebox-container">
<div class="die-container overlay">
<div id="die" class="die">
<figure class="face face-1"></figure>
<figure class="face face-2"></figure>
<figure class="face face-3"></figure>
<figure class="face face-4"></figure>
<figure class="face face-5"></figure>
<figure class="face face-6"></figure>
<figure class="face face-7"></figure>
<figure class="face face-8"></figure>
<figure class="face face-9"></figure>
<figure class="face face-10"></figure>
<figure class="face face-11"></figure>
<figure class="face face-12"></figure>
<figure class="face face-13"></figure>
<figure class="face face-14"></figure>
<figure class="face face-15"></figure>
<figure class="face face-16"></figure>
<figure class="face face-17"></figure>
<figure class="face face-18"></figure>
<figure class="face face-19"></figure>
<figure class="face face-20"></figure>
</div>
</div>
</div>
<!-- About Modal -->
<div class="modal fade" id="AboutModal" tabindex="-1" aria-labelledby="AboutModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-4" id="AboutModalLabel">About</h1>
<button type="button" class="btn-close" onclick="AboutModal.toggle()" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Talefabric is a prototype game engine for mobile-ready Choose Your Own Adventure (CYOA) games with d20 support. This is a demo.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="AboutModal.toggle()" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- How to Play Modal -->
<div class="modal fade" id="HowToPlayModal" tabindex="-1" aria-labelledby="HowToPlayModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-4" id="HowToPlayModalLabel">How to play</h1>
<button type="button" class="btn-close" onclick="HowToPlayModal.toggle()" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>This is an <b>interactive fiction</b> game. In interactive fiction, you (the player) are given text to read and then provided with a list of <b>choices</b> to select from.</p>
<p>To play, read the text just like you would a normal story. At the end of the text, carefully decide which choice to make. <i>The story (and your experience as a player) will change based on the choices you make.</i></p>
<p>To make a choice, tap it and then tap the <b>confirm</b> button.</p>
<p>Once you've confirmed your choice, the game will respond by dynamically creating the next text based on all your previous choices.</p>
</div>
<p>The </p>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="HowToPlayModal.toggle()" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Settings Modal -->
<div class="modal fade" id="SettingsModal" tabindex="-1" aria-labelledby="SettingsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-4" id="SettingsModalLabel">How to play</h1>
<button type="button" class="btn-close" onclick="SettingsModal.toggle()" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>This is an <b>interactive fiction</b> game. In interactive fiction, you (the player) are given text to read and then provided with a list of <b>choices</b> to select from.</p>
<p>To play, read the text just like you would a normal story. At the end of the text, carefully decide which choice to make. <i>The story (and your experience as a player) will change based on the choices you make.</i></p>
<p>To make a choice, tap it and then tap the <b>confirm</b> button.</p>
<p>Once you've confirmed your choice, the game will respond by dynamically creating the next text based on all your previous choices.</p>
</div>
<p>The </p>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="SettingsModal.toggle()" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<footer class="footer">
<p class="footer-text">You're playing <b>Horse & Halberd</b> by Jesse Lawson.<br>Copyright © 2023 <a href="https://jessesgames.com">Jesse's Games</a>. All Rights Reserved.</p>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script type="module" src="app.ts"></script>
<script>
function toggleNightMode() {
var element = document.body;
element.classList.toggle("dark-mode");
document.querySelectorAll(".phb-container").forEach(c => {
c.classList.toggle('dark-mode')
})
document.querySelectorAll(".dialogue-box").forEach(c => {
c.classList.toggle('dark-mode')
})
document.querySelectorAll(".dialogue-speaker-text").forEach(c => {
c.classList.toggle('dark-mode')
})
document.querySelectorAll(".handwriting").forEach(c => {
c.classList.toggle('dark-mode')
})
}
// Build the modals
const AboutModal = new bootstrap.Modal(document.getElementById('AboutModal'), {});
const SettingsModal = new bootstrap.Modal(document.getElementById('SettingsModal'), {});
const HowToPlayModal = new bootstrap.Modal(document.getElementById('HowToPlayModal'), {});
const AdventureJournalModal = new bootstrap.Modal(document.getElementById('AdventureJournalModal'), {});
function toggleAbout() {AboutModal.toggle();}
function toggleAdventureJournal() {AdventureJournalModal.toggle()}
function toggleHowToPlay() {HowToPlayModal.toggle()}
function toggleSettings() {SettingsModal.toggle()}
</script>
</body>
</html>