HTML is there but twine says it isn't. WHY??

Question

Basically I have a nsfw game being created but I can't get the html tables to behave. In the image attached you can see whats going on. I just don't understand why or how to fix it.

Any help would be appreciated, even just a poke in the right direction would be nice.

https://imgur.com/PWnTZmC

Answer 1

Unfortunately you didn't post the text of the code, so it's hard to say exactly.  The picture you posted has lines drawn over the code, so it's hard to read a few parts of it which are vital to debugging this.

That said, the problem is probably caused by doing something like this:

<table>
	<<if $x>>
		</table>
	<</if>>

That won't work because the table starts outside of the <<if>> but ends on the inside of the <<if>>, making it a potentially broken table.

Instead you should do this:

<table>
	<<if $x>>
	<</if>>
</table> 

or this:

<<if $x>>
	<table>
	</table>
<</if>>

If you take your code and properly indent it, then you'll probably see that the second <tr> (not the first one that you circled) doesn't indent the same as its closing </tr>.  The same goes for the <table> as well.

For example, if I'm reading correctly (which it's hard to tell since there's a line through the code) it looks like you have this:

Bigger Breasts (2) (Not enough MC)<</if>><</if>>

when it should be this:

Bigger Breasts (2) (Not enough MC)<</if>></tr><</if>>

if you want that second <tr> to match up properly.

Hope that helps!  :-)

Comments

Sorry about the lines. Your solution worked for the </tr> but I can't quite understand what you're saying about the indenting and the </table> is still not being recognised even after retyping it

In the mean time heres the code

<<set $coin to Number($coin)>><<if $coin lt 0>><<display "No Coin">><<else>><table>
<tr>Breast Size</tr>\
<tr><<if $coin gt 1>><<if $morph4 is "small breasts">>Bigger Breasts (2) <<link "Apply" "Redeem">><<set $coin -=2>><<set $morph4 to "breasts">><</link>><<elseif $morph4 is "breasts">>Bigger Breasts (3) <<link "Apply" "Redeem">><<set $coin -= 3>><<set $morph4 to "big breasts>><</link>><</if>><<else>>Bigger Breasts (2) (Not Enough MC)<</if>><</if>></tr>\
<tr><<if $morph4 is "big breasts">> Smaller Breasts (1) <<link "Apply" "Redeem">><<set $coin -=2>><<set $morph4 to "breasts">><</link>><</if>>
<<if $morph4 is "breasts">> Smaller Breasts (1) <<link "Apply" "Redeem">><<set $coin -=2>><<set $morph4 to "small breasts">><<set $morphb to false>><</link>> | <</if>></tr>\
<tr><<if $morphb is false>><<if $morph4 is "big breasts","breasts">> Extra Breasts (3) <<if $coin gt 2>><<link "Apply" "Redeem">><<set $morph4 to "big breasts">><<set $morphb to true>><</link>><<else>>Apply (Not enough MC)<</if>> | <</if>><</if>><<if $morphb is true>> Less Breasts (2) <<link "Apply" "Redeem">><<set $morph4 to "breasts">><<set $morphb to false>><</link>><</if>></tr>\
</table>
<<if $morph4 is "small breasts">><<if $morph1 is "none">> Penis?
Add a penis (5) <<if $coin gt 4>><<link "Apply" "Redeem">><<set $gender to "other">><<set $morph1 to "small penis">><<set $coin -=5>><</link>><<else>>Apply (Not enough MC)<</if>><</if>><</if>>

(hope that's the right way to add code to the post)

---

Indentation is the technique of using white-space or tab characters to format your code so that it becomes easier to read, and easier to see the start & end tags of HTML elements and macros.

I was going to include a code snippet of an example of indent formatted code but the Q/A site's toorbar is wonky again. So I have instead created this GitHub Gist for you to look at.

note: You will notice two comments I added to point out where the issues with your code can be found.

---

What I'm saying about "proper indentation" is that if you have an element in the form "<x>...</x>" then you should indent everything inside that element one "TAB" further in, and then tab back out for the "</x>" part.  This technique ensures that, if you did everything correctly, then all of the elements should have their "head" and "tail" aligned with the same indentation.

Using that technique, we can see that the heads and tails of some elements aren't lining up correctly in your code:

<<set $coin to Number($coin)>>
<<if $coin lt 0>>
    <<display "No Coin">>
<<else>>
    <table>
        <tr>Breast Size</tr>
        <tr>
            <<if $coin gt 1>>
                <<if $morph4 is "small breasts">>
                    Bigger Breasts (2)
                    <<link "Apply" "Redeem">>
                        <<set $coin -= 2>>
                        <<set $morph4 to "breasts">>
                    <</link>>
                <<elseif $morph4 is "breasts">>
                    Bigger Breasts (3)
                    <<link "Apply" "Redeem">>
                        <<set $coin -= 3>>
                        <<set $morph4 to "big breasts>>
                    <</link>>
                <</if>>
            <<else>>
                Bigger Breasts (2) (Not Enough MC)
            <</if>>  /* Things after this line do not line up correctly. */
        <</if>>
    </tr>
    <tr>
        <<if $morph4 is "big breasts">>
            Smaller Breasts (1)
            <<link "Apply" "Redeem">>
                <<set $coin -= 2>>
                <<set $morph4 to "breasts">>
            <</link>>
        <</if>>
        <<if $morph4 is "breasts">>
            Smaller Breasts (1)
            <<link "Apply" "Redeem">>
                <<set $coin -= 2>>
                <<set $morph4 to "small breasts">>
                <<set $morphb to false>>
            <</link>>
             |
        <</if>>
    </tr>
    <tr>
        <<if $morphb is false>>
            <<if $morph4 is "big breasts","breasts">>
                Extra Breasts (3)
                <<if $coin gt 2>>
                    <<link "Apply" "Redeem">>
                        <<set $morph4 to "big breasts">>
                        <<set $morphb to true>>
                    <</link>>
                <<else>>
                    Apply (Not enough MC)
                <</if>>
                 |
            <</if>>
        <</if>>
        <<if $morphb is true>>
            Less Breasts (2)
            <<link "Apply" "Redeem">>
                <<set $morph4 to "breasts">>
                <<set $morphb to false>>
            <</link>>
        <</if>>
    </tr>
</table>

(Look for the "/* Things after this line do not line up correctly. */" line.)

If you want to keep that kind of formatting in your code you can either use the <<silently>> macro, which hides everything inside it, or, in cases like this one where the code prints some text, you can use the <<nobr>> macro, along with the <br> element to force linebreaks when needed.

Other bugs:

1.) This line isn't valid syntax:

