HTML I am new to making HTML games, and need some helps with codes/commands

[Xiblis]

I am currently making my game with the help of ChatGPT, Youtube tutorials and documentation from Twine/Sugarcube, knowledge wise I would say I have made some progress and already have learned a fair bit however no matter how much I googled I couldnt really find an easy to understand guide on how to change the look of an attribute system/numberpool or how to limit the points you can assign, or how to grant the player points through level ups. It may also be that I do have the knowledge but cant really wrap my head around it.

Lets start with an example.

<<numberpool "$Attributes">>
|''Strength:''|<<numberinput "$Strength" $Strength 1 20>>|
<</numberpool>>

Now this creates your usual numberpool, you can assign points to the stat strength freely etc.
However, I would like to know how I can make a system so the player can only distribute a limited amount of points to a stat? I think I already know how to grant the player points by just using variables, however the question is how to integrate that "leveling up" system to the command above.

What I would also like to know is that, when I make a stat system and menu, how do I stylize it through CSS? I couldnt find anything about that either.

 

[guest1492]

ChatGPT doesn't have a large enough pool of data to draw from in order to write good Twine/SugarCube code. You can fix its mistakes if you are familiar with programming and with Twine/SugarCube, but in that case it might be better to just write stuff from scratch.

The numberpool macro seems to do exactly what you want, unless I'm misunderstanding you. Example:

<<set $StatPool = 10, $ST = $DX = $IQ = $HT = 5>>
You have <span id="stat-pool">$StatPool</span> points remaining to allocate.
<<numberpool "$StatPool">>
|''ST:''|<<numberinput "$ST" $ST 1 10>>|
|''DX:''|<<numberinput "$DX" $DX 1 10>>|
|''IQ:''|<<numberinput "$IQ" $IQ 1 10>>|
|''HT:''|<<numberinput "$HT" $HT 1 10>>|
<<onchange>>
    <<replace "#stat-pool">>$StatPool<</replace>>
<</numberpool>>

As for CSS, it's not something that you can just teach someone through a simple forum post. A Twine game is basically a webpage, so anything you know about styling webpages would transfer over.

 

[Xiblis]

Thank you for your reply, what you posted is exactly what I meant and needed.
I have a few questions though, so I understand/learn the code better.

Why did you use (You have <span id="stat-pool">$StatPool</span>) instead of just (You have $StatPool)? As far as I am aware both do the same thing

So this passage
<<onchange>>
<<replace "#stat-pool">>$StatPool<</replace>>
Limits the amount of points one can allocate, but how?
I know that <<onchange>> "updates" the pool, but what does the <<replace>> part do?

ChatGPT doesn't have a large enough pool of data to draw from in order to write good Twine/SugarCube code. You can fix its mistakes if you are familiar with programming and with Twine/SugarCube, but in that case it might be better to just write stuff from scratch.

The numberpool macro seems to do exactly what you want, unless I'm misunderstanding you. Example:

<<set $StatPool = 10, $ST = $DX = $IQ = $HT = 5>>
You have <span id="stat-pool">$StatPool</span> points remaining to allocate.
<<numberpool "$StatPool">>
|''ST:''|<<numberinput "$ST" $ST 1 10>>|
|''DX:''|<<numberinput "$DX" $DX 1 10>>|
|''IQ:''|<<numberinput "$IQ" $IQ 1 10>>|
|''HT:''|<<numberinput "$HT" $HT 1 10>>|
<<onchange>>
    <<replace "#stat-pool">>$StatPool<</replace>>
<</numberpool>>

View attachment 2483890

As for CSS, it's not something that you can just teach someone through a simple forum post. A Twine game is basically a webpage, so anything you know about styling webpages would transfer over.

 

[guest1492]

The example code is pulled straight from the documentation for the numberpool macro. I just changed the numbers a little to shorten the length of the gif.

The <<onchange>> is not what limits the allocation points, but rather wrapping everything inside <<numberpool>><</numberpool>>. The <<onchange>> merely says to run the code <<replace "#stat-pool">>$StatPool<</replace>> whenever the inputs get changed.

This is the documentation for the

You must be registered to see the links

. Basically, when text is rendered onto the page then that's it. It doesn't update when a variable changes. In order to update the text on the page, you have to do DOM manipulation and the replace macro is one such method.