Adds a To-Do list with settings, per-task schedule, drag & drop reordering, and import/export functionality.
// ==UserScript==
// @name TORN To-Do List
// @namespace https://github.com/sternenklinge/TORN-ToDo-List
// @author zuko [2620008]
// @license MIT
// @version 1.0
// @description Adds a To-Do list with settings, per-task schedule, drag & drop reordering, and import/export functionality.
// @match https://www.torn.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=torn.com
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
(function () {
'use strict';
let tasks = JSON.parse(GM_getValue("torn_todo_tasks", "[]"));
let settings = JSON.parse(GM_getValue("torn_todo_settings", '{"hidden": false}'));
let lastCheckedTime = GM_getValue("last_checked_time", "Never");
let draggedTaskIndex = null;
let currentModalTaskIndex = null; // stores the task index currently being edited
function formatTimestamp(timestamp) {
if (timestamp === "Never") return "Never";
const date = new Date(timestamp);
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
return `${hours}:${minutes}`;
}
function addToggleButton() {
if (document.getElementById("todo-toggle-button")) return;
const button = document.createElement("div");
button.id = "todo-toggle-button";
Object.assign(button.style, {
position: "fixed",
bottom: "40px",
right: "5px",
backgroundColor: "#2c2f33",
color: "#ffffff",
padding: "5px 10px",
borderRadius: "5px",
cursor: "pointer",
zIndex: "1000",
});
button.textContent = settings.hidden ? "Show To-Do List" : "Hide To-Do List";
button.onclick = toggleTodoListVisibility;
document.body.appendChild(button);
}
function toggleTodoListVisibility() {
settings.hidden = !settings.hidden;
GM_setValue("torn_todo_settings", JSON.stringify(settings));
const todoWindow = document.getElementById("todo-list-window");
if (todoWindow) todoWindow.style.display = settings.hidden ? "none" : "block";
// Always close other windows when toggling the todo list
const settingsPanel = document.getElementById("todo-settings-panel");
if (settingsPanel) { settingsPanel.style.display = "none"; }
const modal = document.getElementById("task-schedule-modal");
if (modal) { modal.remove(); }
updateToggleButton();
}
function updateToggleButton() {
const toggleButton = document.getElementById("todo-toggle-button");
if (toggleButton) toggleButton.textContent = settings.hidden ? "Show To-Do List" : "Hide To-Do List";
}
function createTodoListWindow() {
if (document.getElementById("todo-list-window")) return;
const windowDiv = document.createElement("div");
windowDiv.id = "todo-list-window";
Object.assign(windowDiv.style, {
position: "fixed",
bottom: "70px",
right: "5px",
width: "300px",
height: "400px",
backgroundColor: "#2c2f33",
color: "#ffffff",
border: "1px solid #444",
borderRadius: "8px",
boxShadow: "0 2px 5px rgba(0,0,0,0.5)",
display: settings.hidden ? "none" : "block",
zIndex: "1000",
});
windowDiv.innerHTML = `
<div style="display: flex; justify-content: space-between; align-items: center; background-color: #23272a; padding: 5px 10px; border-radius: 8px 8px 0 0; border-bottom: 1px solid #444;">
<span>To-Do List</span>
<div style="display: flex; gap: 5px;">
<button id="open-settings" style="background: none; border: none; color: white; cursor: pointer;">⚙️</button>
<button id="close-todo-window" style="background: none; border: none; color: white; cursor: pointer;">X</button>
</div>
</div>
<div id="todo-body" style="padding: 10px; overflow-y: auto; height: 300px;"></div>
<div style="padding: 10px; border-top: 1px solid #444; display: flex; gap: 5px;">
<input type="text" id="new-task" placeholder="New Task" style="flex: 1; padding: 5px; border: 1px solid #444; border-radius: 4px; background-color: #2c2f33; color: #ffffff;">
<button id="add-task" style="padding: 5px 10px; background-color: #7289da; color: white; border: none; border-radius: 4px; cursor: pointer;">Add</button>
</div>
`;
document.body.appendChild(windowDiv);
document.getElementById("add-task").onclick = addTask;
// Allow adding a task by pressing Enter in the input field
document.getElementById("new-task").addEventListener("keydown", function(e) {
if (e.key === "Enter") {
addTask();
}
});
document.getElementById("close-todo-window").onclick = closeTodoWindow;
document.getElementById("open-settings").onclick = openSettingsPanel;
renderTasks();
}
function closeTodoWindow() {
const todoWindow = document.getElementById("todo-list-window");
if (todoWindow) todoWindow.style.display = "none";
settings.hidden = true;
GM_setValue("torn_todo_settings", JSON.stringify(settings));
updateToggleButton();
// Also close any open settings panel or task schedule modal
const settingsPanel = document.getElementById("todo-settings-panel");
if (settingsPanel) { settingsPanel.style.display = "none"; }
const modal = document.getElementById("task-schedule-modal");
if (modal) { modal.remove(); }
}
function renderTasks() {
const taskContainer = document.getElementById("todo-body");
if (!taskContainer) return;
taskContainer.innerHTML = "";
tasks.forEach((task, index) => {
const taskDiv = document.createElement("div");
taskDiv.style.display = "flex";
taskDiv.style.justifyContent = "space-between";
taskDiv.style.marginBottom = "5px";
taskDiv.setAttribute("draggable", "true");
taskDiv.setAttribute("data-index", index);
taskDiv.addEventListener("dragstart", function(e) {
draggedTaskIndex = index;
e.dataTransfer.effectAllowed = "move";
});
taskDiv.addEventListener("dragover", function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
});
taskDiv.addEventListener("drop", function(e) {
e.preventDefault();
const targetIndex = parseInt(taskDiv.getAttribute("data-index"));
if (draggedTaskIndex === null || draggedTaskIndex === targetIndex) return;
const draggedTask = tasks.splice(draggedTaskIndex, 1)[0];
tasks.splice(targetIndex, 0, draggedTask);
GM_setValue("torn_todo_tasks", JSON.stringify(tasks));
renderTasks();
});
const label = document.createElement("label");
label.style.flex = "1";
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = task.done;
checkbox.setAttribute("data-index", index);
checkbox.style.marginRight = "5px";
checkbox.onchange = toggleTask;
const span = document.createElement("span");
span.textContent = task.text;
// Increase clickable area for right-click by adding padding and making the span a block-level element
span.style.display = "inline-block";
span.style.padding = "5px";
if (task.done) {
span.style.textDecoration = "line-through";
span.style.color = "gray";
}
// Right-click on task text opens the edit modal
span.addEventListener("contextmenu", function(e) {
e.preventDefault();
openTaskScheduleEditor(index);
});
label.appendChild(checkbox);
label.appendChild(span);
const removeBtn = document.createElement("button");
removeBtn.textContent = "X";
removeBtn.style.background = "none";
removeBtn.style.border = "none";
removeBtn.style.color = "#f04747";
removeBtn.style.cursor = "pointer";
removeBtn.setAttribute("data-index", index);
removeBtn.onclick = removeTask;
taskDiv.appendChild(label);
taskDiv.appendChild(removeBtn);
taskContainer.appendChild(taskDiv);
});
}
function addTask() {
const input = document.getElementById("new-task");
if (!input || !input.value.trim()) return;
tasks.push({ text: input.value.trim(), done: false });
GM_setValue("torn_todo_tasks", JSON.stringify(tasks));
input.value = "";
renderTasks();
}
function removeTask(event) {
const index = event.target.dataset.index;
tasks.splice(index, 1);
GM_setValue("torn_todo_tasks", JSON.stringify(tasks));
renderTasks();
}
function toggleTask(event) {
const index = event.target.dataset.index;
tasks[index].done = event.target.checked;
GM_setValue("torn_todo_tasks", JSON.stringify(tasks));
renderTasks();
}
function openSettingsPanel() {
let existingPanel = document.getElementById("todo-settings-panel");
if (existingPanel) {
existingPanel.style.display = "block"; // Open settings if it exists
updateLastCheckedInfo();
return;
}
const settingsPanel = document.createElement("div");
settingsPanel.id = "todo-settings-panel";
Object.assign(settingsPanel.style, {
position: "fixed",
bottom: "70px",
right: "310px",
width: "300px",
height: "400px",
backgroundColor: "#2c2f33",
color: "#ffffff",
border: "1px solid #444",
borderRadius: "8px",
boxShadow: "0 2px 5px rgba(0,0,0,0.5)",
zIndex: "1000",
display: "flex",
flexDirection: "column"
});
settingsPanel.innerHTML = `
<div style="flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; background-color: #23272a; padding: 5px 10px; border-radius: 8px 8px 0 0; border-bottom: 1px solid #444;">
<span>Settings</span>
<button id="close-settings" style="background: none; border: none; color: white; cursor: pointer;">X</button>
</div>
<div id="settings-body" style="flex: 1 1 auto; overflow-y: auto; padding: 10px;">
<div id="last-checked-info" style="margin-bottom: 15px;">
<p style="margin: 0; font-size: 0.9em;">Last Check: <span id="last-checked-time">${formatTimestamp(lastCheckedTime)}</span></p>
</div>
<div style="margin-bottom: 15px;">
<p style="font-weight: bold; margin-bottom: 5px;">Import/Export Data</p>
<textarea id="import-export-text" style="width: 280px; height: 80px; resize: none; background-color: #2c2f33; color: #ffffff; border: 1px solid #444; border-radius: 4px;"></textarea>
<div style="display: flex; gap: 5px; margin-top: 5px;">
<button id="export-data" style="padding: 5px 10px; background-color: #7289da; color: white; border: none; border-radius: 4px; cursor: pointer;">Export</button>
<button id="copy-data" style="padding: 5px 10px; background-color: #7289da; color: white; border: none; border-radius: 4px; cursor: pointer;">Copy</button>
<button id="import-data" style="padding: 5px 10px; background-color: #7289da; color: white; border: none; border-radius: 4px; cursor: pointer;">Import</button>
</div>
</div>
</div>
<div style="flex: 0 0 auto; padding: 10px; border-top: 1px solid #444; display: flex; justify-content: flex-end;">
<button id="save-settings" style="padding: 5px 10px; background-color: #7289da; color: white; border: none; border-radius: 4px; cursor: pointer;">Save</button>
</div>
`;
document.body.appendChild(settingsPanel);
document.getElementById("close-settings").onclick = () => settingsPanel.style.display = "none";
document.getElementById("save-settings").onclick = saveSettings;
document.getElementById("export-data").onclick = exportData;
document.getElementById("copy-data").onclick = copyData;
document.getElementById("import-data").onclick = importData;
}
function saveSettings() {
GM_setValue("torn_todo_settings", JSON.stringify(settings));
const settingsPanel = document.getElementById("todo-settings-panel");
if (settingsPanel) settingsPanel.style.display = "none";
}
function updateLastCheckedInfo() {
const lastCheckedElement = document.getElementById("last-checked-time");
if (lastCheckedElement) lastCheckedElement.textContent = formatTimestamp(lastCheckedTime);
}
function exportData() {
const data = {
tasks: tasks,
settings: settings,
lastCheckedTime: lastCheckedTime,
};
document.getElementById("import-export-text").value = JSON.stringify(data, null, 2);
}
function copyData() {
const text = document.getElementById("import-export-text").value;
navigator.clipboard.writeText(text);
}
function importData() {
try {
const data = JSON.parse(document.getElementById("import-export-text").value);
if (data.tasks) tasks = data.tasks;
if (data.settings) settings = data.settings;
if (data.lastCheckedTime) lastCheckedTime = data.lastCheckedTime;
GM_setValue("torn_todo_tasks", JSON.stringify(tasks));
GM_setValue("torn_todo_settings", JSON.stringify(settings));
GM_setValue("last_checked_time", lastCheckedTime);
renderTasks();
updateLastCheckedInfo();
alert("Data imported successfully.");
} catch (e) {
alert("Import failed: Invalid JSON.");
}
}
// --- Modal for editing task details (text and schedule) ---
function updateModalSchedule(modal, taskIndex) {
const timeInput = modal.querySelector('input[type="time"]');
const daysContainer = modal.querySelector('#schedule-days-container');
const dayButtons = daysContainer.querySelectorAll('button');
const newDayStates = {};
dayButtons.forEach(btn => {
newDayStates[btn.dataset.day] = (btn.dataset.active === "true");
});
tasks[taskIndex].schedule = {
time: timeInput.value,
days: newDayStates
};
GM_setValue("torn_todo_tasks", JSON.stringify(tasks));
}
function openTaskScheduleEditor(index) {
// If a modal is already open, auto-save its changes and remove it
const existingModal = document.getElementById("task-schedule-modal");
if (existingModal && currentModalTaskIndex !== null) {
updateModalSchedule(existingModal, currentModalTaskIndex);
existingModal.remove();
currentModalTaskIndex = null;
}
currentModalTaskIndex = index;
const task = tasks[index];
const modal = document.createElement("div");
modal.id = "task-schedule-modal";
Object.assign(modal.style, {
position: "fixed",
bottom: "480px",
right: "5px",
width: "260px",
backgroundColor: "#2c2f33",
color: "#ffffff",
border: "1px solid #444",
borderRadius: "8px",
padding: "20px",
zIndex: "2000"
});
// Editable task content with larger input and an edit icon
const taskContainer = document.createElement("div");
taskContainer.style.display = "flex";
taskContainer.style.alignItems = "center";
taskContainer.style.marginBottom = "10px";
const taskInput = document.createElement("input");
taskInput.type = "text";
taskInput.value = task.text;
Object.assign(taskInput.style, {
fontSize: "16px",
width: "100%",
backgroundColor: "#2c2f33",
border: "1px solid #444",
color: "#ffffff",
borderRadius: "4px",
padding: "5px"
});
taskInput.onchange = function () {
task.text = taskInput.value;
GM_setValue("torn_todo_tasks", JSON.stringify(tasks));
renderTasks();
};
const editIcon = document.createElement("button");
editIcon.innerHTML = "✎"; // pencil icon
Object.assign(editIcon.style, {
background: "none",
border: "none",
color: "#7289da",
cursor: "pointer",
fontSize: "18px",
marginLeft: "5px"
});
editIcon.onclick = function () {
taskInput.focus();
};
taskContainer.appendChild(taskInput);
taskContainer.appendChild(editIcon);
modal.appendChild(taskContainer);
// Schedule settings
const timeLabel = document.createElement("label");
timeLabel.textContent = "Time (TCT):";
modal.appendChild(timeLabel);
const timeInput = document.createElement("input");
timeInput.type = "time";
timeInput.value = task.schedule && task.schedule.time ? task.schedule.time : "00:00";
timeInput.style.marginLeft = "10px";
Object.assign(timeInput.style, {
backgroundColor: "#2c2f33",
border: "1px solid #444",
color: "#ffffff",
borderRadius: "4px",
padding: "5px"
});
timeInput.onchange = function () {
updateModalSchedule(modal, currentModalTaskIndex);
};
modal.appendChild(timeInput);
modal.appendChild(document.createElement("br"));
modal.appendChild(document.createElement("br"));
const daysContainer = document.createElement("div");
daysContainer.id = "schedule-days-container";
const dayKeys = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
const dayLabels = ["M", "T", "W", "T", "F", "S", "S"];
dayKeys.forEach((day, i) => {
const btn = document.createElement("button");
btn.textContent = dayLabels[i];
btn.style.marginRight = "5px";
btn.style.width = "30px";
const active = task.schedule && task.schedule.days && task.schedule.days[day] ? true : false;
btn.style.backgroundColor = active ? "#7289da" : "#444";
btn.style.color = "#fff";
btn.style.border = "none";
btn.style.borderRadius = "4px";
btn.style.cursor = "pointer";
btn.dataset.day = day;
btn.dataset.active = active ? "true" : "false";
btn.onclick = function () {
const current = btn.dataset.active === "true";
btn.dataset.active = (!current).toString();
btn.style.backgroundColor = (!current) ? "#7289da" : "#444";
updateModalSchedule(modal, currentModalTaskIndex);
};
daysContainer.appendChild(btn);
});
modal.appendChild(daysContainer);
modal.appendChild(document.createElement("br"));
modal.appendChild(document.createElement("br"));
const btnContainer = document.createElement("div");
btnContainer.style.textAlign = "right";
const removeBtn = document.createElement("button");
removeBtn.textContent = "Remove Schedule";
removeBtn.style.marginRight = "5px";
removeBtn.style.padding = "5px 10px";
removeBtn.style.backgroundColor = "#f04747";
removeBtn.style.border = "none";
removeBtn.style.borderRadius = "4px";
removeBtn.style.cursor = "pointer";
removeBtn.onclick = function () {
delete tasks[currentModalTaskIndex].schedule;
GM_setValue("torn_todo_tasks", JSON.stringify(tasks));
modal.remove();
currentModalTaskIndex = null;
};
btnContainer.appendChild(removeBtn);
const closeBtn = document.createElement("button");
closeBtn.textContent = "Close";
closeBtn.style.padding = "5px 10px";
closeBtn.style.backgroundColor = "#7289da";
closeBtn.style.border = "none";
closeBtn.style.borderRadius = "4px";
closeBtn.style.cursor = "pointer";
closeBtn.onclick = function () {
updateModalSchedule(modal, currentModalTaskIndex);
modal.remove();
currentModalTaskIndex = null;
};
btnContainer.appendChild(closeBtn);
modal.appendChild(btnContainer);
document.body.appendChild(modal);
}
function checkResetTime() {
const now = new Date();
const currentTime = `${now.getUTCHours().toString().padStart(2, "0")}:${now.getUTCMinutes().toString().padStart(2, "0")}`;
const dayMapping = {0: "sun", 1: "mon", 2: "tue", 3: "wed", 4: "thu", 5: "fri", 6: "sat"};
const currentDayKey = dayMapping[now.getUTCDay()];
lastCheckedTime = now.toISOString();
GM_setValue("last_checked_time", lastCheckedTime);
tasks.forEach(task => {
if (task.schedule && task.done) {
if (currentTime === task.schedule.time && task.schedule.days && task.schedule.days[currentDayKey]) {
task.done = false;
}
}
});
GM_setValue("torn_todo_tasks", JSON.stringify(tasks));
renderTasks();
updateLastCheckedInfo();
}
addToggleButton();
createTodoListWindow();
checkResetTime();
setInterval(checkResetTime, 60000);
})();