Mutually exclusive buttons in a sidebar

If you are requesting technical assistance with Twine, please specify:
Twine Version: 2.5.1
Story Format: 2.36.1

I’d like to create a set of mutually exclusive buttons located in the right sidebar, which change some variables and then refresh the main screen and refresh themselves. The currently active button should be presented in a different style than the buttons that are not active. Like a set of radio buttons, but they require only one click to activate the link.

The code below does exactly what I want it to, but it seems really clunky. Is there a more elegant way to achieve this effect?

In the sample code I’ve only generated two buttons, but I will be adding more. In the sample code I’ve placed the buttons in the StoryBanner, but in my real code I use the right sidebar.

::CSS stylesheet
.button1 button {
  background-color:  var(--b1color);}
  
.button2 button {
  background-color:	var(--b2color);}

::StoryInit
<<set $action="">>
<<set $explore="Explore">>
<<set $cast="Cast">>

::Start
<<if $action==$explore>>I am exploring<</if>>
<<if $action==$cast>>I am casting<</if>>
This is the description of the location.

::StoryBanner
<span id="multireplace"><<include "multibutton">></span>

::multibutton
<<nobr>>
<<script>>
	document.body.style.setProperty('--b1color','green');
	document.body.style.setProperty('--b2color','green');
<</script>>
<<switch $action>>
	<<case $explore>>
		<<script>>document.body.style.setProperty('--b1color','red');<</script>>
	<<case $cast>>
		<<script>>document.body.style.setProperty('--b2color','red');<</script>>
<</switch>>


<<switch $action>>    
	<<case $explore>>
    	<<script>>document.body.style.setProperty('--b1color','red');<</script>>
    <<case $cast>>
	    <<script>>document.body.style.setProperty('--b2color','red');<</script>>
<</switch>>

<div class="bluebutton">
	<span class="button1">
    	<<button $explore>>
        	<<set $action=$explore>>
        	<<replace #multireplace>>
            	<<include "multibutton">>
             <</replace>>
           <<set _passage to passage()>><<goto _passage>>
         <</button>>
       </span>

	<span class="button2">
    	<<button $cast>>
        	<<set $action=$cast>>
        	<<replace #multireplace>>
            	<<include "multibutton">>
             <</replace>>
           <<set _passage to passage()>><<goto _passage>>
         <</button>>
     </span>
</div>
<</nobr>>

Does the value of the $explore and $cast variables change to anything other than “Explore” and “Cast”?

If not then you are wasting precious storage space in the History & Save systems by using variables to track static (unchanging) data, so your code should be changed to be something like the following…

:: StoryInit
<<set $action = "">>

:: Start
<<if $action == "Explore">>I am exploring<</if>>
<<elseif $action == "Cast">>I am casting<</if>>
This is the description of the location.

:: StoryBanner
<span id="multireplace"><<include "multibutton">></span>

:: multibutton
<<nobr>>
<<script>>
	document.body.style.setProperty('--b1color','green');
	document.body.style.setProperty('--b2color','green');
<</script>>
<<switch $action>>
	<<case "Explore">>
		<<script>>document.body.style.setProperty('--b1color','red');<</script>>
	<<case "Cast">>
		<<script>>document.body.style.setProperty('--b2color','red');<</script>>
<</switch>>

<<switch $action>>    
	<<case "Explore">>
    	<<script>>document.body.style.setProperty('--b1color','red');<</script>>
    <<case "Cast">>
	    <<script>>document.body.style.setProperty('--b2color','red');<</script>>
<</switch>>

<div class="bluebutton">
	<span class="button1">
    	<<button "Explore" `passage()`>>
        	<<set $action = "Explore">>
        	<<replace #multireplace>>
            	<<include "multibutton">>
             <</replace>>
         <</button>>
       </span>

	<span class="button2">
    	<<button "Cast" `passage()`>>
        	<<set $action = "Cast">>
        	<<replace #multireplace>>
            	<<include "multibutton">>
             <</replace>>
         <</button>>
     </span>
</div>
<</nobr>>
1 Like