Flexbox interface integration

Grazog

Hello,

I am a twine 1.4.2 user with subgarcube 2.14. I am currently making a game and wanted to make a custom interface. I found several posts hinting that it's quite feasible and easy with a bit of planning (https://www.glorioustrainwrecks.com/node/5163 or https://twinery.org/forum/discussion/8243/health-bar-in-right-side-bar-or-in-a-status-passage or even better http://twinery.org/forum/discussion/1654#msg4168).

What I had in mind: a multi panel interface. 2 panels displaying pictures (character & locations), 1 panel to display locations navigation (exists) and the main passage text for location/character interaction. When the player select a link, the twine passage is displayed in the main passage text part and variables are updated to display new pictures in the other panels if needed.

After some investigation it seemed better to use a flexbox model (my css and html knowdlege is quite limited). I made a prototype with nested flexbox looking like this:

<div class="flexcol">
<div class="flextoprow">
<div class="ex2">Movement layout</div>
<div class="portrait">This is the portrait</div>
</div>
<div class="flexcollower">
<div class="ImagePassage">This is the location image</div>
<div class="textpassage">this is the UI text</div>
</div>
</div>

The flexcol/flextoprow are flex with either column or row direction. I tested it outside of twine to check the basic layout.

I added the css in my twine stylesheet and added the div in my storyCaption passage. Two things aren't working as expected: the panels are displayed in the passage and I don't display the passage in the textpassage of my UI. I read in TheMadExile post about creating storyregion (?) and using <<replace>> with the whole passage, is this my best option?

Regards,

Brice

TheMadExile

Please use the code tag when posting code or markup—it's C on the editor bar.


Two out of the three links you mention are a) years out of date and b) for either the wrong story formats or wrong major version. I'd suggest being exceeding wary of depending upon random information gleaned from searching, especially when it's obvious that information was given years ago—check the dates.

SugarCube, like JavaScript, is case-sensitive. The story caption special passage is spelled StoryCaption, not storyCaption. I don't know if that's a transcription error on your part, however, you need to be mindful of things like that.

It's nigh onto impossible for us to make any meaningful commentary on your issue when you've omitted half of the code involved. What does your CSS look like?

Grazog

Hello,

Sorry about the links. After hours of searching the sugarcube site, the twine forums and other ressources, they looked like the more relevant even if they were old.

Here is my code:

In my stylesheet passage:

.flexrow {  
  	margin: 2%;
  	padding: 2px;
  	display: flex;
  	flex-direction: row;
}
.flextoprow {
  	padding: 2px;
  	display: flex;
  	flex-direction: row;
}
.flexcol {
  	display: flex;
  	flex-direction: column;
}
.flexcollower {
  	margin: 2px;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
}
.textpassage {
  	padding: 2 px;
  	width:70%;
	flex: 1 1 40%;
	border: .2em solid black;
}
.imagepassage {
   	margin-bottom: 2px;
	flex: 1 1 30%;
    width:70%;
	border: .2em solid black;
	overflow: auto;
}
.portrait {
	align-self: flex-end;
    margin-left: 2px;
    width: 10%;
    heigth: 20%;
    border: .2em solid black;
   	order: -1;
}
.ex2 {
align-self: flex-start;
	width: 90%;
    heigth:50%;
    border: .2em solid black;
	order: -2;
  	margin-bottom: 20%;
}

In my StoryCaption (transcription error in the first post):

<div class="flexcol">
	<div class="flextoprow">
		<div class="ex2">Movement layout</div>
		<div class="portrait">This is the portrait</div>
	</div>
	<div class="flexcollower">
    <div class="imagepassage">This is the image<br>exemple</div>
	<div class="textpassage">this is the UI text</div>
	</div>
</div>

Brice

greyelf

I am sure the more experienced CSS writers will be able to solve your issue but I did notice two problems with the examples you supplied.

1. You have incorrectly spelt height in your .portrait and .ex2 CSS rules.

2. The HTML in your StoryCaption passage contains line-breaks, which can cause problems when using CSS to format a structure. This same problem was commented about in the Health bar in right side bar or in a status passage thread you referenced.

You may want to change that contents of that passage to something like:

<div class="flexcol">\
	<div class="flextoprow">\
		<div class="ex2">Movement layout</div>\
		<div class="portrait">This is the portrait</div>\
	</div>\
	<div class="flexcollower">\
		<div class="imagepassage">This is the image<br>exemple</div>\
		<div class="textpassage">this is the UI text</div>\
	</div>\
</div>