Tutorial Dice

CardStock v0.99 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 bgColor 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 title to Roll.

Now we'll choose the Round Rectangle tool and draw one to be 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 fontSize to 30, 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, 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. So click on the card's background, and then click in the OnSetup() 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 OnClick() 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
a = randint(1,6)
b = randint(1,6)
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
totalLabel.text = "The total is " + str(a+b)

Finally, we're going to make our dice stack slightly easier to use, by letting users press the space bar to roll the dice. To do that, we'll add the card's OnKeyDown() 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 OnKeyDown(keyName), to add the event. Then add the code:

if keyName == "Space":
   roll.Click()

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

And click Roll...