CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Bogosort Visualizer</title>
<style>
.enhancedbogosort5329-container {
font-family: Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
display: flex;
flex-wrap: wrap;
background-color: white;
}
.enhancedbogosort5329-controls {
flex: 1;
min-width: 300px;
margin-right: 20px;
}
.enhancedbogosort5329-visualization {
flex: 2;
min-width: 300px;
}
.enhancedbogosort5329-block-container {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 20px;
}
.enhancedbogosort5329-block {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: white;
border-radius: 5px;
transition: all 0.3s ease;
}
.enhancedbogosort5329-button {
background-color: #2ecc71;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
.enhancedbogosort5329-input {
width: 100%;
padding: 10px;
margin: 10px 0;
box-sizing: border-box;
}
.enhancedbogosort5329-title {
color: #2c3e50;
}
.enhancedbogosort5329-description {
color: #34495e;
}
.enhancedbogosort5329-instructions {
background-color: #ecf0f1;
padding: 15px;
border-radius: 5px;
}
.enhancedbogosort5329-stats {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="enhancedbogosort5329-container">
<div class="enhancedbogosort5329-controls">
<h1 class="enhancedbogosort5329-title">Enhanced Bogosort Visualizer</h1>
<p class="enhancedbogosort5329-description">Visualize the enhanced bogosort algorithm in action!</p>
<div class="enhancedbogosort5329-instructions">
<h3>How to play:</h3>
<ol>
<li>Set the array size (1-20)</li>
<li>Adjust sorting speed</li>
<li>Click "Start" to begin visualization</li>
<li>Use "Pause/Resume" to control the process</li>
<li>Click "New Game" to reset with a new array</li>
</ol>
</div>
<input type="number" id="enhancedbogosort5329-array-size" class="enhancedbogosort5329-input" min="1" max="20" value="10" placeholder="Array size (1-20)">
<input type="range" id="enhancedbogosort5329-speed" class="enhancedbogosort5329-input" min="1" max="100" value="50">
<button id="enhancedbogosort5329-start" class="enhancedbogosort5329-button">Start</button>
<button id="enhancedbogosort5329-pause" class="enhancedbogosort5329-button">Pause</button>
<button id="enhancedbogosort5329-new-game" class="enhancedbogosort5329-button">New Game</button>
<div id="enhancedbogosort5329-stats" class="enhancedbogosort5329-stats">Iterations: 0</div>
</div>
<div class="enhancedbogosort5329-visualization">
<div id="enhancedbogosort5329-block-container" class="enhancedbogosort5329-block-container"></div>
</div>
</div>
<script>
class EnhancedBogosort {
constructor(size) {
this.array = this.generateRandomArray(size);
this.size = size;
this.sorting = false;
this.paused = false;
this.speed = 50;
this.iterations = 0;
}
generateRandomArray(size) {
return Array.from({length: size}, (_, i) => i + 1).sort(() => Math.random() - 0.5);
}
isSorted() {
for (let i = 1; i < this.array.length; i++) {
if (this.array[i] < this.array[i - 1]) return false;
}
return true;
}
shuffle() {
for (let i = this.array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[this.array[i], this.array[j]] = [this.array[j], this.array[i]];
}
}
localImprovement() {
for (let i = 1; i < this.array.length; i++) {
if (this.array[i] < this.array[i - 1]) {
[this.array[i], this.array[i - 1]] = [this.array[i - 1], this.array[i]];
}
}
}
async sort() {
this.sorting = true;
while (!this.isSorted() && this.sorting) {
if (!this.paused) {
this.shuffle();
this.localImprovement();
this.iterations++;
this.updateVisualization();
await new Promise(resolve => setTimeout(resolve, 1000 - this.speed * 9));
} else {
await new Promise(resolve => setTimeout(resolve, 100));
}
}
this.sorting = false;
this.updateVisualization();
}
updateVisualization() {
const container = document.getElementById('enhancedbogosort5329-block-container');
container.innerHTML = '';
this.array.forEach(value => {
const block = document.createElement('div');
block.className = 'enhancedbogosort5329-block';
block.textContent = value;
block.style.backgroundColor = this.getColor(value);
container.appendChild(block);
});
document.getElementById('enhancedbogosort5329-stats').textContent = `Iterations: ${this.iterations}`;
}
getColor(value) {
const hue = (value / this.size) * 360;
return `hsl(${hue}, 100%, 50%)`;
}
}
let sorter;
document.getElementById('enhancedbogosort5329-start').addEventListener('click', () => {
if (!sorter || !sorter.sorting) {
const size = parseInt(document.getElementById('enhancedbogosort5329-array-size').value);
sorter = new EnhancedBogosort(size);
sorter.updateVisualization();
sorter.sort();
}
});
document.getElementById('enhancedbogosort5329-pause').addEventListener('click', () => {
if (sorter) {
sorter.paused = !sorter.paused;
document.getElementById('enhancedbogosort5329-pause').textContent = sorter.paused ? 'Resume' : 'Pause';
}
});
document.getElementById('enhancedbogosort5329-new-game').addEventListener('click', () => {
if (sorter) {
sorter.sorting = false;
}
const size = parseInt(document.getElementById('enhancedbogosort5329-array-size').value);
sorter = new EnhancedBogosort(size);
sorter.updateVisualization();
});
document.getElementById('enhancedbogosort5329-speed').addEventListener('input', (event) => {
if (sorter) {
sorter.speed = parseInt(event.target.value);
}
});
// Initialize
sorter = new EnhancedBogosort(10);
sorter.updateVisualization();
</script>
</body>
</html>