sp-dev-fx-webparts/samples/react-minesweeper/minesweeper-walkthrough.tour

196 lines
5.9 KiB
Plaintext
Raw Normal View History

2020-07-06 02:34:14 -04:00
{
"title": "minesweeper-walkthrough",
"steps": [
{
"file": "samples/react-minesweeper/package.json",
"description": "Minimal path to awesomeness:\r\n\r\n>> cd .\\samples\\react-minesweeper\r\n\r\n>> npm install\r\n\r\n>> gulp serve\r\n",
"selection": {
"start": {
"line": 14,
"character": 4
},
"end": {
"line": 14,
"character": 16
}
}
},
{
"file": "samples/react-minesweeper/src/webparts/minesweeper/components/Tile/Tile.tsx",
"description": "Tile rendering",
"selection": {
"start": {
"line": 32,
"character": 7
},
"end": {
"line": 38,
"character": 13
}
}
},
{
"file": "samples/react-minesweeper/src/webparts/minesweeper/components/Tile/Tile.module.scss",
"description": "Numbers are coloured like in the original game!",
"selection": {
"start": {
"line": 10,
"character": 1
},
"end": {
"line": 45,
"character": 2
}
}
},
{
"file": "samples/react-minesweeper/src/webparts/minesweeper/components/Tile/Tile.module.scss",
"description": "Mines & flags can have additional styling:\r\n- The background of the mine tile that was clicked on turns red\r\n- Flags that were incorrect turn red as well",
"selection": {
"start": {
"line": 47,
"character": 1
},
"end": {
"line": 67,
"character": 2
}
}
},
{
"file": "samples/react-minesweeper/src/models/TileInfo.ts",
"description": "Each tile has these properties",
"selection": {
"start": {
"line": 5,
"character": 1
},
"end": {
"line": 10,
"character": 2
}
}
},
{
"file": "samples/react-minesweeper/src/webparts/minesweeper/components/Grid/IMinesweeperState.ts",
"description": "State of the main component",
"selection": {
"start": {
"line": 7,
"character": 1
},
"end": {
"line": 17,
"character": 4
}
}
},
{
"file": "samples/react-minesweeper/src/webparts/minesweeper/components/Grid/Minesweeper.tsx",
"description": "Render main component\r\n- Game info header\r\n- Grid\r\n- High score callout",
"selection": {
"start": {
"line": 52,
"character": 1
},
"end": {
"line": 56,
"character": 13
}
}
},
{
"file": "samples/react-minesweeper/src/webparts/minesweeper/components/Grid/Minesweeper.tsx",
"line": 111,
"description": "Events:\r\n- Left / right click\r\n- Toggle mine / flag mode\r\n- Select difficulty\r\n- Toggle high score\r\n- Reset"
},
{
"file": "samples/react-minesweeper/src/webparts/minesweeper/components/Grid/Minesweeper.tsx",
"description": "Tile click events:\r\n- Chording\r\n- Mine / flag mode: interchange meaning left / right click",
"selection": {
"start": {
"line": 113,
"character": 1
},
"end": {
"line": 137,
"character": 4
}
}
},
{
"file": "samples/react-minesweeper/src/webparts/minesweeper/components/Grid/Minesweeper.tsx",
"description": "State initialization.",
"selection": {
"start": {
"line": 33,
"character": 1
},
"end": {
"line": 43,
"character": 7
}
}
},
{
"file": "samples/react-minesweeper/src/webparts/minesweeper/components/Grid/Minesweeper.tsx",
"line": 201,
"description": "- [Initialize grid][#12]\r\n- [Discover][#13]\r\n- [Plant flag][#14]\r\n- [Chording][#15]\r\n- [Traverse empty][#16]\r\n- [Get surrounding mines / flags][#17]\r\n- [Player wins / loses][#18]"
},
{
"file": "samples/react-minesweeper/src/webparts/minesweeper/components/Grid/Minesweeper.tsx",
"line": 203,
"description": "Randomize the mines in the grid\r\n\r\nBack to [game logic overview][#11]"
},
{
"file": "samples/react-minesweeper/src/webparts/minesweeper/components/Grid/Minesweeper.tsx",
"line": 227,
"description": "Game logic: discover\r\n\r\nBack to [game logic overview][#11]"
},
{
"file": "samples/react-minesweeper/src/webparts/minesweeper/components/Grid/Minesweeper.tsx",
"line": 288,
"description": "Game logic: plant flag\r\n\r\nBack to [game logic overview][#11]"
},
{
"file": "samples/react-minesweeper/src/webparts/minesweeper/components/Grid/Minesweeper.tsx",
"line": 320,
"description": "Game logic: chording\r\n\r\nBack to [game logic overview][#11]"
},
{
"file": "samples/react-minesweeper/src/webparts/minesweeper/components/Grid/Minesweeper.tsx",
"line": 342,
"description": "Game logic: traverse empty tiles\r\n- Recursive\r\n\r\nBack to [game logic overview][#11]"
},
{
"file": "samples/react-minesweeper/src/webparts/minesweeper/components/Grid/Minesweeper.tsx",
"description": "Game logic: get surrounding mines / flags\r\n- Using the 8 delta coordinates\r\n\r\nBack to [game logic overview][#11]",
"selection": {
"start": {
"line": 361,
"character": 1
},
"end": {
"line": 389,
"character": 4
}
}
},
{
"file": "samples/react-minesweeper/src/webparts/minesweeper/components/Grid/Minesweeper.tsx",
"line": 412,
"description": "Game logic: player wins / loses\r\n\r\nBack to [game logic overview][#11]",
"selection": {
"start": {
"line": 412,
"character": 1
},
"end": {
"line": 463,
"character": 4
}
}
}
],
"ref": "master"
}