Level Grid

Level Grid, which can also be called "Level Navigation", is a template created by JustLeafy. It was solely created exclusively for the level pages on the Flow Free Wiki.
== Code ==
Click on one of those numbered links {{HiddenWord|squares}} to view the information of the level, or just keep scrolling.
{{#switch:{{{1|}}}
|1=
[[{{PAGENAME}}#Level 1|1]] [[{{PAGENAME}}#Level 2|2]] [[{{PAGENAME}}#Level 3|3]] [[{{PAGENAME}}#Level 4|4]] [[{{PAGENAME}}#Level 5|5]] [[{{PAGENAME}}#Level 6|6]] [[{{PAGENAME}}#Level 7|7]] [[{{PAGENAME}}#Level 8|8]] [[{{PAGENAME}}#Level 9|9]] [[{{PAGENAME}}#Level 10|10]] [[{{PAGENAME}}#Level 11|11]] [[{{PAGENAME}}#Level 12|12]] [[{{PAGENAME}}#Level 13|13]] [[{{PAGENAME}}#Level 14|14]] [[{{PAGENAME}}#Level 15|15]]
[[{{PAGENAME}}#Level 16|16]] [[{{PAGENAME}}#Level 17|17]] [[{{PAGENAME}}#Level 18|18]] [[{{PAGENAME}}#Level 19|19]] [[{{PAGENAME}}#Level 20|20]] [[{{PAGENAME}}#Level 21|21]] [[{{PAGENAME}}#Level 22|22]] [[{{PAGENAME}}#Level 23|23]] [[{{PAGENAME}}#Level 24|24]] [[{{PAGENAME}}#Level 25|25]] [[{{PAGENAME}}#Level 26|26]] [[{{PAGENAME}}#Level 27|27]] [[{{PAGENAME}}#Level 28|28]] [[{{PAGENAME}}#Level 29|29]] [[{{PAGENAME}}#Level 30|30]]
{{Level Grid/Random level button|width = 445px}} [[{{{2}}} Levels (31-60){{#if:{{{3|}}}|/{{{3|}}}}}| next 30 levels >]]
|2=
[[{{PAGENAME}}#Level 31|31]] [[{{PAGENAME}}#Level 32|32]] [[{{PAGENAME}}#Level 33|33]] [[{{PAGENAME}}#Level 34|34]] [[{{PAGENAME}}#Level 35|35]] [[{{PAGENAME}}#Level 36|36]] [[{{PAGENAME}}#Level 37|37]] [[{{PAGENAME}}#Level 38|38]] [[{{PAGENAME}}#Level 39|39]] [[{{PAGENAME}}#Level 40|40]] [[{{PAGENAME}}#Level 41|41]] [[{{PAGENAME}}#Level 42|42]] [[{{PAGENAME}}#Level 43|43]] [[{{PAGENAME}}#Level 44|44]] [[{{PAGENAME}}#Level 45|45]]
[[{{PAGENAME}}#Level 46|46]] [[{{PAGENAME}}#Level 47|47]] [[{{PAGENAME}}#Level 48|48]] [[{{PAGENAME}}#Level 49|49]] [[{{PAGENAME}}#Level 50|50]] [[{{PAGENAME}}#Level 51|51]] [[{{PAGENAME}}#Level 52|52]] [[{{PAGENAME}}#Level 53|53]] [[{{PAGENAME}}#Level 54|54]] [[{{PAGENAME}}#Level 55|55]] [[{{PAGENAME}}#Level 56|56]] [[{{PAGENAME}}#Level 57|57]] [[{{PAGENAME}}#Level 58|58]] [[{{PAGENAME}}#Level 59|59]] [[{{PAGENAME}}#Level 60|60]]
[[{{{2}}} Levels (1-30){{#if:{{{3|}}}|/{{{3|}}}}}|< previous 30 levels]] {{Level Grid/Random level button|width = 215.5px}} [[{{{2}}} Levels (61-90){{#if:{{{3|}}}|/{{{3|}}}}}| next 30 levels >]]
|2max=
[[{{PAGENAME}}#Level 31|31]] [[{{PAGENAME}}#Level 32|32]] [[{{PAGENAME}}#Level 33|33]] [[{{PAGENAME}}#Level 34|34]] [[{{PAGENAME}}#Level 35|35]] [[{{PAGENAME}}#Level 36|36]] [[{{PAGENAME}}#Level 37|37]] [[{{PAGENAME}}#Level 38|38]] [[{{PAGENAME}}#Level 39|39]] [[{{PAGENAME}}#Level 40|40]] [[{{PAGENAME}}#Level 41|41]] [[{{PAGENAME}}#Level 42|42]] [[{{PAGENAME}}#Level 43|43]] [[{{PAGENAME}}#Level 44|44]] [[{{PAGENAME}}#Level 45|45]]
[[{{PAGENAME}}#Level 46|46]] [[{{PAGENAME}}#Level 47|47]] [[{{PAGENAME}}#Level 48|48]] [[{{PAGENAME}}#Level 49|49]] [[{{PAGENAME}}#Level 50|50]] [[{{PAGENAME}}#Level 51|51]] [[{{PAGENAME}}#Level 52|52]] [[{{PAGENAME}}#Level 53|53]] [[{{PAGENAME}}#Level 54|54]] [[{{PAGENAME}}#Level 55|55]] [[{{PAGENAME}}#Level 56|56]] [[{{PAGENAME}}#Level 57|57]] [[{{PAGENAME}}#Level 58|58]] [[{{PAGENAME}}#Level 59|59]] [[{{PAGENAME}}#Level 60|60]]
[[{{{2}}} Levels (1-30){{#if:{{{3|}}}|/{{{3|}}}}}|< previous 30 levels]] {{Level Grid/Random level button|width = 445px}}
|3=
[[{{PAGENAME}}#Level 61|61]] [[{{PAGENAME}}#Level 62|62]] [[{{PAGENAME}}#Level 63|63]] [[{{PAGENAME}}#Level 64|64]] [[{{PAGENAME}}#Level 65|65]] [[{{PAGENAME}}#Level 66|66]] [[{{PAGENAME}}#Level 67|67]] [[{{PAGENAME}}#Level 68|68]] [[{{PAGENAME}}#Level 69|69]] [[{{PAGENAME}}#Level 70|70]] [[{{PAGENAME}}#Level 71|71]] [[{{PAGENAME}}#Level 72|72]] [[{{PAGENAME}}#Level 73|73]] [[{{PAGENAME}}#Level 74|74]] [[{{PAGENAME}}#Level 75|75]]
[[{{PAGENAME}}#Level 76|76]] [[{{PAGENAME}}#Level 77|77]] [[{{PAGENAME}}#Level 78|78]] [[{{PAGENAME}}#Level 79|79]] [[{{PAGENAME}}#Level 80|80]] [[{{PAGENAME}}#Level 81|81]] [[{{PAGENAME}}#Level 82|82]] [[{{PAGENAME}}#Level 83|83]] [[{{PAGENAME}}#Level 84|84]] [[{{PAGENAME}}#Level 85|85]] [[{{PAGENAME}}#Level 86|86]] [[{{PAGENAME}}#Level 87|87]] [[{{PAGENAME}}#Level 88|88]] [[{{PAGENAME}}#Level 89|89]] [[{{PAGENAME}}#Level 90|90]]
[[{{{2}}} Levels (31-60){{#if:{{{3|}}}|/{{{3|}}}}}|< previous 30 levels]] {{Level Grid/Random level button|width = 215.5px}} [[{{{2}}} Levels (91-120){{#if:{{{3|}}}|/{{{3|}}}}}| next 30 levels >]]
|4=
[[{{PAGENAME}}#Level 91|91]] [[{{PAGENAME}}#Level 92|92]] [[{{PAGENAME}}#Level 93|93]] [[{{PAGENAME}}#Level 94|94]] [[{{PAGENAME}}#Level 95|95]] [[{{PAGENAME}}#Level 96|96]] [[{{PAGENAME}}#Level 97|97]] [[{{PAGENAME}}#Level 98|98]] [[{{PAGENAME}}#Level 99|99]] [[{{PAGENAME}}#Level 100|100]] [[{{PAGENAME}}#Level 101|101]] [[{{PAGENAME}}#Level 102|102]] [[{{PAGENAME}}#Level 103|103]] [[{{PAGENAME}}#Level 104|104]] [[{{PAGENAME}}#Level 105|105]]
[[{{PAGENAME}}#Level 106|106]] [[{{PAGENAME}}#Level 107|107]] [[{{PAGENAME}}#Level 108|108]] [[{{PAGENAME}}#Level 109|109]] [[{{PAGENAME}}#Level 110|110]] [[{{PAGENAME}}#Level 111|111]] [[{{PAGENAME}}#Level 112|112]] [[{{PAGENAME}}#Level 113|113]] [[{{PAGENAME}}#Level 114|114]] [[{{PAGENAME}}#Level 115|115]] [[{{PAGENAME}}#Level 116|116]] [[{{PAGENAME}}#Level 117|117]] [[{{PAGENAME}}#Level 118|118]] [[{{PAGENAME}}#Level 119|119]] [[{{PAGENAME}}#Level 120|120]]
[[{{{2}}} Levels (61-90){{#if:{{{3|}}}|/{{{3|}}}}}|< previous 30 levels]] {{Level Grid/Random level button|width = 215.5px}} [[{{{2}}} Levels (121-150){{#if:{{{3|}}}|/{{{3|}}}}}| next 30 levels >]]
|4max=
[[{{PAGENAME}}#Level 91|91]] [[{{PAGENAME}}#Level 92|92]] [[{{PAGENAME}}#Level 93|93]] [[{{PAGENAME}}#Level 94|94]] [[{{PAGENAME}}#Level 95|95]] [[{{PAGENAME}}#Level 96|96]] [[{{PAGENAME}}#Level 97|97]] [[{{PAGENAME}}#Level 98|98]] [[{{PAGENAME}}#Level 99|99]] [[{{PAGENAME}}#Level 100|100]] [[{{PAGENAME}}#Level 101|101]] [[{{PAGENAME}}#Level 102|102]] [[{{PAGENAME}}#Level 103|103]] [[{{PAGENAME}}#Level 104|104]] [[{{PAGENAME}}#Level 105|105]]
[[{{PAGENAME}}#Level 106|106]] [[{{PAGENAME}}#Level 107|107]] [[{{PAGENAME}}#Level 108|108]] [[{{PAGENAME}}#Level 109|109]] [[{{PAGENAME}}#Level 110|110]] [[{{PAGENAME}}#Level 111|111]] [[{{PAGENAME}}#Level 112|112]] [[{{PAGENAME}}#Level 113|113]] [[{{PAGENAME}}#Level 114|114]] [[{{PAGENAME}}#Level 115|115]] [[{{PAGENAME}}#Level 116|116]] [[{{PAGENAME}}#Level 117|117]] [[{{PAGENAME}}#Level 118|118]] [[{{PAGENAME}}#Level 119|119]] [[{{PAGENAME}}#Level 120|120]]
[[{{{2}}} Levels (61-90){{#if:{{{3|}}}|/{{{3|}}}}}|< previous 30 levels]] {{Level Grid/Random level button|width = 445px}}
|5=
[[{{PAGENAME}}#Level 121|121]] [[{{PAGENAME}}#Level 122|122]] [[{{PAGENAME}}#Level 123|123]] [[{{PAGENAME}}#Level 124|124]] [[{{PAGENAME}}#Level 125|125]] [[{{PAGENAME}}#Level 126|126]] [[{{PAGENAME}}#Level 127|127]] [[{{PAGENAME}}#Level 128|128]] [[{{PAGENAME}}#Level 129|129]] [[{{PAGENAME}}#Level 130|130]] [[{{PAGENAME}}#Level 131|131]] [[{{PAGENAME}}#Level 132|132]] [[{{PAGENAME}}#Level 133|133]] [[{{PAGENAME}}#Level 134|134]] [[{{PAGENAME}}#Level 135|135]]
[[{{PAGENAME}}#Level 136|136]] [[{{PAGENAME}}#Level 137|137]] [[{{PAGENAME}}#Level 138|138]] [[{{PAGENAME}}#Level 139|139]] [[{{PAGENAME}}#Level 140|140]] [[{{PAGENAME}}#Level 141|141]] [[{{PAGENAME}}#Level 142|142]] [[{{PAGENAME}}#Level 143|143]] [[{{PAGENAME}}#Level 144|144]] [[{{PAGENAME}}#Level 145|145]]
[[{{PAGENAME}}#Level 146|146]] [[{{PAGENAME}}#Level 147|147]] [[{{PAGENAME}}#Level 148|148]] [[{{PAGENAME}}#Level 149|149]] [[{{PAGENAME}}#Level 150|150]]
[[{{{2}}} Levels (91-120){{#if:{{{3|}}}|/{{{3|}}}}}|< previous 30 levels]] {{Level Grid/Random level button|width = 445px}}
|#default=}}
== Description ==
The level grid template represents a level navigation to check out a specific level card. They are heavily based on the level squares from the Flow Free applications. They only function when the numbers in the squares are identical to the ones in the level cards.
In addition, this template has two more features: a chronology and a random level function. The chronology features a "next 30 levels" button and a "previous 30 levels" button, in which they respectively lead to the next 30 levels and the previous 30 levels. The random level button, when clicked, leads to a random level card.
== History ==
The Level Grid was originally separated into multiple templates, the borders were colored, there was a template called "Level square" (which is now deleted), there were 6 rows and 5 columns instead of 2 rows and 15 columns, the chronology was found at the bottom, there was no random level button, it was named "LS Grid [number]" and the numbers varied from 1 to 5. LS Grid 1 had levels 1 to 30, LS Grid 2 had levels levels 31 to 60 etc. Later on, the border colors become consistent, CSS and span classes were used instead of the "Level square" template, there are now only 2 rows and 15 columns and the 5 grid templates merged into one template, and the template currently uses the switch parser function. Later on, the previous level chronology template merged to the current level grid template, it became more portable and a random level function was added.
== Dependencies ==
=== Styles ===
The following styles are used to create a single square. It was added to the wiki's MediaWiki:Wikia.css page. You don't have to do anything with the styles, but this stylesheet represents that the level squares are designed with the following styles:
/* CSS for level squares */
/* Base style of a level square */
.flowfree-level-square {
 color: #D5D4D4;
 display: inline-block;
 padding: 4px 1px;
 margin: 2px;
 width: 32px;
 border: 2px solid;
 text-align: center;
}
 
/* Removing underline on hover */
.flowfree-level-square > a:hover {
 text-decoration: none;
}
 
/* Portability fixes */
@media only screen and (max-width: 1083px) and (min-width: 1024px) {
 .flowfree-level-square {
 width: 30px;
 }
 
 #level-grid-chronology-prev30,
 #level-grid-random-card,
 #level-grid-chronology-next30 {
 width: 205.5px !important;
 }
}
 
@media only screen and (min-width: 1596px) {
 .flowfree-level-square {
 border-width: 3px;
 width: 39px;
 font-size: 20px;
 padding: 8px 2px;
 }
 
 #level-grid-chronology-prev30,
 #level-grid-random-card,
 #level-grid-chronology-next30 {
 width: 268.5px !important;
 }
 
}
=== JavaScript code ===
The following code is used to create the function of the random level button. It was added to the wiki's MediaWiki:Common.js page. You don't have to do anything with the script, but this minor script represents the function of the random level button:
$('#level-grid-random-card').click(function() {
var hashes = $('.mw-headline').map(function() {
 return $(this).attr('id');
});
location.hash = hashes[Math.round(Math.random() * (hashes.length - 1))];
});
Credit: KockaAdmiralac for developing this code.
=== Templates ===
* The following code of the template, with the template type essentially being set as notice, is also required, so that on mobile, it would say "Click on one of those numbered links to view the information of the level, or just keep scrolling." and on desktop, it would say "Click on one of those numbered squares to view the information of the level, or just keep scrolling." (note: what is bolded is the difference between both sentences.)
{{{1}}}
* The following code (of Template:Level Grid/Random level button with that exact name) is also needed for the random level button, with the template type being kept as notice so that it doesn't appear on mobile.
random level
== Syntax ==
{{Level Grid|<!-- insert a number between 1 and 5 (add max after the number when a pack has less than 150 total levels)-->|<!-- name of the pack-->|<!-- name of the game completely lowercased (default: Flow Free) -->}}
=== Parameters ===
* 1: It puts 30 level squares with the levels between 1 and 30.
* 2: It puts 30 level squares with the levels between 31 and 60.
* 2max: It puts 30 level squares with the levels between 31 and 60, and saying that 60 is the last level of the pack.
* 3: It puts 30 level squares with the levels between 61 and 90.
* 4: It puts 30 level squares with the levels between 91 and 120.
* 4max: It puts 30 level squares with the levels between 91 and 120, and saying that 120 is the last level of the pack.
* 5: It puts 30 level squares with the levels between 121 and 150, and saying that 150 is the last level of the pack.
== Sample output ==
;1
{{Level Grid|1|Regular Pack}} gives the following navigation:
;2
{{Level Grid|2|Regular Pack}} gives the following navigation:
;2max
{{Level Grid|2max|Regular Pack}} gives the following navigation:
;3
{{Level Grid|3|Regular Pack}} gives the following navigation:
;4
{{Level Grid|4|Regular Pack}} gives the following navigation:
;4max
{{Level Grid|4max|Regular Pack}} gives the following navigation:
;5
{{Level Grid|5|Regular Pack}} gives the following navigation: