Need help with buttons

Hi, I’m trying to create a combat system for my game and I’m finding it difficult to get it work.

<form id="troopForm">
  <label for="militia">Milicianos:</label>
  <input type="number" id="militia" name="militia" min="0" max="<<print $playerArmy.militia>>" value="0"> <br>

  <label for="infantry">Infantería:</label>
  <input type="number" id="infantry" name="infantry" min="0" max="<<print $playerArmy.infantry>>" value="0"> <br>

  <label for="archer">Arqueros:</label>
  <input type="number" id="archer" name="archer" min="0" max="<<print $playerArmy.archer>>" value="0"> <br>

  <label for="knight">Caballeros:</label>
  <input type="number" id="knight" name="knight" min="0" max="<<print $playerArmy.knight>>" value="0"> <br>

  <button type="button" onclick="assignTroops()">Asignar al Flanco Izquierdo</button>
</form>

<script>
function assignTroops() {
  // Obtener valores de los inputs
  const militia = parseInt(document.getElementById('militia').value) || 0;
  const infantry = parseInt(document.getElementById('infantry').value) || 0;
  const archer = parseInt(document.getElementById('archer').value) || 0;
  const knight = parseInt(document.getElementById('knight').value) || 0;

  // Actualizar el estado de las tropas
  State.variables.playerArmy.left.units.militia = militia;
  State.variables.playerArmy.left.units.infantry = infantry;
  State.variables.playerArmy.left.units.archer = archer;
  State.variables.playerArmy.left.units.knight = knight;

  // Reducir las tropas disponibles
  State.variables.playerArmy.militia -= militia;
  State.variables.playerArmy.infantry -= infantry;
  State.variables.playerArmy.archer -= archer;
  State.variables.playerArmy.knight -= knight;

  // Recalcular la fuerza
  State.variables.playerArmy.left.strength = calculateSectionStrength(State.variables.playerArmy.left);

  // Navegar al siguiente pasaje usando SugarCube
  Engine.play("AsignarCentro");
}
</script>

I’ve also tried with twinescript:

<<textbox "$selectedTroops.militia" "0" 5>> Milicianos<br>
<<textbox "$selectedTroops.infantry" "0" 5>> Infantería<br>
<<textbox "$selectedTroops.archer" "0" 5>> Arqueros<br>
<<textbox "$selectedTroops.knight" "0" 5>> Caballeros<br>

<<button "Asignar al Flanco Izquierdo">>
  <<set $validationError = validateInputs()>>
  <<if $validationError>>
    <<print $validationError>>
  <<else>>
    <<set State.variables.playerArmy.left.units.militia = $selectedTroops.militia>>
    <<set State.variables.playerArmy.left.units.infantry = $selectedTroops.infantry>>
    <<set State.variables.playerArmy.left.units.archer = $selectedTroops.archer>>
    <<set State.variables.playerArmy.left.units.knight = $selectedTroops.knight>>

    <<set State.variables.playerArmy.militia -= $selectedTroops.militia>>
    <<set State.variables.playerArmy.infantry -= $selectedTroops.infantry>>
    <<set State.variables.playerArmy.archer -= $selectedTroops.archer>>
    <<set State.variables.playerArmy.knight -= $selectedTroops.knight>>

    <<set State.variables.playerArmy.left.strength = calculateSectionStrength(State.variables.playerArmy.left)>>
    [[Ir al centro|AsignarCentro]]
  <</if>>
<</button>>

But every time I click on the button that assigns the number selected by the player it just doesn’t work (there’s no way to go to the next passage neither). I would love to hear what mistake I’m making here. Thanks in advance.

There is probably a way to do what you’re doing with the custom text box but it’s easier to do with Sugarcube’s built in Macros. Rarely do you need to use State.variables.

Note that in the approach below, players can enter any text (not just numbers). If they enter a word or a number higher than the maximum, the game will inform them of the invalid input after they push the button.

Here’s an example for the first type of units. In a passage titled Assign:

<<set $militiaMax to 500>>

You currently have <<print $militiaMax>> unit(s) to assign
<<if $militia neq null>>You have assigned <<print $militia>> units(s)<</if>>

Assign units to militia: <<textbox "$militia" 0>> 

 <<button "Assign" "Done">> <</button>>

In a passage titled Done

<<if $militia gte 0 and $militia lte $militiaMax>> 
   You assigned <<print $militia>> unit(s) to the militia
<<else>>
   Enter a number between 0 and <<print $militiaMax>>
<</if>>

<<link "Back to Assign Page" "Assign">><</link>>

You’ll need to repeat this for the other unit types.


Also, this example just sets the variable to an absolute number. You can do calculations pretty much in the way that you did them above but like this

<<set $var -= 1>>

and use it however you’re planning to. The operators are here.

You do not need <<goto>> in either of the shown examples. For example:

<<button "Assign">> <<goto "Done">> <</button>>

Would be better written as:

<<button "Assign" "Done">><</button>>

Similarly:

<<link "Back to Assign Page">><<goto "Assign">><</link>>

Would be better written as:

<<link "Back to Assign Page" "Assign">><</link>>

The <<goto>> macro is best used sparingly as there are issues with it—read the documentation for all of them. In this case, it would only be necessary if you were doing some logic inside the <<button>> or <<link>> macros and had multiple passages to choose from. For example:

<<link "Activate the oscillation overthruster!">>
    <<set _check to $scienceSkill + random(1, 20)>>
    <<if _check > 20>>
        <<goto "Activating overthruster">>
    <<else>>
        <<goto "Failed to activate overthruster">>
    <</if>>
<</link>>

 
Also. Please stop recommending and using the end form of closing tag—i.e., <<endif>>, <<endlink>>, etc—as it’s been deprecated for many years now and will be removed eventually. You should be using the / forms by this point—i.e., <</if>>, <</link>>, etc.

 
PS: Your link to the documentation is incorrect. I believe this is the link that you were looking for.

1 Like

Thanks, I’ve made the corrections.