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

{
  "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"
}