Persistent RNG dice color predictor with dark purple UI
// ==UserScript==
// @name Dice Color RNG Predictor
// @namespace http://tampermonkey.net/
// @version 1.3
// @description Persistent RNG dice color predictor with dark purple UI
// @author theo
// @match https://www.online-dice.com/roll-color-dice/3/*
// @include https://www.online-dice.com/*
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @description join our discord https://discord.gg/MuUCebSYSD
// ==/UserScript==
(function() {
'use strict';
// Check if we've already injected the UI
if (document.getElementById('dicePredictorContainer')) {
return;
}
// Dark purple UI styles
const css = `
#dicePredictorContainer {
position: fixed;
top: 20px;
right: 20px;
width: 320px;
background-color: #2a0a3a;
border: 2px solid #8a2be2;
border-radius: 10px;
padding: 15px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #e6d5ff;
z-index: 9999;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
#dicePredictorTitle {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
text-align: center;
color: #b388ff;
border-bottom: 1px solid #8a2be2;
padding-bottom: 8px;
position: relative;
}
.discord-icon {
position: absolute;
right: 0;
top: 0;
width: 24px;
height: 24px;
cursor: pointer;
transition: transform 0.2s;
}
.discord-icon:hover {
transform: scale(1.1);
}
/* [Rest of your existing CSS remains exactly the same] */
`;
// Add styles to head
GM_addStyle(css);
// Color definitions
const COLORS = {
'red': '#ff5252',
'orange': '#ff9800',
'yellow': '#ffeb3b',
'green': '#0f9d58',
'blue': '#4285f4',
'purple': '#9c27b0'
};
// Color names for display
const COLOR_NAMES = {
'red': 'Red',
'orange': 'Orange',
'yellow': 'Yellow',
'green': 'Green',
'blue': 'Blue',
'purple': 'Purple'
};
// Create container for our predictor
function createUI() {
const container = document.createElement('div');
container.id = 'dicePredictorContainer';
container.innerHTML = `
<div id="dicePredictorTitle">
Dice Color RNG Predictor
<svg class="discord-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36">
<path fill="#5865F2" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
</svg>
</div>
<div class="inputSection">
<label class="inputLabel" for="dice1Color">First Dice Color:</label>
<select class="colorSelect" id="dice1Color">
${Object.entries(COLORS).map(([value, color]) =>
`<option value="${value}">${COLOR_NAMES[value]}</option>`
).join('')}
</select>
<label class="inputLabel" for="dice2Color">Second Dice Color:</label>
<select class="colorSelect" id="dice2Color">
${Object.entries(COLORS).map(([value, color]) =>
`<option value="${value}">${COLOR_NAMES[value]}</option>`
).join('')}
</select>
<label class="inputLabel" for="dice3Color">Third Dice Color:</label>
<select class="colorSelect" id="dice3Color">
${Object.entries(COLORS).map(([value, color]) =>
`<option value="${value}">${COLOR_NAMES[value]}</option>`
).join('')}
</select>
<button id="predictButton">Generate Random Prediction</button>
</div>
<div id="predictionResult">
<div id="predictionText">Random prediction will appear here</div>
<div id="nextColorPrediction">?</div>
</div>
<div id="historyTitle">Prediction History</div>
<div id="historyList"></div>
`;
// Add to body
document.body.appendChild(container);
// Add click handler for Discord icon
document.querySelector('.discord-icon').addEventListener('click', () => {
window.open('https://discord.gg/MuUCebSYSD', '_blank');
});
// Load saved state
loadState();
// Set up predict button
document.getElementById('predictButton').addEventListener('click', makeRandomPrediction);
}
// [Rest of your existing functions remain exactly the same]
// Save current state
function saveState() {
const state = {
dice1: document.getElementById('dice1Color').value,
dice2: document.getElementById('dice2Color').value,
dice3: document.getElementById('dice3Color').value,
history: predictionHistory
};
GM_setValue('dicePredictorState', JSON.stringify(state));
}
// Load saved state
function loadState() {
const savedState = GM_getValue('dicePredictorState');
if (savedState) {
try {
const state = JSON.parse(savedState);
// Restore dropdown values
document.getElementById('dice1Color').value = state.dice1;
document.getElementById('dice2Color').value = state.dice2;
document.getElementById('dice3Color').value = state.dice3;
// Restore history
predictionHistory = state.history || [];
updateHistoryDisplay();
} catch (e) {
console.error('Failed to load state:', e);
}
}
}
// Track history of predictions
let predictionHistory = [];
const MAX_HISTORY = 15;
// Pure RNG prediction
function makeRandomPrediction() {
const color1 = document.getElementById('dice1Color').value;
const color2 = document.getElementById('dice2Color').value;
const color3 = document.getElementById('dice3Color').value;
const currentColors = [color1, color2, color3];
const allColors = Object.keys(COLORS);
const prediction = allColors[Math.floor(Math.random() * allColors.length)];
// Update prediction display
const predictionElement = document.getElementById('nextColorPrediction');
predictionElement.textContent = COLOR_NAMES[prediction];
predictionElement.style.backgroundColor = COLORS[prediction];
predictionElement.style.color = (prediction === 'yellow') ? '#000' : '#fff';
// Add to history
const time = new Date().toLocaleTimeString();
const historyEntry = {
time: time,
colors: currentColors,
prediction: prediction
};
predictionHistory.unshift(historyEntry);
if (predictionHistory.length > MAX_HISTORY) {
predictionHistory.pop();
}
updateHistoryDisplay();
saveState();
}
// Update history display
function updateHistoryDisplay() {
const historyList = document.getElementById('historyList');
if (!historyList) return;
historyList.innerHTML = '';
if (predictionHistory.length === 0) {
historyList.innerHTML = '<div style="text-align: center; color: #ba55d3; padding: 10px;">No predictions yet</div>';
return;
}
predictionHistory.forEach((entry, index) => {
const historyItem = document.createElement('div');
historyItem.className = 'historyItem';
historyItem.innerHTML = `
<div class="historyTime">${index + 1}. ${entry.time}</div>
<div class="historyColors">
${entry.colors.map(color => `
<div class="colorBox" style="background-color: ${COLORS[color]}; color: ${(color === 'yellow') ? '#000' : '#fff'}">
${COLOR_NAMES[color]}
</div>
`).join('')}
</div>
<div class="historyPrediction">
<span>Prediction:</span>
<div class="colorBox" style="background-color: ${COLORS[entry.prediction]}; color: ${(entry.prediction === 'yellow') ? '#000' : '#fff'}">
${COLOR_NAMES[entry.prediction]}
</div>
</div>
`;
historyList.appendChild(historyItem);
});
}
// Initialize with random selections
function randomizeInputs() {
const colors = Object.keys(COLORS);
document.getElementById('dice1Color').value = colors[Math.floor(Math.random() * colors.length)];
document.getElementById('dice2Color').value = colors[Math.floor(Math.random() * colors.length)];
document.getElementById('dice3Color').value = colors[Math.floor(Math.random() * colors.length)];
}
// Create the UI
createUI();
// Set up mutation observer to re-inject UI if removed
const observer = new MutationObserver(function(mutations) {
if (!document.getElementById('dicePredictorContainer')) {
createUI();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
// Save state before page unload
window.addEventListener('beforeunload', saveState);
})();