Difference between revisions of "WCCFHeatmap"
From Sega Retro
| Line 7: | Line 7: | ||
{{#vardefine:bg0|rgba({{#var:colour}},0)}}{{#vardefine:bg1|rgba({{#var:colour}},0.25)}}{{#vardefine:bg2|rgba({{#var:colour}},0.5)}}{{#vardefine:bg3|rgba({{#var:colour}},0.75)}}{{#vardefine:bg4|rgba({{#var:colour}},1)}} | {{#vardefine:bg0|rgba({{#var:colour}},0)}}{{#vardefine:bg1|rgba({{#var:colour}},0.25)}}{{#vardefine:bg2|rgba({{#var:colour}},0.5)}}{{#vardefine:bg3|rgba({{#var:colour}},0.75)}}{{#vardefine:bg4|rgba({{#var:colour}},1)}} | ||
{{#vardefine:hmwidth|{{{width|200}}}}}{{#vardefine:tilesize|{{#expr:{{#var:hmwidth}}/6}}}}{{#vardefine:halftilesize|{{#expr:{{#var:tilesize}}/2}}}}{{#vardefine:data|{{{2|}}}}} | {{#vardefine:hmwidth|{{{width|200}}}}}{{#vardefine:tilesize|{{#expr:{{#var:hmwidth}}/6}}}}{{#vardefine:halftilesize|{{#expr:{{#var:tilesize}}/2}}}}{{#vardefine:data|{{{2|}}}}} | ||
| − | <div style="border:2px solid; width:{{#var:hmwidth}}px; height:{{#expr:{{#var:tilesize}}*9}}px;"> | + | <div style="border:2px solid; width:{{#expr:{{#var:hmwidth}}+2}}px; height:{{#expr:({{#var:tilesize}}*9)+2}}px;"> |
{{#vardefine:tiley|9}}{{#vardefine:tilex|6}}{{#vardefine:j|0}} | {{#vardefine:tiley|9}}{{#vardefine:tilex|6}}{{#vardefine:j|0}} | ||
{{#while: | {{#while: | ||
| Line 22: | Line 22: | ||
{{incvar|j}} | {{incvar|j}} | ||
}} | }} | ||
| − | <!--corners--><div style="position:relative; left:0px; top:0px; | + | <!--corners--> |
| − | <!-- | + | <div style="position:relative; left:0px; top:0px; border-right:2px solid; border-bottom:2px solid; width:{{#var:halftilesize}}px; height:{{#var:halftilesize}}px; border-bottom-right-radius:100%; margin-bottom:-{{#var:halftilesize}}px; margin-right:-{{#var:halftilesize}}px;"></div> |
| − | <!--middle bits--><div style="position:relative; left:0px; top:0px; border-bottom: 2px solid; width:{{#expr:{{#var:halftilesize}}*12}}px; height:{{#expr:{{#var:halftilesize}}*9}}px; margin-bottom:-{{#expr:{{#var:halftilesize}}*9}}px; margin-right:-{{#expr:{{#var:halftilesize}}*12}}px;"></div> | + | <div style="position:relative; left:{{#expr:{{#var:halftilesize}}*11}}px; top:0px; border-left:2px solid; border-bottom:2px solid; width:{{#var:halftilesize}}px; border-bottom-left-radius:100%; height:{{#var:halftilesize}}px; margin-bottom:-{{#var:halftilesize}}px; margin-right:-{{#var:halftilesize}}px;"></div> |
| + | <div style="position:relative; left:0px; top:{{#expr:{{#var:halftilesize}}*17}}px; border-right:2px solid; border-top:2px solid; border-top-right-radius:100%; width:{{#var:halftilesize}}px; height:{{#var:halftilesize}}px; margin-bottom:-{{#var:halftilesize}}px; margin-right:-{{#var:halftilesize}}px;"></div> | ||
| + | <div style="position:relative; left:{{#expr:{{#var:halftilesize}}*11}}px; top:{{#expr:{{#var:halftilesize}}*17}}px; border-left:2px solid; border-top:2px solid; border-top-left-radius:100%; width:{{#var:halftilesize}}px; height:{{#var:halftilesize}}px; margin-bottom:-{{#var:halftilesize}}px; margin-right:-{{#var:halftilesize}}px;"></div> | ||
| + | <!--box-top--> | ||
| + | {{#vardefine:boxwidth|{{#expr:{{#var:halftilesize}}*6}}}}{{#vardefine:boxheight|{{#expr:{{#var:halftilesize}}*3}}}}<div style="position:relative; left:{{#expr:{{#var:halftilesize}}*3}}px; top:0px; border-bottom: 2px solid; border-left: 2px solid; border-right: 2px solid; width:{{#var:boxwidth}}px; height:{{#var:boxheight}}px; margin-bottom:-{{#var:boxheight}}px; margin-right:-{{#var:boxwidth}}px;"></div> | ||
| + | <div style="position:relative; left:{{#expr:{{#var:halftilesize}}*4}}px; top:0px; border-bottom: 2px solid; border-left: 2px solid; border-right: 2px solid; width:{{#expr:{{#var:halftilesize}}*4}}px; height:{{#expr:{{#var:halftilesize}}*1}}px; margin-bottom:-{{#expr:{{#var:halftilesize}}*1}}px; margin-right:-{{#expr:{{#var:halftilesize}}*4}}px;"></div> | ||
| + | <div style="position:relative; left:{{#expr:{{#var:halftilesize}}*4}}px; top:{{#expr:{{#var:halftilesize}}*3}}px; border-bottom: 2px solid; border-left: 2px solid; border-right: 2px solid; border-bottom-right-radius:50% 100%; border-bottom-left-radius:50% 100%; width:{{#expr:{{#var:halftilesize}}*4}}px; height:{{#expr:{{#var:halftilesize}}*1}}px; margin-bottom:-{{#expr:{{#var:halftilesize}}*1}}px; margin-right:-{{#expr:{{#var:halftilesize}}*4}}px;"></div> | ||
| + | <!--box-bottom--> | ||
| + | <div style="position:relative; left:{{#expr:{{#var:halftilesize}}*3}}px; top:{{#expr:{{#var:halftilesize}}*15}}px; border-top: 2px solid; border-left: 2px solid; border-right: 2px solid; width:{{#var:boxwidth}}px; height:{{#var:boxheight}}px; margin-bottom:-{{#var:boxheight}}px; margin-right:-{{#var:boxwidth}}px;"></div> | ||
| + | <div style="position:relative; left:{{#expr:{{#var:halftilesize}}*4}}px; top:{{#expr:{{#var:halftilesize}}*14}}px; border-top: 2px solid; border-left: 2px solid; border-right: 2px solid; border-top-right-radius:50% 100%; border-top-left-radius:50% 100%; width:{{#expr:{{#var:halftilesize}}*4}}px; height:{{#expr:{{#var:halftilesize}}*1}}px; margin-bottom:-{{#expr:{{#var:halftilesize}}*1}}px; margin-right:-{{#expr:{{#var:halftilesize}}*4}}px;"></div> | ||
| + | <div style="position:relative; left:{{#expr:{{#var:halftilesize}}*4}}px; top:{{#expr:{{#var:halftilesize}}*17}}px; border-top: 2px solid; border-left: 2px solid; border-right: 2px solid; width:{{#expr:{{#var:halftilesize}}*4}}px; height:{{#expr:{{#var:halftilesize}}*1}}px; margin-bottom:-{{#expr:{{#var:halftilesize}}*1}}px; margin-right:-{{#expr:{{#var:halftilesize}}*4}}px;"></div> | ||
| + | <!--middle bits--> | ||
| + | <div style="position:relative; left:0px; top:0px; border-bottom: 2px solid; width:{{#expr:{{#var:halftilesize}}*12}}px; height:{{#expr:{{#var:halftilesize}}*9}}px; margin-bottom:-{{#expr:{{#var:halftilesize}}*9}}px; margin-right:-{{#expr:{{#var:halftilesize}}*12}}px;"></div> | ||
| + | <div style="position:relative; left:{{#expr:{{#var:halftilesize}}*4}}px; top:{{#expr:{{#var:halftilesize}}*7}}px; border: 2px solid; border-radius:100%; width:{{#expr:{{#var:halftilesize}}*4}}px; height:{{#expr:{{#var:halftilesize}}*4}}px; margin-bottom:-{{#expr:{{#var:halftilesize}}*4}}px; margin-right:-{{#expr:{{#var:halftilesize}}*4}}px;"></div> | ||
</div> | </div> | ||
</includeonly><noinclude> | </includeonly><noinclude> | ||
Revision as of 08:24, 22 October 2023
So this is my life