Allow Bipolar Mode to be enabled independently of Evil Mode

Removed the restriction that required Evil Mode to be active before
enabling Bipolar Mode. Users can now toggle Bipolar Mode at any time.

Changes:
- Bipolar Mode toggle button now always visible in web UI
- Removed auto-disable of Bipolar Mode when Evil Mode is turned off
- Updated CSS to work in both normal and evil mode states
- Simplified updateBipolarToggleVisibility() to always show button

This allows for more flexible usage where users can have Regular Miku
and Evil Miku argue without needing Evil Mode to be the active persona.
This commit is contained in:
2026-01-06 23:48:14 +02:00
parent 9786f984a6
commit 86a54dd0ba

View File

@@ -625,7 +625,7 @@
margin-top: 0; margin-top: 0;
} }
body.evil-mode #bipolar-mode-toggle.bipolar-active { #bipolar-mode-toggle.bipolar-active {
background: #9932CC !important; background: #9932CC !important;
border-color: #9932CC !important; border-color: #9932CC !important;
} }
@@ -637,7 +637,7 @@
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;"> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
<h1 id="panel-title">Miku Control Panel</h1> <h1 id="panel-title">Miku Control Panel</h1>
<div style="display: flex; gap: 0.5rem; align-items: center;"> <div style="display: flex; gap: 0.5rem; align-items: center;">
<button id="bipolar-mode-toggle" onclick="toggleBipolarMode()" style="background: #333; color: #fff; padding: 0.5rem 1rem; border: 2px solid #666; border-radius: 4px; cursor: pointer; font-weight: bold; display: none;"> <button id="bipolar-mode-toggle" onclick="toggleBipolarMode()" style="background: #333; color: #fff; padding: 0.5rem 1rem; border: 2px solid #666; border-radius: 4px; cursor: pointer; font-weight: bold;">
🔄 Bipolar: OFF 🔄 Bipolar: OFF
</button> </button>
<button id="evil-mode-toggle" onclick="toggleEvilMode()" style="background: #333; color: #fff; padding: 0.5rem 1rem; border: 2px solid #666; border-radius: 4px; cursor: pointer; font-weight: bold;"> <button id="evil-mode-toggle" onclick="toggleEvilMode()" style="background: #333; color: #fff; padding: 0.5rem 1rem; border: 2px solid #666; border-radius: 4px; cursor: pointer; font-weight: bold;">
@@ -2168,7 +2168,7 @@ function updateEvilModeUI() {
`; `;
} }
// Update bipolar mode toggle visibility (only show when evil mode is on) // Update bipolar mode toggle visibility (always visible now)
updateBipolarToggleVisibility(); updateBipolarToggleVisibility();
} }
@@ -2240,18 +2240,8 @@ function updateBipolarModeUI() {
function updateBipolarToggleVisibility() { function updateBipolarToggleVisibility() {
const bipolarToggle = document.getElementById('bipolar-mode-toggle'); const bipolarToggle = document.getElementById('bipolar-mode-toggle');
if (evilMode) { // Always show the bipolar mode toggle
bipolarToggle.style.display = 'block'; bipolarToggle.style.display = 'block';
} else {
bipolarToggle.style.display = 'none';
// Also disable bipolar mode if evil mode is turned off
if (bipolarMode) {
apiCall('/bipolar-mode/disable', 'POST').then(() => {
bipolarMode = false;
updateBipolarModeUI();
}).catch(console.error);
}
}
} }
async function triggerBipolarArgument() { async function triggerBipolarArgument() {