Tutorial Dice

CardStock v0.99.6 Tutorial - Dice

Here is an example of what it takes to build a simple, but complete stack. Today's project is a dice roller.
It has a Roll button to let you roll the two dice, and two rounded rectangle shapes with text labels on top of them, that will be the visual representation of our dice.
There will also be another text label below the dice, showing us the total value of the roll of two dice.

We'll start off by creating a New stack, by choosing 'New' from the File menu.

We'll drag the little blue resize square in the bottom right of the card to make the stack small and cute, and then choose a nice background color by clicking the white rectangle at the far end of the fill_color row in the property editor.

Now we'll click the Button tool (next-door to the Hand tool), and drag out our Roll button. We'll set its name to roll, and its text to Roll. An object's name is what we'll use later in our code to refer to this object. A button's text property is the text displayed in the button.

Now we'll choose the Round Rectangle tool and use it to draw one of the dice. I'll hold down the Shift key while I draw it, to force it to stay square.

Next I'll choose the Text Label tool (the A), and draw a label over the die.

And set its font_size to 30, alignment to Center, and its text to be empty.

Now I'll drag a selection box around the die and label to select them both, and then Copy and Paste, to create a 2nd die. While the two new objects are still selected, I'll drag them over to the right so they don't overlap the original die.

Now I'll add one more text label underneath, and set its name to totalLabel, center it, and empty its text as well.

Now we just need to add a tiny bit of code to get this all working. First off, since we want to generate random numbers, we'll make use of the python random module's randint() function. To get access to that, we'll need to import it. A good place to do that is in the card's on_setup() event, which runs once when the stack starts up. So click on the card's background, and then click in the on_setup() event in the code editor, and add the line:

    from random import randint

Now we want to make the Roll button actually roll our dice when we click it! So we'll select the roll button, and click in the on_click() event in the code editor. We want to choose two random numbers, from 1-6 -- one for each die. And we want to set the labels on the dice to show the new numbers. We can do that with the following code:

    # Roll the dice
    
    # Choose 2 random numbers, 1-6
    a = randint(1,6)
    b = randint(1,6)
    
    # Set the text property of each label
    label_1.text = a
    label_2.text = b

We're also going to set the totalLabel's new text value like this:

    # Show the total by setting totalLabel's text property
    totalLabel.text = "The total is " + str(a+b)

Finally, we're going to make our dice stack slightly easier to use, by also letting users press the space bar to roll the dice. To do that, we'll add the card's on_key_press() event, and if the pressed key was the space bar, we'll tell the roll button to click itself. To do this, first click on the card background to select the card object, and then click on the "+ Add Event" button in the code editor.

Choose on_key_press(), to add the event. Then add the code:

    if key_name == "Space":
       roll.click()

Now we can click the Run Stack button in the toolbar to try out our dice stack!

And click Roll...