Template:Dots: Difference between revisions

From retromux
Jump to navigation Jump to search
Sigil (talk | contribs)
41 edits
Created page with "<includeonly><span style="white-space: nowrap;">{{ #ifexpr: {{{ 1 | 0 }}} > 0 | 10px | {{ #ifexpr: {{{ 2 | 1 }}} | 10px }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 1 | 10px | {{ #ifexpr: {{{ 2 | 1 }}} | 10px }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 2 | 10px | {{ #ifexpr: {{{ 2 | 1 }}} | 10px }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 3 | 10px | {{..."
 
Dots V2! Doesn't use images but instead some CSS magic, allowing for greater control over how the dots are displayed.
 
Line 1: Line 1:
<includeonly><span style="white-space: nowrap;">{{ #ifexpr: {{{ 1 | 0 }}} > 0 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 1 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 2 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 3 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 4 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 5 | <br />{{ #ifexpr: {{{ 1 | 0 }}} > 5 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 6 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 7 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 8 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 9 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }} }}</span></includeonly><noinclude>This template allows you to quickly and easily indicate stat values with dots, much like in the books.
<includeonly>{{#css:
.dot_item {
  border-radius: 25px;
  width: 10px;
  height: 10px;
  margin: 1px;
}
}}<div class="dot_container" style="display: flex; flex-direction: row; ">{{#ifexpr: {{{1|0}}} > 0|<div class="dot_item" style="{{#ifeq: {{{gradient|no}}} | yes | background-image: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,0) ); }} background-color: {{{fill_color | black }}}; border: 1px solid {{{fill_color | black }}};"></div>|{{#ifexpr: {{{2|5}}} > 0|<div class="dot_item" style="border: 1px solid {{{empty_color | {{{fill_color | black }}} }}};"></div>}} }}{{#ifexpr: {{{1|0}}} > 1|<div class="dot_item" style="{{#ifeq: {{{gradient|no}}} | yes | background-image: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,0) ); }} background-color: {{{fill_color | black }}}; border: 1px solid {{{fill_color | black }}};"></div>|{{#ifexpr: {{{2|5}}} > 1|<div class="dot_item" style="border: 1px solid {{{empty_color | {{{fill_color | black }}} }}};"></div>}} }}{{#ifexpr: {{{1|0}}} > 2|<div class="dot_item" style="{{#ifeq: {{{gradient|no}}} | yes | background-image: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,0) ); }} background-color: {{{fill_color | black }}}; border: 1px solid {{{fill_color | black }}};"></div>|{{#ifexpr: {{{2|5}}} > 2|<div class="dot_item" style="border: 1px solid {{{empty_color | {{{fill_color | black }}} }}};"></div>}} }}{{#ifexpr: {{{1|0}}} > 3|<div class="dot_item" style="{{#ifeq: {{{gradient|no}}} | yes | background-image: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,0) ); }} background-color: {{{fill_color | black }}}; border: 1px solid {{{fill_color | black }}};"></div>|{{#ifexpr: {{{2|5}}} > 3|<div class="dot_item" style="border: 1px solid {{{empty_color | {{{fill_color | black }}} }}};"></div>}} }}{{#ifexpr: {{{1|0}}} > 4|<div class="dot_item" style="{{#ifeq: {{{gradient|no}}} | yes | background-image: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,0) ); }} background-color: {{{fill_color | black }}}; border: 1px solid {{{fill_color | black }}};"></div>|{{#ifexpr: {{{2|5}}} > 4|<div class="dot_item" style="border: 1px solid {{{empty_color | {{{fill_color | black }}} }}};"></div>}} }}{{#ifexpr: {{{1|0}}} > 5|<div class="dot_item" style="{{#ifeq: {{{gradient|no}}} | yes | background-image: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,0) ); }} background-color: {{{fill_color | black }}}; border: 1px solid {{{fill_color | black }}};"></div>|{{#ifexpr: {{{2|5}}} > 5|<div class="dot_item" style="border: 1px solid {{{empty_color | {{{fill_color | black }}} }}};"></div>}} }}{{#ifexpr: {{{1|0}}} > 6|<div class="dot_item" style="{{#ifeq: {{{gradient|no}}} | yes | background-image: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,0) ); }} background-color: {{{fill_color | black }}}; border: 1px solid {{{fill_color | black }}};"></div>|{{#ifexpr: {{{2|5}}} > 6|<div class="dot_item" style="border: 1px solid {{{empty_color | {{{fill_color | black }}} }}};"></div>}} }}{{#ifexpr: {{{1|0}}} > 7|<div class="dot_item" style="{{#ifeq: {{{gradient|no}}} | yes | background-image: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,0) ); }} background-color: {{{fill_color | black }}}; border: 1px solid {{{fill_color | black }}};"></div>|{{#ifexpr: {{{2|5}}} > 7|<div class="dot_item" style="border: 1px solid {{{empty_color | {{{fill_color | black }}} }}};"></div>}} }}{{#ifexpr: {{{1|0}}} > 8|<div class="dot_item" style="{{#ifeq: {{{gradient|no}}} | yes | background-image: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,0) ); }} background-color: {{{fill_color | black }}}; border: 1px solid {{{fill_color | black }}};"></div>|{{#ifexpr: {{{2|5}}} > 8|<div class="dot_item" style="border: 1px solid {{{empty_color | {{{fill_color | black }}} }}};"></div>}} }}{{#ifexpr: {{{1|0}}} > 9|<div class="dot_item" style="{{#ifeq: {{{gradient|no}}} | yes | background-image: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,0) ); }} background-color: {{{fill_color | black }}}; border: 1px solid {{{fill_color | black }}};"></div>|{{#ifexpr: {{{2|5}}} > 9|<div class="dot_item" style="border: 1px solid {{{empty_color | {{{fill_color | black }}} }}};"></div>}} }}</div><!-- OLD CODE: <span style="white-space: nowrap;">{{ #ifexpr: {{{ 1 | 0 }}} > 0 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 1 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 2 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 3 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 4 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 5 | <br />{{ #ifexpr: {{{ 1 | 0 }}} > 5 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 6 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 7 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 8 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }}{{ #ifexpr: {{{ 1 | 0 }}} > 9 | [[Image:Dot-filled.png|10px]] | {{ #ifexpr: {{{ 2 | 1 }}} | [[Image:Dot.png|10px]] }} }} }}</span> --></includeonly><noinclude>This template allows you to quickly and easily indicate stat values with dots, much like in the books.
 
<pre>
{{dots|<value>|<max>|gradient=<gradient>|fill_color=<fill_color>|empty_color=<empty_color>}}
 
<gradient>: If set to 'yes' will put a gradient over the circles to give them a 3D appearance
<fill_color>: The color for full dots.  This can be color names (red), or HTML codes (#F633AB).  Defaults to 'black'.
<empty_color>: The color for the borders of empty dots.  This can be color names (red) or HTML codes (#F633AB).  Defaults to the value of <fill_color>.
</pre>


{|
{|
! colspan="2" | Basic usage
! colspan="2" | Basic examples
|-
|-
|<nowiki>{{dots|1}}</nowiki>
|<nowiki>{{dots|1}}</nowiki>
|{{dots|1}}
|{{dots|1|gradient=no}}
|-
|-
|<nowiki>{{dots|2}}</nowiki>
|<nowiki>{{dots|2}}</nowiki>
Line 19: Line 34:
|{{dots|5}}
|{{dots|5}}
|-
|-
! colspan="2" | Variable background
! colspan="2" | Playing with some options
|-
|<nowiki>{{dots|3|0}}</nowiki>
|{{dots|3|0}}
|-
|<nowiki>{{dots|3|5}}</nowiki>
|{{dots|3|5}}
|-
|-
|<nowiki>{{dots|3|10}}</nowiki>
|<nowiki>{{dots|3|10}}</nowiki>
|{{dots|3|10}}
|{{dots|3|10}}
|-
|-
|<nowiki>{{dots|7|0}}</nowiki>
|<nowiki>{{dots|3|10|gradient=yes}}</nowiki>
|{{dots|7|0}}
|{{dots|3|10|gradient=yes}}
|-
|-
|<nowiki>{{dots|7|5}}</nowiki>
|<nowiki>{{dots|3|10|gradient=yes|fill_color=#F633AB}}</nowiki>
|{{dots|7|5}}
|{{dots|3|10|gradient=yes|fill_color=#F633AB}}
|-
|-
|<nowiki>{{dots|7|10}}</nowiki>
|<nowiki>{{dots|3|10|gradient=yes|fill_color=#F633AB|empty_color=blue}}</nowiki>
|{{dots|7|10}}
|{{dots|3|10|gradient=yes|fill_color=#F633AB|empty_color=blue}}
|}
|}


Note that you can only usefully set background dots for less than or equal to a max of 5, and it will automatically spill into a two-line mode for any stat >5.  This is probably a bug.
Big thanks to Sigil for the initial idea.
Second note: Sigil stole this, don't bite anyone else.
</noinclude>
</noinclude>

Latest revision as of 21:03, 14 September 2024

This template allows you to quickly and easily indicate stat values with dots, much like in the books. 

{{dots|<value>|<max>|gradient=<gradient>|fill_color=<fill_color>|empty_color=<empty_color>}}

<gradient>: If set to 'yes' will put a gradient over the circles to give them a 3D appearance
<fill_color>: The color for full dots.  This can be color names (red), or HTML codes (#F633AB).  Defaults to 'black'.
<empty_color>: The color for the borders of empty dots.  This can be color names (red) or HTML codes (#F633AB).  Defaults to the value of <fill_color>.
Basic examples
{{dots|1}}
{{dots|2}}
{{dots|3}}
{{dots|4}}
{{dots|5}}
Playing with some options
{{dots|3|10}}
{{dots|3|10|gradient=yes}}
{{dots|3|10|gradient=yes|fill_color=#F633AB}}
{{dots|3|10|gradient=yes|fill_color=#F633AB|empty_color=blue}}

Big thanks to Sigil for the initial idea.

Retrieved from "http://numetalmux.com/index.php?title=Template:Dots&oldid=3519"