Need help with using javascript to "Flip" a coin

How-to Discussions
1

Hello, I am very new to Fuse, and I am loving what I have been able to do so far.

I am familiarizing myself with Fuse by creating a simple app that will essentially flip a coin. By this I mean, tap a circle and the text inside will say either “Heads” or “Tails”

After reading through a lot of examples and documentation, I thought I knew how it should be done, but the result I got was not what I expected.

Here is the relevant code:

<Page ux:Name="page1" Background="#04E762">
                <Text Alignment="TopCenter" TextColor="#FFF" FontSize="64" Margin="20, 20, 20, 20" Value="Flip Coin"/>
                <JavaScript>
                    function flipCoin(e) {
                        if (Math.random() < 0.5) {
                            return "Heads"
                        } else {
                            return "False"
                        }
                    }

                    module.exports = {
                        FlipCoin: flipCoin
                    };
                </JavaScript>
                   <Text ux:Name="coin_value" TextColor="#04E762" Alignment="Center" FontSize="42" TextWrapping="Wrap" Value="Tap To Flip"/>
                <Circle ux:Name="coin_circle" Fill="#FFFF" Width="80%">
                    <Tapped>
                        <Set Target="coin_value.Value" Value="{FlipCoin}"/>
                    </Tapped>
                </Circle>
                <WhileInactive>
                    <Set coin_value.Value="Tap To Flip"/>
                </WhileInactive>
             </Page>

The resulting behavior of the above code is for the text on top of the circle to change to “Fuse.Reactive.AsyncFunction” I assume I am missing something in how to integrate JavaScript code, but I can’t figure out what.

Any help would be much appreciated. Thank you.

2

Hi, it seems you end up displaying the type of the export rather than the return value of it. :slight_smile:

Try this instead:

<JavaScript>
    Observable = require("FuseJS/Observable");
    flipValue = Observable("Tap To Flip");
    function flipCoin()  {
        if (Math.random() < 0.5) {
            flipValue.value = "Heads";
        } else {
            flipValue.value = "Tails";
        }
    }

    module.exports = {
        FlipCoin: flipCoin, flipValue : flipValue
    };
</JavaScript>
<Text TextColor="#04E762" Alignment="Center" FontSize="42" TextWrapping="Wrap" Value="{flipValue}"/>
<Circle ux:Name="coin_circle" Fill="#FFFF" Width="80%">
    <Tapped Handler="{FlipCoin}"/>
</Circle>

Here the text is data bound to an observable (flipValue) which shows the result of your toss. Whenever flipValue changes the text will automatically be updated (so you don’t need to explicitly set it). When the circle is tapped we call the flipCoin() function which simply updates the observable, thus triggering the update.

3

Thank you very much for the response. Your explanation of how the observable will automatically update the text is very helpful. Problem solved. Thanks, again!