Rupert  Beatty

Rupert Beatty

1624967940

Solitaire in Blazor Part 4 - Drag and Drop

So far in this series, we have:

  • Outlined how we want our Solitaire game to work as a Blazor WebAssembly application.
  • Written a set of C## classes defining the components of our Solitaire game
  • As well as created a set of Razor components for the individual parts of the game area, including the discard pile, the draw pile, the suit piles, and the stacks.

In this part, we’re going to put them all together with some drag-and-drop goodness to create a working game of Solitaire!

Revealing a Hidden Card

There’s one little thing we must implement before moving on to the drag-and-drop implementation, and that is how to reveal a hidden card.

You might recall from Part 3 that we created a HiddenCard Blazor component, and it looked like this:

@code {
    [Parameter]
    public string CssClass { get; set; }

    [Parameter]
    public EventCallback ClickEvent { get; set; }
}

<div class="@CssClass" @onclick="ClickEvent">
    <img src="images/solitaire/cardBack.png" />
</div>

#blazor

Solitaire in Blazor Part 4 - Drag and Drop