Microsoft 365 Community Community Demos, 16 Jul 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Creating a Minesweeper game in React with SPFx

Description

In this 9-minute Maker focused demo, first time contributor Pieter Heemeryck added the classic game of Minesweeper into the PnP Samples repository as a SPFx webpart created with Fluent UI. Get to know the code through the CodeTour (VS Extension) he recorded. Functionality: Click (discover), Plant (flag), chording, reset, 3 difficulty level settings. Displays real-time and high score. High Scores – SharePoint API REST calls to back-end SharePoint list. Added features (modes) for efficient Mobile gaming experience. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 16, 2020.

Demo Presenter: Pieter Heemeryck (Delaware Belux) | @heemeryckpieter

Supporting materials:
• Minesweeper in SPFx | https://digitalworkplace365.wordpress.com/2020/07/08/minesweeper-in-spfx/
• Minesweeper | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-minesweeper
• Upgrading SharePoint Framework projects using Office 365 CLI CodeTour upgrade | Hugo Bernier (Tahoe Ninjas) | @bernierh – https://youtu.be/XXfcGVuXizs?t=2274

Learn more:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

A

My name is peter himerick, I'm from belgium, and I work at delaware as a technical consultant, and the reason I'm here is I've added the classic game of minesweeper into the pnp samples repository as an spfx webpart, which I created with fluent ui. So my apologies in advance because it might be the first country productive web part, that's in there.

A

So as a kid I know I used to love playing minesweeper and all those other games on xp windows xp like solitaire, so I was looking for a challenge a couple of weeks ago and I know- and I love minesweeper. I thought I know, and I love spfx. So why not combine it? And so this is the result of that and also, I think that every framework that dates itself quote unquote very seriously needed its very own mindsweeper version, of course. um So this is what it looks like in microsoft teams.

A

I've been busy the last two weeks as well, because I've added a high score table to it. I'll show you the details: how and how it's created and how it can be used and then, after showing the demo I'll.

A

Also go through the code, a bit, not everything, of course, but I also want to show you the code tour I've made because hugo bernier showed it like uh four weeks ago uh in a previous call, and it's yeah quite easy and nice to to set it up for newcomers into your code to get to know your code. So first up the demo I'll show you in teams.

A

If I go to the channel here, as you can see, I have a minesweeper tab here and so it loads the high scores, and so the first thing we can do is just start playing game. Of course I can click until I hit a mine or until I finish the game with the new high score, perhaps all right. What else can we do? We can also start flagging stuff right.

A

So if I do a right click now, I've switched out the uh fluency icon with a delaware icon for the occasion, but you see you get the picture now. What else can we do if we uh we can also do cording? Actually, I didn't know what it was. I don't even have a dutch word for it, but it's if I had to translate it literally, it would be like making a chain if I have the equal amount of flags uh surrounding a number.

A

For instance, I have one flag here, and this is the number one then, according to me, if I set the flag correctly, I will I I am able to uh just to uncover all these rounding tiles. So let's just do that. As you can see, I've made a mistake and then it also shows the mistake. I've made. Let me just quickly reset the game.

A

I've also added a bit of support for mobile system tail. It's just. uh You can switch between mind mode and uh flag mode. So if I just keep left clicking, you can see. I just uncovered tiles. If I click this one, I can uh immediately set a flag with my left click. Why is this so important? Well on mobile? If you want to do a right click or set a flag and you're just in mind mode, then you need to do a long press.

A

So if you want to get those high scores on mobile, it's easy to switch uh to flag mode right. So all right, I've showed you all of those things. Of course, there's the uh several difficulty settings like the intermediate and the all gigantic expert mode with 99 flags uh bombs, of course, all right and then the high score. How does this work? It's actually uh automatically provisioned using quite simple sharepoint api uh rest calls uh to the back end and what we do is we just create a hidden uh sharepoint list right.

A

So that's a secret between us. Of course you can go to the sharepoint list and edit your high scores, but let's not do that. Folks, as you can see, I have quite a decent score. I think at least for the beginner, but uh there's quite a few strong colleagues that know how to play minesweeper and actually uh robin managed to just sneak past me just yesterday. I think all right so um also if you manage to get a high score, your you ought to automatically add your high score to the list.

A

Of course, and you can you can sort uh of course, so um I think that's it. For the demo, now, let's head over to the code, I uh I hope this is big enough, because uh you will mention it. I should zoom in all right I'm going to open the tour file first. So actually it's pretty easy to get started with code tour.

A

It's just an extension that you would get from the visual studio, extensions store and I've added a lot of steps, as you can see so, but the cool thing is, you can add, uh commands to it and if you just click on it, it's automatically executed for you. So I just clicked on um gulp serve and then it will automatically do that for me, so quite easy for newcomers to get started with your web parts. So it serves the workbench for me and I can add my web part right all right.

A

So, let's see what else I'm not gonna show all of the steps, because I'm just gonna skip to step, 11., okay. So what else can you do? You can reference other steps in the code for extension, so here I have the beginning of my game logic, region, and these are actually all the relevant methods inside my game, logic region so, for instance, how to initialize the grid. What happens if you discover a tile plan, a flag and so on? I've explained coding already, let's go ahead and click to the traverse empty tiles method.

A

What does this do? This is actually quite interesting, quite interesting, recursive method that just handles the events when you click on a mine or on a tile, I mean that is, uh has no surrounding mines right, so we have delta coordinates and for each delta coordinates we're going to check uh what it. What is there right? The delta coordinates are just the eight uh surrounding tiles right. The next thing we do is we check if the field type, we do a simple check on the field type, and then we get the surrounding minds now.

A

If there are no surrounding minds, then of course we want to traverse all the other empty tiles, and we just call this method again, but with our delta coordinates, and this keeps on going until we hit like a border, and the border is a number of course that says: okay now from now on, there's so many minds close to me, and- and this is also uh how the method knows- it should stop right.

A

Okay, um I'm gonna really quickly show how the code is structured. So actually it's quite neatly structured with regions, so the initialization of your state and and constants, then we have the render section. The events, the game logic, which I showed you already a part of, and then some helpers, the initialization and the render is nothing special.

A

But maybe I could show you some events, so, as you can imagine, we have a regular click, then a right click and then several other things you can do like reset the grid or select a new difficulty or toggle the modes between mine and flag. Now what I wanted to show you is that I've separated the logic from from the click logic. So the game logic when you do a left click it enters here and it first checks.

A

If we should do chording right, but because then it just immediately skips recording whenever, if you do left or right click, it always does that now, but depending on the mode, we are in we're gonna, either plant a flag or do the discover of an unknown tile, of course, so uh and then there's uh several yeah pretty self-explanatory uh methods in there.

A

Let me wrap this up real quick, so I've showed you the code, let's head back to the slides. First of all, to wrap this up. I want to you guys to let me know if you like the web board, because I'm very curious to see how it will be used where it will be used. You can reach me on email or via twitter.

A

Also, I want to mention that I am one of those first-time contributors and I must say that there are some pretty handy guidelines on the pnp sample repository on github and it was overall, a quite fun experience for me to do it. So I'm going to wrap this up by saying, thank you for having me and have a good day, fantastic.

B

Thank you very much very cool uh demo, just showing a lot of different techniques. There certainly appreciate that and welcome to big trader uh appreciate you and all the other folks that have just started out contributing recently. It's really exciting to see that continue to grow and grow and grow.