@webmuds/colors

This is the component used by WebMUDs to convert MUD color tags to colored 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.

Color Names

Basic Colors and Codes

You can also use ANSI 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

Advanced Colors

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.

Examples

import { html } from '@webmuds/colors'

html("{yellow}Yellow{/} Text")
// => "<span class="wmyellow">Yellow</span> Text"

html("{yellow}Yellow{/} and {red}Red{/} Text")
// => "<span class="wmyellow">Yellow</span> and <span class="wmred">Red</span> Text"

html("{yellow}Yellow{red}Red{/} Text")
// => "<span class="wmyellow">Yellow</span><span class="wmred">Red</span> Text"

Any HTML present in the given text will be escaped:

html("> {red}\"Red\" Text & {yellow}> 'Yellow' <")
// => &gt; <span class="wmred">&quot;Red&quot; Text &amp; </span><span class="wmyellow">&gt; &#39;Yellow&#39; &lt;</span>

You can prevent HTML escaping by passing false as the second parameter to the html method. This is useful only if you're building websites and would like to use color escaping mixed with your other HTML content:

html("{red}\"<b>Bold Red</b>\"{/} &amp; '<i>{yellow}Italic Yellow{/}</i>'", false)
// => <span class="wmred">"<b>Bold Red</b>"</span> &amp; '<i><span class="wmyellow">Italic Yellow</span></i>'

Removing Color Tags

This library offers a strip method to remove color tags from a string:

import { strip } from '@webmuds/colors'

strip("{yellow}Yellow{/} Text")
// => "Yellow Text"

Emoji

This library provides an additional wrapEmoji() method that wraps all emoji in <span class="wmE"> tags.

import { wrapEmoji } from '@webmuds/colors'

wrapEmoji("looking good 👍")
// => 'looking good <span class="wmE">👍</span>'

You can then use CSS to change the wmE class to use a different font (for instance, a monochrome emoji font).

(wmE = webmuds emoji)

CSS File

This library provides the above CSS classes in css/colors.css so that you can import it in other projects. Classes are prefixed with wm to avoid collision.

License

MIT