JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

rug tool.

<p><div id='rug_grid'></div></p>

<div id='rug_palette'></div>

<p><textarea id='test_grid'></textarea></p>

<p>.</p>.<p>.</p>.<p>.</p>.


<div class='hidden'>
    <h3>1. Build your custom palette</h3>
<p>
    Click a colour in the full rainbow list, and then the <b>"Add to Palette"</b> button. You'll see it added to the My Palette box. You can edit or remove colours after adding.
</p>

<h3>2. Apply your colours to squares</h3>
<p>
    Click a square on the grid. Under the grid, click on one of the colours in your palette to change the square to this colour.
</p>

<h3>3. Edit colours</h3>
<p>
    Are you satisfied with the placement of colours, but want to tweak the actual colours? Click the <b>"Edit"</b> button next to one in the My Palette box, and choose the new colour. All squares with the old colour will change to the new colour. 
</p>

<h3>4. Output chart images</h3>
<p>
    There are two options: <b>"Colour Grid"</b> or <b>"Symbol Grid"</b>. The first will just copy the current design grid into a large image you can download. The second option will generate the grid with symbols instead of coloured squares. Use this if you can't print in colour. Some people find symbols easier to follow, too.
</p>
<p>
    Both options come with a colour or symbol chart underneath the design, with a description of each colour in your palette.
</p>

<h3>5. Saving, loading, sharing via code</h3>
<p>
    This tool doesn't have a database or storage attached. But you can save your designs on your own computer.
</p>
<p>
    Click the <b>"Output Code"</b> button and a bunch of data will be output in the text box. Copy and paste the bundle of code into a simple text file (use Notepad, Wordpad or similar). 
</p>
<p>
    Later, you can come back to this page, copy and paste that code chunk in the <b>"Import Code"</b> box, and the design will be loaded into the editor. Send the text file to others and they can edit designs into their own versions.
</p>
    
</div>

CSS

.hidden {display: none;}

div, img, html {
    box-sizing: border-box;
}

/* Stop <br> causing gap between rows. */
#rug_grid {
    font-size: 0px;
	margin: 10px auto;
}

#rug_grid .cell {
    cursor: pointer;
    width: 20px;
    height: 20px;
    font-size: 8px;
    display: inline-block;
	box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3);
}

#rug_palette .swatch {
	cursor: pointer;
	display: inline-block;
	width: 5%;
    height: 20px;
}

#rug_grid .cell:hover, 
#rug_palette .swatch:hover {
	box-shadow: inset 0px 0px 0px 2px yellow;
}

#rug_grid .active_cell, 
#rug_palette .active_colour {
	box-shadow: inset 0px 0px 0px 2px black;
}

/* div where data gets exported */
#exported_map, #imported_map {
    border: 1px solid black;
    padding: 10px;
    max-height: 300px;
    overflow: auto;
}


/* Sizes for grid squares */
.cell_5 {
	width: 5px;
    height: 5px;
}
.cell_8 {
	width: 8px;
    height: 8px;
}
.cell_10 {
	width: 10px;
    height: 10px;
}
.cell_15 {
	width: 15px;
    height: 15px;
}
.cell_20 {
	width: 20px;
    height: 20px;
}
.cell_25 {
	width: 25px;
    height: 25px;
}
.cell_30 {
	width: 30px;
    height: 30px;
}

/* For painting tool. */
.colour_preview {
    width: 100px;
    height: 50px;
    border: 1px solid black;
}

JavaScript

//const letters = "yorlgtbivpms".split("");
const letters = "roylg".split("");

const colours = ["red","orange","yellow","olive","green","teal","blue","indigo","violet","purple","pink","grey"];

// 9 shades of both bright and dull.
// Use for tools that use div BGs only, no CSS filters.
const hexPalette = {
        y: { // Yellow
            b: ["fffce6","fff8cc","fef19a","feea67","fedc01","cbb001","988401","655801","332c00"],
            d: ["f7f5ee","e7e1cb","cfc396","bfb073","aa984f","8c7d40","695d30","463e20","231f10"]
        },
        o: { // Orange
            b: ["fff4e6","fedeb3","fec881","fda635","fa9103","ca7302","975602","653a01","321d01"],
            d: ["f8f2ec","f2e5d9","e5cab3","d1a37a","bd7b40","986334","724a27","4c311a","26190d"]
        },
        r: { // Red
            b: ["fdeae7","f9c1b8","f48371","f05942","ea2e13","bd260f","8e1d0b","5e1308","2f0a04"],
            d: ["f6efee","e4cecd","c99e9c","b87d7a","a55c58","854a47","633836","422524","211312"]
        },
        l: { // Olive
            b: ["f8ffe6","ebfeb4","d8fd68","c4fc1d","ace403","85b003","729702","4c6402","263201"],
            d: ["f4f7ee","dde6cc","c6d5aa","afc487","8dab54","708943","546732","384422","1c2211"]
        },
        g: { // Green
            b: ["ebfce8","c4f7bb","9cf18e","75eb60","3ae31c","2eb616","238811","175b0b","0c2d06"],
            d: ["eff6ef","d0e3cf","b1d0af","82b47e","62a15e","4f814b","3b6039","284026","142013"]
        },
        t: { // Teal
            b: ["","","","","","","","",""],
            d: ["","","","","","","","",""]
        },
        b: { // Blue
            b: ["","","","","","","","",""],
            d: ["","","","","","","","",""]
        },
        i: { // Indigo
            b: ["","","","","","","","",""],
            d: ["","","","","","","","",""]
        },
        v: { // Violet
            b: ["","","","","","","","",""],
            d: ["","","","","","","","",""]
        },
        p: { // Purple
            b:...