Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

January 18, 2023 07:22 pm GMT

Create Solitaire game with Python and Flet - Part 1

In this tutorial we will show you step-by-step creation of a famous Klondike solitaire game in Python with Flet. As an inspiration, we looked at this online game: https://www.solitr.com/

This tutorial is aimed at beginner/intermediate level Python developers who have basic knowledge of Python and object oriented programming.

Here you can see the final result that you are going to achieve with Flet and this tutorial: https://solitaire-part1.fly.dev/#/

We have broken down the game implementation into the following steps:

Getting started with Flet
Proof of concept app for draggable cards
Fanned card piles
Solitaire setup
Solitaire rules
Winning the game
Deploying the app
Summary

In the Part 2 (will be covered in the next tutorial) we'll be adding Appbar with options to start new game, view game rules and change game settings.

Getting started with Flet

To create a Flet web app you don't need to know HTML, CSS or JavaScript, but you do need a basic knowledge of Python and object-oriented programming.

Flet requires Python 3.7 or above. To create a web app in Python with Flet, you need to install flet module first:

pip install flet

To start, let's create a simple hello-world app.

Create hello.py with the following contents:

import flet as ftdef main(page: ft.Page):    page.add(ft.Text(value="Hello, world!"))ft.app(target=main)

Run this app and you will see a new window with a greeting:

Proof of concept app for draggable cards

For the proof of concept, we will only be using three types of Flet controls:

Stack - will be used as a parent control for absolute positioning of slots and cards.
GestureDetector - the card that will be moved within the Stack.
Container - the slot where the card will be dropped. Also will be used as content for the GestureDetector.

We have broken down the proof of concept app into four easy steps, so that after each step you have a complete short program to run and test.

Step 1: Drag the card around

In this step we will create a Stack (Solitaire game field) and a GestureDetector (Solitaire card). The card will then be added to the list of the Stack controls. top and left properties of the card are used for absolute positioning of the card in the Stack.

import flet as ftdef main(page: ft.Page):   card = ft.GestureDetector(       left=0,       top=0,       content=ft.Container(bgcolor=ft.colors.GREEN, width=70, height=100),   )      page.add(ft.Stack(controls=[card], width=1000, height=500))ft.app(target=main)

Run the app to see the the card added to the stack:

To be able to move the card, we'll create a drag method that will be called in on_pan_update event of GestureDetector, which happens every drag_interval while the user drags the card with their mouse.

To show the card movement, well be updating the cards top and left properties in the drag method each time the on_pan_update event happens.

Below is the simplest code for dragging GestureDetector in Stack:

import flet as ft# Use of GestureDetector for with on_pan_update event for dragging card# Absolute positioning of controls within stackdef main(page: ft.Page):   def drag(e: ft.DragUpdateEvent):       e.control.top = max(0, e.control.top + e.delta_y)       e.control.left = max(0, e.control.left + e.delta_x)       e.control.update()   card = ft.GestureDetector(       mouse_cursor=ft.MouseCursor.MOVE,       drag_interval=5,       on_pan_update=drag,       left=0,       top=0,       content=ft.Container(bgcolor=ft.colors.GREEN, width=70, height=100),   )      page.add(ft.Stack(controls=[card], width=1000, height=500))ft.app(target=main)

Now you can see the card moving:

Important
After any properties of a control are updated, an update() method of the control (or its parent control) should be called for the update to take effect.

Step 2: Drop the card in the slot or bounce it back

The goal of this step is to be able to drop a card into a slot if it is close enough and bounce it back if its not.

Lets create a Container control that will be a slot to which well be dropping the card:

slot = ft.Container(    width=70, height=100, left=200, top=0, border=ft.border.all(1)    )page.add(ft.Stack(controls = [slot, card], width=1000, height=500))

on_pan_end event of the card is called when the card is dropped:

card = ft.GestureDetector(    mouse_cursor=ft.MouseCursor.MOVE,    drag_interval=5,    on_pan_update=drag,    on_pan_end=drop,    left=0,    top=0,    content=ft.Container(bgcolor=ft.colors.GREEN, width=70, height=100),)

