[Devlog #1] Let's make DetailRP less painful
The fun things in a post should always be the first thing you get to read, so let's see if I can capture your attention within the first 30 seconds of this post to keep you entertained and reading!
DetailRP is hard, no, like, really. It is. How many times have you messed up your color and had it spill, or having to write in discord/notepad then break it up in appends?
Of course, as any good programmers (I hope I did not just lose 80% of the people who clicked after mentioning that) would do: I made a website to fix that problem!
Two problems though..
1) I don't know how to write JavaScript/TypeScript (and.. that's what websites are sort of backed by)
2) ..I have never built a website before?
But, I also know two crucial things
1) I have a free weekend
2) I am a responsible adult who can neglect responsibilities of their life and spend a weekend learning random stuff
So equipped with being a responsible adult (along with 50 other funny jokes you can tell yourself) and knowing how to write in.. embedded programming for devices your grandfather uses. Let's write a website for a school role-play server??
I am writing this assuming you know nothing about programming (because I also don't) -- no matter what background you come from: artist, casual roleplayer, someone who just wants to know how coding works or (god forbid) an experienced programmer. A more technical devlog will come later, this is to simply to take people along into what website development is all about while assuming no prior knowledge!
Hey you! If you are not that interested in programming and just want to see what things look like so far and how much progress was made, here's the video!
And the website is live.. here!
https://srp-tools.vercel.app/
I would like to dedicate a small section of appreciation here to @SignorinaAmore, one of the biggest contributor in polishing up the website as much as it does, along with amazing suggestions that made me proud enough to show it off here! You are the best, Gremlin, keep being you
Actually.. designing the website?
No matter what anyone tells you, making websites is NOT easy. I, for one, have the natural aptitude for art and design as much as an orangutan.
Okay, let's start designing. Yes, designing, we are not writing code yet. Let's.. imagine what our website is going to look like, how things would be placed, all those fun thingiemabobs.
For starters.. we definitely need
- A text box for user input
- A way for the user to view the result
- Dark theme and palette to suit that (duh!)
- Settings, all good website have settings
- And.. a way to copy it into appends so that they can use it in SRP
.If your initial thought after seeing that monstrosity is "If god is real, why does he allow whatever that is to exist?", and to that I can only sadly nod my head to.
It's ugly, but you know what? It get the things I wanted to get done. Let's realize our design and make something that works!
Choosing a.. web framework?
Okay, what the hell is a framework? Thing is, we can't quite.. make websites from scratch. I mean, we can, but it'd look terrible and ugly.
A web framework is where smarter people have already got us the tools necessary for us to write websites and make our life less miserable.
Just... one small problem. There are almost as many web frameworks as there are stars in the sky, and each one of them says they are the better one.
There's 4 main players,
- React
- Svelte
- Vue
- Angular
And they all boast being cooler than the other. Being new to this whole thing, I am.. a little lost.
So I went with the most rational way to make decisions: the coolest logo wins! And React wins that! (The blue atom looking thing!)
Okay, so, I lied a little. React is not really a web framework, we are using Next.JS, which builds on React!
JavaScript and TypeScript
So, JavaScript (JS for short) is the main magic behind how websites do cool stuff. You can write JS and anyone you want to make happen in a website can happen!
Well, one more problem, there's also this thing called TypeScript.
Well, uh, what is TypeScript? TypeScript is supposed to be JavaScript but better. With my background, I actually like TypeScript a lot more, mostly because it stops me from doing potentially stupid things.
Speaking of JavaScript, did you know I've been avoiding it like the plague for the last 5 years from my programming career? No, like, actually. That language is cursed.
Like, look at this
JavaScript:
> 9 + "1"
"91"
> 91 - "1"
909 plus.. the word 1.. is the word 91. And somehow, 91 minus.. the word is.. 90?
Then why is 9 + "1" not 10?? JavaScript you beautiful disaster.
See the response below on each and everyone of the what and whys!
Oh right, last thing, you might be thinking "Oh wow, JavaScript sounds like Java, are they related?"
They are as related as a car is to a carpet, JavaScript took that name to ride on the high of when Java was popular.
Anyway, we already made our two important choices! Our framework will be React and our language will be TypeScript. Let's get started!
The technical stuff
If you stuck with me this long and read down to this section, I think I can finally put down the boring stuff on you!
Okay, so.. either are a developer yourself and is judging the entire post, or you are really interested in my post.
If you are the former, I shall cater to your sadistic desires to watch me suffer at a later post. For now, I want this to be an educational post for anyone that's new to web-dev (like I was!)
[Colors!!]
Let's get.. started! First, obviously we have to handle minecraft color conversion to actual hex color code (It's just RGB! #ffffff is (255, 255, 255), which is pure white!)
JavaScript:
const MINECRAFT_COLOR_CODE = {
"0": "#000000",
"1": "#0000AA",
"2": "#00AA00",
"3": "#00AAAA",
"4": "#AA0000",
"5": "#AA00AA",
"6": "#FFAA00",
"7": "#ffffff",
"8": "#555555",
"9": "#5555FF",
"a": "#55FF55",
"b": "#55FFFF",
"c": "#FF5555",
"d": "#FF55FF",
"e": "#FFFF55",
"f": "#FFFFFF",
"g": "#DDD605",
}Alright, now.. formatting code like italics and all that fancy stuff
JavaScript:
const FORMATTING_CODE = {
"l": "text-bold",
"m": "text-strikethrough",
"n": "text-underline",
"o": "text-italic",
"r": "reset",
}Cool, cool, now.. how.. do we actually make things light up with colors? Like, nicely? So, we have one problem:
Text boxes.. can't do colors. Yikes. We can't actually add things like `#ffffff this text will be white` and expect it to work
So how do we get around this? Introducing.. <div>! See, we can chain <div>s together and add color to them, like
HTML:
<div style="text-red">I am red text!</div> <div style="text-blue">I am blue text!</div>More problems, how do we get these `<div>`s to play nice? See, they have a tendency to do stupid things. See, with the code we have
HTML:
<span>
<div color="#ffffff">White textttttt</div> <div color="#ff11ff">Pink texttttt</div> <div color="#ffff33"> Yellow texttt </div>
</span>
Yeah.. they are supposed to, you know, behave like normal words and not run away from each other? Luckily, we have our lord and savior: flexbox
What is a flexbox? I have no idea, but all I know is that once you wield the power that is flexbox, your problems go away. The moment I put the magic words in
HTML:
<span className="flex flex-row overflow-y-scroll flex-wrap">
<div color="#ffffff">White textttttt</div> <div color="#ff11ff">Pink texttttt</div> <div color="#ffff33"> Yellow texttt </div>
</span>Suddenly life is.. amazing
[Not.. colors. We figured out the colors, but..]
How.. are we supposed to, you know, turn the text into a bunch of divs? We must use, that is right, regex! (@Customable made a wonderful post about it, do check it out here!)
But in short, regex are magical symbols that us mortals can wield to attain superpowers. It's written in some archaic language lost to time.
In one fine morning, I had woken up with an epiphany and came up with this regex:
JavaScript:
const re = /(&#[0-9a-f]{6})|(&.)|(")|(\s+)/gmWhat does it do? It makes my life less painful by splitting things like
Code:
"&#f1f1f1Hi how&o, are, you today?" action action woop woop
Code:
"
&#f1f1f1f1
Hi
how
&o
are,
you
today?
"
action
action
woop
woopPutting it all together we get this.. terrible thing
JavaScript:
function RichFormat(props: { text: string, defaultColor: string, defaultColorMessage: string }): JSX.Element {
const { text, defaultColor, defaultColorMessage } = props;
let color = "";
// I didn't make formatting happen yet
let formattings = [];
// To know if we are out of quotations yet!
// This is helpful to know which color we should use! (Emote color or message color)
let eoq = true;
// Magic scary symbol ooOOooOOOO
const re = /(&#[1-9a-f]{6})|(&.)|(")|(\s+)/gm;
// we split the special stuff like colors and formatting away!
const parts = text.split(re);
console.log(parts)
// Where our divs shall live to make cool colors
const items = []
for (let i = 0; i < parts.length; i++) {
const part = parts[i];
// If god hates me on that particular day, this will be undefined
if (part === undefined) {
continue;
}
// Is it a color code?
if (part.startsWith("&")) {
console.log(`Found color code: ${part.substring(1)}`);
// Is it a minecraft color? (Not special &#xxxxxx format)
if (part.length === 2) {
// If it's a reset code, we reset the color
if (part[1] === "r") {
color = "";
let formattings = [];
continue;
}
// If it's a formatting code, we add it to the list
color = MINECRAFT_COLOR_CODE[part[1] as keyof typeof MINECRAFT_COLOR_CODE];
} else {
// If it's a special color code, we set the color to that
color = part.substring(1);
}
} else if (part.trim() === "" && part.length >= 1) {
// If it's a space, we add it to the list and add some padding to deal with spacing!
items.push(<div key={i} style={{
paddingLeft: "0.2em",
}}>{part}</div>);
} else if (part === "\"") {
// If it's a quotation mark, we toggle the end of quotation
// And add quotations, of course!
eoq = !eoq;
// formattings.push(parts[i + 1]);
items.push(<div key={i} style={{
color: color
}}>{part}</div>);
} else {
// Determine if we should use the emote color or the message color based on if we are in a quotation
const current_color = (color === "") ? (eoq ? defaultColor : defaultColorMessage) : color;
// Add the part to the list
items.push(<div key={i} style={{
color: current_color,
}}>{part.trim()}</div>);
}
}
// Return the divs
return <span className="flex flex-row overflow-y-scroll flex-wrap" style={{
gap: "0",
}}>
{items}
</span>
}That's all I have time for today! I will make a part two.. soon:tm:? Feel very free to contact me personally if you have questions or inquiries.
Potential FAQ
Q: Who's the cute crab?
A: That's Ferris the crab, Rust's mascot! If you are wondering, yes, he is under CC license!
Q: Are you open to redesigns?
A: Yes, yes please. If you have design ideas, throw them down. I'll let you know if it's possible and if it'd look good
Q: Is this going to be open-source?
A: Yes! I am planning to put this under GPL license
Q: Can we access it?
A: Soon..? I am trying to make sure there's no sensitive information right now, and I really don't want to be doxxed
Q: Are you open to merge/pull requests?
A: Absolutely! If you want to fix my terrible code and make this service better - I am an advocate for opensource!
Q: Are you actually clueless about frameworks/flexboxes/regex/etc.?
A: The silliness is played up in my post -- I have a fairly decent grasp on them! But if you would like to make posts to help explain it to readers, absolutely go for it!
Q: The approach for how parsing is done for text->div is terrible
A: Yes, it is! In the latest version that's matured, it's built on parsers to build a semi-AST with an optimizer to remove redundant coloring/formatting
Q: What framework and component library are you using?
A: Next.JS and MaterialUI!
Q: Can I suggest you to use X and Y framework, or X and Y styling libraries
A: :)
A: That's Ferris the crab, Rust's mascot! If you are wondering, yes, he is under CC license!
Q: Are you open to redesigns?
A: Yes, yes please. If you have design ideas, throw them down. I'll let you know if it's possible and if it'd look good
Q: Is this going to be open-source?
A: Yes! I am planning to put this under GPL license
Q: Can we access it?
A: Soon..? I am trying to make sure there's no sensitive information right now, and I really don't want to be doxxed
Q: Are you open to merge/pull requests?
A: Absolutely! If you want to fix my terrible code and make this service better - I am an advocate for opensource!
Q: Are you actually clueless about frameworks/flexboxes/regex/etc.?
A: The silliness is played up in my post -- I have a fairly decent grasp on them! But if you would like to make posts to help explain it to readers, absolutely go for it!
Q: The approach for how parsing is done for text->div is terrible
A: Yes, it is! In the latest version that's matured, it's built on parsers to build a semi-AST with an optimizer to remove redundant coloring/formatting
Q: What framework and component library are you using?
A: Next.JS and MaterialUI!
Q: Can I suggest you to use X and Y framework, or X and Y styling libraries
A: :)
Last edited:
