Adds a modern skills panel, custom themes, virtual levels, and a portrait mode layout.
Pada tanggal
// ==UserScript==
// @name FlatMMO UI Tweaks
// @namespace com.pizza1337.flatmmo.uitweaks
// @version 1.1.7
// @description Adds a modern skills panel, custom themes, virtual levels, and a portrait mode layout.
// @author Pizza1337
// @match *://flatmmo.com/play.php*
// @grant none
// @require https://update.greasyfork.org/scripts/544062/FlatMMOPlus.js
// @license MIT
// ==/UserScript==
(function() {
'use strict';
class UITweaksPlugin extends FlatMMOPlusPlugin {
constructor() {
super("ui-tweaks", {
about: {
name: GM_info.script.name,
version: GM_info.script.version,
author: GM_info.script.author,
description: GM_info.script.description
},
config: [
{
id: "showSkillsPanel",
label: "Modern Skills Panel",
type: "boolean",
default: true
},
{
id: "showVirtualLevels",
label: "Show Virtual Levels (100+)",
type: "boolean",
default: false
},
{
id: "portraitMode",
label: "Portrait Mode (F5 Required)",
type: "boolean",
default: false
},
{
id: "theme",
label: "UI Theme",
type: "select",
options: [
{ value: "default", label: "Default" },
{ value: "dark", label: "Dark Mode" },
{ value: "pumpkin", label: "Pumpkin Spice" },
{ value: "sea", label: "Deep Sea" },
{ value: "mystic", label: "Mystic Vale" },
{ value: "omboko", label: "Omboko" }
],
default: "default"
}
]
});
this.skillUI = { elements: {}, total: {} };
this.isGridCreated = false;
this.initialized = false;
// Hardcoded XP table for levels 1-200
this.xpTable = {
1: 0, 2: 108, 3: 177, 4: 265, 5: 380, 6: 527, 7: 717, 8: 956, 9: 1254, 10: 1622,
11: 2068, 12: 2605, 13: 3245, 14: 4000, 15: 4885, 16: 5913, 17: 7100, 18: 8464, 19: 10022, 20: 11794,
21: 13799, 22: 16060, 23: 18599, 24: 21442, 25: 24614, 26: 28145, 27: 32063, 28: 36400, 29: 41191, 30: 46470,
31: 52277, 32: 58652, 33: 65637, 34: 73279, 35: 81625, 36: 90728, 37: 100642, 38: 111424, 39: 123135, 40: 135841,
41: 149611, 42: 164516, 43: 180634, 44: 198047, 45: 216840, 46: 237105, 47: 258938, 48: 282440, 49: 307721, 50: 334893,
51: 364077, 52: 395399, 53: 428994, 54: 465003, 55: 503577, 56: 544871, 57: 589054, 58: 636300, 59: 686794, 60: 740732,
61: 798320, 62: 859775, 63: 925326, 64: 995213, 65: 1069691, 66: 1149027, 67: 1233503, 68: 1323417, 69: 1419081, 70: 1520824,
71: 1628993, 72: 1743952, 73: 1866086, 74: 1995798, 75: 2133515, 76: 2279683, 77: 2434772, 78: 2599278, 79: 2773721, 80: 2958649,
81: 3154637, 82: 3362289, 83: 3582243, 84: 3815166, 85: 4061762, 86: 4322767, 87: 4598959, 88: 4891153, 89: 5200203, 90: 5527011,
91: 5872521, 92: 6237725, 93: 6623665, 94: 7031436, 95: 7462185, 96: 7917120, 97: 8397507, 98: 8904674, 99: 9440017, 100: 10004999,
// Virtual levels 101-200
101: 10601158, 102: 11230106, 103: 11893534, 104: 12593217, 105: 13331018,
106: 14108890, 107: 14928883, 108: 15793144, 109: 16703929, 110: 17663602,
111: 18674641, 112: 19739647, 113: 20861344, 114: 22042590, 115: 23286382,
116: 24595860, 117: 25974317, 118: 27425202, 119: 28952134, 120: 30558903,
121: 32249481, 122: 34028033, 123: 35898920, 124: 37866713, 125: 39936202,
126: 42112405, 127: 44400579, 128: 46806231, 129: 49335129, 130: 51993317,
131: 54787124, 132: 57723179, 133: 60808425, 134: 64050133, 135: 67455918,
136: 71033752, 137: 74791986, 138: 78739361, 139: 82885031, 140: 87238578,
141: 91810037, 142: 96609909, 143: 101649191, 144: 106939392, 145: 112492559,
146: 118321304, 147: 124438823, 148: 130858933, 149: 137596089, 150: 144665421,
151: 152082764, 152: 159864685, 153: 168028523, 154: 176592418, 155: 185575354,
156: 194997190, 157: 204878707, 158: 215241643, 159: 226108743, 160: 237503800,
161: 249451703, 162: 261978489, 163: 275111393, 164: 288878903, 165: 303310817,
166: 318438300, 167: 334293948, 168: 350911852, 169: 368327667, 170: 386578678,
171: 405703877, 172: 425744040, 173: 446741808, 174: 468741765, 175: 491790534,
176: 515936862, 177: 541231719, 178: 567728396, 179: 595482609, 180: 624552610,
181: 654999299, 182: 686886341, 183: 720280294, 184: 755250734, 185: 791870395,
186: 830215305, 187: 870364937, 188: 912402361, 189: 956414404, 190: 1002491823,
191: 1050729473, 192: 1101226494, 193: 1154086502, 194: 1209417785, 195: 1267333518,
196: 1327951974, 197: 1391396753, 198: 1457797021, 199: 1527287754, 200: 1600009999
};
this.injectStyles();
}
onLogin() {
if (this.initialized) return;
this.initialized = true;
this.applyTheme(this.getConfig('theme'));
if (this.getConfig('portraitMode')) {
const layoutObserver = new MutationObserver((mutations, observer) => {
if (document.querySelector('#game table canvas')) {
this.moveUiBelowCanvas();
observer.disconnect();
}
});
layoutObserver.observe(document.body, { childList: true, subtree: true });
}
}
onPanelChanged(panelBefore, panelAfter) {
if (panelAfter === 'skills') {
this.createSkillsGrid();
}
}
onConfigsChanged() {
this.applyTheme(this.getConfig('theme'));
if (this.getConfig('showSkillsPanel')) {
if (document.querySelector("#ui-panel-skills")?.style.display !== "none") {
this.createSkillsGrid();
}
} else {
this.destroySkillsGrid();
}
// Update skills display when virtual levels setting changes
if (this.isGridCreated) {
Object.keys(this.skillUI.elements).forEach(skillName => this.updateSkillCell(skillName));
}
}
injectStyles() {
const styles = `
/* --- General UI Fixes --- */
.settings-ui td:first-child {
padding-left: 10px;
}
.tm-settings-row td {
padding-top: 5px;
padding-bottom: 5px;
}
/* --- Shared Theme Variables --- */
:root {
--fmp-ui-button-bg: ButtonFace;
--fmp-ui-button-bg-hover: ButtonFace;
--fmp-ui-button-text: ButtonText;
--fmp-ui-button-border: grey;
--fmp-ui-button-disabled-bg: ButtonFace;
--fmp-ui-button-disabled-text: GrayText;
--fmp-ui-button-disabled-border: grey;
--fmp-ui-element-active-bg: Highlight;
--fmp-ui-input-bg: Field;
}
body.theme-dark {
--fmp-ui-button-bg: #4a4e53;
--fmp-ui-button-bg-hover: #5a5e63;
--fmp-ui-button-text: #f1f1f1;
--fmp-ui-button-border: #6a6e73;
--fmp-ui-button-disabled-bg: #2a2e33;
--fmp-ui-button-disabled-text: #6a6e73;
--fmp-ui-button-disabled-border: #4a4e53;
--fmp-ui-element-active-bg: #4a4e53;
--fmp-ui-input-bg: #23272a;
}
body.theme-pumpkin {
--fmp-ui-button-bg: #4a3c35;
--fmp-ui-button-bg-hover: #5a4c45;
--fmp-ui-button-text: #f5e4d9;
--fmp-ui-button-border: #6a5c55;
--fmp-ui-button-disabled-bg: #2a2421;
--fmp-ui-button-disabled-text: #6a5c55;
--fmp-ui-button-disabled-border: #4a3421;
--fmp-ui-element-active-bg: #4a3c35;
--fmp-ui-input-bg: #2a2421;
}
body.theme-sea {
--fmp-ui-button-bg: #133a5f;
--fmp-ui-button-bg-hover: #234a6f;
--fmp-ui-button-text: #e1f5fe;
--fmp-ui-button-border: #235a7f;
--fmp-ui-button-disabled-bg: #0d253f;
--fmp-ui-button-disabled-text: #235a7f;
--fmp-ui-button-disabled-border: #133a5f;
--fmp-ui-element-active-bg: #133a5f;
--fmp-ui-input-bg: #071726;
}
body.theme-mystic {
--fmp-ui-button-bg: #7A7EA1;
--fmp-ui-button-bg-hover: #868AAD;
--fmp-ui-button-text: #f0f0f0;
--fmp-ui-button-border: #9598B9;
--fmp-ui-button-disabled-bg: #6A6E94;
--fmp-ui-button-disabled-text: #9598B9;
--fmp-ui-button-disabled-border: #5f6284;
--fmp-ui-element-active-bg: #7A7EA1;
--fmp-ui-input-bg: #5f6284;
}
body.theme-omboko {
--fmp-ui-button-bg: #3D5426;
--fmp-ui-button-bg-hover: #4B682E;
--fmp-ui-button-text: #d1dcc6;
--fmp-ui-button-border: #4B682E;
--fmp-ui-button-disabled-bg: #1D2319;
--fmp-ui-button-disabled-text: #4B682E;
--fmp-ui-button-disabled-border: #25311B;
--fmp-ui-element-active-bg: #3D5426;
--fmp-ui-input-bg: #11150f;
}
/* --- Virtual Level Display --- */
.virtual-level-display {
color: #9eb883;
margin-left: 4px;
}
body.theme-dark .virtual-level-display { color: #6fbf73; }
body.theme-pumpkin .virtual-level-display { color: #f39c12; }
body.theme-sea .virtual-level-display { color: #01b4e4; }
body.theme-mystic .virtual-level-display { color: #b2fab4; }
body.theme-omboko .virtual-level-display { color: #7a9560; }
/* --- Shared readability rules for dark themes --- */
body.theme-dark a, body.theme-pumpkin a, body.theme-sea a, body.theme-omboko a, body.theme-mystic a { color: #8ab4f8 !important; }
body.theme-dark a:hover, body.theme-pumpkin a:hover, body.theme-sea a:hover, body.theme-omboko a:hover, body.theme-mystic a:hover { color: #c3dafa !important; }
/* --- Dark Mode Theme --- */
body.theme-dark .ui-panel, body.theme-dark .modal-content,
body.theme-dark .ach-sub-menu-btn-td, body.theme-dark .donor-shop-entry, body.theme-dark .ui-donor-chat-tags-info,
body.theme-dark .npc-chat-options-modal-title, body.theme-dark .npc-chat-options-modal-options div {
background-color: #2c2f33; color: #f1f1f1; box-shadow: 1px 1px 5px #121212;
}
body.theme-dark table.settings-ui tr:nth-child(odd), body.theme-dark .quests-ui tr:nth-child(odd),
body.theme-dark .monster-log-ui-table tr:nth-child(odd) { background-color: #3c4045; }
body.theme-dark table.settings-ui tr:nth-child(even), body.theme-dark .quests-ui tr:nth-child(even),
body.theme-dark .monster-log-ui-table tr:nth-child(even) { background-color: #32353b; }
body.theme-dark .achievements-ui tr { background-color: #323b33; border-color: #455a46; }
body.theme-dark .total-level-div { background-color: #23272a !important; }
body.theme-dark .hint, body.theme-dark .color-grey, body.theme-dark .modal-content h3[style*="color: grey"] { color: #b0b0b0 !important; }
body.theme-dark .right-click-item-modal-table { background-color: #32353b; }
body.theme-dark .right-click-item-modal-table span[style*="color:grey"] { color: #b0b0b0 !important; }
body.theme-dark .equipement-stats-ui-table, body.theme-dark .right-click-item-modal-table-stats,
body.theme-dark .monster-log-modal-drops, body.theme-dark .npc-chat-message-modal-message,
body.theme-dark .player-sell-booth-entry td, body.theme-dark .player-lookup-modal-quests,
body.theme-dark .player-lookup-modal-achievements { background-color: rgba(0, 0, 0, 0.2); }
body.theme-dark div[style*="color:green"], body.theme-dark .color-green { color: #6fbf73 !important; }
body.theme-dark .color-red { color: #ff8a80 !important; }
body.theme-dark .ach-sub-menu-btn-td:hover,
body.theme-dark .ach-sub-menu-btn-td.active,
body.theme-dark .npc-chat-options-modal-options div:hover,
body.theme-dark .npc-chat-options-modal-options div.active { background-color: var(--fmp-ui-element-active-bg); }
body.theme-dark .hover-continue-npc-chat-message-modal:hover { color: #ff8a80 !important; }
body.theme-dark button { background-color: var(--fmp-ui-button-bg); color: var(--fmp-ui-button-text); border: 1px solid var(--fmp-ui-button-border); }
body.theme-dark button:hover { background-color: var(--fmp-ui-button-bg-hover); }
body.theme-dark button:disabled { background-color: var(--fmp-ui-button-disabled-bg); color: var(--fmp-ui-button-disabled-text); border-color: var(--fmp-ui-button-disabled-border); }
body.theme-dark input[type="text"],
body.theme-dark input[type="number"],
body.theme-dark input[type="password"],
body.theme-dark input[type="email"],
body.theme-dark input[type="search"],
body.theme-dark textarea { background-color: var(--fmp-ui-input-bg); color: var(--fmp-ui-button-text); border-color: var(--fmp-ui-button-border); }
body.theme-dark .player-lookup-modal-table-skills td { background-color: #3c4045 !important; }
body.theme-dark .player-lookup-modal-quest-entry { background-color: #32353b; }
body.theme-dark .hunter-shop-modal-table th { background-color: #23272a; }
body.theme-dark .hunter-shop-modal-table, body.theme-dark .hunter-shop-modal-table tr { background-color: #3c4045 !important; }
body.theme-dark .trade-offer-section { background-color: #23272a; }
body.theme-dark .trade-accepted-msg { background-color: #2e4b30; border-color: #6fbf73; }
body.theme-dark #trade-inventory-items div.item[style*="background-color"] { background-color: #23272a !important; }
body.theme-dark .worship-timers-table th { background-color: #23272a; }
body.theme-dark .worship-timers-table tr[style*="#CEFFB5"] { background-color: #2e4b30 !important; } /* Green */
body.theme-dark .worship-timers-table tr[style*="#f6ffb5ff"] { background-color: #4b4b30 !important; } /* Yellow */
body.theme-dark .worship-timers-table tr[style*="#FFCAC2"] { background-color: #4b3030 !important; } /* Red */
body.theme-dark button[style*="#cee3c9"] { background-color: #2e4b30 !important; color: #f1f1f1 !important; } /* Accept Button */
body.theme-dark button[style*="#e3d3c9"] { background-color: #4b3030 !important; color: #f1f1f1 !important; } /* Decline Button */
body.theme-dark button[style*="#cee3c9"]:hover { background-color: #3f6943 !important; }
body.theme-dark button[style*="#e3d3c9"]:hover { background-color: #694343 !important; }
/* --- Pumpkin Spice Theme --- */
body.theme-pumpkin .ui-panel, body.theme-pumpkin .modal-content,
body.theme-pumpkin .ach-sub-menu-btn-td, body.theme-pumpkin .donor-shop-entry, body.theme-pumpkin .ui-donor-chat-tags-info,
body.theme-pumpkin .npc-chat-options-modal-title, body.theme-pumpkin .npc-chat-options-modal-options div {
background-color: #2a2421; color: #f5e4d9; box-shadow: 1px 1px 5px #1a1411; border: 1px solid #4a3421;
}
body.theme-pumpkin .ui-panel-title { color: #e67e22; }
body.theme-pumpkin table.settings-ui tr:nth-child(odd), body.theme-pumpkin .quests-ui tr:nth-child(odd),
body.theme-pumpkin .monster-log-ui-table tr:nth-child(odd) { background-color: #3b312c; }
body.theme-pumpkin table.settings-ui tr:nth-child(even), body.theme-pumpkin .quests-ui tr:nth-child(even),
body.theme-pumpkin .monster-log-ui-table tr:nth-child(even) { background-color: #312925; }
body.theme-pumpkin .achievements-ui tr { background-color: #3b2e25; border-color: #5a4431; }
body.theme-pumpkin .skill-cell-bar-fill { background-color: #d35400 !important; }
body.theme-pumpkin .total-level-div { background-color: #1c1815 !important; }
body.theme-pumpkin .hint, body.theme-pumpkin .color-grey, body.theme-pumpkin .modal-content h3[style*="color: grey"] { color: #c9bca2 !important; }
body.theme-pumpkin .right-click-item-modal-table { background-color: #312925; }
body.theme-pumpkin .right-click-item-modal-table span[style*="color:grey"] { color: #c9bca2 !important; }
body.theme-pumpkin .equipement-stats-ui-table, body.theme-pumpkin .right-click-item-modal-table-stats,
body.theme-pumpkin .monster-log-modal-drops, body.theme-pumpkin .npc-chat-message-modal-message,
body.theme-pumpkin .player-sell-booth-entry td, body.theme-pumpkin .player-lookup-modal-quests,
body.theme-pumpkin .player-lookup-modal-achievements { background-color: rgba(40, 26, 13, 0.2); }
body.theme-pumpkin div[style*="color:green"], body.theme-pumpkin .color-green { color: #e67e22 !important; }
body.theme-pumpkin .color-red { color: #e84c3d !important; }
body.theme-pumpkin a { color: #f39c12 !important; }
body.theme-pumpkin .ach-sub-menu-btn-td:hover,
body.theme-pumpkin .ach-sub-menu-btn-td.active,
body.theme-pumpkin .npc-chat-options-modal-options div:hover,
body.theme-pumpkin .npc-chat-options-modal-options div.active { background-color: var(--fmp-ui-element-active-bg); }
body.theme-pumpkin .hover-continue-npc-chat-message-modal:hover { color: #ffab70 !important; }
body.theme-pumpkin button { background-color: var(--fmp-ui-button-bg); color: var(--fmp-ui-button-text); border: 1px solid var(--fmp-ui-button-border); }
body.theme-pumpkin button:hover { background-color: var(--fmp-ui-button-bg-hover); }
body.theme-pumpkin button:disabled { background-color: var(--fmp-ui-button-disabled-bg); color: var(--fmp-ui-button-disabled-text); border-color: var(--fmp-ui-button-disabled-border); }
body.theme-pumpkin input[type="text"],
body.theme-pumpkin input[type="number"],
body.theme-pumpkin input[type="password"],
body.theme-pumpkin input[type="email"],
body.theme-pumpkin input[type="search"],
body.theme-pumpkin textarea { background-color: var(--fmp-ui-input-bg); color: var(--fmp-ui-button-text); border-color: var(--fmp-ui-button-border); }
body.theme-pumpkin .player-lookup-modal-table-skills td { background-color: #3b312c !important; }
body.theme-pumpkin .player-lookup-modal-quest-entry { background-color: #312925; }
body.theme-pumpkin .hunter-shop-modal-table th { background-color: #1c1815; }
body.theme-pumpkin .hunter-shop-modal-table, body.theme-pumpkin .hunter-shop-modal-table tr { background-color: #3b312c !important; }
body.theme-pumpkin .trade-offer-section { background-color: #1c1815; }
body.theme-pumpkin .trade-accepted-msg { background-color: #5a4431; border-color: #e67e22; }
body.theme-pumpkin #trade-inventory-items div.item[style*="background-color"] { background-color: #1c1815 !important; }
body.theme-pumpkin .worship-timers-table th { background-color: #1c1815; }
body.theme-pumpkin .worship-timers-table tr[style*="#CEFFB5"] { background-color: #4a3c35 !important; } /* Green */
body.theme-pumpkin .worship-timers-table tr[style*="#f6ffb5ff"] { background-color: #4a3421 !important; } /* Yellow */
body.theme-pumpkin .worship-timers-table tr[style*="#FFCAC2"] { background-color: #4a2a21 !important; } /* Red */
body.theme-pumpkin button[style*="#cee3c9"] { background-color: #662500 !important; color: #f5e4d9 !important; } /* Accept Button */
body.theme-pumpkin button[style*="#e3d3c9"] { background-color: #4a2a21 !important; color: #f5e4d9 !important; } /* Decline Button */
body.theme-pumpkin button[style*="#cee3c9"]:hover { background-color: #853100 !important; }
body.theme-pumpkin button[style*="#e3d3c9"]:hover { background-color: #693a2a !important; }
/* --- Deep Sea Theme --- */
body.theme-sea .ui-panel, body.theme-sea .modal-content,
body.theme-sea .ach-sub-menu-btn-td, body.theme-sea .donor-shop-entry, body.theme-sea .ui-donor-chat-tags-info,
body.theme-sea .npc-chat-options-modal-title, body.theme-sea .npc-chat-options-modal-options div {
background-color: #0d253f; color: #e1f5fe; box-shadow: 1px 1px 5px #051525; border: 1px solid #01b4e4;
}
body.theme-sea .ui-panel-title { color: #90cea1; }
body.theme-sea table.settings-ui tr:nth-child(odd), body.theme-sea .quests-ui tr:nth-child(odd),
body.theme-sea .monster-log-ui-table tr:nth-child(odd) { background-color: #0a1d31; }
body.theme-sea table.settings-ui tr:nth-child(even), body.theme-sea .quests-ui tr:nth-child(even),
body.theme-sea .monster-log-ui-table tr:nth-child(even) { background-color: #102a45; }
body.theme-sea .achievements-ui tr { background-color: #103a45; border-color: #1a5a65; }
body.theme-sea .skill-cell-bar-fill { background-color: #01b4e4 !important; }
body.theme-sea .total-level-div { background-color: #071726 !important; }
body.theme-sea .hint, body.theme-sea .color-grey, body.theme-sea .modal-content h3[style*="color: grey"] { color: #a4c8d1 !important; }
body.theme-sea .right-click-item-modal-table { background-color: #102a45; }
body.theme-sea .right-click-item-modal-table span[style*="color:grey"] { color: #a4c8d1 !important; }
body.theme-sea .equipement-stats-ui-table, body.theme-sea .right-click-item-modal-table-stats,
body.theme-sea .monster-log-modal-drops, body.theme-sea .npc-chat-message-modal-message,
body.theme-sea .player-sell-booth-entry td, body.theme-sea .player-lookup-modal-quests,
body.theme-sea .player-lookup-modal-achievements { background-color: rgba(1, 180, 228, 0.1); }
body.theme-sea div[style*="color:green"], body.theme-sea .color-green { color: #90cea1 !important; }
body.theme-sea .color-red { color: #5eb5b9 !important; }
body.theme-sea a { color: #01b4e4 !important; }
body.theme-sea .ach-sub-menu-btn-td:hover,
body.theme-sea .ach-sub-menu-btn-td.active,
body.theme-sea .npc-chat-options-modal-options div:hover,
body.theme-sea .npc-chat-options-modal-options div.active { background-color: var(--fmp-ui-element-active-bg); }
body.theme-sea .hover-continue-npc-chat-message-modal:hover { color: #66d9ff !important; }
body.theme-sea button { background-color: var(--fmp-ui-button-bg); color: var(--fmp-ui-button-text); border: 1px solid var(--fmp-ui-button-border); }
body.theme-sea button:hover { background-color: var(--fmp-ui-button-bg-hover); }
body.theme-sea button:disabled { background-color: var(--fmp-ui-button-disabled-bg); color: var(--fmp-ui-button-disabled-text); border-color: var(--fmp-ui-button-disabled-border); }
body.theme-sea input[type="text"],
body.theme-sea input[type="number"],
body.theme-sea input[type="password"],
body.theme-sea input[type="email"],
body.theme-sea input[type="search"],
body.theme-sea textarea { background-color: var(--fmp-ui-input-bg); color: var(--fmp-ui-button-text); border-color: var(--fmp-ui-button-border); }
body.theme-sea .player-lookup-modal-table-skills td { background-color: #0a1d31 !important; }
body.theme-sea .player-lookup-modal-quest-entry { background-color: #102a45; }
body.theme-sea .hunter-shop-modal-table th { background-color: #071726; }
body.theme-sea .hunter-shop-modal-table, body.theme-sea .hunter-shop-modal-table tr { background-color: #0a1d31 !important; }
body.theme-sea .trade-offer-section { background-color: #071726; }
body.theme-sea .trade-accepted-msg { background-color: #103a45; border-color: #90cea1; }
body.theme-sea #trade-inventory-items div.item[style*="background-color"] { background-color: #071726 !important; }
body.theme-sea .worship-timers-table th { background-color: #071726; }
body.theme-sea .worship-timers-table tr[style*="#CEFFB5"] { background-color: #104a35 !important; } /* Green */
body.theme-sea .worship-timers-table tr[style*="#f6ffb5ff"] { background-color: #133a5f !important; } /* Yellow */
body.theme-sea .worship-timers-table tr[style*="#FFCAC2"] { background-color: #3f1d3f !important; } /* Red */
body.theme-sea button[style*="#cee3c9"] { background-color: #104a35 !important; color: #e1f5fe !important; } /* Accept Button */
body.theme-sea button[style*="#e3d3c9"] { background-color: #3f1d3f !important; color: #e1f5fe !important; } /* Decline Button */
body.theme-sea button[style*="#cee3c9"]:hover { background-color: #1a694f !important; }
body.theme-sea button[style*="#e3d3c9"]:hover { background-color: #5f2a5f !important; }
/* --- Mystic Vale Theme (Darker) --- */
body.theme-mystic .ui-panel, body.theme-mystic .modal-content,
body.theme-mystic .ach-sub-menu-btn-td, body.theme-mystic .donor-shop-entry, body.theme-mystic .ui-donor-chat-tags-info,
body.theme-mystic .npc-chat-options-modal-title, body.theme-mystic .npc-chat-options-modal-options div {
background-color: #6A6E94; color: #f0f0f0; box-shadow: 1px 1px 5px #4a4c6a;
}
body.theme-mystic .ui-panel-title { color: #d1d3e0; }
body.theme-mystic table.settings-ui tr:nth-child(odd), body.theme-mystic .quests-ui tr:nth-child(odd),
body.theme-mystic .monster-log-ui-table tr:nth-child(odd) { background-color: #7A7EA1; }
body.theme-mystic table.settings-ui tr:nth-child(even), body.theme-mystic .quests-ui tr:nth-child(even),
body.theme-mystic .monster-log-ui-table tr:nth-child(even) { background-color: #868AAD; }
body.theme-mystic .achievements-ui tr { background-color: #7a8aa1; border-color: #9598b9; }
body.theme-mystic .skill-cell-bar-fill { background-color: #9598B9 !important; }
body.theme-mystic .skill-cell { background-color: #5f6284 !important; }
body.theme-mystic .total-level-div { background-color: #5f6284 !important; color: #f0f0f0 !important; }
body.theme-mystic .hint, body.theme-mystic .color-grey, body.theme-mystic .modal-content h3[style*="color: grey"] { color: #d1d3e0 !important; }
body.theme-mystic .right-click-item-modal-table { background-color: #868AAD; }
body.theme-mystic .right-click-item-modal-table span[style*="color:grey"] { color: #d1d3e0 !important; }
body.theme-mystic .equipement-stats-ui-table, body.theme-mystic .right-click-item-modal-table-stats,
body.theme-mystic .monster-log-modal-drops, body.theme-mystic .npc-chat-message-modal-message,
body.theme-mystic .player-sell-booth-entry td, body.theme-mystic .player-lookup-modal-quests,
body.theme-mystic .player-lookup-modal-achievements { background-color: rgba(60, 62, 84, 0.2); }
body.theme-mystic div[style*="color:green"], body.theme-mystic .green-hover:hover, body.theme-mystic .color-green { color: #b2fab4 !important; }
body.theme-mystic .color-red { color: #f5c0c0 !important; }
body.theme-mystic .color-blue { color: #a6cfff !important; }
body.theme-mystic a { color: #d1d3e0 !important; }
body.theme-mystic .ach-sub-menu-btn-td:hover,
body.theme-mystic .ach-sub-menu-btn-td.active,
body.theme-mystic .npc-chat-options-modal-options div:hover,
body.theme-mystic .npc-chat-options-modal-options div.active { background-color: var(--fmp-ui-element-active-bg); }
body.theme-mystic .hover-continue-npc-chat-message-modal:hover { color: #f5c0c0 !important; }
body.theme-mystic button { background-color: var(--fmp-ui-button-bg); color: var(--fmp-ui-button-text); border: 1px solid var(--fmp-ui-button-border); }
body.theme-mystic button:hover { background-color: var(--fmp-ui-button-bg-hover); }
body.theme-mystic button:disabled { background-color: var(--fmp-ui-button-disabled-bg); color: var(--fmp-ui-button-disabled-text); border-color: var(--fmp-ui-button-disabled-border); }
body.theme-mystic input[type="text"],
body.theme-mystic input[type="number"],
body.theme-mystic input[type="password"],
body.theme-mystic input[type="email"],
body.theme-mystic input[type="search"],
body.theme-mystic textarea { background-color: var(--fmp-ui-input-bg); color: var(--fmp-ui-button-text); border-color: var(--fmp-ui-button-border); }
body.theme-mystic .player-lookup-modal-table-skills td { background-color: #7A7EA1 !important; }
body.theme-mystic .player-lookup-modal-quest-entry { background-color: #868AAD; }
body.theme-mystic .hunter-shop-modal-table th { background-color: #5f6284; }
body.theme-mystic .hunter-shop-modal-table, body.theme-mystic .hunter-shop-modal-table tr { background-color: #7A7EA1 !important; }
body.theme-mystic .trade-offer-section { background-color: #5f6284; }
body.theme-mystic .trade-accepted-msg { background-color: #7a8aa1; border-color: #b2fab4; }
body.theme-mystic #trade-inventory-items div.item[style*="background-color"] { background-color: #5f6284 !important; }
body.theme-mystic .worship-timers-table th { background-color: #5f6284; }
body.theme-mystic .worship-timers-table tr[style*="#CEFFB5"] { background-color: #3e5e40 !important; } /* Green */
body.theme-mystic .worship-timers-table tr[style*="#f6ffb5ff"] { background-color: #5f6284 !important; } /* Yellow */
body.theme-mystic .worship-timers-table tr[style*="#FFCAC2"] { background-color: #4a4c6a !important; } /* Red */
body.theme-mystic button[style*="#cee3c9"] { background-color: #3e5e40 !important; color: #f0f0f0 !important; } /* Accept Button */
body.theme-mystic button[style*="#e3d3c9"] { background-color: #4a4c6a !important; color: #f0f0f0 !important; } /* Decline Button */
body.theme-mystic button[style*="#cee3c9"]:hover { background-color: #5e8c61 !important; }
body.theme-mystic button[style*="#e3d3c9"]:hover { background-color: #696d9a !important; }
/* --- Omboko Theme --- */
body.theme-omboko .ui-panel, body.theme-omboko .modal-content,
body.theme-omboko .ach-sub-menu-btn-td, body.theme-omboko .donor-shop-entry, body.theme-omboko .ui-donor-chat-tags-info,
body.theme-omboko .npc-chat-options-modal-title, body.theme-omboko .npc-chat-options-modal-options div {
background-color: #1D2319; color: #d1dcc6; box-shadow: 1px 1px 5px #000; border: 1px solid #4B682E;
}
body.theme-omboko .ui-panel-title { color: #9eb883; }
body.theme-omboko table.settings-ui tr:nth-child(odd), body.theme-omboko .quests-ui tr:nth-child(odd),
body.theme-omboko .monster-log-ui-table tr:nth-child(odd) { background-color: #25311B; }
body.theme-omboko table.settings-ui tr:nth-child(even), body.theme-omboko .quests-ui tr:nth-child(even),
body.theme-omboko .monster-log-ui-table tr:nth-child(even) { background-color: #30411F; }
body.theme-omboko .achievements-ui tr { background-color: #30411F; border-color: #4B682E; }
body.theme-omboko .skill-cell-bar-fill { background-color: #4B682E !important; }
body.theme-omboko .skill-cell { background-color: #30411F !important; }
body.theme-omboko .total-level-div { background-color: #11150f !important; }
body.theme-omboko .hint, body.theme-omboko .color-grey, body.theme-omboko .modal-content h3[style*="color: grey"] { color: #8f9984 !important; }
body.theme-omboko .right-click-item-modal-table { background-color: #30411F; }
body.theme-omboko .right-click-item-modal-table span[style*="color:grey"] { color: #8f9984 !important; }
body.theme-omboko .equipement-stats-ui-table, body.theme-omboko .right-click-item-modal-table-stats,
body.theme-omboko .monster-log-modal-drops, body.theme-omboko .npc-chat-message-modal-message,
body.theme-omboko .player-sell-booth-entry td, body.theme-omboko .player-lookup-modal-quests,
body.theme-omboko .player-lookup-modal-achievements { background-color: rgba(75, 104, 46, 0.1); }
body.theme-omboko div[style*="color:green"], body.theme-omboko .color-green { color: #9eb883 !important; }
body.theme-omboko .color-red { color: #e57373 !important; }
body.theme-omboko a { color: #9eb883 !important; }
body.theme-omboko .ach-sub-menu-btn-td:hover,
body.theme-omboko .ach-sub-menu-btn-td.active,
body.theme-omboko .npc-chat-options-modal-options div:hover,
body.theme-omboko .npc-chat-options-modal-options div.active { background-color: var(--fmp-ui-element-active-bg); }
body.theme-omboko .hover-continue-npc-chat-message-modal:hover { color: #c4d6b1 !important; }
body.theme-omboko button { background-color: var(--fmp-ui-button-bg); color: var(--fmp-ui-button-text); border: 1px solid var(--fmp-ui-button-border); }
body.theme-omboko button:hover { background-color: var(--fmp-ui-button-bg-hover); }
body.theme-omboko button:disabled { background-color: var(--fmp-ui-button-disabled-bg); color: var(--fmp-ui-button-disabled-text); border-color: var(--fmp-ui-button-disabled-border); }
body.theme-omboko input[type="text"],
body.theme-omboko input[type="number"],
body.theme-omboko input[type="password"],
body.theme-omboko input[type="email"],
body.theme-omboko input[type="search"],
body.theme-omboko textarea { background-color: var(--fmp-ui-input-bg); color: var(--fmp-ui-button-text); border-color: var(--fmp-ui-button-border); }
body.theme-omboko .player-lookup-modal-table-skills td { background-color: #25311B !important; }
body.theme-omboko .player-lookup-modal-quest-entry { background-color: #30411F; }
body.theme-omboko .hunter-shop-modal-table th { background-color: #11150f; }
body.theme-omboko .hunter-shop-modal-table, body.theme-omboko .hunter-shop-modal-table tr { background-color: #25311B !important; }
body.theme-omboko .trade-offer-section { background-color: #11150f; }
body.theme-omboko .trade-accepted-msg { background-color: #30411F; border-color: #9eb883; }
body.theme-omboko #trade-inventory-items div.item[style*="background-color"] { background-color: #11150f !important; }
body.theme-omboko .worship-timers-table th { background-color: #11150f; }
body.theme-omboko .worship-timers-table tr[style*="#CEFFB5"] { background-color: #3D5426 !important; } /* Green */
body.theme-omboko .worship-timers-table tr[style*="#f6ffb5ff"] { background-color: #4B682E !important; } /* Yellow */
body.theme-omboko .worship-timers-table tr[style*="#FFCAC2"] { background-color: #30411F !important; } /* Red */
body.theme-omboko button[style*="#cee3c9"] { background-color: #3D5426 !important; color: #d1dcc6 !important; } /* Accept Button */
body.theme-omboko button[style*="#e3d3c9"] { background-color: #30411F !important; color: #d1dcc6 !important; } /* Decline Button */
body.theme-omboko button[style*="#cee3c9"]:hover { background-color: #4B682E !important; }
body.theme-omboko button[style*="#e3d3c9"]:hover { background-color: #4B682E !important; }
`;
const styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);
}
applyTheme(themeName) {
document.body.className = document.body.className.replace(/theme-\w+/g, '');
if (themeName && themeName !== 'default') {
document.body.classList.add(`theme-${themeName}`);
}
}
getLevelFromXP(xp) {
let level = 1;
for (let i = 200; i >= 1; i--) {
if (xp >= this.xpTable[i]) {
level = i;
break;
}
}
return level;
}
recalculateAndDisplayTotal() {
if (!this.skillUI.total.textSpan || !this.skillUI.total.tooltip) return;
let totalLevel = 0;
let virtualTotalLevel = 0;
let totalXp = 0;
for (const skillName in this.skillUI.elements) {
const element = this.skillUI.elements[skillName];
totalXp += element.xp || 0;
// Calculate both normal and virtual levels
const normalLevel = Math.min(element.level || 0, 100);
totalLevel += normalLevel;
if (this.getConfig('showVirtualLevels')) {
virtualTotalLevel += element.level || 0;
}
}
if (this.getConfig('showVirtualLevels') && virtualTotalLevel > totalLevel) {
// Show regular level first, then virtual level in parentheses with different color
this.skillUI.total.textSpan.innerHTML = `TOTAL ${totalLevel} <span class="virtual-level-display">(${virtualTotalLevel})</span>`;
} else {
this.skillUI.total.textSpan.innerText = `TOTAL ${totalLevel}`;
}
this.skillUI.total.tooltip.textContent = `${totalXp.toLocaleString('en-US')} XP`;
}
updateSkillCell(skillName) {
const component = this.skillUI.elements[skillName];
if (!component || !component.originalLevelEl) return;
const levelText = component.originalLevelEl.innerText;
const xpTooltipText = component.originalXpEl.innerHTML;
const xpDataText = xpTooltipText.split('<br>').pop().trim();
let displayLevel = parseInt(levelText);
const [currentStr, maxStr] = xpDataText.replace(" XP", "").split("/");
const currentXP = parseInt(currentStr.replace(/,/g, "")) || 0;
// Calculate virtual level if enabled
if (this.getConfig('showVirtualLevels')) {
displayLevel = this.getLevelFromXP(currentXP);
}
component.level = displayLevel;
component.xp = currentXP;
component.label.innerText = displayLevel;
// Handle progress bar and tooltip
if (displayLevel >= 100 && !this.getConfig('showVirtualLevels')) {
// At level 100 without virtual levels
component.barFill.style.width = '100%';
component.tooltip.textContent = `${currentXP.toLocaleString('en-US')} XP`;
} else {
// Calculate progress for current level
const currentLevelXP = this.xpTable[displayLevel] || 0;
const nextLevelXP = this.xpTable[displayLevel + 1] || currentXP;
const xpGainedThisLevel = Math.max(0, currentXP - currentLevelXP);
const xpNeededForThisLevel = nextLevelXP - currentLevelXP;
let progress = 0;
if (xpNeededForThisLevel > 0) {
progress = Math.min((xpGainedThisLevel / xpNeededForThisLevel) * 100, 100);
}
component.barFill.style.width = `${progress}%`;
if (displayLevel >= 200) {
// Max virtual level
component.tooltip.textContent = `${currentXP.toLocaleString('en-US')} XP`;
} else {
component.tooltip.textContent = `${currentXP.toLocaleString('en-US')} / ${nextLevelXP.toLocaleString('en-US')} XP`;
}
}
this.recalculateAndDisplayTotal();
}
moveUiBelowCanvas() {
const table = document.querySelector('#game table');
if (!table) return;
const canvas = table.querySelector('canvas');
const canvasTd = canvas?.closest('td');
const uiTd = table.querySelector('.td-ui');
if (canvas && canvasTd && uiTd) {
const newTbody = document.createElement('tbody');
const canvasRow = document.createElement('tr');
const uiRow = document.createElement('tr');
canvasRow.appendChild(canvasTd);
uiRow.appendChild(uiTd);
newTbody.append(canvasRow, uiRow);
table.innerHTML = '';
table.appendChild(newTbody);
uiTd.style.cssText = 'padding: 0; margin: 0; overflow: hidden; position: relative;';
const uiWrapper = document.createElement('div');
uiWrapper.style.transformOrigin = 'top left';
uiWrapper.style.display = 'inline-block';
while (uiTd.firstChild) {
uiWrapper.appendChild(uiTd.firstChild);
}
uiTd.appendChild(uiWrapper);
const applyZoomAndWidthFix = () => {
const canvasWidth = canvas.offsetWidth;
const ratio = window.devicePixelRatio || 1;
const scale = 1 / ratio;
uiWrapper.style.transform = `scale(${scale})`;
uiWrapper.style.width = `${canvasWidth * ratio}px`;
requestAnimationFrame(() => {
const realHeight = uiWrapper.getBoundingClientRect().height;
uiTd.style.height = `${realHeight}px`;
});
};
applyZoomAndWidthFix();
window.addEventListener('resize', applyZoomAndWidthFix);
}
}
createSkillsGrid() {
if (this.isGridCreated || !this.getConfig('showSkillsPanel')) {
if (this.isGridCreated && !this.getConfig('showSkillsPanel')) {
this.destroySkillsGrid();
}
return;
}
const skillPanel = document.querySelector("#ui-panel-skills");
const skillContainer = skillPanel?.querySelector("center");
if (skillPanel && skillContainer) {
const skillDivs = Array.from(skillContainer.querySelectorAll("div.skills-ui-new"));
if (skillDivs.length > 0) {
this.isGridCreated = true;
const grid = document.createElement("div");
grid.style.cssText = "display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0;";
grid.id = "tm-skills-grid";
skillDivs.slice(0, -1).forEach(skillDiv => {
const levelEl = skillDiv.querySelector("span[id$='-level']");
if (!levelEl) return;
const skillName = levelEl.id.replace('-level', '');
const iconEl = skillDiv.querySelector("img");
const xpEl = skillDiv.querySelector("span[id$='-xp']");
const onclickAttr = skillDiv.getAttribute("onclick");
const cell = document.createElement("div");
cell.style.cssText = `display: flex; flex-direction: column; align-items: center; justify-content: space-between; background: #222; color: #fff; padding: 10px; border-radius: 8px; cursor: pointer;`;
cell.classList.add('skill-cell');
if (onclickAttr) cell.onclick = () => eval(onclickAttr);
const img = document.createElement("img");
img.src = iconEl.src;
img.style.cssText = "width: 32px; height: 32px; margin-bottom: 5px;";
const label = document.createElement("div");
label.style.fontSize = '16pt';
label.style.fontWeight = 'bold';
const spacer = document.createElement("div");
spacer.style.flexGrow = "1";
const barContainer = document.createElement("div");
barContainer.style.cssText = `width: 100%; height: 6px; background: #444; border-radius: 4px; margin-top: 6px; overflow: hidden;`;
const barFill = document.createElement("div");
barFill.style.cssText = "height: 100%; background: #00cc66; border-radius: 4px 0 0 4px;";
barFill.classList.add('skill-cell-bar-fill');
barContainer.appendChild(barFill);
const tooltip = document.createElement("div");
let tooltipStyle = `position: fixed; padding: 6px 10px; background: #333; color: #fff; border-radius: 6px; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.4); pointer-events: none; z-index: 9999; white-space: nowrap; display: none;`;
if (this.getConfig('portraitMode')) {
const ratio = window.devicePixelRatio || 1;
const scale = 1 / ratio;
tooltipStyle += `transform: scale(${scale}); transform-origin: left top;`;
}
tooltip.style.cssText = tooltipStyle;
document.body.appendChild(tooltip);
cell.addEventListener("mousemove", e => {
tooltip.style.left = `${e.pageX + 15}px`;
tooltip.style.top = `${e.pageY + 10}px`;
});
cell.addEventListener("mouseenter", () => { tooltip.style.display = "block"; });
cell.addEventListener("mouseleave", () => { tooltip.style.display = "none"; });
cell.append(img, label, spacer, barContainer);
grid.appendChild(cell);
this.skillUI.elements[skillName] = { label, barFill, tooltip, originalLevelEl: levelEl, originalXpEl: xpEl };
this.updateSkillCell(skillName);
});
const totalDiv = document.createElement("div");
totalDiv.style.cssText = `display: flex; align-items: center; justify-content: center; text-align: center; margin-top: 10px; padding: 10px; background: #444; color: #fff; font-weight: bold; border-radius: 8px; font-size: 16pt;`;
totalDiv.classList.add('total-level-div');
totalDiv.id = "tm-total-level-div";
const totalIcon = document.createElement("img");
totalIcon.src = "images/icons/skills_large.png";
totalIcon.style.cssText = "width: 24px; height: 24px; margin-right: 10px;";
const totalTextSpan = document.createElement("span");
totalDiv.append(totalIcon, totalTextSpan);
this.skillUI.total.textSpan = totalTextSpan;
const totalTooltip = document.createElement("div");
let tooltipStyle = `position: fixed; padding: 6px 10px; background: #333; color: #fff; border-radius: 6px; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.4); pointer-events: none; z-index: 9999; white-space: nowrap; display: none;`;
if (this.getConfig('portraitMode')) {
const ratio = window.devicePixelRatio || 1;
const scale = 1 / ratio;
tooltipStyle += `transform: scale(${scale}); transform-origin: left top;`;
}
totalTooltip.style.cssText = tooltipStyle;
document.body.appendChild(totalTooltip);
this.skillUI.total.tooltip = totalTooltip;
totalDiv.addEventListener("mousemove", e => {
totalTooltip.style.left = `${e.pageX + 15}px`;
totalTooltip.style.top = `${e.pageY + 10}px`;
});
totalDiv.addEventListener("mouseenter", () => { totalTooltip.style.display = "block"; });
totalDiv.addEventListener("mouseleave", () => { totalTooltip.style.display = "none"; });
this.recalculateAndDisplayTotal();
skillContainer.style.display = "none";
skillPanel.append(grid, totalDiv);
const skillObserver = new MutationObserver(() => {
Object.keys(this.skillUI.elements).forEach(skillName => this.updateSkillCell(skillName));
});
skillObserver.observe(skillContainer, { childList: true, subtree: true, characterData: true });
}
}
}
destroySkillsGrid() {
if (!this.isGridCreated) return;
const skillPanel = document.querySelector("#ui-panel-skills");
const skillContainer = skillPanel?.querySelector("center");
const grid = document.getElementById('tm-skills-grid');
const totalDiv = document.getElementById('tm-total-level-div');
if (grid) grid.remove();
if (totalDiv) totalDiv.remove();
if (this.skillUI.total.tooltip) this.skillUI.total.tooltip.remove();
if (skillContainer) skillContainer.style.display = "";
this.isGridCreated = false;
}
}
const plugin = new UITweaksPlugin();
FlatMMOPlus.registerPlugin(plugin);
})();