Reversi XAML/C# Windows Store Sample Game

So you got a new Windows 8 PC or Surface RT this holiday season? And since you're reading this, you're likely someone who likes to code. So of course you want to code something up for your new Windows 8 PC/Surface! What's more fun than digging into a game?

Today's project is an "end-to-end" Windows Store game that runs great on PC's (x86/x64) and the Surface RT (ARM).

And as an added bonus you get to see MVVM in action, Sharing contracts (so you can share your awesomeness with friends and family) and is even packaged in such a way as you can use the "engine" with other WinRT supported languages too!

Oh and finally there's good bit of documentation that details how everything works.

Reversi XAML/C# sample board game app

The Reversi sample is an end-to-end board game app that shows some common features of Windows Store apps in a real-world setting. It also shows the use of XAML and C# features to create a layered (MVVM) app structure that is helpful as an app becomes more complex.

For a general introduction to the sample, see Developing Reversi.

To learn how the sample uses some features without having to understand the whole sample, see Reversi feature scenarios.

To learn how the overall sample works, see Reversi app structure, which describes the layers of the app and the parts in each layer. 

The Reversi sample shows you:

• Windows Store app features, including:
  • Tile and splash screen
  • App bar
  • Toast notifications
  • Settings flyouts
  • Share contract
  • Windows Runtime component creation and usage
• The use of the Common classes generated by the Visual Studio app templates to support:
  • Data binding
  • App navigation
  • Dynamic layout for screen orientation changes and snapped view
  • App lifecycle management (suspend, terminate, and resume)
• XAML and C# features, including:
  • Data binding and code separation patterns (MVVM)
  • XAML-based animations and states, including keyboard focus and mouse hover states
  • Custom controls and user controls
  • Asynchronous programming and thread cancellation
  • LINQ and related syntax features

This sample represents a work in progress. Not every scenario has documentation coverage, and some scenarios have only simple implementations. The sample is provided as-is, with no guarantees that it meets store certification requirements. However, the goal of this project is to provide accurate guidance on designing and developing a complete Windows Store app. Additional work is currently planned to ensure that the app is fully compliant with store requirements.

Changes in the 12/6 release

This release differs from the initial release in the following ways:

• The share contract has been implemented to share an image of the current game, including text info describing its state. This info is shared in a variety of formats to increase the number of compatible share targets.
• The ReversiGame project has been refactored into a Windows Runtime component to make it reusable in Windows Store apps based on other languages (such as JavaScript), and to enable replacement with a C++ implementation in order to optimize performance.
• The ReversiGame and ReversiTests projects have been renamed to ReversiGameComponent and ReversiGameComponentTests to make their roles clearer.

Developing Reversi, a Windows Store game in C# and XAML (Windows)

The Reversi board game app is an end-to-end sample that shows some common features of Windows Store apps in a real-world setting. It also shows the use of XAML and C# features to create a layered app structure (using the Model-View-ViewModel or MVVM pattern) that is helpful as an app becomes more complex. This topic introduces the sample and provides links to additional documentation.

For a short intro to MVVM, see Using the Model-View-ViewModel pattern.

To learn how this sample uses particular features without having to understand the whole sample, see Reversi feature scenarios.

To learn how the overall sample works, see Reversi app structure, which describes the layers of the app and the parts in each layer.

Note  This documentation reflects the current state of the sample at the time of writing. See the following links for the latest code and info about any updates.

...

Reversi is one of the most common board games implemented on computers. This is because the rules and artificial intelligence (AI) are relatively easy to implement, and the rules are over a hundred years old and are thus not under copyright. It also represents a programming problem that is not too hard but also not too easy.

The Reversi sample app includes features that let a player:

• Read the rules of the game.
• Play against other humans or against an AI at several difficulty levels.
• Pause the clock when the game isn't active.
• Show and hide the clock.
• Show and hide visual indications of the legal moves and the spaces affected by the previous move.
• Undo and redo moves to explore alternate plays.
• Play the game on different board sizes.

This set of features provides enough complexity to represent a truly "real world" app, but with enough simplicity to keep the app relatively small for learning purposes.

Reversi feature scenarios (Windows)

In this article

• Tile and splash screen
• App bar
• Toast notifications
• Settings flyouts
• Sharing content
• Data binding
• Asynchronous code
• Using a Windows Runtime Component
• Related topics

The Reversi sample uses several common features of Windows Store apps using XAML and C#. This topic describes how the sample uses some of these features, and provides links to key feature topics.

This topic does not require you to understand the whole sample, but it does assume that you already know XAML and C#, and already understand the basics of each feature, or are willing to learn by reading the linked topics. For info on app development fundamentals, see Create your first Windows Store app using C# or Visual Basic.

...

Reversi app structure (Windows)

In this article

• App layers
• The model layer
• The view layer
• The view-model layer
• Infrastructure and common code
• Unit tests
• Related topics

The Reversi sample uses a layered structure known as the Model-View-ViewModel (MVVM) pattern. This structure separates UI from non-UI code, which can simplify debugging, testing, and future development. This topic describes each layer in the sample, the parts in each layer, and how all the parts work together.

The Reversi sample differs from simpler XAML samples that put most of their non-XAML code in code-behind files. Reversi adds code to code-behind files in a few cases, but moves most of its non-XAML code to other layers and uses data binding to connect those layers to the UI.

The Reversi sample also differs from more complex XAML samples that use more advanced techniques, including separate MVVM frameworks. Such frameworks are useful for increasingly complex

...

Okay, okay... I think you now see there's a number of interesting things to read about, learn and see in the game.

Let's take a look at it. Here's a snap of the Solution. BTW, kudu's to the authors for including Unit Tests. It's great to see something like that included in a "sample".

So you can the game and game component are broken into the two pieces mentioned toward the beginning of the post (aka the 12/6/2012 note).

If you're like me, you're wondering if this really works on the Surface RT?

Yep! I'm here to tell, and show, you it does. There's just a couple things to do to get it run on the Surface RT, both pretty easy.

First, you need to change the Active Platform from x86 to All CPU's.

This is how it looks when first downloaded.

So obviously this will be a problem when trying to deploy it to an ARM device... Just switch the Active Solution Platform to Any CPU.

So now that it's possible to run it on a Surface RT, how do you get it over there? For dev's there's two primary ways. The approach I use is via Remote Debugging. Getting this setup isn't hard, but does take a few steps. Tim Heuer has a great write-up about that, Remote Debugging your Windows Store app on your Surface.

The other approach is to side-load an app package.

Which creates...

You'd copy all these to the Surface RT and then execute the included powershell, *ps1, script to install the app.

Both deployment schemes have their pluses and minus, where the remote debugger is much easier when both devices are on the same network, and the appdevpackage is perfect when the devices are not...

So I said I'd show you?

I think that's enough to get you started? Code, doc's screenshots, stuff to learn and a pretty complete game to play (where I... um... "invested" too much time in when writing this post up... . Now that's the way to start the year!