Adds a new activity log to the top next to player count and introduces a new Activity Log modal.
// ==UserScript==
// @name IdlePixel Activity Log Tweaks
// @namespace godofnades.idlepixel
// @version 0.7.18
// @description Adds a new activity log to the top next to player count and introduces a new Activity Log modal.
// @author GodofNades
// @match *://idle-pixel.com/login/play*
// @grant none
// @require https://greasyfork.org/scripts/441206-idlepixel/code/IdlePixel+.js?anticache=20220905
// @license MIT
// ==/UserScript==
(function () {
"use strict";
let player, storeName, activityLog;
const dbName = "ActivityLogDB";
function initDB() {
return new Promise((resolve, reject) => {
const request = indexedDB.open(dbName, 1);
request.onerror = (event) => reject(event.target.error);
request.onsuccess = (event) => resolve(event.target.result);
request.onupgradeneeded = (event) => {
const db = event.target.result;
db.createObjectStore(storeName, { keyPath: "id", autoIncrement: true });
};
});
}
async function saveNewData(newData) {
const db = await initDB();
const transaction = db.transaction([storeName], "readwrite");
const store = transaction.objectStore(storeName);
store.add({newData});
}
class UITweaksPlugin extends IdlePixelPlusPlugin {
constructor() {
super("actlogtweaks", {
about: {
name: `IdlePixel Activity Log Tweaks (ver: 0.7.18)`,
version: `0.7.18`,
author: `GodofNades`,
description: `Adds a new activity log to the top next to player count and introduces a new Activity Log modal.`,
},
/*config: [
{
label: "------------------------------",
type: "label"
},
{
label: "General Stuff",
type: "label"
},
{
label: "------------------------------",
type: "label"
},
{
id: "font",
label: "Primary Font",
type: "select",
options: FONTS,
default: FONT_DEFAULT
}
]*/
});
this.activeFilters = new Set([
"Achievement",
"Brewing",
"Combat",
"Cooking",
"Crafting",
"Criptoe",
"Economy",
"Farming",
"Fishing",
"Gems",
"Geodes",
"New Loot",
"SD Watch",
"Woodcutting",
"XP",
]);
}
initStyles() {
const css = `
div#al-table-div {
height: 100%;
width: 100%;
overflow-y: scroll;
max-height: 100%;
display: block;
margin:auto;
border: 1px solid #708090; /* Border around the outside of the table */
}
table#al-table-table {
border-collapse: collapse; /* Changed to collapse for combined borders */
width: 100%;
background-color: #000; /* Table background */
}
th.al-table-header {
border: 1px solid #708090; /* Border for th */
color: white;
text-align: center;
padding: 0.5em 1em;
background-color: black;
}
td.al-table-cell {
border: 1px solid #708090; /* Border for td */
color: white;
text-align: center;
padding: 0.5em 1em;
}
th.al-table-header:nth-child(2), td.al-table-cell:nth-child(2) {
border-left: 1px solid #708090;
border-right: 1px solid #708090;
}
#al-table-table tbody tr:nth-child(odd) {
background-color: #222;
}
#al-table-table tbody tr:nth-child(even) {
background-color: #333;
}
tr.al-table-header-row {
position: sticky;
top: 0;
z-index: 1;
}
p.activity-subheader {
-webkit-text-stroke: 1px #00f7ff;
font-size: 20pt;
font-weight: bold;
text-align: center;
//background-color: #000;
}
td.activity-cell {
text-align: left;
width: 50%;
}
#filter-container {
display: flex;
flex-direction: column;
align-items: center;
background-color: black;
padding: 1px;
border: 1px solid #708090;
color: white;
margin-top: 10px;
margin-bottom: 10px;
}
#filter-title {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
}
#filter-box {
display: grid;
grid-template-columns: 1fr 1px 1fr;
grid-gap: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
text-align: left;
width: 100%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #708090;
}
.filter-column {
display: flex;
flex-direction: column;
}
.filter-column label {
margin-bottom: 5px;
}
.vertical-line {
background-color: #708090;
width: 1px;
height: 100%;
}
.filter-label {
display: flex;
align-items: center; /* Aligns the checkbox and label text vertically */
margin-right: 5px;
}
.category-filter {
margin-right: 5px; /* Space between the checkbox and the label text */
}
.al-button {
padding: 10px 20px;
margin: 0 5px;
border: 1px solid #708090;
background-color: #333;
color: white;
cursor: pointer;
}
.al-button:hover {
background-color: #444;
}
`;
const styleSheet = document.createElement("style");
styleSheet.innerHTML = css;
document.head.appendChild(styleSheet);
}
createPanel() {
let alModalHTML = `
<div id="modal-style-al" style="display: none">
<div style="position: absolute; top: 0px; left: 0px; width: 98vw; height: 100vh;">
<div id="al-modal-base_window" style="position: absolute; top: 10vh; left: 25vw; width: 30vw; height: 85vh; text-align: center; border: 1px solid grey; background-color: rgb(0, 0, 0); border-radius: 20px; padding: 20px; z-index: 10000; display: flex; align-items: center; flex-direction: column;">
<div id="close-button-al" style="background-color: red; width: 30px; height: 30px; position: absolute; top: 10px; right: 10px; border-radius: 50%; cursor: pointer;">
<p style="color: white; font-size: 20px; font-weight: bold; text-align: center; line-height: 30px;">X</p>
</div>
<br/>
<p id="activity-subheader" class="activity-subheader">Your Recent Activity Log <span id="row-count">(0)</span></p>
<div id="al-table-div" class="al-table-div">
<table id="al-table-table">
<thead>
<tr class="al-table-header-row">
<th class="al-table-header" style="width: 25%">Time</th>
<th class="al-table-header" style="width: 25%">Category</th>
<th class="al-table-header" style="width: 50%">Activity</th>
</tr>
</thead>
<tbody>
<!-- Data rows will be inserted here -->
</tbody>
</table>
</div>
</div>
</br>
</div>
</div>
`;
const contentDiv = document.getElementById("content");
const modalContainer = document.createElement("div");
modalContainer.innerHTML = alModalHTML;
contentDiv.appendChild(modalContainer);
const onlineCount = document.querySelector(
".game-top-bar .gold:not(#game-top-bar-admin-link)"
);
const linkElement = document.createElement("a");
linkElement.href = "#";
linkElement.className = "hover float-end link-no-decoration";
linkElement.title = "Activity Log";
linkElement.textContent = "Activity" + "\u00A0\u00A0\u00A0";
onlineCount.insertAdjacentElement("beforebegin", linkElement);
const modalStyleAL = document.getElementById("modal-style-al");
const closeButton = document.getElementById("close-button-al");
linkElement.addEventListener("click", function (event) {
event.preventDefault();
modalStyleAL.style.display = "block";
});
closeButton.addEventListener("click", function () {
modalStyleAL.style.display = "none";
});
document.addEventListener("keydown", function (event) {
var chat_focused = $("#chat-area-input").is(":focus");
if (!chat_focused) {
// Use the key code for backtick, which is 192
/* if (event.keyCode === 192) {
if (modalStyleAL.style.display === 'block') {
// Close the modal
modalStyleAL.style.display = 'none';
} else {
// Open the modal
modalStyleAL.style.display = 'block';
}
} */
}
});
// Add an event listener to the modal
modalStyleAL.addEventListener("click", function (event) {
// Check if the click happened outside the modal window
const isClickInside = document
.getElementById("al-modal-base_window")
.contains(event.target);
if (!isClickInside) {
// If the click is outside, hide the modal
modalStyleAL.style.display = "none";
}
});
// Stop propagation of the click event from the modal window to the modal background
document
.getElementById("al-modal-base_window")
.addEventListener("click", function (event) {
event.stopPropagation();
});
const colorElements = [
{
id: "mainBoxColor",
label: "Primary Box (Background)",
default: "#000000",
},
{
id: "boxHeaderColor",
label: "Header (Text)",
default: "#00f7ff",
},
{
id: "filterTextClass",
label: "Checkbox Labels (Text)",
default: "#ffffff",
},
];
/*colorElements.forEach(colorElement => {
const colorPicker = this.createColorPicker(colorElement.id, colorElement.label, colorElement.default);
document.getElementById('al-modal-base_window').appendChild(colorPicker);
});*/
}
/*createColorPicker(id, label, defaultColor) {
const wrapper = document.createElement('div');
const pickerLabel = document.createElement('label');
pickerLabel.setAttribute('for', id);
pickerLabel.textContent = label;
const pickerInput = document.createElement('input');
pickerInput.type = 'color';
pickerInput.id = id;
// Load existing color settings or initialize if not present
const storedColors = localStorage.getItem('activitylog.colors');
const colors = storedColors ? JSON.parse(storedColors) : {};
pickerInput.value = colors[id] || defaultColor;
pickerInput.addEventListener('input', function(event) {
// Retrieve the latest colors object
const storedColors = localStorage.getItem('activitylog.colors');
const currentColors = storedColors ? JSON.parse(storedColors) : {};
// Update the current color in the colors object
currentColors[event.target.id] = event.target.value;
// Apply color changes immediately
IdlePixelPlus.plugins.actlogtweaks.applyLiveColorPreferences(event.target.id, event.target.value);
// Save the updated colors object to localStorage
localStorage.setItem('activitylog.colors', JSON.stringify(currentColors));
});
wrapper.appendChild(pickerLabel);
wrapper.appendChild(pickerInput);
return wrapper;
}
applyColorPreferences() {
// Load existing color settings or initialize if not present
const colors = JSON.parse(localStorage.getItem('activitylog.colors')) || {};
// Apply all color preferences based on the colors object
for (const id in colors) {
const color = colors[id];
// Determine which element the color should be applied to based on the id
switch (id) {
case 'mainBoxColor':
document.getElementById('al-modal-base_window').style.backgroundColor = color;
break;
case 'boxHeaderColor':
document.querySelectorAll('.activity-subheader').forEach(element => {
element.style.webkitTextStroke = `1px ${color}`;
});
break;
case 'filterTextClass':
document.querySelectorAll('.filter-label').forEach(element => {
element.style.color = color;
});
// Add cases for other color IDs as necessary
}
}
}
applyLiveColorPreferences(id, color) {
// Apply color preferences based on the passed id and color
switch (id) {
case 'mainBoxColor':
document.getElementById('al-modal-base_window').style.backgroundColor = color;
break;
case 'boxHeaderColor':
document.querySelectorAll('.activity-subheader').forEach(element => {
element.style.webkitTextStroke = `1px ${color}`;
});
break;
case 'filterTextClass':
document.querySelectorAll('.filter-label').forEach(element => {
element.style.color = color;
});
break;
// Add cases for other color IDs as necessary
}
}*/
initFilters() {
const filterContainer = document.createElement("div");
filterContainer.id = "filter-container";
const title = document.createElement("div");
title.id = "filter-title";
title.textContent = "Filters";
filterContainer.appendChild(title);
const filterBox = document.createElement("div");
filterBox.id = "filter-box";
filterBox.style.display = "grid";
filterBox.style.gridTemplateColumns = "repeat(3, 1fr)";
filterBox.style.gridGap = "10px";
filterBox.style.padding = "10px";
filterBox.style.alignItems = "start";
filterContainer.appendChild(filterBox);
// Original categories array without "Uncategorized"
let categories = [
"Achievement",
"Brewing",
"Combat",
"Cooking",
"Crafting",
"Criptoe",
"Economy",
"Farming",
"Fishing",
"Gems",
"Geodes",
"New Loot",
"SD Watch",
"Woodcutting",
"XP",
];
// Sort categories alphabetically
categories.sort();
// Add "Uncategorized" at the end
categories.push("Uncategorized");
// Calculate the number of categories per column
const perColumn = Math.ceil(categories.length / 3);
// Create three columns and distribute the sorted categories into them
for (let i = 0; i < 3; i++) {
const columnDiv = document.createElement("div");
columnDiv.className = "filter-column";
// Apply borders to the middle column
if (i === 1) {
columnDiv.style.borderLeft = "1px solid #708090";
columnDiv.style.borderRight = "1px solid #708090";
columnDiv.style.paddingLeft = "10px";
}
filterBox.appendChild(columnDiv);
// Slice the sorted categories array to get the categories for this column
const columnCategories = categories.slice(
i * perColumn,
(i + 1) * perColumn
);
columnCategories.forEach((category) => {
const label = document.createElement("label");
label.className = "filter-label";
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.className = "category-filter";
checkbox.checked = this.activeFilters.has(category);
checkbox.value = category;
const labelText = document.createTextNode(category);
label.appendChild(checkbox);
label.appendChild(labelText);
columnDiv.appendChild(label);
});
}
const activitySubheader = document.querySelector(".activity-subheader");
activitySubheader.parentNode.insertBefore(
filterContainer,
activitySubheader.nextSibling
);
// Add event listeners to checkboxes
document.querySelectorAll(".category-filter").forEach((checkbox) => {
checkbox.addEventListener("change", this.handleFilterChange.bind(this));
});
// Create buttons container
const buttonsContainer = document.createElement("div");
buttonsContainer.id = "buttons-container";
buttonsContainer.style.display = "flex";
buttonsContainer.style.justifyContent = "center";
buttonsContainer.style.gap = "30px";
buttonsContainer.style.marginTop = "10px"; // Adjust as needed for spacing
buttonsContainer.style.marginBottom = "10px"; // Adjust as needed for spacing
// Create the "All" button
const allButton = document.createElement("button");
allButton.textContent = "All";
allButton.className = "al-button";
allButton.onclick = () => {
this.setAllFilters(true);
};
// Create the "None" button
const noneButton = document.createElement("button");
noneButton.textContent = "None";
noneButton.className = "al-button";
noneButton.onclick = () => {
this.setAllFilters(false);
};
// Append buttons to the buttons container
buttonsContainer.appendChild(allButton);
buttonsContainer.appendChild(noneButton);
// Append buttons container after the filterContainer
filterContainer.after(buttonsContainer);
}
setAllFilters(check) {
// This will either check or uncheck all checkboxes based on the 'check' boolean
const checkboxes = document.querySelectorAll(".category-filter");
checkboxes.forEach((checkbox) => {
checkbox.checked = check;
// Update activeFilters set based on the 'check' boolean
if (check) {
this.activeFilters.add(checkbox.value);
} else {
this.activeFilters.delete(checkbox.value);
}
});
// After changing the checkboxes, apply the filters
this.applyFilters();
}
handleFilterChange(event) {
const category = event.target.value;
if (event.target.checked) {
this.activeFilters.add(category);
} else {
this.activeFilters.delete(category);
}
this.applyFilters();
}
applyFilters() {
const rows = document.querySelectorAll("#al-table-table tbody tr");
rows.forEach((row, index) => {
// Reset the display and remove any inline background-color style
row.style.display = "";
row.style.backgroundColor = ""; // Clear any inline style
// Get the category from the cell
const categoryCellText = row.cells[1].textContent;
if (
this.activeFilters.has(categoryCellText) ||
this.activeFilters.size === 0
) {
// Show the row
row.style.display = "";
} else {
// Hide the row
row.style.display = "none";
}
});
// Reapply the zebra striping
this.zebraStripeRows();
this.updateRowCount();
}
zebraStripeRows() {
const visibleRows = document.querySelectorAll(
'#al-table-table tbody tr:not([style*="display: none"])'
);
visibleRows.forEach((row, index) => {
if (index % 2 === 0) {
row.style.backgroundColor = "#333"; // Lighter for even rows
} else {
row.style.backgroundColor = "#222"; // Darker for odd rows
}
});
}
updateRowCount() {
const visibleRows = document.querySelectorAll(
'#al-table-table tbody tr:not([style*="display: none"])'
);
const rowCount = visibleRows.length;
const rowCountSpan = document.getElementById("row-count");
// Format the count with commas based on the user's locale
const formattedCount = rowCount.toLocaleString();
rowCountSpan.textContent = ` (${formattedCount})`;
}
onLogin() {
websocket.send(ActivityLogger.hide());
websocket.send((ActivityLogger.forceHide = true));
this.initStyles();
this.createPanel();
this.initFilters();
player = IdlePixelPlus.getVarOrDefault("username");
storeName = `${player}.activityLog`;
const oldData = this.fetchOldData(player);
const updatedData = this.updateData(oldData);
this.saveNewData(player, updatedData);
activityLog =
JSON.parse(localStorage.getItem(player + ".activityLog")) || [];
this.displayActivityLog();
//this.applyColorPreferences()
}
determineCategory(message) {
const categoryPatterns = {
Achievement: /^You completed the achievement/,
Brewing: /^(You brew|Not Consumed!)/,
Combat:
/^(You (defeated a|died to a)|Tsunami Triggered in Beach|FP REFUNDED|ENERGY REFUNDED)/,
Cooking: /^You (burnt|successfully cooked)/,
Crafting: /^You craft/,
Criptoe: /^Research Points gained:/,
Economy: /^You sell/,
Farming: /^((You|Your) (harvest|tool finds a seed)|Instantly grows)/,
Fishing:
/^(You just caught a|You caught a|Found 1 Super Bait using Rotten Potion)/,
Gathering: /^You found a unique gathering item/,
Gems: /^You find a/,
Geodes: /^You found a [a-z_]+ geode/,
"New Loot": /^You looted a new item/,
"SD Watch": /^SD Watch Charge Used/,
Woodcutting: /^You chop down/,
XP: /^(You gain a [a-z_]+ level|You unlocked a new skill|You gained)/,
};
for (const [category, pattern] of Object.entries(categoryPatterns)) {
if (pattern.test(message)) {
//console.log(message);
return category;
}
}
//console.log(message);
return "Uncategorized";
}
formatDate() {
const now = new Date();
return now.getTime(); // Returns the Unix timestamp
}
isUnixTimestamp(timestamp) {
const numericTimestamp = Number(timestamp);
return !isNaN(numericTimestamp) && numericTimestamp > 1000000000;
}
fetchOldData(player) {
const oldDataRaw = localStorage.getItem(player + ".activityLog");
return oldDataRaw ? JSON.parse(oldDataRaw) : [];
}
convertToUnix(originalDateString) {
const date = new Date(originalDateString);
return date.getTime();
}
updateData(data) {
return data.map((entry) => {
// Create a new object excluding the category field
const { category, ...entryWithoutCategory } = entry;
// Check and convert timestamp if necessary
if (!this.isUnixTimestamp(entry.timestamp)) {
const unixTimestamp = this.convertToUnix(entry.timestamp);
return { ...entryWithoutCategory, timestamp: unixTimestamp };
}
return entryWithoutCategory;
});
}
saveNewData(player, newData) {
localStorage.setItem(player + ".activityLog", JSON.stringify(newData));
}
convertUnixToReadable(unixTimestamp) {
const date = new Date(unixTimestamp);
const yearFormatter = new Intl.DateTimeFormat(undefined, {
year: "numeric",
});
const monthFormatter = new Intl.DateTimeFormat(undefined, {
month: "2-digit",
});
const dayFormatter = new Intl.DateTimeFormat(undefined, {
day: "2-digit",
});
const hourFormatter = new Intl.DateTimeFormat(undefined, {
hour: "2-digit",
hour12: false,
});
const minuteFormatter = new Intl.DateTimeFormat(undefined, {
minute: "2-digit",
});
const secondFormatter = new Intl.DateTimeFormat(undefined, {
second: "2-digit",
});
const year = yearFormatter.format(date);
const month = monthFormatter.format(date);
const day = dayFormatter.format(date);
let hour = hourFormatter.format(date);
let minute = minuteFormatter.format(date);
let second = secondFormatter.format(date);
hour = hour.padStart(2, "0");
minute = minute.padStart(2, "0");
second = second.padStart(2, "0");
const formattedDate = `${year}/${month}/${day} ${hour}:${minute}:${second}`;
return formattedDate;
}
buildActivityLog(time, category, message, color) {
const tr = document.createElement("tr");
const tdTimestamp = document.createElement("td");
tdTimestamp.className = "al-table-cell";
tdTimestamp.style.color = color;
tdTimestamp.textContent = this.convertUnixToReadable(time);
const tdCategory = document.createElement("td");
tdCategory.className = "al-table-cell";
tdCategory.style.color = color;
tdCategory.textContent = category;
const tdMessage = document.createElement("td");
tdMessage.className = "al-table-cell activity-cell";
tdMessage.style.color = color;
tdMessage.style.fontWeight = "bold";
tdMessage.textContent = message;
tr.appendChild(tdTimestamp);
tr.appendChild(tdCategory);
tr.appendChild(tdMessage);
const tableBody = document.querySelector("#al-table-table tbody");
// Insert the new row at the top of the table body
if (tableBody.firstChild) {
tableBody.insertBefore(tr, tableBody.firstChild);
} else {
tableBody.appendChild(tr);
}
// Construct the new log entry
activityLog.unshift({
timestamp: time,
message: message,
color: color,
});
// Trim the activityLog array to 1000 entries if necessary
if (activityLog.length > 250) {
activityLog.length = 250;
}
// Store the updated activityLog array in localStorage
localStorage.setItem(
player + ".activityLog",
JSON.stringify(activityLog)
);
// Update the table with the new log entry
//this.displayActivityLog();
const newLogEntry = {
timestamp: time,
category: category,
message: message,
color: color,
};
saveNewData(newLogEntry);
this.applyFilters();
}
displayActivityLog() {
// Retrieve the stored log
let activityLog =
JSON.parse(localStorage.getItem(player + ".activityLog")) || [];
// Get the table body where logs should be displayed
const tableBody = document.querySelector("#al-table-table tbody");
// Clear any existing rows in the table body
tableBody.innerHTML = "";
// Loop through each log entry and add it to the table
activityLog.forEach((logEntry) => {
let category = this.determineCategory(logEntry.message);
const tr = document.createElement("tr");
const tdTimestamp = document.createElement("td");
tdTimestamp.className = "al-table-cell";
tdTimestamp.style.color = logEntry.color;
tdTimestamp.textContent = this.convertUnixToReadable(
logEntry.timestamp
);
const tdCategory = document.createElement("td");
tdCategory.className = "al-table-cell";
tdCategory.style.color = logEntry.color;
tdCategory.textContent = category;
const tdMessage = document.createElement("td");
tdMessage.className = "al-table-cell activity-cell";
tdMessage.style.color = logEntry.color;
tdMessage.textContent = logEntry.message;
tr.appendChild(tdTimestamp);
tr.appendChild(tdCategory);
tr.appendChild(tdMessage);
// Add the new row to the table body
tableBody.appendChild(tr);
});
this.updateRowCount();
}
onVariableSet(key, valueBefore, valueAfter) {
if (
key === "researcher_points" &&
valueBefore &&
valueBefore != valueAfter
) {
let timestamp = this.formatDate();
this.buildActivityLog(
timestamp,
"Criptoe",
`Research Points gained: ${(
valueAfter - valueBefore
).toLocaleString()}`,
"green"
);
}
}
onMessageReceived(data) {
if (data.startsWith("ACTIVITY_LOG=")) {
data = data.replaceAll("ACTIVITY_LOG=", "");
let messageSplit = data.split("~");
let message = messageSplit[0];
let color = messageSplit[1];
const timestamp = this.formatDate();
let category = this.determineCategory(message);
this.buildActivityLog(timestamp, category, message, color);
}
if (data.startsWith("SCROLL_TOAST")) {
// SCROLL_TOAST=images/badge_10_percent_fp.png~yellow~FP REFUNDED
// SCROLL_TOAST=images/badge_10_percent_energy.png~red~ENERGY REFUNDED
let messageSplit = data.split("~");
let message = messageSplit[2];
if (message == "1") {
message = "Found 1 Super Bait using Rotten Potion";
}
if (message == "Completed!") {
message = "SD Watch Charge Used!";
}
let color = "white";
const timestamp = this.formatDate();
let category = this.determineCategory(message);
if (message != "UNSET CHAT TAG" && message != "UNSET SIGIL") {
this.buildActivityLog(timestamp, category, message, color);
}
}
//TSUNAMI_ANIMATE
if (data == "TSUNAMI_ANIMATE") {
let message = "Tsunami Triggered in Beach";
let color = "white";
const timestamp = this.formatDate();
let category = this.determineCategory(message);
this.buildActivityLog(timestamp, category, message, color);
}
}
}
const plugin = new UITweaksPlugin();
IdlePixelPlus.registerPlugin(plugin);
})();