On this event, well call drop method to check if the card is close enough to the slot (lets say its closer than 20px to the slot), and place it there:

def drop(e: ft.DragEndEvent):    if (        abs(e.control.top - slot.top) < 20        and abs(e.control.left - slot.left) < 20    ):        place(e.control, slot)    e.control.update()def place(card, slot):    """place card to the slot"""    card.top = slot.top    card.left = slot.left    page.update()

Now, if the card is not close enough, we need to bounce it back to its original position, which we dont know at the moment, since the cards top and left properties were changed on on_pan_update event.

Lets create a Solitaire class object to remember the original position of the card when on_pan_start event of the card is called:

class Solitaire:   def __init__(self):       self.start_top = 0       self.start_left = 0solitaire = Solitaire()def start_drag(e: ft.DragStartEvent):   solitaire.start_top = e.control.top   solitaire.start_left = e.control.left   e.control.update()

Now lets update on_pan_end event with the option to bounce card back:

def bounce_back(game, card):    """return card to its original position"""    card.top = game.start_top    card.left = game.start_left    page.update()def drop(e: ft.DragEndEvent):    if (        abs(e.control.top - slot.top) < 20        and abs(e.control.left - slot.left) < 20    ):        place(e.control, slot)    else:        bounce_back(solitaire, e.control)    e.control.update()

The full code for this step can be found here.

Step 3: Adding a second card

Eventually, well need 52 cards to play the game. For our proof of concept, lets add a second card:

   card2 = ft.GestureDetector(       mouse_cursor=ft.MouseCursor.MOVE,       drag_interval=5,       on_pan_start=start_drag,       on_pan_update=drag,       on_pan_end=drop,       left=100,       top=0,       content=ft.Container(bgcolor=ft.colors.YELLOW, width=70, height=100),   )   controls = [slot, card1, card2]   page.add(ft.Stack(controls=controls, width=1000, height=500))

Now, if you run the app with the two cards, you will notice that when you move the cards around, the yellow card (card2) is moving as expected, but the green the card (card1) is moving under the yellow card.

It happens because card2 is added to the list of stack controls after card1. To fix this problem, we need to move the draggable card to the top of the list of controls on on_pan_start event:

def move_on_top(card, controls):    """Moves draggable card to the top of the stack"""    controls.remove(card)    controls.append(card)    page.update()def start_drag(e: ft.DragStartEvent):    move_on_top(e.control, controls)    solitaire.start_top = e.control.top    solitaire.start_left = e.control.left

Now the two cards can be dragged without issues:

The full code for this step can be found here.

Step 4: Adding more slots

As a final step for the proof of concept app, lets create two more slots:

slot0 = ft.Container(    width=70, height=100, left=0, top=0, border=ft.border.all(1))slot1 = ft.Container(    width=70, height=100, left=200, top=0, border=ft.border.all(1))slot2 = ft.Container(    width=70, height=100, left=300, top=0, border=ft.border.all(1))slots = [slot0, slot1, slot2]

When creating new cards, we will not specify their top and left position now, but instead, will place them to the slot0:

# deal cardsplace(card1, slot0)place(card2, slot0)

on_pan_end event, where we check if a card is close to a slot, we will now go through the list of slots to find where the card should be dropped:

def drop(e: ft.DragEndEvent):    for slot in slots:        if (            abs(e.control.top - slot.top) < 20        and abs(e.control.left - slot.left) < 20        ):            place(e.control, slot)            e.control.update()            return    bounce_back(solitaire, e.control)    e.control.update()

As a result, the two cards can be dragged between the three slots:

The full code for this step can be found here.

Congratulations on completing the proof of concept app for the Solitaire game! Now you can work with GestureDetector to move cards inside Stack and place them to certain Containers, which is a great part of the game to begin with.

Fanned card piles

In the proof of concept app we have accomplished the task of dropping a card to a slot in proximity or bounce it back. If there is already a card in that slot, the new card is placed on top of it, covering it completely.

In the Solitaire game, if there is already a card in a tableau slot, you want to place the draggable card a bit lower, so that you can see the previous card too, and if there are two cards, even lower. Those are called fanned piles.

Then, we want to be able to pick a card from the fanned pile that is not the top card of the pile and drag the card together with all the cards below it:

To be able to do that, it would be useful to have the information about the pile of cards in the slot from which the card is dragged, as well as in the slot to which it is being dropped. Lets restructure our program and get it ready for the implementation of the fanned piles.

Slot, Card and Solitaire classes

A slot could have a pile property that would hold a list of cards that were placed there. Now the slot is a Container control object, and we cant add any new properties to it. Lets create a new Slot class that will inherit from Container and add a pile property to it:

SLOT_WIDTH = 70SLOT_HEIGHT = 100import flet as ftclass Slot(ft.Container):   def __init__(self, top, left):       super().__init__()       self.pile=[]       self.width=SLOT_WIDTH       self.height=SLOT_HEIGHT       self.left=left       self.top=top       self.border=ft.border.all(1)

Similarly to the Slot class, lets create a new Card class with slot property to remember in which slot it resides. It will inherit from GestureDetector and well move all card-related methods to it:

CARD_WIDTH = 70CARD_HEIGTH = 100DROP_PROXIMITY = 20import flet as ftclass Card(ft.GestureDetector):   def __init__(self, solitaire, color):       super().__init__()       self.slot = None       self.mouse_cursor=ft.MouseCursor.MOVE       self.drag_interval=5       self.on_pan_start=self.start_drag       self.on_pan_update=self.drag       self.on_pan_end=self.drop       self.left=None       self.top=None       self.solitaire = solitaire       self.color = color       self.content=ft.Container(bgcolor=self.color, width=CARD_WIDTH, height=CARD_HEIGTH)   def move_on_top(self):       """Moves draggable card to the top of the stack"""       self.solitaire.controls.remove(self)       self.solitaire.controls.append(self)       self.solitaire.update()   def bounce_back(self):       """Returns card to its original position"""       self.top = self.slot.top       self.left = self.slot.left       self.update()   def place(self, slot):       """Place card to the slot"""       self.top = slot.top       self.left = slot.left   def start_drag(self, e: ft.DragStartEvent):       self.move_on_top()       self.update()   def drag(self, e: ft.DragUpdateEvent):       self.top = max(0, self.top + e.delta_y)       self.left = max(0, self.left + e.delta_x)       self.update()   def drop(self, e: ft.DragEndEvent):       for slot in self.solitaire.slots:           if (               abs(self.top - slot.top) < DROP_PROXIMITY           and abs(self.left - slot.left) < DROP_PROXIMITY         ):               self.place(slot)               self.update()               return       self.bounce_back()       self.update()

Note
Since each card has slot property now, there is no need to remember start_left and start_top position of the draggable card in Solitaire class anymore, because we can just bounce it back to its slot.

Lets update Solitaire class to inherit from Stack, and move the creation of cards and slots there:

SOLITAIRE_WIDTH = 1000SOLITAIRE_HEIGHT = 500import flet as ftfrom slot import Slotfrom card import Cardclass Solitaire(ft.Stack):   def __init__(self):       super().__init__()       self.controls = []       self.slots = []       self.cards = []       self.width = SOLITAIRE_WIDTH       self.height = SOLITAIRE_HEIGHT   def did_mount(self):       self.create_card_deck()       self.create_slots()       self.deal_cards()   def create_card_deck(self):       card1 = Card(self, color="GREEN")       card2 = Card(self, color="YELLOW")       self.cards = [card1, card2]   def create_slots(self):       self.slots.append(Slot(top=0, left=0))       self.slots.append(Slot(top=0, left=200))       self.slots.append(Slot(top=0, left=300))       self.controls.extend(self.slots)       self.update()   def deal_cards(self):       self.controls.extend(self.cards)       for card in self.cards:           card.place(self.slots[0])       self.update()

Note
If you try to call create_slots(), create_card_deck() and deal_cards() methods in __init__() method of the Solitaire class, it will cause an error Control must be added to the page first. To fix this, we create slots and cards inside the did_mount() method, which happens immediately after the stack is added to the page.

Our main program will be very simple now:

import flet as ftfrom solitaire import Solitairedef main(page: ft.Page):   solitaire = Solitaire()   page.add(solitaire)ft.app(target=main)

You can find the full source code for this step here. It works exactly the same way as the proof of concept app, but re-written with the new classes to be ready for adding more complex functionality to it.

Placing card with offset

When the card is being placed to a slot in the card.place() method, we need to do three things:

Remove the card from its original slot, if it exists
Change cards slot to the new slot
Add the card to the new slots pile

def place(self, slot):    # remove card from it's original slot, if exists    if self.slot is not None:        self.slot.pile.remove(self)    # change card's slot to a new slot    self.slot = slot    # add card to the new slot's pile    slot.pile.append(self)

When updating cards top and left position, left should remain the same, but top will depend on the length of the new slots pile:

    self.top = slot.top + len(slot.pile) * CARD_OFFSET    self.left = slot.left

Now the cards are placed with offset, which gives us the fanned pile look:

Drag pile of cards

If you try to drag the card from the bottom of the pile now, it will look like this:

To fix this problem, we need to update all the methods that work with the draggable card to work with the draggable pile instead.

Lets create get_draggable_pile() method that will return list of cards that need to be dragged together, starting with the card you picked:

def get_draggable_pile(self):    """returns list of cards that will be dragged together, starting with the current card"""    if self.slot is not None:        return self.slot.pile[self.slot.pile.index(self):]    return [self]

Then, well update move_on_top() method:

def move_on_top(self):    """Brings draggable card pile to the top of the stack"""    for card in draggable_pile:        self.solitaire.controls.remove(card)        self.solitaire.controls.append(card)    self.solitaire.update()

Additionally, we need to update drag() method to go through the draggable pile and update positions of all the cards being dragged:

def drag(self, e: ft.DragUpdateEvent):    draggable_pile = self.get_draggable_pile()    for card in draggable_pile:        card.top = max(0, self.top + e.delta_y) + draggable_pile.index(card) * CARD_OFFSET        card.left = max(0, self.left + e.delta_x)        card.update()

Also, we need to update place() method to place place the draggable pile to the slot:

def place(self, slot):    """Place draggable pile to the slot"""    draggable_pile = self.get_draggable_pile()    for card in draggable_pile:        card.top = slot.top + len(slot.pile) * CARD_OFFSET        card.left = slot.left        # remove card from it's original slot, if exists        if card.slot is not None:            card.slot.pile.remove(card)        # change card's slot to a new slot        card.slot = slot        # add card to the new slot's pile        slot.pile.append(card)    self.solitaire.update()

Finally, if no slot in proximity is found, we need to bounce the whole pile back to its original position:

def bounce_back(self):    """Returns draggable pile to its original position"""    draggable_pile = self.get_draggable_pile()    for card in draggable_pile:        card.top = card.slot.top + card.slot.pile.index(card) * CARD_OFFSET        card.left = card.slot.left    self.solitaire.update()

The full source code of this step can be found here. Now we can drag and drop cards in fanned piles, which means we are ready for the real deal!

Solitaire setup

Lets take a look at the wikipedia article about Klondike (solitaire):

Klondike is played with a standard 52-card deck.
After shuffling, a tableau of seven fanned piles of cards is laid from left to right. From left to right, each pile contains one more card than the last. The first and left-most pile contains a single upturned card, the second pile contains two cards, the third pile contains three cards, the fourth pile contains four cards, the fifth pile contains five cards, the sixth pile contains six cards, and the seventh pile contains seven cards. The topmost card of each pile is turned face up. The remaining cards form the stock and are placed facedown at the upper left of the layout.
The four foundations (light rectangles in the upper right of the figure) are built up by suit from Ace (low in this game) to King, and the tableau piles can be built down by alternate colors.

We will now work on this setup step by step.

