Cleaning Up My Code

Authoring Twine
1

Twine Version: Twine 2.3.16
Story Format: SugarCube 2.36.1

Heya,

I’m back again with another question.

I got my stats inside my StoryCaption Passage and everything seems to be working fine for now.
But since this is my first time coding anything ever, my code looks scuffed af.
I want it to look a bit more clean, so I can find and edit stuff more easily.

Could someone maybe help me understand how or where i could cut stuff down or change anything to make it simpler and nicer to look at?

<span class="caption"><div style="text-align: center;"><small><b>Stats</b></small></div></span><span class="money"><div style="text-align: left;"><b>Your Money:</b> $money</div></span><span class="intel"><div style="text-align: left;"><b>Intelligence:</b> $intel</div></span><span class="looks"><div style="text-align: left;"><b>Looks:</b> $looks</div></span><span class="fitness"><div style="text-align: left;"><b>Fitness:</b> $fitness</div></span><span class="willpower"><div style="text-align: left;"><b>Willpower:</b> $willpower</div></span><span class="charisma"><div style="text-align: left;"><b>Charisma:</b> $charisma</div></span>

Btw, I dont know how to set breaks inside my code without getting those breaks in my text later on.
So if someone could quickly explain it to me I could stop putting everything in one big line. '^^

3

Hey,

so I kinda found a way to set breaks in my code without it breaking my text.
I started to put a \ after every break inside my code.
It works and looks better but I dont think its the most efficient way to do it.
Is there any better way?

\<span class="caption">
\	<div style="text-align: center;">
\		<small>
\			<b>Stats</b>
\		</small>
\	</div>
\</span>
\<span class="money">
\	<div style="text-align: left;">
\		<b>Your Money:</b> $money
\	</div>
\</span>
\<span class="intel">
\	<div style="text-align: left;">
\		<b>Intelligence:</b> $intel
\	</div>
\</span>
\<span class="looks">
\	<div style="text-align: left;">
\		<b>Looks:</b> $looks
\	</div>
\</span>
\<span class="fitness">
\	<div style="text-align: left;">
\		<b>Fitness:</b> $fitness
\	</div>
\</span>
\<span class="willpower">
\	<div style="text-align: left;">
\		<b>Willpower:</b> $willpower
\	</div>
\</span>
\<span class="charisma">
\	<div style="text-align: left;">
\		<b>Charisma:</b> $charisma
\	</div>
\</span>
4

You can use the <<nobr>>...<</nobr>> macro (https://www.motoslave.net/sugarcube/2/docs/#macros-macro-nobr).

Then, when you want to force a break add the <br> element.

1 Like
5

Additionally, if you’re using that on the whole passage, you could just add a “nobr” tag to the passage to prevent the new lines from being displayed as line breaks.

Also, you can change:

<b>Looks:</b> $looks

to use markup:

''Looks:'' $looks

which uses SugarCube markup to handle bolding the text.

Hope that helps! :slight_smile:

1 Like
6

@souppilouliouma
This helped me out a lot. Now it looks exactly the way i wanted it to look like.
Thank you
@HiEv
Thank you too.
I didn’t know there was an easier way to change the style of the text.
The SugarCube markup link will also come in handy for other stuff I’m planning to do.

7

All you really need are the div and b tags. Furthermore, you should not have different class attributes in the div tag; all of those should be the same if you are applying the same style over and over again.

Start with this in the StoryCaption passage.

<div class="stats-heading"><b>Stats</b></div>
<div class="stats-entry"> <b>Your Money:</b> $money </div>
<div class="stats-entry"> <b>Intelligence:</b>  $intel</div>
<div class="stats-entry"> <b>Looks:</b>  $looks </div>
<div class="stats-entry"> <b>Fitness:</b>  $fitness </div>
<div class="stats-entry"> <b>Willpower:</b>  $willpower </div>
<div class="stats-entry"> <b>Charisma:</b>  $charisma </div>

Next we can apply two simple styles that apply to everything. Just add this to the bottom or top of the StoryCaption passage.

<style>
.stats-entry {text-align: left}
.stats-heading {text-align: center; font-size: small}
</style>

You should also add a nobr tag to the StoryCaption passage if you want it to be condensed, as @HiEv reccomends.

Advanced theming

If you want to style each row further, you should use id attributes. Unlike class attributes, each id attribute should be unique. For example, to turn the money row green, change:

<div class="stats-entry">

to

<div class="stats-entry" id="money">

and in the style section add

#money {color: green}

and repeat for the other rows

8

I don’t see that those div elements are serving much of a purpose because the rules you are applying are identical for all of your stats, as mentioned by P.B. Parjeter. You could apply those rules to the parent element instead and not bother with those divs at all.

Also if you use div where you are currently using span you will automatically get a line break after each element there instead. I would also use ‘id’ rather than ‘class’ for those elements. Presumably you are going to be using DOM macros on them?