Twine Version: 2.3.14
Story Format: Harlowe
Wondering if it’s possible to have a table of buttons, each with its own value, that when clicked, adds/removes the value to a variable (each value in a list separated by commas).
You could use an Array variable to store the list of “things”, a link to add each thing to that list, and a Named Hook combined with the (rerun:) macro to output the ‘current’ contents of that variable.
(set: $list to (a:))\
Current List: [(print: (joined: ",", ...$list))]<list|
(link-repeat: "Add Apple to List")[{
(set: $list to it + (a: "Apple"))
(rerun: ?list)
}]
(link-repeat: "Add Banana to List")[{
(set: $list to it + (a: "Banana"))
(rerun: ?list)
}]
see: (set:), (a:), (link-repeat:), Named Hook, (rerun:), (joined:), and (print:).
This is the scenario I’m trying to build…
I have a grid of 3 character “things”, so like “ABc”, “FDx”. The grid will be 13 x 13. There will be an array variable for this that starts empty. If the player clicks any “thing”, that value is added to the list. If they click it again, it’s removed from the list. I’d also like to change the CSS of clicked items so the player can see what they’ve selected. Once they’re done, they can click an exit link and the array contains the final selections. I don’t need to list the contents of the array since the grid will show selected items.
Clearly I’m missing how to enable a click event without making a “change” happen. Or I only want CSS to change and an array to get updated. I don’t want the click to “move the story forward”.
This code isn’t doing what I expect:
Select hole cards and then go to [[Blinds]].
<table>
<tr>
<td>
(link: "AA")[
(if: $holecards contains "AA")[
(set: $holecards to it + (a: "AA"))
](else:)[
(set: $holecards to it - (a: "AA"))
]
]
</td>
<td>
(link: "AKs")[
(if: $holecards contains "AKs")[
(set: $holecards to it + (a: "AKs"))
](else:)[
(set: $holecards to it - (a: "AKs"))
]
]
</td>
<td>
(link: "AQs")[
(if: $holecards contains "AQs")[
(set: $holecards to it + (a: "AQs"))
](else:)[
(set: $holecards to it - (a: "AQs"))
]
]
</td>
</tr>
<table>
The following example uses a Named Hook combined with the (rerun:) macro to refresh the ‘table’ each time a ‘card’ is selected. It uses the (cond:) macro combined with the (hook:) macro to conditionally create either a “selected” or “unselected” hook, which can be targeted by CSS to style each of those to states. And finally it corrects the add/remove a ‘card’ code being used to alter what is current contain in the Array.
note: I have only included the code to handle the selection of a single card, but you should be able to copy-n-paste then alter the table cell section to handle the other cards.
|table>[{
<table>
<tr>
<td>
(hook: (cond: $holecards contains "AA", "selected", "unselected"))[
(link: "AA")[
(if: $holecards contains "AA")[
(set: $holecards to it - (a: "AA"))
]
(else:)[
(set: $holecards to it + (a: "AA"))
]
(rerun: ?table)
]
]
</td>
</tr>
</table>
}]
You have a couple of choices on how you will apply CSS to the “selected” and/or “unselected” hooks. Personally I prefer to add a CSS rule like the following to the project’s Story Stylesheet area that targets the specific named hook.
tw-hook[name="selected"] {
background-color: green;
}
Brilliant. Twine is so weird.