QCard DLL Lesson 3 4

See Lesson 1 for QCard DLL and WAV files needed for the demo code.

Which card was clicked?

We must have some way to discover which card is clicked by the user. The cards are displayed in a graphicbox or graphics window, so we can trap mouse events. We'll trap the leftButtonUp event. To do this, we must first setfocus to the graphicbox. When the left button is released, we go to a branch label where we do the checking.

 'trap mouse clicks: 
 #1.g "setfocus; when leftButtonUp [checkIndex]"

When the cards are dealt, they are placed in a grid that is 100x100, so it is easy to determine which card is clicked by checking mouse position. Actual card height is about 100 pixels, and width is about 80 pixels.

Mouse position is contained in the variables MouseX and MouseY . To make the lines of code shorter, we've copied these values into mx and my .

 mx=MouseX : my=MouseY 'mouse x and y location

Once we know the mouse coordinates, we can check them against the card coordinates to see which card from our card array was clicked. We start by determining the row. We'll use Select Case to do this. Once a case has been satisfied, the program quits checking and jumps to the End Select line. We've set up our Select Case statement without a case specified. This allows us to use an expression after each Case statement.

First, we'll check to see if the mouse Y coordinate is less than or equal to 102, placing it in the first row of cards. If it is, we do more checking for the x coordinate, then jump out to the End Select line.

 case my<=102 'first row

Each additional row is 100 pixels lower than the previous row. This code checks to see which of the four rows contains the mouse click.

 select case 
 case my<=102 'first row 
 'more code here 
 case (my>=102) and (my<202) 'second row 
 'more code here 
 case (my>=202) and (my<302) 'third row 
 'more code here 
 case (my>=302) and (my<402) 'fourth row 
 'more code here 
 end select

The first six cards are dealt in the first row. To check which of the cards in the first row was clicked, we check the x location and set the variable clickCard equal to the index of the card:

 if mx<=90 then clickCard=1 
 if (mx>=110) and (mx<=190) then clickCard=2 
 if (mx>=210) and (mx<=290) then clickCard=3 
 if (mx>=310) and (mx<=390) then clickCard=4 
 if (mx>=410) and (mx<=490) then clickCard=5 
 if (mx>=510) and (mx<=590) then clickCard=6

We perform a similar check on the second row, then on the third and fourth rows. The second row check:

 if mx<=90 then clickCard=7 
 if (mx>=110) and (mx<=190) then clickCard=8 
 if (mx>=210) and (mx<=290) then clickCard=9 
 if (mx>=310) and (mx<=390) then clickCard=10 
 if (mx>=410) and (mx<=490) then clickCard=11 
 if (mx>=510) and (mx<=590) then clickCard=12

Turning it Over

Once we know which card in the array was clicked, we want to turn it over so that the user can see the face. We've discussed changing the card from face-down to face-up in a previous lesson. After we make the change, we want to deal the card again in with its face up.

 'turn card so that it is face up 
 Call SetCardStatus card(clickCard), 1 
 'deal card again so that it displays face up 
 Call DealCard hBox, card(clickCard), x, y

Card Coordinates

We need to know where to deal the card in a face-up position. The mouse coordinates do not equal the card's upper left coordinates. We can figure the card coordinates at the same time as we find out which card was clicked. We set the variables x and y to equal the proper upper left coordinates for the card that was clicked, right in our Select Case routine:

 select case 
 case my<=102 'first row 
 y=2 
 if mx<=90 then clickCard=1:x=10 
 if (mx>=110) and (mx<=190) then clickCard=2:x=110 
 if (mx>=210) and (mx<=290) then clickCard=3:x=210 
 if (mx>=310) and (mx<=390) then clickCard=4:x=310 
 if (mx>=410) and (mx<=490) then clickCard=5:x=410 
 if (mx>=510) and (mx<=590) then clickCard=6:x=510 
 case (my>=102) and (my<202) 'second row 
 y=102 
 if mx<=90 then clickCard=7:x=10 
 if (mx>=110) and (mx<=190) then clickCard=8:x=110 
 if (mx>=210) and (mx<=290) then clickCard=9:x=210 
 if (mx>=310) and (mx<=390) then clickCard=10:x=310 
 if (mx>=410) and (mx<=490) then clickCard=11:x=410 
 if (mx>=510) and (mx<=590) then clickCard=12:x=510 
 case (my>=202) and (my<302) 'third row 
 y=202 
 if mx<=90 then clickCard=13:x=10 
 if (mx>=110) and (mx<=190) then clickCard=14:x=110 
 if (mx>=210) and (mx<=290) then clickCard=15:x=210 
 if (mx>=310) and (mx<=390) then clickCard=16:x=310 
 if (mx>=410) and (mx<=490) then clickCard=17:x=410 
 if (mx>=510) and (mx<=590) then clickCard=18:x=510 
 case (my>=302) and (my<402) 'fourth row 
 y=302 
 if mx<=90 then clickCard=19:x=10 
 if (mx>=110) and (mx<=190) then clickCard=20:x=110 
 if (mx>=210) and (mx<=290) then clickCard=21:x=210 
 if (mx>=310) and (mx<=390) then clickCard=22:x=310 
 if (mx>=410) and (mx<=490) then clickCard=23:x=410 
 if (mx>=510) and (mx<=590) then clickCard=24:x=510 
 case else 
 clickCard=0 
 end select

