527 lines
18 KiB
HTML
527 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Preference Manager Test Suite</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: #1a1a1a;
|
|
color: #e0e0e0;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
color: #ff006e;
|
|
margin-bottom: 30px;
|
|
font-size: 2.5em;
|
|
}
|
|
|
|
.test-section {
|
|
background: #2a2a2a;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.test-section h2 {
|
|
color: #8338ec;
|
|
margin-bottom: 15px;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.test-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.test-result {
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
background: #1a1a1a;
|
|
border-left: 4px solid #666;
|
|
}
|
|
|
|
.test-result.pass {
|
|
border-left-color: #00ff88;
|
|
background: rgba(0, 255, 136, 0.1);
|
|
}
|
|
|
|
.test-result.fail {
|
|
border-left-color: #ff006e;
|
|
background: rgba(255, 0, 110, 0.1);
|
|
}
|
|
|
|
.test-result h3 {
|
|
font-size: 1em;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.test-result.pass h3 { color: #00ff88; }
|
|
.test-result.fail h3 { color: #ff006e; }
|
|
|
|
.test-result p {
|
|
font-size: 0.9em;
|
|
color: #aaa;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
button {
|
|
padding: 12px 24px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, #ff006e, #8338ec);
|
|
color: white;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
button:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
button:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.status-box {
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.status-box.success {
|
|
background: rgba(0, 255, 136, 0.1);
|
|
border: 1px solid #00ff88;
|
|
color: #00ff88;
|
|
}
|
|
|
|
.status-box.error {
|
|
background: rgba(255, 0, 110, 0.1);
|
|
border: 1px solid #ff006e;
|
|
color: #ff006e;
|
|
}
|
|
|
|
.status-box.info {
|
|
background: rgba(131, 56, 236, 0.1);
|
|
border: 1px solid #8338ec;
|
|
color: #8338ec;
|
|
}
|
|
|
|
.json-display {
|
|
background: #0a0a0a;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.85em;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.preference-editor {
|
|
background: #2a2a2a;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.pref-category {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.pref-category h3 {
|
|
color: #ff006e;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.checkbox-group {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
border-radius: 4px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.checkbox-label:hover {
|
|
background: rgba(255, 0, 110, 0.1);
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.slider-container {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.slider-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
input[type="range"] {
|
|
width: 100%;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
background: #444;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: #ff006e;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type="range"]::-moz-range-thumb {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: #ff006e;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🎯 Preference Manager Test Suite</h1>
|
|
|
|
<!-- Automated Tests Section -->
|
|
<div class="test-section">
|
|
<h2>Automated Tests</h2>
|
|
<button onclick="runAllTests()">🧪 Run All Tests</button>
|
|
<div id="test-results" class="test-grid"></div>
|
|
</div>
|
|
|
|
<!-- Manual Testing Section -->
|
|
<div class="test-section">
|
|
<h2>Manual Testing</h2>
|
|
<div class="button-group">
|
|
<button onclick="showPreferences()">📊 Show Current Preferences</button>
|
|
<button onclick="testCheckpointModal(1)">🎬 Test L1 Checkpoint</button>
|
|
<button onclick="testCheckpointModal(5)">🎯 Test L5 Checkpoint</button>
|
|
<button onclick="testCheckpointModal(10)">⚡ Test L10 Checkpoint</button>
|
|
<button onclick="simulatePreferenceUpdate()">✏️ Simulate Update</button>
|
|
<button onclick="testContentFilter()">🔍 Show Content Filter</button>
|
|
<button onclick="showStats()">📈 Show Stats</button>
|
|
<button onclick="resetPreferences()">🔄 Reset All</button>
|
|
</div>
|
|
<div id="manual-output"></div>
|
|
</div>
|
|
|
|
<!-- Interactive Preference Editor -->
|
|
<div class="test-section">
|
|
<h2>Interactive Preference Editor</h2>
|
|
<div id="preference-editor"></div>
|
|
</div>
|
|
|
|
<!-- Progress Display -->
|
|
<div class="test-section">
|
|
<h2>Current State</h2>
|
|
<div id="progress-display" class="json-display"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load Dependencies -->
|
|
<script src="src/data/gameData.js"></script>
|
|
<script src="src/features/academy/preferenceManager.js"></script>
|
|
|
|
<script>
|
|
// Test runner
|
|
function runAllTests() {
|
|
const tests = [
|
|
testInitialization,
|
|
testCategoryUpdate,
|
|
testBulkUpdate,
|
|
testContentFilter,
|
|
testCheckpointDetection,
|
|
testFeatureDiscovery,
|
|
testBoundaries,
|
|
testPersistence,
|
|
testStats,
|
|
testReset
|
|
];
|
|
|
|
const resultsDiv = document.getElementById('test-results');
|
|
resultsDiv.innerHTML = '';
|
|
|
|
tests.forEach(test => {
|
|
const result = test();
|
|
const resultDiv = document.createElement('div');
|
|
resultDiv.className = `test-result ${result.pass ? 'pass' : 'fail'}`;
|
|
resultDiv.innerHTML = `
|
|
<h3>${result.pass ? '✓' : '✗'} ${result.name}</h3>
|
|
<p>${result.message}</p>
|
|
`;
|
|
resultsDiv.appendChild(resultDiv);
|
|
});
|
|
}
|
|
|
|
// Test 1: Initialization
|
|
function testInitialization() {
|
|
const prefs = window.preferenceManager.getPreferences();
|
|
const hasAllCategories = prefs.contentThemes && prefs.visualPreferences &&
|
|
prefs.intensity && prefs.captionTone &&
|
|
prefs.audioPreferences && prefs.sessionDuration &&
|
|
prefs.featurePreferences && prefs.boundaries;
|
|
|
|
return {
|
|
name: 'Initialization Test',
|
|
pass: hasAllCategories && prefs.version === 1,
|
|
message: hasAllCategories ? 'All 8 categories initialized correctly' : 'Missing categories'
|
|
};
|
|
}
|
|
|
|
// Test 2: Category Update
|
|
function testCategoryUpdate() {
|
|
const success = window.preferenceManager.updateCategoryPreferences('contentThemes', {
|
|
edging: true,
|
|
denial: true
|
|
}, 1);
|
|
|
|
const prefs = window.preferenceManager.getCategoryPreferences('contentThemes');
|
|
|
|
return {
|
|
name: 'Category Update Test',
|
|
pass: success && prefs.edging === true && prefs.denial === true,
|
|
message: success ? 'Successfully updated contentThemes' : 'Update failed'
|
|
};
|
|
}
|
|
|
|
// Test 3: Bulk Update
|
|
function testBulkUpdate() {
|
|
const updates = {
|
|
contentThemes: { gooning: true },
|
|
intensity: { visualIntensity: 4 }
|
|
};
|
|
|
|
const success = window.preferenceManager.updateMultipleCategories(updates, 5);
|
|
const prefs = window.preferenceManager.getPreferences();
|
|
|
|
return {
|
|
name: 'Bulk Update Test',
|
|
pass: success && prefs.contentThemes.gooning === true && prefs.intensity.visualIntensity === 4,
|
|
message: success ? 'Successfully updated multiple categories' : 'Bulk update failed'
|
|
};
|
|
}
|
|
|
|
// Test 4: Content Filter
|
|
function testContentFilter() {
|
|
const filter = window.preferenceManager.getContentFilter();
|
|
const hasRequiredFields = filter.themes && filter.visuals && filter.intensity && filter.exclude;
|
|
|
|
return {
|
|
name: 'Content Filter Test',
|
|
pass: hasRequiredFields && Array.isArray(filter.themes),
|
|
message: hasRequiredFields ? 'Content filter generated correctly' : 'Filter generation failed'
|
|
};
|
|
}
|
|
|
|
// Test 5: Checkpoint Detection
|
|
function testCheckpointDetection() {
|
|
const isL1Checkpoint = window.preferenceManager.isCheckpointLevel(1);
|
|
const isL5Checkpoint = window.preferenceManager.isCheckpointLevel(5);
|
|
const isL3NotCheckpoint = !window.preferenceManager.isCheckpointLevel(3);
|
|
|
|
return {
|
|
name: 'Checkpoint Detection Test',
|
|
pass: isL1Checkpoint && isL5Checkpoint && isL3NotCheckpoint,
|
|
message: 'Correctly identifies checkpoint levels (1,5,10,15,20,25)'
|
|
};
|
|
}
|
|
|
|
// Test 6: Feature Discovery
|
|
function testFeatureDiscovery() {
|
|
window.preferenceManager.discoverFeature('webcam');
|
|
window.preferenceManager.discoverFeature('tts');
|
|
|
|
const discovered = window.preferenceManager.getDiscoveredFeatures();
|
|
|
|
return {
|
|
name: 'Feature Discovery Test',
|
|
pass: discovered.includes('webcam') && discovered.includes('tts'),
|
|
message: `Discovered ${discovered.length} features: ${discovered.join(', ')}`
|
|
};
|
|
}
|
|
|
|
// Test 7: Boundaries
|
|
function testBoundaries() {
|
|
window.preferenceManager.addHardLimit('extreme-content');
|
|
const prefs = window.preferenceManager.getPreferences();
|
|
const hasLimit = prefs.boundaries.hardLimits.includes('extreme-content');
|
|
|
|
return {
|
|
name: 'Boundaries Test',
|
|
pass: hasLimit,
|
|
message: hasLimit ? 'Hard limit added successfully' : 'Failed to add hard limit'
|
|
};
|
|
}
|
|
|
|
// Test 8: Persistence
|
|
function testPersistence() {
|
|
window.preferenceManager.updateCategoryPreferences('visualPreferences', { pov: true });
|
|
const beforeSave = window.preferenceManager.getCategoryPreferences('visualPreferences').pov;
|
|
|
|
// Simulate reload
|
|
const savedData = JSON.parse(localStorage.getItem('webGame-data'));
|
|
const afterLoad = savedData.academyPreferences.visualPreferences.pov;
|
|
|
|
return {
|
|
name: 'Persistence Test',
|
|
pass: beforeSave === true && afterLoad === true,
|
|
message: beforeSave === afterLoad ? 'Preferences persist to localStorage' : 'Persistence failed'
|
|
};
|
|
}
|
|
|
|
// Test 9: Stats
|
|
function testStats() {
|
|
const stats = window.preferenceManager.getPreferenceStats();
|
|
const hasRequiredStats = stats.hasOwnProperty('totalCheckpoints') &&
|
|
stats.hasOwnProperty('activeThemes') &&
|
|
stats.hasOwnProperty('averageIntensity');
|
|
|
|
return {
|
|
name: 'Statistics Test',
|
|
pass: hasRequiredStats,
|
|
message: `Generated stats: ${stats.activeThemes} themes, avg intensity ${stats.averageIntensity}`
|
|
};
|
|
}
|
|
|
|
// Test 10: Reset
|
|
function testReset() {
|
|
const beforeReset = window.preferenceManager.getPreferences().contentThemes.edging;
|
|
window.preferenceManager.resetPreferences();
|
|
const afterReset = window.preferenceManager.getPreferences().contentThemes.edging;
|
|
|
|
return {
|
|
name: 'Reset Test',
|
|
pass: beforeReset === true && afterReset === false,
|
|
message: afterReset === false ? 'Preferences reset to defaults' : 'Reset failed'
|
|
};
|
|
}
|
|
|
|
// Manual testing functions
|
|
function showPreferences() {
|
|
const prefs = window.preferenceManager.getPreferences();
|
|
const outputDiv = document.getElementById('manual-output');
|
|
outputDiv.innerHTML = `<div class="status-box info">Current Preferences:</div>` +
|
|
`<div class="json-display">${JSON.stringify(prefs, null, 2)}</div>`;
|
|
}
|
|
|
|
function testCheckpointModal(level) {
|
|
const config = window.preferenceManager.getCheckpointModalConfig(level);
|
|
const outputDiv = document.getElementById('manual-output');
|
|
|
|
if (config) {
|
|
outputDiv.innerHTML = `<div class="status-box success">
|
|
<strong>Level ${level} Checkpoint Config:</strong><br>
|
|
Title: ${config.title}<br>
|
|
Description: ${config.description}<br>
|
|
Categories to show: ${config.categories.join(', ')}<br>
|
|
Is Initial: ${config.isInitial}
|
|
</div>`;
|
|
} else {
|
|
outputDiv.innerHTML = `<div class="status-box error">Level ${level} is not a checkpoint</div>`;
|
|
}
|
|
}
|
|
|
|
function simulatePreferenceUpdate() {
|
|
const updates = {
|
|
contentThemes: { worship: true, femdom: true },
|
|
intensity: { mentalIntensity: 4, taskDifficulty: 3 },
|
|
captionTone: { commanding: true, seductive: true }
|
|
};
|
|
|
|
window.preferenceManager.updateMultipleCategories(updates, 10);
|
|
|
|
const outputDiv = document.getElementById('manual-output');
|
|
outputDiv.innerHTML = `<div class="status-box success">
|
|
Simulated L10 checkpoint update:<br>
|
|
- Enabled worship & femdom themes<br>
|
|
- Set mental intensity to 4<br>
|
|
- Enabled commanding & seductive tones
|
|
</div>`;
|
|
}
|
|
|
|
function testContentFilter() {
|
|
const filter = window.preferenceManager.getContentFilter();
|
|
const outputDiv = document.getElementById('manual-output');
|
|
outputDiv.innerHTML = `<div class="status-box info">Generated Content Filter:</div>` +
|
|
`<div class="json-display">${JSON.stringify(filter, null, 2)}</div>`;
|
|
}
|
|
|
|
function showStats() {
|
|
const stats = window.preferenceManager.getPreferenceStats();
|
|
const outputDiv = document.getElementById('manual-output');
|
|
outputDiv.innerHTML = `<div class="status-box info">Preference Statistics:</div>` +
|
|
`<div class="json-display">${JSON.stringify(stats, null, 2)}</div>`;
|
|
}
|
|
|
|
function resetPreferences() {
|
|
if (confirm('Reset all preferences to defaults?')) {
|
|
window.preferenceManager.resetPreferences();
|
|
const outputDiv = document.getElementById('manual-output');
|
|
outputDiv.innerHTML = `<div class="status-box success">All preferences reset to defaults</div>`;
|
|
updateProgressDisplay();
|
|
}
|
|
}
|
|
|
|
function updateProgressDisplay() {
|
|
const prefs = window.preferenceManager.getPreferences();
|
|
document.getElementById('progress-display').textContent = JSON.stringify(prefs, null, 2);
|
|
}
|
|
|
|
// Initialize on load
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
updateProgressDisplay();
|
|
|
|
// Auto-refresh progress display every 2 seconds
|
|
setInterval(updateProgressDisplay, 2000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|