Romanian MSP’s at Imagine Cup 2017

On 27th April our teams participated in Imagine Cup National final in Romania. Even though none of those teams got into the next stage, we all had fun and learned a lot of new things. The day had been filled with presentations, both from the contestants and from technical experts that taught us how to use different technologies, and with joy and beautiful moments.

We believe that attending Imagine Cup was a huge opportunity. We had the chance to work together on projects with people we knew and people we didn’t knew before, make new friends and interact with some really amazing people.

The MSP teams (teams with at least a MSP member in them) that presented are, in the order in which they presented:

BHN Team

The first MSP team that presented was BHN Team. This team created a solution that might help people take care of their money better. With the help of their application you would know who you borrowed money, who borrowed from you and the persons that owed you money would receive notifications to alert them that they should pay back.

Team members: Andrei Spatariu, Laurentiu Stamate and Oana Caplescu.

Farmo

Farmo is a solution that wants to help people that grow vegetables and fruits sell their products better. The application is easy to use and it wants to make the communication between the producers and their clients as easy as possible.

Team members: Alexandru Petrescu and Stefan Roman.

EnerGO

EnerGO thinks about the future of the planet. They have an application that helps you with selecting the perfect electric car for you, with the help of an elaborate algorithm.

Team members: Flavia Carciumaru, Alexandru Maxim,  Radu Iulian and Dragos Corlatescu

Head on a Cloud

Head on a Cloud is a team that wants to save some time, so they tried to implement a solution to make the subway system faster. They tried to implement a solution that would replace the tickets that we use at the metro with facial recognition.

Team members: Corina Palade, Mihai BurduseluMiruna Cojocaru

How to create a simple game using Universal Windows Platform

Today we are going to learn about Universal Windows Platform – to be more precise, we will cover the steps you need to go through if you want to make your own Tic-Tac-Toe game using this platform.

Introduction

 

The code I will  talk about in this tutorial can be found here

 

First of all: what is Universal Windows Platform? A simple way of explaining this is to say that an app made using UWP is going to work on every device that runs Windows on it. If you want to learn more about UWP click here.

This game is a simple Tic-Tac-Toe game. It has two mods, you can either play against a computer or against another player. When you finish a game a screen that tells you if you won or lost will appear. After that you can play again and again.

Main Ideas

The application is divided in two main parts. The user interface is made using XAML and the code that makes it work was written in C#.

firstScreen    secondScreen

The left screen is what greets the user when he starts the application. As you can see, you can choose between Singleplayer ( play against a computer ) and Multiplayer ( play against a friend ).

After selecting the type of the game ( in this case SinglePlayer ) you will write your name and choose the color of the screen. In this example the screen will be green.

playGreenScreen    winningScreen

After winning ( or losing ) you will see a screen that informs you about the result of the match. After you see this you have to click on the screen in order to start again.

In order to keep the code clean and easy to change ( you can read more about clean code at this link ) I tried to keep every function as simple as possible. So we have two interfaces, one for game and one for player. Those interfaces are implemented later by multiple classes. You can find out more about interfaces and C# here.

Another way of keeping your code easy to read is having a lot of functions. A function should do only one task, so I’ve tried to have simple functions. Also, finding bugs in your code is easier if you don’t need to spend time thinking “what did I do here?”.

You can find the sources for the actual gameplay here ( multiplayer ) and here ( singleplayer ). Their logic is similar, the main difference coming from the fact that when an actual player makes a move he clicks on the screen, while a computer player does this in a very different way.

Now, let’s talk about how XAML and C# work together. For this I will use a simple example, the Winning Screen. The interface is a simple one: only a text will appear on the screen.

What happens behind this text? We receive the name of the winner, the background color of the game and the type of the game. We set the screen color to be the one selected by the user and after that we check if the match was on the singleplayer mode on the multiplayer mode. If you played in multiplayer the message will look like: ” Player1 won! \n Player2 lost! \n”. Only instead of Player1 and Player2 you will have the names you wrote on the first screen.

After that, in order to play, you only have to click on the screen.

Let’s talk code

Now I will talk more in detail about what happens in this code.

At the base of the game I have two interfaces (IGame and IPlayer). Why do I need them? Why do you need interfaces in the first place? To keep the code easy to extend, that’s why.

During the game we meet with two kinds of players. One ( or two ) are human. The other one is a computer. What do they have in common? They both have a name. That’s why we have the “Name” property inside IPlayer.

interface IPlayer
{
    string Name { get; set; }
}

We are able to play two different kind of games. One is player vs player and the other is player vs computer. During the game we need to see whose turn is, if the game is over, we need to update the status of the game after every move and, when the game is over, we have to restart.

interface IGame
{
    void UpdateStatus();

    bool IsOver();
    bool IsXTurn();
    bool Is0Turn();

    void Restart();
}

If you open the folder called “AbstractClasses” you see that we have an abstract class, Game, who implements every method defined in IGame, plus some other helpful methods. “Why did we need the interface is we were going to do this?”, you might ask. Let’s say I want to change the way I check if the game is over. I need to change a single method, IsOver(). Let’s say I want to create a different kind of game when it’s over if someone clicks in the middle of the screen. Then I want the game to be over if you click more than once in a place. If you want to do this you can have multiple abstract classes, each with a different IsOver() method, who would work with the rest of the code.

About other classes used in the game:

  • GameType.cs : a simple class you can use to remember the type of the game. It can be either SinglePlayer or MultiPlayer.
  • Gamers.cs: this is more about the players. You can use it to keep the name of the players, the type of the game, who won and who lost, and also the color of the screen.
  • MultiPlayerGame.cs and SinglePlayerGame.cs: they both use the Game abstract class and their own methods to create the different environments of the game.
  • HumanPlayer.cs and ComputerPlayer.cs: this is where you can see how the player makes it’s actual moves. The Human Player clicks on the screen and the Computer Player looks around the field to find a place in which he can move.

Now, let’s talk about the way C# communicates with xaml.

In order to exemplify this I will use the winning screen. The XAML part is not very complex, it’s basically a TextBlock.

<TextBlock
            x:Name="winner"
            FontSize="100"
            TextWrapping="Wrap"
            TextAlignment="Center"
            Tapped="GoToFirstScreen">
        </TextBlock>

But what happens behind?

using TicTacToe.GameClasses;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace TicTacToe.Screens
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class WinningScreen : Page
    {
        public WinningScreen()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            var gamers = (Gamers)e.Parameter;

            Screen.Background = gamers.BackgroundColor;

            if (gamers.WinnerName == "null" && gamers.LoserName == "null")
            {
                winner.Text = "We have no winner!";
                return;
            }

            if (gamers.isMultiPlayer == false)
            {
                if (gamers.WinnerName == gamers.OPlayerName )
                {
                    winner.Text = "You Lost";
                    return;
                }
                else
                {
                    winner.Text = "You Won!";
                    return;
                }
            }

            if (gamers.isMultiPlayer)
            {
                winner.Text = gamers.WinnerName + " won!\n" + gamers.LoserName + " lost!\n";
                return;
            }

        }

        private void GoToFirstScreen(object sender, TappedRoutedEventArgs e)
        {
            Frame.Navigate(typeof(MainPage));
        }
    }
}

When the game is over a parameter is transmitted, so that we will know who won and who lose. Then we complete the text to congratulate the winner. We can change every property of this TextBlock from C# using it’s name.

After that you only have to click on the screen to go to the first page and play again.

The GamePlay

SinglePlayer.xaml.cs

When the game starts it receives some data from the previous page. We need the name of the player and the background color.

In the begin we create a new computer player, a new human player and a new game.

After that the game begins.

At every turn we check to see if the game is over or if the computer won.

private void UpdateGameStatus(object sender, TappedRoutedEventArgs e)
    {

        bool gameOver = false;

        if (HumanPlayer.Name == defaultHumanPlayerName)
            HumanPlayer.Name = HumanPlayerName;

        TicTacToe.UpdateStatus();

        if (AbstractClasses.Game.isWonByXPlayer)
        {
            TicTacToe.Restart();

            gamers.WinnerName = TicTacToe.HumanPlayer.Name;
            gamers.XPlayerName = TicTacToe.HumanPlayer.Name;
            gamers.LoserName = TicTacToe.ComputerPlayer.Name;
            gamers.OPlayerName = TicTacToe.ComputerPlayer.Name;

            gameOver = true;
        }

        else

       if (TicTacToe.IsOver() || AbstractClasses.Game.isWonBy0Player)
        {
            TicTacToe.Restart();

            gamers.WinnerName = TicTacToe.ComputerPlayer.Name;
            gamers.XPlayerName = TicTacToe.ComputerPlayer.Name;
            gamers.LoserName = TicTacToe.HumanPlayer.Name;
            gamers.OPlayerName = TicTacToe.HumanPlayer.Name;

            gameOver = true;
        }

        else
            TicTacToe.MakeMove(sender, e, Single);

        if (gameOver)
            Frame.Navigate(typeof(WinningScreen), gamers);

    }

}

You can see the code above.

We update the status at every move. When the game is over we update the gamers variable with the name of the winner and the name of the loser. Otherwise, the game keeps on.

MultiPlayer.xaml.cs

The most important difference between SinglePlayer and MultiPlayer is the way the players move.

private void UpdateGameStatus(object sender, TappedRoutedEventArgs e)
        {

            if (TicTacToe.IsXTurn())
            {
                TicTacToe.InsertX(sender, e);
                CheckGameStatus();
            }

            else
                if (TicTacToe.Is0Turn())
            {
                TicTacToe.Insert0(sender, e);
                CheckGameStatus();
            }

        }

The are both human players, so they make moves the same way. If it’s X player turn then he moves, else the 0 player moves. They are inserting by clicking on a the game field, in the place in which they want to insert.

In conclusion

This is it. I hope you liked this article. If you have any questions or if you didn’t like something leave a comment here and I will reply as soon as I see it.

So there you have it, a well documented post about how you can make a Tic-Tac-Toe game in UWP. Stay tuned on this blog (and star the microsoft-dx organization) to emerge in the beautiful world of “there’s an app for that”.