Skip to content

Commit

Permalink
Merge pull request #13 from Oli-idk/main
Browse files Browse the repository at this point in the history 
implement custom format option and clean up some old unused code
  • Loading branch information
@akdukaan
akdukaan authored Jan 2, 2024
2 parents c545a13 + 5b243be commit 96c431c
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 30 deletions.
42 changes: 36 additions & 6 deletions resources/rgb/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
<label id="graylabel2" class="gray" for="outputText" style="font-weight: normal;">Copy-paste this for RGB text!</label>
<pre id="outputText" style="border-radius: 10px; white-space: pre-wrap; height: 70px; margin-right: 15px; font-family: MinecraftRegular; margin-bottom: 5px;"
onclick="copyTextToClipboard(this.textContent);"></pre>
<p id="error">This is more than 256 characters and may not fit in the chat box.</p>
<p id="error" style="color: #ff5c5c;"><b>This is more than 256 characters and may not fit in the chat box.</b></p>
</div>
</div>
<div class="row">
Expand All @@ -61,14 +61,44 @@
class="form-control"
onchange="updateOutputText(event);">
<option value='0'>Default (&#rrggbb)</option>
<option value='2'>Legacy (&x&r&r&g&g&b&b)</option>
<option value='6'>Console (§x§r§r§g§g§b§b)</option>
<option value='8'>MOTD (\u00A7x)</option>
<option value='1'>Chat (<#rrggbb>)</option>
<option value='7'>BBCode [COLOR=#rrggbb]</option>
<option value='1'>Legacy (&x&r&r&g&g&b&b)</option>
<option value='2'>Console (§x§r§r§g§g§b§b)</option>
<option value='3'>MOTD (\u00A7x)</option>
<option value='4'>Chat (<#rrggbb>)</option>
<option value='5'>BBCode [COLOR=#rrggbb]</option>
<option value="6">Custom</option>
</select>
</div>
</div>
<div id="custom-format-inputs" style="display: none;">
<div class="row">
<p>Placeholders</p>
<p>$1 - (R)RGGBB</p>
<p>$2 - R(R)GGBB</p>
<p>$3 - RR(G)GBB</p>
<p>$4 - RRG(G)BB</p>
<p>$5 - RRGG(B)B</p>
<p>$6 - RRGGB(B)</p>
<p>$f - Formatting</p>
<p>$c - Character</p>
</div>
<div class="row">
<div class="col-md-3" style="padding-left: 0;">
<label for="custom-format">Custom Format</label>
<input class="form-control" id="custom-format" type="text" maxlength="100" placeholder="Your Text"
value="&#$1$2$3$4$5$6$f$c" oninput="javascript: updateOutputText(event);"
onchange="javascript: updateOutputText(event)">
</div>
</div>
<div class="row">
<div class="col-md-3" style="padding-left: 0;">
<label for="format-character">Format Character</label>
<input class="form-control" id="format-character" type="text" maxlength="100" placeholder="Your Text"
value="&" oninput="javascript: updateOutputText(event);"
onchange="javascript: updateOutputText(event)">
</div>
</div>
</div>
<div class="row">
<div class="col-md-3" style="padding-left: 0;">
<label for="color-preset">Color Preset</label>
Expand Down
80 changes: 56 additions & 24 deletions resources/rgb/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
// elements for obtaining vals
const nickName = document.getElementById('nickname');
const coloredNick = document.getElementById('coloredNick');
const custom_format = document.getElementById('custom-format');
const format_character = document.getElementById('format-character');

const savedColors = ['084CFB', 'ADF3FD', getRandomHexColor(), getRandomHexColor(), getRandomHexColor(), getRandomHexColor(), getRandomHexColor(), getRandomHexColor(), getRandomHexColor(), getRandomHexColor()];
const presets = {
1: {
colors: ["FF0000", "FF7F00", "FFFF00", "00FF00", "0000FF", "4B0082", "9400D3"],
}
}

const formats = {
0: {
outputPrefix: '',
Expand All @@ -16,54 +20,53 @@ const formats = {
},
1: {
outputPrefix: '',
template: '<#$1$2$3$4$5$6>$f$c',
template: '&x&$1&$2&$3&$4&$5&$6$f$c',
formatChar: '&',
maxLength: 256
},
2: {
outputPrefix: '',
template: '&x&$1&$2&$3&$4&$5&$6$f$c',
formatChar: '&',
maxLength: 256
template: '§x§$1§$2§$3§$4§$5§$6$f$c',
formatChar: '§',
maxLength: null
},
3: {
outputPrefix: '/nick ',
template: '&#$1$2$3$4$5$6$f$c',
formatChar: '&',
maxLength: 256
outputPrefix: '',
template: '\\u00A7x\\u00A7$1\\u00A7$2\\u00A7$3\\u00A7$4\\u00A7$5\\u00A7$6$c',
formatChar: null,
maxLength: null
},
4: {
outputPrefix: '/nick ',
outputPrefix: '',
template: '<#$1$2$3$4$5$6>$f$c',
formatChar: '&',
maxLength: 256
},
5: {
outputPrefix: '/nick ',
template: '&x&$1&$2&$3&$4&$5&$6$f$c',
formatChar: '&',
maxLength: 256
},
6: {
outputPrefix: '',
template: '§x§$1§$2§$3§$4§$5§$6$f$c',
formatChar: '§',
maxLength: null
},
7: {
outputPrefix: '',
template: '[COLOR=#$1$2$3$4$5$6]$c[/COLOR]',
formatChar: null,
maxLength: null
},
8: {
6: {
outputPrefix: '',
template: '\\u00A7x\\u00A7$1\\u00A7$2\\u00A7$3\\u00A7$4\\u00A7$5\\u00A7$6$c',
formatChar: null,
template: custom_format.value,
formatChar: format_character.value,
maxLength: null
},
};

custom_format.addEventListener('input', function () {
formats[6].template = custom_format.value;
updateOutputText();
});

// Event listener for format_character input change
format_character.addEventListener('input', function () {
formats[6].formatChar = format_character.value;
updateOutputText();
});

function darkMode() {
if (document.getElementById('darkmode').checked == true) {
document.body.classList.add('dark');
Expand All @@ -78,6 +81,8 @@ function darkMode() {
document.getElementById('numOfColors').classList.add("darktextboxes");
document.getElementById('nickname').classList.add("darktextboxes");
document.getElementById('outputText').classList.add("darktextboxes");
document.getElementById('custom-format').classList.add("darktextboxes");
document.getElementById('format-character').classList.add("darktextboxes");
Array.from(document.getElementsByClassName("hexColor")).forEach(e => {
document.getElementById(e.id).classList.add("darktextboxes");
})
Expand All @@ -93,6 +98,8 @@ function darkMode() {
document.getElementById('numOfColors').classList.remove("darktextboxes");
document.getElementById('nickname').classList.remove("darktextboxes");
document.getElementById('outputText').classList.remove("darktextboxes");
document.getElementById('custom-format').classList.remove("darktextboxes");
document.getElementById('format-character').classList.remove("darktextboxes");
Array.from(document.getElementsByClassName("hexColor")).forEach(e => {
document.getElementById(e.id).classList.remove("darktextboxes");
})
Expand Down Expand Up @@ -360,6 +367,31 @@ function displayColoredName(nickName, colors) {
}
}

$(document).ready(function() {
// Initially hide the custom text inputs
$('#custom-format-inputs').hide();

// Function to toggle visibility of custom text inputs
function toggleCustomInputs() {
var selectedFormat = $('#output-format').val();
if (selectedFormat == '6') {
$('#custom-format-inputs').show();
} else {
$('#custom-format-inputs').hide();
}
}

// Bind the function to the change event of the output-format dropdown
$('#output-format').change(function() {
toggleCustomInputs();
updateOutputText(event);
});

// Call the function initially to set the initial visibility
toggleCustomInputs();
});


function preset(n) {
const colors = presets[n].colors
const container = $('#hexColors');
Expand Down

0 comments on commit 96c431c

Please sign in to comment.