I have managed to make the Squiffy text appear inside a squiffy box that I messed with to stick it in a different layout on the page, with some other panels in other areas and such.
However, doing so has somehow triggered all the links, like displaying all the content down the screen instead of waiting for me to click on anything.
Please help me figure out how to do this correctly!
I moved the script section to the bottom of the page because several websites says that's where scripts go to make things work faster. I didn't see any calls to JavaScript anything in the main body so it didn't seem like it was putting function definitions after they get used or anything, so I figured that was safe.
I stuck the restart button in its own header section, where I wanted it.
I've got sidebars and such for later use, and my header has a couple of variables I ought to be able to mess with as needed (change into the location and sublocation where the character is). The boxes are still causing my grief as far as trying to make them sit where I want them, but I figure the outline is decent enough to start working on the story again.
But why is it playing all the story at once, instead of working like Squiffy's supposed to work? I don't think I messed with the jquery file (because all that code made my eyes cross -- I'm not nearly at the stage where I could make heads or tails of it), and the story file is newly generated and I didn't mess with it either. So it's gotta be in my HTML or those little script sections I added... or something weird about the CSS file? I'm at a loss.
<!DOCTYPE html>
<html>
<!--
Created with Squiffy 3.0.1
https://github.com/textadventures/squiffy
-->
<head>
<title></title>
<META http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="ZeyoviCore.css">
<link rel="stylesheet" type="text/css" href="ZeyRainy.css" id="theme" title="rainy">
</head>
<body>
<header id="titles" class="titlebar">
<h1 id="theTitle" class="unfaded">Un-Speak-Able</h1>
<h2><span id="loc"></span></h2>
<h3><span id="subloc"></h3>
</header>
<header id="restart" class="titlebar">
<div id="squiffy-header">
<a class="squiffy-header-link" id="restart">Restart</a>
</div>
</header>
<footer id="credits" class="titlebar">
(c) Arkylie Killingstad (2015)
<br><br>
(link to additional credits)
</footer>
<aside class="sidebar">
<aside class="sidebar" id="leftpanel">
Mess with this later.
</aside>
<aside class="sidebar" id="rightpanel">
Mess with this later.
</aside>
</aside>
<div id="squiffy-container">
<div id="squiffy">
Does this disappear? I bet it does!
</div>
</div>
<script src="jquery.min.js"></script>
<script src="story.js"></script>
<script>
$(function(){
$('#squiffy').squiffy();
$('#restart').click(function () {
$('#squiffy').squiffy('restart');
});
});
</script>
<script>
/* Zeyovian Scripts */
var awe = "Awareness too low";
function newTheme(theme) {
document.getElementById('theme').setAttribute('href', theme);
}
function newLoc(loc) {
document.getElementById('loc').innerHTML=loc;
}
function newSubloc(loc) {
document.getElementById('subloc').innerHTML=loc;
}
function titleFadeout() {
/* CSS handles the transition and timing. */
var bg = getComputedStyle(document.body).getPropertyValue("background-color");
document.getElementById("theTitle").style.color = bg;
}
</script>
</body>
</html>
And here's the CSS sheet I'm working from. I looked over the squiffy stuff and it mostly seemed like text formatting so it seemed safe to mess with it.
body {
background-color: MintCream;
color: MidnightBlue;
/* Might want to increase space between letters for easier reading? */
font-size: 100%;
/* min-width: 800px;
max-width: 80%;
margin: 160px 240px 0px;
padding: 24px;
border: 2px solid; /* Just to figure out where the bloody box is. Will remove later. */
}
.titlebar {
/* These elements stay at the top of the screen. */
top: 0;
position: fixed;
max-height: 12%;
min-height: 80px;
border: 3px solid;
}
#titles {
/* This contains the location and sub-location, and starts with the title. */
max-width: 85%;
min-width: 320px;
padding: 8px 120px 16px;
margin: 0px 240px 0px;
}
#restart {
/* Contains the link to restart. */
right: 0;
min-width: 12%;
max-width: 240px;
padding: 8px;
}
#credits {
/* This shows credits and contact info, or at least a link to such (About). */
left: 0;
font-style: italic;
min-width: 12%;
max-width: 240px;
padding: 8px;
}
.sidebar {
position: fixed;
bottom: 0;
max-width: 240px;
min-width: 12%;
}
.optionsbar {
position: fixed;
bottom: 0;
max-width: 76%;
min-width: 40%;
/* min-width: 640px; */
}
#options {
/* The buttons go here -- choices and sub-menus. */
height: 120px;
border: 2px solid;
border-radius: 24px 24px 0px 0px;
padding: 24px;
}
button {
height: 32px;
width: 128px;
margin: 4px;
font-weight: bold;
border-radius: 7px;
}
#leftpanel {
/* This shows the emotional state. It contains a table or list,
and you disable elements that aren't active. */
min-width: 12%;
max-width: 160px;
height: 80%;
border: 3px solid;
border-radius: 0px 24px 24px 0px;
padding: 8px;
position: fixed;
left: 0;
bottom: 0;
}
#rightpanel {
/* This shows the physical state. Probably more like some sort of list, or with elements that disappear. */
min-width: 12%;
max-width: 160px;
height: 80%;
border: 3px solid;
border-radius: 24px 0px 0px 24px;
padding: 12px;
position: fixed;
right: 0;
bottom: 0;
}
table, th, td{
border: 1px solid;
border-collapse: collapse;
padding: 4px 2px 5px;
}
table.leftpanel{
border-style: ridge;
width: 100%;
padding: 20px 12px 0px 12px;
}
table.rightpanel{
border: 2px solid;
border-style: outset groove;
width: 100%;
}
ul#statuseffects {
list-style-type: none;
}
h1, h2, h3{
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
/* Mess with shadows later. Careful to match for style sheet changes! */
h1{
font-size: 1.5em;
line-height: 65%;
transition-property: color;
transition-duration: 8s;
}
.unfaded {color:ForestGreen;}
.faded {/* Not sure if anything's needed here. */}
h2{font-style: italic; font-size: 1.25em; line-height: 55%;}
h3{font-style: italic; font-size: 1.25em; font-variant: small-caps; line-height: 45%;}
p {
/* Do we even need this? */
font-family: Timos, Georgia, serif;
font-size: 1.25em;
text-align: left; /* Might use justify */
}
div#squiffy-container {
font-family: Timos, Georgia, serif;
font-size: 1.25em;
text-align: left; /* Might use justify */
min-width: 800px;
max-width: 80%;
margin: 160px 240px 0px;
padding: 24px;
border: 2px solid; /* Remove after style confirmed. */
}
a.squiffy-link {
/* Referenced by the code, so required class. */
}
a.hidden {
/* These show information only if Awareness is high enough. */
/* If you happen to click on them without high enough Awareness,
the game tells you something vague about it, or about yourself. */
text-decoration: none;
color: inherit !important;
cursor: inherit;
}
a.look {
/* These show information about objects, rather than actions or decisions */
text-decoration: none;
border-bottom: 1px dashed;
cursor: help;
}
a.action {
/* These are actions you can take, other than movement. */
text-decoration: none;
border-bottom: 3px double;
cursor: pointer;
}
/* Moving to a new location, and establishing a conversation, are both buttons. All in-text links will be actions or looking at things. If we change this policy, consider "move" and "progress" cursors, weird as it might look at first. */
a:hover{
/* Must not reveal links by hovering. */
/* Alt: Might reveal only after a delay, making link-hunting unuseful. */
text-decoration: initial;
color: initial;
}
a:active{
/* The moment it's clicked. Could use a background or something. */
}