Create card deck

The first step is to create a full deck of cards in Solitaire class. Each card should have a suit property (hearts, diamonds, clubs and spades) and a rank property (from Ace to King). For the suit, its color is important, because tableau piles are built by alternate colors.

For the rank, its value is important, because foundations are built from the lowest (Ace) to the highest (King) rank value.

In solitaire.py, create Suite and Rank classes:

class Suite:    def __init__(self, suite_name, suite_color):        self.name = suite_name        self.color = suite_colorclass Rank:    def __init__(self, card_name, card_value):        self.name = card_name        self.value = card_value

Now, in the Card class, instead of accepting the color as an argument, well be accepting suite and rank in __init__(). Additionally, well add face_up property to the card and the Container will now has image of the back of the card as its content:

class Card(ft.GestureDetector):    def __init__(self, solitaire, suite, rank):        super().__init__()        self.mouse_cursor=ft.MouseCursor.MOVE        self.drag_interval=5        self.on_pan_start=self.start_drag        self.on_pan_update=self.drag        self.on_pan_end=self.drop        self.suite=suite        self.rank=rank        self.face_up=False        self.top=None        self.left=None        self.solitaire = solitaire        self.slot = None        self.content=ft.Container(            width=CARD_WIDTH,            height=CARD_HEIGTH,            border_radius = ft.border_radius.all(6),            content=ft.Image(src="card_back.png"))

All the images for the face up cards, as well as card back are stored in the images folder in the same directory as main.py.

Important
For the reference to the image file to work, we need to specify the folder were it resides in the assets_dir in main.py:
ft.app(target=main, assets_dir="images")

Finally, in solitaire.create_card_deck() we'll create lists of suites and ranks and then the 52-card deck:

def create_card_deck(self):    suites = [        Suite("hearts", "RED"),        Suite("diamonds", "RED"),        Suite("clubs", "BLACK"),        Suite("spades", "BLACK"),    ]    ranks = [        Rank("Ace", 1),        Rank("2", 2),        Rank("3", 3),        Rank("4", 4),        Rank("5", 5),        Rank("6", 6),        Rank("7", 7),        Rank("8", 8),        Rank("9", 9),        Rank("10", 10),        Rank("Jack", 11),        Rank("Queen", 12),        Rank("King", 13),    ]    self.cards = []    for suite in suites:        for rank in ranks:            self.cards.append(Card(solitaire=self, suite=suite, rank=rank))

The card deck is ready to be dealt, and now we need to create the layout for it.

Create slots

Klondike solitaire game layout should look like this:

Lets create all those slots in solitaire.create_slots():

def create_slots(self):    self.stock = Slot(top=0, left=0, border=ft.border.all(1))    self.waste = Slot(top=0, left=100, border=None)    self.foundations = []    x = 300    for i in range(4):        self.foundations.append(Slot(top=0, left=x, border=ft.border.all(1, "outline")))        x += 100    self.tableau = []    x = 0    for i in range(7):        self.tableau.append(Slot(top=150, left=x, border=None))        x += 100    self.controls.append(self.stock)    self.controls.append(self.waste)    self.controls.extend(self.foundations)    self.controls.extend(self.tableau)    self.update()

Note
Some slots should have visible border and some shouldnt, so we added border to the list of arguments for the creation of Slot objects.

Deal cards

Let's start with shuffling the cards and adding them to the list of controls:

def deal_cards(self):    random.shuffle(self.cards)    self.controls.extend(self.cards)    self.update()

Then we'll deal the cards to the tableau piles from left to right so that each pile contains one more card than the last, and place the remaining cards to the stock pile:

def deal_cards(self):    random.shuffle(self.cards)    self.controls.extend(self.cards)    # deal to tableau    first_slot = 0    remaining_cards = self.cards    while first_slot < len(self.tableau):        for slot in self.tableau[first_slot:]:            top_card = remaining_cards[0]            top_card.place(slot)            remaining_cards.remove(top_card)        first_slot +=1    # place remaining cards to stock pile    for card in remaining_cards:        card.place(self.stock)    self.update()