For the sake of this demo, we've noted the index of the card clicked by placing text at the bottom of the window.

 #1.g "place 10 420" 
 #1.g "\Card clicked is " ; clickCard ; space$(400)

The Mouse Click Checking Routine

Here is the entire routine. The complete demo is at the end of this article.

 [checkIndex] 
 clickCard=0:x=0:y=0 'reset values 
 mx=MouseX : my=MouseY 'mouse x and y location 
 'Cards are placed in a grid that is 100x100, 
 'so it is easy to determine which card is clicked 
 'by checking mouse position. Card height is about 
 '100, and width is about 80. 
 'Index of clicked card is placed in var called clickCard 
 'and x,y locations are placed in vars called x and y. 
 'MouseY determines row, and MouseX determines column. 
 select case 
 case my<=102 'first row 
 y=2 
 if mx<=90 then clickCard=1:x=10 
 if (mx>=110) and (mx<=190) then clickCard=2:x=110 
 if (mx>=210) and (mx<=290) then clickCard=3:x=210 
 if (mx>=310) and (mx<=390) then clickCard=4:x=310 
 if (mx>=410) and (mx<=490) then clickCard=5:x=410 
 if (mx>=510) and (mx<=590) then clickCard=6:x=510 
 case (my>=102) and (my<202) 'second row 
 y=102 
 if mx<=90 then clickCard=7:x=10 
 if (mx>=110) and (mx<=190) then clickCard=8:x=110 
 if (mx>=210) and (mx<=290) then clickCard=9:x=210 
 if (mx>=310) and (mx<=390) then clickCard=10:x=310 
 if (mx>=410) and (mx<=490) then clickCard=11:x=410 
 if (mx>=510) and (mx<=590) then clickCard=12:x=510 
 case (my>=202) and (my<302) 'third row 
 y=202 
 if mx<=90 then clickCard=13:x=10 
 if (mx>=110) and (mx<=190) then clickCard=14:x=110 
 if (mx>=210) and (mx<=290) then clickCard=15:x=210 
 if (mx>=310) and (mx<=390) then clickCard=16:x=310 
 if (mx>=410) and (mx<=490) then clickCard=17:x=410 
 if (mx>=510) and (mx<=590) then clickCard=18:x=510 
 case (my>=302) and (my<402) 'fourth row 
 y=302 
 if mx<=90 then clickCard=19:x=10 
 if (mx>=110) and (mx<=190) then clickCard=20:x=110 
 if (mx>=210) and (mx<=290) then clickCard=21:x=210 
 if (mx>=310) and (mx<=390) then clickCard=22:x=310 
 if (mx>=410) and (mx<=490) then clickCard=23:x=410 
 if (mx>=510) and (mx<=590) then clickCard=24:x=510 
 case else 
 clickCard=0 
 end select 
 
 if clickCard=0 then wait 
 'turn card so that it is face up 
 Call SetCardStatus card(clickCard), 1 
 'deal card again so that it displays face up 
 Call DealCard hBox, card(clickCard), x, y 
 
 #1.g "place 10 420" 
 #1.g "\Card clicked is " ; clickCard ; space$(400) 
 wait

DEMO