Skip to content

Instantly share code, notes, and snippets.

@homedirectory

homedirectory/index.html

Last active March 23, 2024 11:15
Show Gist options
  • Save homedirectory/89c42185f1451f465b5325dfd903c32d to your computer and use it in GitHub Desktop.
Save homedirectory/89c42185f1451f465b5325dfd903c32d to your computer and use it in GitHub Desktop.
Download ZIP
IRC parsing visualisation generated by ChatGPT
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IRC Message Parser</title>
<style>
body {
font-family: Arial, sans-serif;
}
#message {
width: 300px;
padding: 10px;
}
#parseButton {
margin-top: 10px;
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#parsedMessage {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.component {
display: inline-block;
padding: 5px;
border-radius: 5px;
margin-right: 5px;
cursor: pointer;
}
.prefix {
background-color: lightblue;
}
.command {
background-color: lightgreen;
}
.target {
background-color: lightgrey;
}
.parameters {
background-color: lightgrey;
}
.component:hover::after {
content: attr(data-type);
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px;
border-radius: 5px;
font-size: 12px;
margin-top: -20px;
}
</style>
</head>
<body>
<div id="message">
<label for="ircMessage">Enter IRC Message:</label><br>
<textarea id="ircMessage" rows="4" cols="50"></textarea><br>
<button id="parseButton">Parse</button>
</div>
<div id="parsedMessage"></div>
<script>
document.getElementById("parseButton").addEventListener("click", function() {
var ircMessage = document.getElementById("ircMessage").value.trim();
var parsedMessage = parseIRCMessage(ircMessage);
displayParsedMessage(parsedMessage);
});
function parseIRCMessage(message) {
var parsed = {};
var prefixEndIndex = message.indexOf(" ");
if (prefixEndIndex !== -1 && message.startsWith(":")) {
parsed.prefix = message.substring(1, prefixEndIndex);
message = message.substring(prefixEndIndex + 1);
}
var paramsStartIndex = message.indexOf(" :");
if (paramsStartIndex !== -1) {
parsed.parameters = message.substring(paramsStartIndex + 2).trim();
message = message.substring(0, paramsStartIndex);
}
var parts = message.split(" ");
parsed.command = parts.shift();
if (parts.length > 0) {
parsed.target = parts.shift();
}
return parsed;
}
function displayParsedMessage(parsedMessage) {
var parsedDiv = document.getElementById("parsedMessage");
parsedDiv.innerHTML = ""; // Clear previous content
if (parsedMessage.prefix) {
var prefixSpan = document.createElement("span");
prefixSpan.className = "component prefix";
prefixSpan.setAttribute("data-type", "Prefix");
prefixSpan.textContent = parsedMessage.prefix;
parsedDiv.appendChild(prefixSpan);
}
if (parsedMessage.command) {
var commandSpan = document.createElement("span");
commandSpan.className = "component command";
commandSpan.setAttribute("data-type", "Command");
commandSpan.textContent = parsedMessage.command;
parsedDiv.appendChild(commandSpan);
}
if (parsedMessage.target) {
var targetSpan = document.createElement("span");
targetSpan.className = "component target";
targetSpan.setAttribute("data-type", "Target");
targetSpan.textContent = parsedMessage.target;
parsedDiv.appendChild(targetSpan);
}
if (parsedMessage.parameters) {
var paramsSpan = document.createElement("span");
paramsSpan.className = "component parameters";
paramsSpan.setAttribute("data-type", "Parameters");
paramsSpan.textContent = parsedMessage.parameters;
parsedDiv.appendChild(paramsSpan);
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment