Template:Tournament/doc

This template is used to display a mobile-friendly, single-elimination tournament with a maximum of 16 contestants, or "items". Tournament byes are also supported (if less than 16 contestants). Currently, only English is supported.


 * See installation instructions or the template shall not work.

Installation
This template relies on two dependency templates, two extensions, and a CSS file to function properly, and you will need an Administrator to set them up; if you are not an Administrator, you will need to ask one to do these things for you. To make sure everything transfers smoothly to your wiki, do the following:  Ensure that Loops and Variables are both enabled on your wiki, which you can check by going to Special:Version and CMD+F/CTRL+F searching for "Loops" and "Variables". If either return "not found", then contact your Wiki Representative if you have one, or contact Fandom support directly if you don't, to have them enable the extensions for you. These extensions will probably be off on your wiki.  Install the CSS, which is located at [/load.php?debug=true&mode=articles&only=styles&articles=u:miyadaiku:MediaWiki:Tournaments.css MediaWiki:Tournaments.css]. If you are an Administrator, you can copy this CSS directly into [ MediaWiki:Tournaments.css on your wiki], and then add this line of CSS to the very top of [ MediaWiki:Common.css] : If you know what you are doing, you can also import the file directly from Miyadaiku Wiki, although this isn't recommended as we cannot update the templates and CSS together from Miyadaiku Wiki.  Import templates. Go to this page, add "Template:Tournament" (no quotes) to the list, make sure all three options are checked ("Include templates" must be checked!), then hit "Export". Next, import them to your wiki by uploading the file you just downloaded (detailed instructions). Finally, classify |the main template as Data, Template:Tournament/infobox and Template:Tournament/fakeout as Infobox, and everything else you just imported as Non-article.  You're done!

Mobile
Octofinals Captain Hayden  versus Son of Ships, Captain Hayden victorious. SuperRobot9338  versus BetaPichuIII, SuperRobot9338 victorious. Zathus versus TOTMGsRock, TOTMGsRock victorious.</li> Diep.ioplayer143  versus Ultimately, Diep.ioplayer143 victorious.</li> Oo1oo2oo3oo4  versus Teamerz, Oo1oo2oo3oo4 victorious.</li> Just Litoprobka  versus Jimmy is back, Just Litoprobka victorious.</li> II Finale II versus Ursuul, Ursuul victorious.</li> Chapsteck4yurlipis  versus Kuro redfox, Chapsteck4yurlipis victorious.</li></ul>  Quarterfinals Captain Hayden versus SuperRobot9338, SuperRobot9338 victorious.</li> TOTMGsRock  versus Diep.ioplayer143, TOTMGsRock victorious.</li> Oo1oo2oo3oo4  versus Just Litoprobka, Oo1oo2oo3oo4 victorious.</li> Ursuul versus Chapsteck4yurlipis, Chapsteck4yurlipis victorious.</li></ul>  Semifinals SuperRobot9338  versus TOTMGsRock, SuperRobot9338 victorious.</li> Oo1oo2oo3oo4  versus Chapsteck4yurlipis, Oo1oo2oo3oo4 victorious.</li></ul>  Finals <dd>SuperRobot9338 versus Oo1oo2oo3oo4, Oo1oo2oo3oo4 victorious.</dd>

Parameter notes

 * seed-X: Optional, displays a 2-digit number next to item-Y, to indicate tournament seed.
 * Note: Accepts only the first two characters (e.g. " " would return " ").
 * Note: If a seed is defined for a winning item, the seed will turn orange to indicate this.
 * item-Y: Displays a contestant. Numbers correspond top-down, right-left, so item-1 would be the top contestant in the finals, 2 would be the bottom contestant in the finals, 3 would be the top contestant in the first semifinals match, and so on.
 * WARNING: Do not pass multiple lines to this paramter or things will break!
 * Note: Appending " " to the end of this parameter will mark that contestant as the winner, either by changing the seed number orange (if a seed is defined) or by applying a slight orange gradient to the body of the contestant element (if no seed is defined). Only one winner is valid — if both contestants are defined as winners, then only the top contestant will be marked as such.
 * Note: These parameters are conditionally required:
 * In mobile, any odd defined contest will display, e.g. " " will display, but without  defined the text will describe   as being versus "undeclared". If   was not defined, the entire match would not display. Headers for each round (octofinals, quarterfinals, semifinals, and finals) display if any match within that round is defined.
 * In desktop, the highest defined number determines which items are required. For example, if " " is defined, then all items below it (6-1) will be required; as will its opponent, . It would appear like this (test defined as winner):

As you can see, tournament byes can be constructed in this fashion, by simply not filling out each column.
 * desc-Z: Optional, can accept freeform wikitext or the /infobox template (recommended) to display additional data on a particular contestant. In desktop, this is displayed by clicking on the contestant to summon a lightbox. In mobile, an "expand" link will be present to display this data (it is for this reason that infoboxes are recommended, being the most portable).

Desktop vs mobile
Due to CSS limitations in Fandom's mobile skin, a traditional tournament grid cannot be displayed. Instead, in mobile a list is displayed, explaining the contest textually rather than graphically, as in desktop. As such, this template should be classified as Data.

CSS class documentation

 * This is only useful if you wish to theme this template.

Container classes

 * — contains the desktop display and the filigree container at the top, forming a border around both.
 * — makes the tournament container take on the coloration of ThemeDesigner, chiefly the site link color, accent color, and background color. Remove from the  element to reset the template to a default color scheme.
 * — contains the filigree that forms a fancy "border-top" for the tournament container. Elder sibling of.
 * — empty containers whose pseudo elements,  and , form an alternating golden filigree pattern via the use of CSS gradient backgrounds. Useful to modify the color of the filigree, or for the skilled, to change how it looks.
 * — contains the "crossed swords" icon (i.e. ) along with its frame, absolutely positioned beneath the swords. Advanced users may wish to modify the icon, and may do so by translating a vector into base64 and applying it as a data-image background to the pseudo class. To simply change the icon's fill color, translate the default base64 code back into utf8 (i.e. plain text) and simply replace the "fill" attribute with whatever hex code is desired; then, translate the vector back into base64 for cross-browser support, and re-apply the vector with CSS as a background.
 * — emblem border, the frame around the crossed swords icon.

Grid classes

 * — grid parent class, will have either "one", "two", etc depending on the number of "rounds", or columns, in a given tournament. For example, any tournament with an "octofinals" round (or octofinal byes) would have the  class.
 * — tournament contestant, contains seed numbers, contestant names and, in the future, dropdown data.
 * ,,  ,   — determines t-cont/t-space columnar positioning by round. Useful if you want to have each column/round be different colors, fonts, etc. Use adjoining classes   for this.
 * ,  — controls border radii, describes top and bottom contestants in a given match. Useful if you wanted to have opponents use oppositional colors to evoke a sense of conflict.
 * — establishes winner flair, affecting  if it exists,   otherwise. Useful to define your own unique winner flair.
 * — children of, either  ,  , or.
 * — seed/member container, child of  and sometimes a sibling of modal classes.
 * — seed number, child of.
 * — contestant name, child of.
 * — contestant name plaintext  tag, ascends to the top of the z-axis and can be interacted with by the user. Sometimes acts as a trigger for modal classes.
 * — sibling copy of, not absolutely positioned so as to maintain the dimensionality of  . Given that it is an exact copy and resides directly beneath   on the z-axis, it cannot be seen or interacted with; further, to avoid possible bugs, it is also rendered invisible for good measure.
 * — empty space between matches or between contestants. Should remain empty and unstyled unless one wishes a border or some sort of other decoration between matches, accomplishable via pseudo-elements.
 * — thin horizontal gaps between contestants in a match, observe caution in styling this class.
 * — large horizontal gaps between matches.
 * — delicate vertical association lines connecting each match, positioned in-between each round/column. Strong recommendation to only use it as a distinction selector in order to style, e.g. if you wanted to have the lines be different colors between each round/column, because these classes define which column each line appears between.
 * — the actual association lines themselves, which you might wish to style with border radii or other flairs, but be mindful of the absolute positioning used to give these lines their shape (and to position  in the precise center).
 * — helper class that can be applied to a variety of elements, rendering them invisible when they are unneeded (e.g. for the remaining brackets after a tournament bye).

Modal classes

 * The first two classes listed herein should not be themed without extreme caution, and the "detail"-related classes should be modified only carefully, lest the delicate absolute positioning be disrupted by changing the dimensions of the modal.
 * - a special element, this is the youngest sibling in the grid environment, spanning the length of an invisible "zeroth" column so that it is (usually) the exact height of the entire grid container. While it is normally not displayed, whenever any modal is displayed,  displays at the same time as an invisible line that always has at least the minimum height required to display the entire modal. Being a grid item that spans every single row, when this element exists, it stretches the entire grid to make sure it is tall enough to display the modal. If the grid itself is already tall enough to display the modal, nothing happens.
 * - whenever a contestant has their desc-Z parameter defined, this element will exist as the youngest child of the  element, and will be absolutely positioned to cover its entire parent (excepting , which rises above it on the z-axis so that links can be clicked). If this class or   is clicked,   will be displayed as a modal and this class will be hidden. At the same time, a second instance of this class, this one the youngest child of  , will now display. This one is absolutely positioned relative to  , and will cover the entire grid area as a transclucent layer that darkens the tournament display — except for the modal, which appears above the layer on the z-axis. Clicking this layer will dismiss the modal, the layer itself, and restore the first instance of  , ready to bring the modal back whenever the user clicks on it.
 * - this is the modal itself, a child of  that is absolutely positioned in the center of the center of the grid environment (relative to  ), with two pseudo-elements that exist as stylistic flanges at the sides of the modal itself; these may be deleted if they are undesired.
 * - child of, this contains the actual contents of a given desc-Z parameter. Infoboxes included here will be made to match the tournament itself. Be careful that regular infobox styles don't clash here.
 * - affects the included /infobox template.

Meta

 * Only useful if you want a vague idea of how this template functions.
 * MediaWiki:Tournaments.css establishes a grid layout and uses  selectors, starting from the finals at 0, to position each match in a down-and-to-the-left fashion. This is what necessitates an exact "order" of matches, because unfortunately the  -style selectors cannot discriminate by class, only by element. We shall have to wait for CSS Selectors Level 4 for support for   before more flexibility can be added using only wikitext.
 * Template:Tournament/cont builds a single contestant (desktop), and appends a gap (either cont-gap or match-gap) based on whether it is a top or bottom contestant; unless  is defined, then nothing is appended.
 * Template:Tournament/text builds a single match (mobile), with Template:Tournament defining the order and the header that populates, along with formatting.
 * Template:Tournament/fakeout circumvents an infobox positioning bug in Fandom's mobile skin.
 * Variables and Loops are required in order to avoid testing every single parameter with each match, making things even more inefficient than they already are. Instead, a loop tests  for definition, and if it is not defined, continues to test down the line, 29, 28, and so on, until it arrives at an item that is defined. It then generates an   variable and exits, providing a single value for each match to check against in order to determine whether a match is required / whether an association line should only show half of itself, as with byes.