Lets run the program and see where we are at now:

Cards in stock were placed in a fanned pile in the same manner as to the tableau, but they should have been placed to a regular pile instead. To fix this problem, lets add this condition to the card.place() method:

def place(self, slot):    """Place draggable pile to the slot"""    if slot in self.solitaire.tableau:        self.top = slot.top + len(slot.pile) * self.solitaire.card_offset    else:        self.top = slot.top    self.left = slot.left

Now the cards are only placed in fanned piles to tableau:

If you try moving the cards around now, the program wont work. The reason for this is that in the card.drop() method iterates through list of slots which we dont have now.

Lets update the method to go separately through foundations and tableau:

def drop(self, e: ft.DragEndEvent):    for slot in self.solitaire.tableau:        if (            abs(self.top - (slot.top + len(slot.pile) * CARD_OFFSET)) < DROP_PROXIMITY        and abs(self.left - slot.left) < DROP_PROXIMITY        ):            self.place(slot)            self.update()            return    for slot in self.solitaire.foundations:        if (            abs(self.top - slot.top) < DROP_PROXIMITY        and abs(self.left - slot.left) < DROP_PROXIMITY        ):            self.place(slot)            self.update()            return    self.bounce_back()    self.update()

Reveal top cards in tableau piles

Now we have the correct game setup and as a last touch we need to reveal the topmost cards in tableau piles.

In Slot class, create a get_top_card() method:

def get_top_card(self):    if len(self.pile) > 0:        return self.pile[-1]

In Card class, create turn_face_up() method:

def turn_face_up(self):    self.face_up = True    self.content.content.src=f"/images/{self.rank.name}_{self.suite.name}.svg"    self.update()

Finally, reveal the topmost cards in the solitaire.deal_cards():

for slot in self.tableau:    slot.get_top_card().turn_face_up()    self.update()

Lets see how it looks now:

The full source code for this step can be found here.

Congratulations on completing the Solitaire game setup! Youve created a full 52-card deck, built layout with stock, waste, foundations and tableau piles, dealt the cards and revealed the top cards in tableau. Lets move on to the next item on our todo list, which is Solitaire Rules.

Solitaire rules

If you run your current version of Solitaire, youll notice that you can do some crazy things with your cards:

Now it is time to implement some rules.

General rules

Currently, we can move any card, but only face-up cards should be allowed to be moved. Lets add this check in start_drag, drag and drop methods of the card:

def start_drag(self, e: ft.DragStartEvent):    if self.face_up:        self.move_on_top()        self.update()def drag(self, e: ft.DragUpdateEvent):    if self.face_up:        draggable_pile = self.get_draggable_pile()        for card in draggable_pile:            card.top = max(0, self.top + e.delta_y) + draggable_pile.index(card) * CARD_OFFSET            card.left = max(0, self.left + e.delta_x)            card.update()def drop(self, e: ft.DragEndEvent):    if self.face_up:        for slot in self.solitaire.tableau:            if (                abs(self.top - (slot.top + len(slot.pile) * CARD_OFFSET)) < DROP_PROXIMITY            and abs(self.left - slot.left) < DROP_PROXIMITY        ):                self.place(slot)                self.update()                return        for slot in self.solitaire.foundations:            if (                    abs(self.top - slot.top) < DROP_PROXIMITY            and abs(self.left - slot.left) < DROP_PROXIMITY        ):                self.place(slot)                self.update()                return    self.bounce_back()    self.update()

Now lets specify click method for the on_tap event of the card to reveal the card if you click on a faced-down top card in a tableau pile:

def click(self, e):    if self.slot in self.solitaire.tableau:        if not self.face_up and self == self.slot.get_top_card():            self.turn_face_up()            self.update()

Let's check how it works:

Foundations rules

At the moment we can place fanned piles to foundations, which shouldnt be allowed. Lets check the draggable pile length to fix it:

def drop(self, e: ft.DragEndEvent):    for slot in self.solitaire.tableau:        if (            abs(self.top - (slot.top + len(slot.pile) * CARD_OFFSET)) < DROP_PROXIMITY        and abs(self.left - slot.left) < DROP_PROXIMITY        ):            self.place(slot)            self.update()            return    if len(self.get_draggable_pile()) == 1:        for slot in self.solitaire.foundations:            if (                abs(self.top - slot.top) < DROP_PROXIMITY        and abs(self.left - slot.left) < DROP_PROXIMITY        ):                self.place(slot)                self.update()                return    self.bounce_back()    self.update()

Then, of course, not any card can be placed to a foundation. According to the rules, a foundation should start with an Ace and then the cards of the same suite can be placed on top of it to build a pile form Ace to King.

Lets add these rules to Solitaire class:

def check_foundations_rules(self, card, slot):    top_card = slot.get_top_card()    if top_card is not None:        return (            card.suite.name == top_card.suite.name            and card.rank.value - top_card.rank.value == 1        )    else:        return card.rank.name == "Ace"

Well check this rule in drop() method before placing a card to a foundation:

def drop(self, e: ft.DragEndEvent):    if self.face_up:        for slot in self.solitaire.tableau:            if (                abs(self.top - (slot.top + len(slot.pile) * CARD_OFFSET)) < DROP_PROXIMITY            and abs(self.left - slot.left) < DROP_PROXIMITY        ):                self.place(slot)                self.update()                return        if len(self.get_draggable_pile()) == 1:            for slot in self.solitaire.foundations:                if (                    abs(self.top - slot.top) < DROP_PROXIMITY            and abs(self.left - slot.left) < DROP_PROXIMITY        ) and self.solitaire.check_foundations_rules(self, slot):                    self.place(slot)                    self.update()                    return        self.bounce_back()        self.update()

As a final touch for foundations rules, lets implement doubleclick method for on_double_tap event of a card. It will be checking if the faced-up card fits into any of the foundations and place it there:

   def doubleclick(self, e):       if self.face_up:           self.move_on_top()           for slot in self.solitaire.foundations:               if self.solitaire.check_foundations_rules(self, slot):                   self.place(slot)                   self.page.update()                   return

Tableau rules

Finally, let's implement the rules to build tableau piles down from King to Ace by alternating suite color. Additionally, only King can be placed to an empty tableau slot.

Lets add these rules for Solitaire class:

def check_tableau_rules(self, card, slot):    top_card = slot.get_top_card()    if top_card is not None:        return (            card.suite.color != top_card.suite.color            and top_card.rank.value - card.rank.value == 1            and top_card.face_up        )    else:        return card.rank.name == "King"

Similarly to the foundations rules, well check tableau rules before placing a card to a tableau pile:

def drop(self, e: ft.DragEndEvent):    if self.face_up:        for slot in self.solitaire.tableau:            if (                abs(self.top - (slot.top + len(slot.pile) * CARD_OFFSET)) < DROP_PROXIMITY            and abs(self.left - slot.left) < DROP_PROXIMITY        ) and self.solitaire.check_tableau_rules(self, slot):                self.place(slot)                self.update()                return        if len(self.get_draggable_pile()) == 1:            for slot in self.solitaire.foundations:                if (                    abs(self.top - slot.top) < DROP_PROXIMITY            and abs(self.left - slot.left) < DROP_PROXIMITY        ) and self.solitaire.check_foundations_rules(self, slot):                    self.place(slot)                    self.update()                    return        self.bounce_back()        self.update()

Stock and waste

To properly play Solitaire game right now, we are missing the remaining cards that are piled in the stock.

Lets update click() method of the card to go through the stock pile and place the cards to waste as we go:

def click(self, e):    if self.slot in self.solitaire.tableau:        if not self.face_up and self == self.slot.get_top_card():            self.turn_face_up()            self.update()    elif self.slot == self.solitaire.stock:        self.move_on_top()        self.place(self.solitaire.waste)        self.turn_face_up()        self.solitaire.update()

