I doubt this is a bug as I’m still very new to fuse. I have a state group with three states – one for a start button, one to accept user input and one to display a response to the input. Seems like a common pattern I can use for a lot of things. To make life easy I have one variable called "guess’ that is the subject of the input. When the user selects play again I have a callback to a start method that resets guess to zero. It never resets and always just displays whatever was last entered. I then added a callback to the start of the start state to reset the value and that did not reset the value either. I have logged output to the console each time and the log shows the value being reset every time. I suspect I am doing something wrong with the callback request and I do not have the right scope for the variable. Code is attached below as well as the javascript file. Thanks in advance for any help.
<App>
<JavaScript File="MainView.js" />
<!-- Subclassing TextInput -->
<TextInput ux:Class="MyTextInput" FontSize="20" PlaceholderColor="#ccc" Padding="5" CaretColor="Black" MaxLength="7">
<Rectangle Layer="Background" CornerRadius="3">
<Stroke Width="1" Color="#ccc" />
<SolidColor Color="Yellow" />
</Rectangle>
</TextInput>
<StateGroup ux:Name="stateGroup">
<State ux:Name="startState">
<Callback Handler="{start}" />
<Change startPanel.Visibility="Visible"/>
<Change getInput.Visibility="Hidden" />
<Change responsePanel.Visibility="Hidden" />
</State>
<State ux:Name="getInputState">
<Change getInput.Visibility="Visible" />
<Change startPanel.Visibility="Hidden"/>
<Change responsePanel.Visibility="Hidden"/>
</State>
<State ux:Name="responseState">
<Change getInput.Visibility="Hidden"/>
<Change startPanel.Visibility="Hidden"/>
<Change responsePanel.Visibility="Visible"/>
</State>
</StateGroup>
<!-- Display Start Button, once clicked change state to get input -->
<Panel ux:Name="startPanel" Width="150" Height="150" Visibility="Visible" Alignment="Center">
<SolidColor ux:Name="someColor"/>
<Text Value="Start" Alignment="Center" FontSize="24" TextColor="Black" />
<Clicked>
<Set stateGroup.Active="getInputState"/>
</Clicked>
<WhilePressed>
<Scale Factor=".50" Duration=".10" Easing="QuadraticInOut" />
</WhilePressed>
</Panel>
<!-- Obtain input guess, once clicked change state to display response -->
<StackPanel ux:Name="getInput" Color="Yellow" Visibility="Hidden" Alignment="Center">
<Text Value="Guess: " FontSize="24" Color="Black" Alignment="Center"/>
<Rectangle Alignment="Center" Color="Red" >
<MyTextInput Value="{guess}" TextColor="Blue" PlaceholderText="Enter Value Here" InputHint="Integer" />
</Rectangle>
<Rectangle Alignment="Center" Color="Green" Height="75" Width="75">
<Text Value="SUBMIT" Color="White" />
<Clicked>
<Set stateGroup.Active="responseState"/>
</Clicked>
<WhilePressed>
<Scale Factor=".50" Duration=".10" Easing="QuadraticInOut" />
</WhilePressed>
</Rectangle>
</StackPanel>
<!-- Respond to the guess -->
<Panel ux:Name="responsePanel" Width="150" Height="150" Visibility="Hidden">
<SolidColor Color="Blue" />
<Button Text="Play Again">
<Clicked>
<DebugAction Message="Heading to Start" />
<Callback Handler="{start}" />
<Set stateGroup.Active="startState"/>
</Clicked>
<WhilePressed>
<Scale Factor=".50" Duration=".10" Easing="QuadraticInOut" />
</WhilePressed>
</Button>
</Panel>
</App>
var Observable = require('FuseJS/Observable');
var guess = Observable()
function start() {
console.log("in start")
guess = 0
console.log("Value of Guess ==> ", guess)
}
module.exports = {
guess : guess,
start : start
}