Create the Home Page
====================
The Minesweeper game uses two different webpages: a home screen plus an active
playing space. We need to build an HTML template for each page.
Review ``base.html``
--------------------
Since both game pages use the same ``
`` element, we can put that common
code into a base template:
.. admonition:: Example
Open ``base.html`` file to find this code:
.. sourcecode:: HTML
:linenos:
LCHS Minesweeper
{{page_title}}
{% block content %}
{% endblock %}
Note the following:
#. We link to a ``style.css`` file in line 8. It contains some basic styling
rules for the game, and the tutorials won't instruct you to change any of
the settings. However, you absolutely CAN adjust the properties and values
as you see fit! Don't like the gray background on the board? Fix it!
#. On line 13, the placeholder for the page title needs to be filled. Don't
forget to :ref:`pass a value ` to ``page_title`` from
each ``render_template()`` function.
#. Feel free to add extra elements to ``base.html``. Remember that this
content will appear on any template that extends from the base.
Build ``index.html``
--------------------
The home screen for the game presents users with an inactive copy of the board,
a menu for choosing the number of mines, and a space for instructions.
.. figure:: figures/home-page.png
:alt: Showing the home screen for the LCHS Minesweeper game.
:width: 60%
The LCHS Minesweeper home page.
Remember that our goal is to get the game working, so we will keep this page
simple for now. We can always make improvements and add other features later!
Open your Minesweeper project and code along with the video as we build the
HTML template:
.. raw:: html
Video Summary
-------------
#. Our focus is to set up the structure for the home page. We won't worry about
placing the mines or collecting data from the form.
#. The home page includes a title, one small form (``Main Menu``), an inactive
copy of the game board, and a reserved space for game instructions.
#. The form contains a single ``input`` field of type ``number``. Other
attributes include ``min`` and ``max`` values to encourage the user to
select a reasonable number of mines. Adding some ``placeholder`` text
inside the input box helps with the UI/UX.
#. Use a ``table`` element to build the rows and columns in the game board.
a. Use one ``
`` element for each row in the table.
b. Inside each row element, use ``
`` or ``
`` tags for the individual
cells. The number of cells in each row matches the number of columns we
want in the table.
c. Use one Jinja3 loop to display the column headings (1 - 10) at the top
of the table.
d. Use a nested pair of loops to display the row label or button in each
individual cell.
#. The text that appears on the board is stored in a session cookie. Column
headings can be accessed from a list assigned to the ``session['columns']``
key. Row data can be accessed from ``session['rows']``.
.. admonition:: Note
Remember, you don't have to keep the default styling! Feel free to
modify your project's CSS file to change the appearance of the page.
If you wish, you can also link to the `Bootstrap CSS library `__
and use :ref:`their classes ` to style your page.