<<if $morph4 is "big breasts","breasts">>

I'm assuming what you actually want is this:

<<if ["big breasts", "breasts"].includes($morph4)>>

which uses the .includes() method to see if that string exists within that array.

2.) The <<display>> macro has been depreciated.  So this line:

<<display "No Coin">>

should be changed to use the <<include>> macro instead, like this:

<<include "No Coin">>

3.) This line:

<<set $morph4 to "big breasts>>

is missing it's closing ".  It should be:

<<set $morph4 to "big breasts">>

4.) It looks like you want all of the items in each group on the same row.  If that's the case, any text within the <tr> (which represents a single row) should be inside a <td> (which represents a column).  Also, that way, instead of using " | " to put lines between columns, you can use CSS styling, like this:

#tflist td {
    padding: 0px 5px;
}
#tflist td:not(:last-child) {
    border-right: 1px solid white;
}

(This goes within your Stylesheet section, and it assumes that the table has an ID of "tflist".)

The end result:

So, once you put that all together you get this:

<<set $coin to parseInt($coin)>>Coins: $coin
Breast size: $morph4 <<if $morphb>>(extra breasts)<</if>>
Genitalia: $morph1
<<nobr>>
    <<if $coin lt 0>>
        <<include "No Coin">>
    <<else>>
        <table id="tflist">
            <tr>Breast Size</tr>
            <tr>
                <<if $coin gt 1>>
                    <<if $morph4 is "small breasts">>
                        <td>
                            Bigger Breasts (2)
                            <<link "Apply" "Redeem">>
                                <<set $coin -= 2>>
                                <<set $morph4 to "breasts">>
                            <</link>>
                        </td>
                    <<elseif $morph4 is "breasts">>
                        <td>
                            Bigger Breasts (3)
                            <<link "Apply" "Redeem">>
                                <<set $coin -= 3>>
                                <<set $morph4 to "big breasts">>
                            <</link>>
                        </td>
                    <</if>>
                <<else>>
                    <td>
                        Bigger Breasts (2) (Not Enough MC)
                    </td>
                <</if>>
                <<if $morph4 is "big breasts">>
                    <td>
                        Smaller Breasts (1)
                        <<link "Apply" "Redeem">>
                            <<set $coin -= 2>>
                            <<set $morph4 to "breasts">>
                        <</link>>
                    </td>
                <<elseif $morph4 is "breasts">>
                    <td>
                        Smaller Breasts (1)
                        <<link "Apply" "Redeem">>
                            <<set $coin -= 2>>
                            <<set $morph4 to "small breasts">>
                            <<set $morphb to false>>
                        <</link>>
                    </td>
                <</if>>
                <<if $morphb>>
                    <td>
                        Less Breasts (2)
                        <<link "Apply" "Redeem">>
                            <<set $morph4 to "breasts">>
                            <<set $morphb to false>>
                        <</link>>
                    </td>
                <<else>>
                    <<if ["big breasts", "breasts"].includes($morph4)>>
                        <td>
                            Extra Breasts (3)
                            <<if $coin gt 2>>
                                <<link "Apply" "Redeem">>
                                    <<set $morph4 to "big breasts">>
                                    <<set $morphb to true>>
                                <</link>>
                            <<else>>
                                Apply (Not enough MC)
                            <</if>>
                        </td>
                    <</if>>
                <</if>>
            </tr>
            <<if $morph4 is "small breasts">>
                <<if $morph1 is "none">>
                    <tr>Penis?</tr>
                    <tr>
                        Add a penis (5)
                        <<if $coin gt 4>>
                            <<link "Apply" "Redeem">>
                                <<set $gender to "other">>
                                <<set $morph1 to "small penis">>
                                <<set $coin -= 5>>
                            <</link>>
                        <<else>>
                            Apply (Not enough MC)
                        <</if>>
                    </tr>
                <</if>>
            <</if>>
        </table>
    <</if>>
<</nobr>>

You still need to add a little more code to make sure that the player has sufficient coins in all places, but you should be able to use that code with the indentation like that.  (You may also need to change the "No Coin" passage to display correctly since it's within the <<nobr>> macro.)

Hope that helps! 

---

Thank you so so much!!!

It now works perfectly! Now to go through all my other passages and indent them properly to avoid confusion in the future!

Thanks again! Such a big big help