From c92d2ee621a00ce1c76f223c31e936289978c2b1 Mon Sep 17 00:00:00 2001
From: synth-ruiner <max@tx87.net>
Date: Sun, 22 Mar 2015 18:09:34 +0000
Subject: [PATCH] Tutorial mode and credits

Moved difficulty options to separate "new game" buttons
styling for score/hi score
paypal and twitter links
---
 index.html | 789 ++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 694 insertions(+), 95 deletions(-)

diff --git a/index.html b/index.html
index 6cdcfd0..2e0a516 100644
--- a/index.html
+++ b/index.html
@@ -42,8 +42,120 @@
                 width: 100vmin;
             }
 
+            @keyframes scrollLeft {
+                from {left: 0;}
+                to {
+                    left: -720em; /* fallback */
+                    left: -7200vmin;
+                }
+            }
+
+            @-webkit-keyframes scrollLeft {
+                from {left: 0;}
+                to {
+                    left: -720em; /* fallback */
+                    left: -7200vmin;
+                }
+            }
+
+            @keyframes bounce {
+                0% {top: 0; left: 0;}
+                50% {
+                    top: 1.2em; /* fallback */
+                    top: 12vmin;
+                    left: 0.2em; /* fallback */
+                    left: 2vmin;
+                }
+                100% {top: 0; left: 0;}
+            }
+
+            @-webkit-keyframes bounce {
+                0% {top: 0; left: 0;}
+                50% {
+                    top: 1.2em; /* fallback */
+                    top: 12vmin;
+                    left:  0.2em;
+                    left: 2vmin;
+                }
+                100% {top: 0; left: 0;}
+            }
+
+            @keyframes rainbow {
+                0% {color: #c6fe7a;}
+                33% {color: #7ac5fe;}
+                67% {color: #fe7ac6;}
+                100% {color: #c6fe7a;} /* back to start */
+            }
+
+            @-webkit-keyframes rainbow {
+                0% {color: #c6fe7a;}
+                33% {color: #7ac5fe;}
+                67% {color: #fe7ac6;}
+                100% {color: #c6fe7a;} /* back to start */
+            }
+
             #cracktro {
-            	display: none;
+                color: #c6fe7a;
+                font-size: 0.4em; /* fallback */
+                font-size: 6vmin;
+                height: 2em; /* fallback */
+                height: 20vmin;
+                margin: 0.4em 0; /* fallback */
+                margin: 4vmin 0;
+                overflow: hidden;
+                white-space: nowrap;
+                width: 720em;
+                width: 7200vmin;
+
+                position: relative;
+                animation: scrollLeft 420s linear infinite;
+                -webkit-animation: scrollLeft 420s linear infinite;
+            }
+
+            #cracktro span {
+                margin-right: 0.1em; /* fallback */
+                margin-right: 1vmin;
+                position: relative;
+                animation: bounce 4s infinite ease-in-out,rainbow 5s infinite;
+                -webkit-animation: bounce 4s infinite ease-in-out,rainbow 5s infinite;
+                text-shadow: 0.5vmin 0.5vmin black;
+            }
+
+            #cracktro span:nth-child(10n+1) {
+                animation-delay: 0.4s;
+                -webkit-animation-delay: 0.4s;
+            }
+            #cracktro span:nth-child(10n+2) {
+                animation-delay: 0.8s;
+                -webkit-animation-delay: 0.8s;
+            }
+            #cracktro span:nth-child(10n+3) {
+                animation-delay: 1.2s;
+                -webkit-animation-delay: 1.2s;
+            }
+            #cracktro span:nth-child(10n+4) {
+                animation-delay: 1.6s;
+                -webkit-animation-delay: 1.6s;
+            }
+            #cracktro span:nth-child(10n+5) {
+                animation-delay: 2s;
+                -webkit-animation-delay: 2s;
+            }
+            #cracktro span:nth-child(10n+6) {
+                animation-delay: 2.4s;
+                -webkit-animation-delay: 2.4s;
+            }
+            #cracktro span:nth-child(10n+7) {
+                animation-delay: 2.8s;
+                -webkit-animation-delay: 2.8s;
+            }
+            #cracktro span:nth-child(10n+8) {
+                animation-delay: 3.2s;
+                -webkit-animation-delay: 3.2s;
+            }
+            #cracktro span:nth-child(10n+9) {
+                animation-delay: 3.6s;
+                -webkit-animation-delay: 3.6s;
             }
 
             #game {
@@ -98,13 +210,19 @@
                 width: auto;
             }
 
-            #gameOver, #setup {
-                position: absolute;
+            #gameOver, #setup, #tutorial {
+                background-color: rgba(0, 0, 0, 0.6);
                 width: 10em; /* fallback */
                 width: 100vmin;
                 height: 10em; /* fallback */
                 height: 100vh;
-                background-color: rgba(0,0,0,0.3);
+                overflow: hidden;
+                position: absolute;
+            }
+
+            #gameOver .score {
+                margin-right: 1.2em;
+                margin-right: 12vmin;
             }
 
             #setup h2 {
@@ -122,24 +240,27 @@
                 text-shadow: 0.5vmin 0.5vmin 0 #a4f4b4; /* x y blur-radius colour */
             }
 
+            #tutorial .gameBoard {
+                float: left;
+                padding: 0.5em; /* fallback */
+                padding: 5vmin;
+                padding-top: 0;
+            }
+
+            #tutorial p {
+                padding: 0 0.5em; /* fallback */
+                padding: 0 5vmin;
+            }
+
             .centre {
-            	text-align: center;
+                clear: both;
               	margin-top: 0.2em; /* fallback */
               	margin-top: 2vmin;
+                text-align: center;
             }
 
-            input[type="radio"] {
-                display: none;
-            }
-
-            /* after checked input */
-            input:checked + label {
-                border: 0.1em dotted #a4f4b4; /* fallback */
-                border: 1vmin dotted #a4f4b4;
-                border-radius: 0.2em; /* fallback */
-                border-radius: 2vmin;
-                padding: 0.1em 0.2em; /* fallback */
-                padding: 1vmin 2vmin;
+            .subtitle {
+                text-align: center;
             }
 
             button {
@@ -170,6 +291,32 @@
                 left: auto;
             }
 
+            button.donate {
+                background: #ffefa7;
+                background: -moz-linear-gradient(top,  #ffefa7 0%, #feae27 100%);
+                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffefa7), color-stop(100%,#feae27));
+                background: -webkit-linear-gradient(top,  #ffefa7 0%,#feae27 100%);
+                background: -o-linear-gradient(top,  #ffefa7 0%,#feae27 100%);
+                background: -ms-linear-gradient(top,  #ffefa7 0%,#feae27 100%);
+                background: linear-gradient(to bottom,  #ffefa7 0%,#feae27 100%);
+                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffefa7', endColorstr='#feae27',GradientType=0 );
+            }
+
+            button.twitter {
+                background: #51aaea;
+                background: -moz-linear-gradient(top,  #51aaea 0%, #3375a6 100%);
+                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#51aaea), color-stop(100%,#3375a6));
+                background: -webkit-linear-gradient(top,  #51aaea 0%,#3375a6 100%);
+                background: -o-linear-gradient(top,  #51aaea 0%,#3375a6 100%);
+                background: -ms-linear-gradient(top,  #51aaea 0%,#3375a6 100%);
+                background: linear-gradient(to bottom,  #51aaea 0%,#3375a6 100%);
+                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51aaea', endColorstr='#3375a6',GradientType=0 );
+            }
+
+            form {
+                display: inline;
+            }
+
             h1, h2 {
                 text-align: center;
             }
@@ -186,6 +333,12 @@
                 text-shadow: 1vmin 1vmin 0 #fe7ac6; /* x y blur-radius colour */
             }
 
+            h2 {
+                color: #7ac5fe;
+                font-size: 0.6em; /* fallback */
+                font-size: 6vmin;
+            }
+
             ul {
                 float: left;
                 clear: both;
@@ -236,6 +389,12 @@
                 background-color: #c6fe7a;
             }
 
+            li.highlighted {
+                border: 0.1em solid #fe7ac6; /* fallback */
+                border: 1vmin solid #fe7ac6;
+                padding: 0;
+            }
+
             li.mine.revealed {
                 background-color: #d23000;
                 background-image: url("images/skull.png");
@@ -285,35 +444,59 @@
             strong {
                 color: #fe7ac6;
             }
+
+            table {
+                color: #fe7ac6;
+                font-size: 4vmin;
+                margin: 0 auto;
+                text-align: center;
+            }
+
+            th, td {
+                width: 50%;
+            }
+
+            td {
+                color: #fff;
+                font-size: 8vmin;
+            }
         </style>
         <script src="jquery-2.1.3.min.js"></script>
         <script>
-            var gameBoardWidth     = 10;
-            var gameBoardHeight    = 9;
-            var score                 = 0;
-            var firstClick            = true;
-            var mineChance           = 0.2;
-            var clickholdMs           = 200;
+            var gameBoardWidth  = 10;
+            var gameBoardHeight = 9;
+            var score           = 0;
+            var firstClick      = true;
+            var difficulty      = "normal";
+            var mineChance      = 0.2; //normal
+            var clickholdMs     = 200;
+            var mouseHeld       = false;
             var timeout; //hold timer
-            var mouseHeld = false;
             var viewportSizingAvailable = ($('#game').height == $(window).height()); // only run once
+            var tutorialPages = [];
 
             $(document).ready(function() {
                 function drawGameBoard() {
                     $('#game').html("");
+                    $('#tutorial .gameBoard').html("");
 
+                    gameBoardWidth = 10;
+                    
                     //determine aspect ratio so as to fit the screen
-                    gameBoardHeight = Math.floor((1 / getAspectRatio()) * 10) - 1;
-
-                    if (gameBoardHeight <= 9) {
-                        gameBoardHeight = 9;
-                    }
+                    gameBoardHeight = determineGameBoardHeight();
 
                     for (var i = 0; i < gameBoardHeight; i++) {
                         $('#game').append(newRow());
                     }
                 }
 
+                function determineGameBoardHeight() {
+                    return Math.max(
+                        Math.floor((1 / getAspectRatio()) * 10) - 1,
+                        9 //minimum
+                    );
+                }
+
                 function newTile() {
                     if (Math.random() < mineChance) {
                         return '<li class="mine"></li>';
@@ -340,9 +523,8 @@
                     }
 
                     //variables
-                    localStorage.setItem("score",        score);
+                    localStorage.setItem("score",      score);
                     localStorage.setItem("mineChance", mineChance);
-                    localStorage.setItem("firstClick", firstClick);
 
                     //game board
                     localStorage.setItem("gameBoard", $('#game').html());
@@ -356,12 +538,30 @@
                     }
 
                     //variables
-                    score        = parseInt(localStorage.getItem("score"));
+                    score      = parseInt(localStorage.getItem("score"));
                     mineChance = parseFloat(localStorage.getItem("mineChance"));
-                    firstClick = (localStorage.getItem("firstClick") == "true");
+                    firstClick = false;
 
                     //game board
                     $('#game').html(localStorage.getItem("gameBoard"));
+
+                    gameBoardHeight = determineGameBoardHeight();
+
+                    // add rows if there is empty space
+                    while ($('ul').length < gameBoardHeight) {
+                        $('#game').append(newRow());
+                    }
+
+                    //remove any rows the screen cannot display
+                    $('#game ul:gt(' + (gameBoardHeight - 1) + ')').remove();
+
+                    refreshMineCounts();
+                    updateScore();
+                    updateMinesLeft();
+
+                    //click blank tiles
+                    $('li.revealed:not(.mine):empty').mouseup();
+
                     $('#setup').hide();
                 }
 
@@ -393,7 +593,7 @@
                 }
 
                 window.removeClearedRows = function() {
-                    var rowsToRemove = $('#game ul:not(.removing)').filter(function() {
+                    var rowsToRemove = $('ul:not(.removing)').filter(function() {
                         return $(this).checkRow();
                     });
 
@@ -407,10 +607,11 @@
                         $(this).addClass("removing");
 
                         $(this).slideUp("slow", function() {
-                            $(this).remove();
 
                             //add new row on bottom
-                            $('#game').append(newRow());
+                            $(this).closest("div").append(newRow());
+
+                            $(this).remove();
 
                             refreshMineCounts();
 
@@ -437,6 +638,7 @@
                         //animation for top row + deletion of column
                         $(this).animate({width: 0, borderRadius: 0, padding: 0}, "slow", function() {
                             $(this).column().remove();
+
                             $('ul').each(function() {
                                 $(this).append(newTile());
                             });
@@ -484,7 +686,7 @@
                 function checkGameOver() {
                     if (isGameOver()) {
                         $('#gameOver').show();
-
+                        
                         var currentHiScore = 0;
 
                         if ($.isNumeric(localStorage.getItem("hiscore"))) {
@@ -504,6 +706,50 @@
                     }
                 }
 
+                function checkTutorial() {
+                    if ($('#tutorial').is(':hidden')) {
+                        return;
+                    }
+
+                    var currentPage = $('#tutorial div:visible');
+
+                    if (
+                        currentPage.find('.toFlag' ).length == currentPage.find('.toFlag.flagged'   ).length
+                     && currentPage.find('.toClick').length == currentPage.find('.toClick.revealed' ).length
+                     && (currentPage.find('.flagAny' ).length == 0 || currentPage.find('.flagAny.flagged'  ).length > 0)
+                     && (currentPage.find('.clickAny').length == 0 || currentPage.find('.clickAny.revealed').length > 0)
+                    ) {
+                        currentPage.nextPage();
+                    }
+                }
+
+                $.fn.nextPage = function() {
+                    $('.gameBoard').html("");
+                    $(this).hide();
+
+                    if ($(this).is(':last-child')) {
+                        //end of tutorial!
+                        $('#tutorial').hide();
+                        $('#setup, #game, #stats').show();
+                        $('#setup button.cancel').hide();
+
+                        gameBoardWidth  = 10;
+                        gameBoardHeight = determineGameBoardHeight();
+                    } else {
+                        $(this).next().show();
+                        $(this).next().children().show();
+
+                        var nextPage = parseInt($(this).attr('id').replace("page", ""));
+
+                        $(this).next().children('.gameBoard').html(tutorialPages[nextPage]);
+
+                        if ($(this).next().children('.gameBoard').hasClass("clearRowsColumns")) {
+                            removeClearedRows();
+                            removeClearedColumns();
+                        }
+                    }
+                }
+
                 function updateMinesLeft() {
                     //unflagged mines - revealed mines - flagged not-mines
                     $('#mines').text(
@@ -632,31 +878,30 @@
                     return $(this).countMinesAdjacent().toString().replace("0", "");
                 }
 
+                function detachTutorials() {
+                    //can't have several game boards in play at the same time
+                    //because it messes with mine counts, row counts, etc.
+                    tutorialPages = [];
+
+                    $('#tutorial .gameBoard').each(function() {
+                        tutorialPages.push($(this).html());
+
+                        $(this).html("");
+                    });
+                }
+
                 $.fn.cracktro = function() {
-                	var text = $('#cracktro').text().trim().split();
+                    //trim long whitespaces to 1 space, remove line breaks, split to individual chars
+                	var text = $(this).html().replace(/ +/g, " ").replace(/(\r\n|\n|\r)/gm, "").replace("&amp;", "&").split("");
                 	var cracktro = "";
 
                 	for (var i = 0; i < text.length; i++) {
-                		cracktro += "<span>" + text[i] + "</span>";
+                		cracktro += "<span>" + text[i].replace(" ", "&nbsp;") + "</span>";
                 	}
 
-                	$('#cracktro').html(cracktro);
+                	$(this).html(cracktro);
                 }
 
-                $('input[type="radio"]').on("change", function() {
-                    switch ($(this).val()) {
-                        case "easy":
-                            mineChance = 0.13;
-                            break;
-                        case "normal":
-                            mineChance = 0.2;
-                            break;
-                        case "hard":
-                            mineChance = 0.285;
-                            break;
-                    }
-                });
-
                 $('#gameOver button').on("click", function() {
                     drawGameBoard();
 
@@ -686,8 +931,14 @@
                     //reset stats
                     firstClick = true;
 
-                    //reset difficulty
-                    $('input:checked').change();
+                    //set difficulty
+                    if ($(this).hasClass("easy")) {
+                        mineChance = 0.13;
+                    } else if ($(this).hasClass("normal")) {
+                        mineChance = 0.2;
+                    } else if ($(this).hasClass("hard")) {
+                        mineChance = 0.285;
+                    }
 
                     score = 0;
 
@@ -697,6 +948,22 @@
                     $('#setup').hide();
                 });
 
+                $('button.tutorial').on("click", function() {
+                    $('#tutorial').show();
+                    $('#tutorial').siblings().hide();
+
+                    $('#page1').show();
+                    $('#page1 *').show();
+                    $('#page1').siblings('div').hide();
+
+                    $('#page1 .gameBoard').html(tutorialPages[0]);
+
+                    $('#game').html("");
+
+                    gameBoardWidth  = 5;
+                    gameBoardHeight = 5;
+                });
+
                 $.fn.leftClick = function(automated) {
                     if (!automated) automated = false;
 
@@ -805,13 +1072,18 @@
                         }
                     }
 
-                    removeClearedRows();
-                    removeClearedColumns();
-                    saveGame();
-                    checkGameOver();
+                    checkTutorial();
 
-                    updateScore();
-                    updateMinesLeft();
+                    if ($('#tutorial').is(':hidden')) {
+                        removeClearedRows();
+                        removeClearedColumns();
+
+                        saveGame();
+                        checkGameOver();
+
+                        updateScore();
+                        updateMinesLeft();
+                    }
                 });
 
                 $(window).resize(function() {
@@ -820,11 +1092,16 @@
 
                 resizeToWindow();
 
+                detachTutorials();
+
                 //instantiate the game
                 loadGame(); //loadGame will draw the game board if no saved game is found
 
                 $('#gameOver').hide();
+                $('#tutorial').hide();
                 $('button.cancel').hide();
+
+                $('#cracktro').cracktro();
             });
         </script>
         <script>
@@ -846,55 +1123,377 @@
         <div id="game"></div>
         <div id="gameOver">
             <h1>game over</h1>
-            <p>score: <span class="score"></span> personal best: <span class="hiscore"></span></p>
-            <p>a game by max bradbury</p>
-            <p>inspirations include minesweeper, tetris and 2048</p>
-            <p>tell your friends</p>
+
+            <table>
+                <thead>
+                    <tr>
+                        <th>score</th><th>personal best</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td class="score"></td><td class="hiscore"></td>
+                    </tr>
+                </tbody>
+            </table>
 
             <div id="cracktro">
-                a game by max bradbury......................................................................
-
-                inspired by minesweeper, tetris and 2048....................................................
-
-                gratz 'n' greetz go out to mum &amp; dad, guy, titas, dan, robin, arielle, isadore, 
-                thom, tom, olu, lovely dave, jen, ed, david, andy, rachel, isaac, rory, 
-                patrick 'partay' pat, al, ant, zoe, john, charlie.....................
-
-                plugs go out to keygenjukebox.com, candybox2.net, aliendovecote.com, zoe quinn &amp; depression quest, 
-                cookie clicker, font squirrel, codecademy, sublime text, github............................
-
-                this game was made in html5 and jquery......................................................
-
+                ......................................................................
+                a game by max bradbury
+                ......................................................................
+                inspired by minesweeper, tetris and 2048
+                ......................................................................
+                gratz 'n' greetz go out to mum and dad, guy, titas, dan, nick, enrico, 
+                ahona, robin, arielle, isy, thom, tom, olu, lovely dave, jen, ed, 
+                david, andy, rachel, isaac, rory, 'partay' pat, al, ant, zoe, john, 
+                charlie, wilkie, george
+                ......................................................................
+                HELLO's fly out to some cool game devs: porpentine, merritt kopas, 
+                zoe quinn, aniwey, orteil
+                ......................................................................
+                i listened to a lot of keygenjukebox while coding this
+                ......................................................................
                 more games coming soon... keep your eyes peeled... peace!
+                ......................................................................
+                ......................................................................
+                ......................................................................
+                this story is dedicated to all those cyberpunks who fight against 
+                injustice and corruption every day of their lives
+                ......................................................................
             </div>
 
             <div class="centre">
-	            <button>reset</button>
+                <form name="_xclick" action="https://www.paypal.com/uk/cgi-bin/webscr" method="post" target="_blank">
+                    <input type="hidden" name="cmd" value="_xclick">
+                    <input type="hidden" name="business" value="mutantsluggenghiskhan@yahoo.co.uk">
+                    <input type="hidden" name="item_name" value="Donation to Ruin Games">
+                    <input type="hidden" name="currency_code" value="GBP">
+                    <button class="donate">donate</button>
+                </form>
+                <form action="https://twitter.com/synth_ruiner" target="_blank">
+                    <button class="twitter">say hi</button>
+                </form>
+            </div>
+
+            <div class="centre">
+	            <button>play again</button>
 	        </div>
         </div>
         <div id="setup">
             <h1>endless mines</h1>
 
-            <p>
-                <strong>left click</strong> or <strong>tap</strong> to clear a tile. <br>
-                <strong>right click</strong> or <strong>hold</strong> to flag a mine. <br>
-                rows and columns with <strong>exploded mines</strong> cannot be cleared.
-            </p>
+            <p class="subtitle">ruin games, 2015</p>
 
-            <h2>Difficulty</h2>
+            <h2>Start game</h2>
 
             <div class="centre">
-                <input type="radio" name="difficulty" id="difficultyEasy" value="easy">
-                <label for="difficultyEasy">Easy</label>
-                <input type="radio" name="difficulty" id="difficultyNormal" value="normal" checked>
-                <label for="difficultyNormal">Normal</label>
-                <input type="radio" name="difficulty" id="difficultyHard" value="hard">
-                <label for="difficultyHard">Hard</label>
+                <button class="start easy">easy</button>
+                <button class="start normal">normal</button>
+                <button class="start hard">hard</button>
+            </div>
+            
+            <div class="centre">
+                <button class="tutorial">tutorial</button>
+                <button class="cancel">cancel</button>
+            </div>
+        </div>
+        <div id="tutorial">
+            <h2>tutorial</h2>
+
+            <div id="page1">
+                <div class="gameBoard">
+                    <ul>
+                        <li class="mine"></li><li></li><li></li><li></li><li></li>
+                    </ul>
+                    <ul>
+                        <li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine toFlag"></li><li></li>
+                    </ul>
+                    <ul>
+                        <li></li><li class="revealed mines1">1</li><li class="revealed mines2 highlighted">2</li><li class="revealed mines2">2</li><li></li>
+                    </ul>
+                    <ul>
+                        <li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine toFlag"></li><li></li>
+                    </ul>
+                    <ul>
+                        <li class="mine"></li><li></li><li></li><li></li><li></li>
+                    </ul>
+                </div>
+
+                <p>take a look at the <strong>highlighted tile</strong>.</p>
+                <p>the <strong>2</strong> means there are <strong>2 mines</strong> next to it.</p>
+                <p>there are only <strong>2 tiles</strong> next to it, so we know they are both mines.</p>
+                <p><strong>right-click</strong> or <strong>press and hold</strong> to flag these mines.</p>
             </div>
 
-            <div class="centre">
-                <button class="start">start</button>
-                <button class="cancel">cancel</button>
+            <div id="page2">
+                <div class="gameBoard">
+                    <ul>
+                        <li class="mine"></li><li></li><li></li><li></li><li></li>
+                    </ul>
+                    <ul>
+                        <li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="toClick"></li>
+                    </ul>
+                    <ul>
+                        <li></li><li class="revealed mines1">1</li><li class="revealed mines2">2</li><li class="revealed mines2 highlighted">2</li><li class="toClick"></li>
+                    </ul>
+                    <ul>
+                        <li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="toClick"></li>
+                    </ul>
+                    <ul>
+                        <li class="mine"></li><li></li><li></li><li></li><li></li>
+                    </ul>
+                </div>
+
+                <p>take a look at the next <strong>highlighted tile</strong>.</p>
+                <p>this also has <strong>2 mines</strong> next to it- but we already know which ones are mines.</p>
+                <p><strong>click</strong> or <strong>tap</strong> the other adjacent tiles to clear them.</p>
+            </div>
+
+            <div id="page3">
+                <div class="gameBoard">
+                    <ul>
+                        <li class="mine"></li><li class="toClick"></li><li class="toClick"></li><li class="toClick"></li><li class="toClick"></li>
+                    </ul>
+                    <ul>
+                        <li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="revealed mines1">1</li>
+                    </ul>
+                    <ul>
+                        <li></li><li class="revealed mines1">1</li><li class="revealed mines2">2</li><li class="revealed mines2">2</li><li class="revealed mines2">2</li>
+                    </ul>
+                    <ul>
+                        <li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="revealed mines1">1</li>
+                    </ul>
+                    <ul>
+                        <li class="mine"></li><li class="toClick"></li><li class="toClick"></li><li class="toClick"></li><li class="toClick"></li>
+                    </ul>
+                </div>
+
+                <p>there are some more tiles that are definitely not mines. clear these too.</p>
+                <p>if you <strong>click or tap</strong> a <strong>number</strong>, any unflagged adjacent tiles will be clicked.</p>
+                <p>this can save you a lot of time!</p>
+            </div>
+
+            <div id="page4">
+                <div class="gameBoard">
+                    <ul>
+                        <li class="mine"></li><li class="revealed mines1 highlighted">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li>
+                    </ul>
+                    <ul>
+                        <li></li><li class="revealed mines1 highlighted">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="revealed mines1">1</li>
+                    </ul>
+                    <ul>
+                        <li class="toClick"></li><li class="revealed mines1">1</li><li class="revealed mines2">2</li><li class="revealed mines2">2</li><li class="revealed mines2">2</li>
+                    </ul>
+                    <ul>
+                        <li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="revealed mines1">1</li>
+                    </ul>
+                    <ul>
+                        <li class="mine"></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li>
+                    </ul>
+                </div>
+
+                <p>look at these 2 <strong>highlighted</strong> tiles.</p>
+                <p>the <strong>first</strong> has 1 mine next to it.</p>
+                <p>the <strong>second</strong> also has 1 mine next to it.</p>
+                <p>however, the <strong>second</strong> spans the same tiles as the <strong>first</strong>, plus one extra.</p>
+                <p>the extra tile the <strong>second</strong> tile spans cannot be a mine. clear it!</p>
+            </div>
+
+            <div id="page5">
+                <div class="gameBoard">
+                    <ul>
+                        <li class="mine toFlag"></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li>
+                    </ul>
+                    <ul>
+                        <li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="revealed mines1">1</li>
+                    </ul>
+                    <ul>
+                        <li class="revealed"></li><li class="revealed mines1">1</li><li class="revealed mines2">2</li><li class="revealed mines2">2</li><li class="revealed mines2">2</li>
+                    </ul>
+                    <ul>
+                        <li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="revealed mines1">1</li>
+                    </ul>
+                    <ul>
+                        <li class="mine toFlag"></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li>
+                    </ul>
+                </div>
+
+                <p>when you clear a tile with <strong>no adjacent mines</strong>, the surrounding tiles will all clear as well.</p>
+                <p>flag the <strong>remaining mines</strong>.</p>
+            </div>
+
+            <div id="page6">
+                <div class="gameBoard">
+                    <ul>
+                        <li class="revealed"></li>
+                        <li class="revealed"></li>
+                        <li class="revealed"></li>
+                        <li class="revealed mines2">2</li>
+                        <li class="mine"></li>
+                    </ul>
+                    <ul>
+                        <li class="revealed"></li>
+                        <li class="revealed"></li>
+                        <li class="revealed"></li>
+                        <li class="revealed mines3">3</li>
+                        <li class="mine"></li>
+                    </ul>
+                    <ul>
+                        <li class="revealed"></li>
+                        <li class="revealed"></li>
+                        <li class="revealed"></li>
+                        <li class="revealed mines3">3</li>
+                        <li class="mine toFlag highlighted"></li>
+                    </ul>
+                    <ul>
+                        <li class="revealed mines2">2</li>
+                        <li class="revealed mines3">3</li>
+                        <li class="revealed mines3">3</li>
+                        <li class="revealed mines4">4</li>
+                        <li class="mine"></li>
+                    </ul>
+                    <ul>
+                        <li class="mine"></li>
+                        <li class="mine"></li>
+                        <li class="mine"></li>
+                        <li class="mine"></li>
+                        <li class="revealed mines2">2</li>
+                    </ul>
+                </div>
+
+                <p>in this tutorial so far, the game board has been static.</p>
+                <p>but in <strong>endless mines</strong>, <strong>rows</strong> and <strong>columns</strong> slide away when cleared!</p>
+                <p>flag the <strong>highlighted</strong> tile to continue.</p>
+            </div>
+
+            <div id="page7">
+                <div class="gameBoard clearRowsColumns">
+                    <ul>
+                        <li class="revealed"></li>
+                        <li class="revealed"></li>
+                        <li class="revealed"></li>
+                        <li class="revealed mines2">2</li>
+                        <li class="mine"></li>
+                    </ul>
+                    <ul>
+                        <li class="revealed"></li>
+                        <li class="revealed"></li>
+                        <li class="revealed"></li>
+                        <li class="revealed mines3">3</li>
+                        <li class="mine"></li>
+                    </ul>
+                    <ul>
+                        <li class="revealed"></li>
+                        <li class="revealed"></li>
+                        <li class="revealed"></li>
+                        <li class="revealed mines3">3</li>
+                        <li class="mine flagged"></li>
+                    </ul>
+                    <ul>
+                        <li class="revealed mines2">2</li>
+                        <li class="revealed mines3">3</li>
+                        <li class="revealed mines3">3</li>
+                        <li class="revealed mines4">4</li>
+                        <li class="mine"></li>
+                    </ul>
+                    <ul>
+                        <li class="mine"></li>
+                        <li class="mine"></li>
+                        <li class="mine"></li>
+                        <li class="mine"></li>
+                        <li class="revealed mines2">2</li>
+                    </ul>
+                </div>
+
+                <p>in this tutorial so far, the game board has been static.</p>
+                <p>but in <strong>endless mines</strong>, <strong>rows</strong> and <strong>columns</strong> slide away when cleared!</p>
+                <p>flag the <strong>highlighted</strong> tile to continue.</p>
+            </div>
+
+            <div id="page8">
+                <div class="gameBoard">
+                    <ul>
+                        <li class="revealed"></li>
+                        <li class="revealed"></li>
+                        <li class="revealed"></li>
+                        <li class="revealed mines2">2</li>
+                        <li class="mine toFlag"></li>
+                    </ul>
+                    <ul>
+                        <li class="revealed"></li>
+                        <li class="revealed"></li>
+                        <li class="revealed"></li>
+                        <li class="revealed mines3">3</li>
+                        <li class="mine toFlag"></li>
+                    </ul>
+                    <ul>
+                        <li class="revealed mines2">2</li>
+                        <li class="revealed mines3">3</li>
+                        <li class="revealed mines3">3</li>
+                        <li class="revealed mines4">4</li>
+                        <li class="mine toFlag"></li>
+                    </ul>
+                    <ul>
+                        <li class="mine toFlag"></li>
+                        <li class="mine toFlag"></li>
+                        <li class="mine toFlag"></li>
+                        <li class="mine toFlag"></li>
+                        <li class="revealed mines2">2</li>
+                    </ul>
+                    <ul>
+                        <li></li><li></li><li></li><li></li><li></li>
+                    </ul>
+                </div>
+
+                <p>a <strong>new row</strong> has appeared at the bottom.</p>
+                <p>notice how you can't clear any columns now!</p>
+                <br>
+                <p><strong>flag</strong> the <strong>remaining mines</strong> to continue.</p>
+            </div>
+
+            <div id="page9">
+                <div class="gameBoard clearRowsColumns">
+                    <ul><li></li><li></li><li></li><li></li><li></li></ul>
+                    <ul><li class="mine"></li><li></li><li class="mine"></li><li class="mine"></li><li class="mine"></li></ul>
+                    <ul><li class="revealed mines2">2</li><li class="revealed mines4">4</li><li class="revealed mines4">4</li><li class="highlighted revealed mines7">7</li><li class="mine toFlag"></li></ul>
+                    <ul><li class="mine"></li><li></li><li class="mine"></li><li class="mine"></li><li class="mine"></li></ul>
+                    <ul><li></li><li></li><li></li><li></li><li></li></ul>
+                </div>
+
+                <p>look at the <strong>highlighted</strong> tile.</p>
+                <p>it has 7 adjacent mines and 7 adjacent tiles.</p>
+                <p>flag the  7 <strong>adjacent mines</strong>.</p>
+            </div>
+
+            <div id="page10">
+                <div class="gameBoard clearRowsColumns">
+                    <ul><li></li><li></li><li></li><li></li><li></li></ul>
+                    <ul><li class="mine"></li><li></li><li class="mine"></li><li class="mine"></li><li class="mine"></li></ul>
+                    <ul><li class="revealed mines2">2</li><li class="revealed mines4">4</li><li class="revealed mines4">4</li><li class="revealed mines7">7</li><li class="mine highlighted flagged"></li></ul>
+                    <ul><li class="mine"></li><li></li><li class="mine"></li><li class="mine"></li><li class="mine"></li></ul>
+                    <ul><li></li><li></li><li></li><li></li><li></li></ul>
+                </div>
+
+                <p>oh no! we've lost all our hints!</p>
+                <p>sometimes it's best to wait before clearing a row.</p>
+                <br>
+                <p>the best we can do is guess now.</p>
+                <p>click <strong>any tile</strong> to continue.</p>
+            </div>
+
+            <div id="page11">
+                <div class="gameBoard clearRowsColumns">
+                    <ul><li></li><li></li><li></li><li></li><li></li></ul>
+                    <ul><li></li><li class="revealed mines1">1</li><li></li><li class="revealed mines1">1</li><li></li></ul>
+                    <ul><li></li><li></li><li></li><li></li><li></li></ul>
+                    <ul><li></li><li class="revealed mines3">3</li><li class="revealed mines3">3</li><li class="revealed mines3">3</li><li></li></ul>
+                    <ul><li></li><li></li><li class="revealed mines3">3</li><li></li><li></li></ul>
+                </div>
+
+                <p>sorry! I feel bad leading you into a trap like that!</p>
+                <p>but I think mistakes are a good way to learn.</p>
+                <p>this is the end of the <strong>tutorial</strong> for now. I hope it has helped in some way.</p>
+                <p>have fun!</p>
             </div>
         </div>
     </body>