Thats it! Now you can properly play Solitaire game, but it is very difficult to win the game if you cannot pass though the waste again. Lets implement click method that will be called in on_click event of the stock slot to go through the stock pile again:

class Slot(ft.Container):   def __init__(self, solitaire, top, left, border):       super().__init__()       self.pile=[]       self.width=SLOT_WIDTH       self.height=SLOT_HEIGHT       self.left=left       self.top=top       self.on_click=self.click       self.solitaire=solitaire       self.border=border       self.border_radius = ft.border_radius.all(6)   def click(self, e):       if self == self.solitaire.stock:           self.solitaire.restart_stock()

restart_stock() method in Solitaire class will place all the cards from waste to stock again:

def restart_stock(self):    while len(self.waste.pile) > 0:        card = self.waste.get_top_card()        card.turn_face_down()        card.move_on_top()        card.place(self.stock)       self.update

For card.place() method to work properly with the cards from stock and waste, weve added a condition to card.get_draggable_pile(), so that it returns the top card only and not the whole pile:

def get_draggable_pile(self):    """returns list of cards that will be dragged together, starting with the current card"""    if self.slot is not None and self.slot != self.solitaire.stock and self.slot != self.solitaire.waste:        return self.slot.pile[self.slot.pile.index(self):]    return [self]

All done! The full source code for this step can be found here.

Lets move on to the last step of the game itself - detecting the situation when you have won.

Winning the game

According to wikipedia, some suggest the chances of winning the Klondike solitaire game as being 1 in 30 games.

Knowing that the chances of winning are quite low, we should plan on showing the user something exciting when that finally happens.

First, lets add a check for the winning condition to Solitaire class. If all four foundations contain total of 52 cards, then you have won:

def check_win(self):    cards_num = 0    for slot in self.foundations:        cards_num += len(slot.pile)    if cards_num == 52:        return True    return False

Well be checking if this condition is true each time a card is placed to a foundation:

def place(self, slot):    """Place draggable pile to the slot"""    draggable_pile = self.get_draggable_pile()    for card in draggable_pile:        if slot in self.solitaire.tableau:            card.top = slot.top + len(slot.pile) * CARD_OFFSET        else:            card.top = slot.top        card.left = slot.left        # remove card from it's original slot, if exists        if card.slot is not None:            card.slot.pile.remove(card)        # change card's slot to a new slot        card.slot = slot        # add card to the new slot's pile        slot.pile.append(card)    if self.solitaire.check_win():        self.solitaire.winning_sequence()    self.solitaire.update()

Finally, if the winning condition is met, it will trigger a winning sequence involving position animation:

def winning_sequence(self):    for slot in self.foundations:           for card in slot.pile:            card.animate_position=1000            card.move_on_top()            card.top = random.randint(0, SOLITAIRE_HEIGHT)            card.left = random.randint(0, SOLITAIRE_WIDTH)            self.update()    self.controls.append(ft.AlertDialog(title=ft.Text("Congratulations! You won!"), open=True))

As you can imagine, it took me a while before I could win the game and take this video, but here it is:

Wow! We did it. You can find the full source code for the Part 1 of the Solitaire game here.

In Part 2 we will be adding top menu with options to restart the game, view game rules and change game settings such as waste size, number of passes through the waste and card back image.

Now, as we have a decent desktop version of the game, lets deploy it as a web app to share with your friends and colleagues.

Deploying the app

Congratulations! You have created your Solitaire game app in Python with Flet, and it looks awesome!

Now it's time to share your app with the world!

Follow these instructions to deploy your Flet app as a web app to Fly.io or Replit.

Summary

In this tutorial, you have learnt how to:

Create a simple Flet app;
Drag and drop cards with GestureDetector;
Create your own classes that inherit from Flet controls;
Design UI layout using absolute positioning of controls in Stack;
Implement implicit animations;
Deploy your Flet app to the web;

For further reading you can explore controls and examples repository.

We would love to hear your feedback! Please join the discussion on Discord or follow us on Twitter.

Original Link: https://dev.to/flet/create-solitaire-game-with-python-and-flet-part-1-2o64

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To