This is the official component used by WebMUDs to convert MUD color tags to colored and padded text.
Use color tags in your room descriptions, MOTDs, equipment name, etc as follows:
It is {gray}pitch black{/}.
You see {lime}green {olive}leaves{/} resting on the floor.
You sure are {9}bleeding{/}!
Those special tags will then be replaced by proper colored text as you play the game. Using the normal client, colors are applied using HTML tags.
You can also use numeric codes for the fifteen basic colors. E.g., {9}
instead of {red}
.
{1}
-{maroon}
- 800000{2}
-{green}
- 008000{3}
-{olive}
- 808000{4}
-{navy}
- 000080{5}
-{purple}
- 800080{6}
-{teal}
- 008080{7}
-{gray}
- 808080{8}
-{silver}
- C0C0C0{9}
-{red}
- FF0000{10}
-{lime}
- 00FF00{11}
-{yellow}
- FFFF00{12}
-{blue}
- 0000FF{13}
-{magenta}
- FF00FF{14}
-{cyan}
- 00FFFF{15}
-{white}
- FFFFFF
These special colors are available by name only.
{gold}
- FFD700{orange}
- FFA500{darkorange}
- FF8C00{orangered}
- FF4500{brown}
- A52A2A{dimgray}
- 696969
If you omit the reset tag ({/}
), it will be inserted automatically at the end of the text to avoid color bleeding.
WebmudsText.html("{yellow}Yellow{/} Text")
// => "<span class="wmyellow">Yellow</span> Text"
WebmudsText.html("{yellow}Yellow{/} and {red}Red{/} Text")
// => "<span class="wmyellow">Yellow</span> and <span class="wmred">Red</span> Text"
WebmudsText.html("{yellow}Yellow{red}Red{/} Text")
// => "<span class="wmyellow">Yellow</span><span class="wmred">Red</span> Text"
This library provides CSS classes with all necessary colors. They're prefixed with wm
to avoid collision.
Padding is done through the use of {%...}
tags. It can be mixed with color tags. It requires the usage of a closing {%}
tag.
Opening tag format is {%XYZ}
, where:
X
- a number with at most two digits;Y
- optional (see note below), a character that represents alignment:l
for left,r
for right,c
for center. Default isl
.Z
- optional, a string of at most four characters that will be used as a filler. Default is space. Characters must not include{
or}
.
Note: If you want to use the "l"
/"r"
/"c"
letters as fillers, you must specify the alignment.
If string size is larger than padding size, it will be cut off. Color tags are not supported in the filler value.
WebmudsText.pad("This is {%20}padded{%} text")
// => "This is padded text"
WebmudsText.pad("This is {%20r}right-padded{%} text")
// => "This is right-padded text"
WebmudsText.pad("This is {%20=}right-padded{%} text with different filler")
// => "This is ========right-padded text with different filler"
WebmudsText.pad("This is {%20c}centered{%} text")
// => "This is centered text"
WebmudsText.pad("This is {%20c}cen{white}te{/}red{%} text with colors")
// => "This is cen{white}te{/}red text with colors"
// (Color tags remain unchanged - apply html() to convert after padding)
WebmudsText.pad("This is {%3}overflowing{%} text")
// => "This is ove text"
WebmudsText.pad("+{%40c-} Fancy Title {%}+")
// => "+-------------- Fancy Title -------------+"
- Benchmark padding code and improve where needed.
- Implement background colors.