578 lines
20 KiB
HTML
578 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mechanical Counter - Client</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
|
|
<style>
|
|
@font-face {
|
|
font-family: 'OpenGostTypeB';
|
|
src: url('/static/fonts/OpenGost Type B/OpenGostTypeB.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'OpenGostTypeB', monospace;
|
|
background-color: #000;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.digit-wheel {
|
|
position: absolute;
|
|
width: 80px;
|
|
height: 120px;
|
|
background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow:
|
|
0 4px 8px rgba(0, 0, 0, 0.8),
|
|
inset 0 2px 4px rgba(255, 255, 255, 0.1);
|
|
border: 1px solid #444;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
|
|
|
|
.digit-wheel::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50%;
|
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent);
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
|
|
.digit-wheel::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50%;
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
|
|
.digit-strip {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1000px; /* 10 digits * 100px each */
|
|
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.digit {
|
|
width: 100%;
|
|
height: 100px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 48px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
|
|
border-bottom: 1px solid #333;
|
|
}
|
|
|
|
.digit:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.digit.active {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.status {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.status.connected {
|
|
background-color: rgba(0, 255, 0, 0.2);
|
|
color: #00ff00;
|
|
border: 1px solid #00ff00;
|
|
}
|
|
|
|
.status.disconnected {
|
|
background-color: rgba(255, 0, 0, 0.2);
|
|
color: #ff0000;
|
|
border: 1px solid #ff0000;
|
|
}
|
|
|
|
.counter-label {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 18px;
|
|
color: #666;
|
|
text-align: center;
|
|
}
|
|
|
|
.mechanical-sound {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.mechanical-sound::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, #ffffff, transparent);
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.digit-wheel.animating .mechanical-sound::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Glitch effect for mechanical feel */
|
|
.digit-wheel.animating .digit.active {
|
|
animation: glitch 0.1s ease-in-out;
|
|
}
|
|
|
|
@keyframes glitch {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-1px); }
|
|
75% { transform: translateX(1px); }
|
|
}
|
|
|
|
/* Mechanical click sound simulation */
|
|
.click-indicator {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 4px;
|
|
height: 4px;
|
|
background: #ffffff;
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
z-index: 3;
|
|
}
|
|
|
|
.digit-wheel.animating .click-indicator {
|
|
animation: click 0.8s ease-in-out;
|
|
}
|
|
|
|
@keyframes click {
|
|
0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
|
|
50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
|
|
100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="status" class="status disconnected">Disconnected</div>
|
|
|
|
<div class="digit-wheel" id="digit0" data-position="0" style="left: 50px; top: 200px;">
|
|
<div class="mechanical-sound"></div>
|
|
<div class="click-indicator"></div>
|
|
<div class="digit-strip" data-current="0">
|
|
<div class="digit">0</div>
|
|
<div class="digit">1</div>
|
|
<div class="digit">2</div>
|
|
<div class="digit">3</div>
|
|
<div class="digit">4</div>
|
|
<div class="digit">5</div>
|
|
<div class="digit">6</div>
|
|
<div class="digit">7</div>
|
|
<div class="digit">8</div>
|
|
<div class="digit">9</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="digit-wheel" id="digit1" data-position="1" style="left: 150px; top: 200px;">
|
|
<div class="mechanical-sound"></div>
|
|
<div class="click-indicator"></div>
|
|
<div class="digit-strip" data-current="0">
|
|
<div class="digit">0</div>
|
|
<div class="digit">1</div>
|
|
<div class="digit">2</div>
|
|
<div class="digit">3</div>
|
|
<div class="digit">4</div>
|
|
<div class="digit">5</div>
|
|
<div class="digit">6</div>
|
|
<div class="digit">7</div>
|
|
<div class="digit">8</div>
|
|
<div class="digit">9</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="digit-wheel" id="digit2" data-position="2" style="left: 250px; top: 200px;">
|
|
<div class="mechanical-sound"></div>
|
|
<div class="click-indicator"></div>
|
|
<div class="digit-strip" data-current="0">
|
|
<div class="digit">0</div>
|
|
<div class="digit">1</div>
|
|
<div class="digit">2</div>
|
|
<div class="digit">3</div>
|
|
<div class="digit">4</div>
|
|
<div class="digit">5</div>
|
|
<div class="digit">6</div>
|
|
<div class="digit">7</div>
|
|
<div class="digit">8</div>
|
|
<div class="digit">9</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="digit-wheel" id="digit3" data-position="3" style="left: 350px; top: 200px;">
|
|
<div class="mechanical-sound"></div>
|
|
<div class="click-indicator"></div>
|
|
<div class="digit-strip" data-current="0">
|
|
<div class="digit">0</div>
|
|
<div class="digit">1</div>
|
|
<div class="digit">2</div>
|
|
<div class="digit">3</div>
|
|
<div class="digit">4</div>
|
|
<div class="digit">5</div>
|
|
<div class="digit">6</div>
|
|
<div class="digit">7</div>
|
|
<div class="digit">8</div>
|
|
<div class="digit">9</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="digit-wheel" id="digit4" data-position="4" style="left: 450px; top: 200px;">
|
|
<div class="mechanical-sound"></div>
|
|
<div class="click-indicator"></div>
|
|
<div class="digit-strip" data-current="0">
|
|
<div class="digit">0</div>
|
|
<div class="digit">1</div>
|
|
<div class="digit">2</div>
|
|
<div class="digit">3</div>
|
|
<div class="digit">4</div>
|
|
<div class="digit">5</div>
|
|
<div class="digit">6</div>
|
|
<div class="digit">7</div>
|
|
<div class="digit">8</div>
|
|
<div class="digit">9</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="digit-wheel" id="digit5" data-position="5" style="left: 550px; top: 200px;">
|
|
<div class="mechanical-sound"></div>
|
|
<div class="click-indicator"></div>
|
|
<div class="digit-strip" data-current="0">
|
|
<div class="digit">0</div>
|
|
<div class="digit">1</div>
|
|
<div class="digit">2</div>
|
|
<div class="digit">3</div>
|
|
<div class="digit">4</div>
|
|
<div class="digit">5</div>
|
|
<div class="digit">6</div>
|
|
<div class="digit">7</div>
|
|
<div class="digit">8</div>
|
|
<div class="digit">9</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="counter-label">
|
|
Mechanical Counter Display
|
|
</div>
|
|
|
|
<script>
|
|
// Connect to WebSocket server
|
|
const socket = io();
|
|
const statusDiv = document.getElementById('status');
|
|
const digitWheels = document.querySelectorAll('.digit-wheel');
|
|
|
|
// Current counter values
|
|
let currentValues = [0, 0, 0, 0, 0, 0];
|
|
|
|
// Viewport dimensions
|
|
let viewportWidth = window.innerWidth;
|
|
let viewportHeight = window.innerHeight;
|
|
|
|
// Animation speed (default value)
|
|
let currentAnimationSpeed = 0.5;
|
|
|
|
// Connection status
|
|
socket.on('connect', function() {
|
|
statusDiv.textContent = 'Connected';
|
|
statusDiv.className = 'status connected';
|
|
console.log('Connected to server');
|
|
|
|
// Send viewport dimensions to controller
|
|
sendViewportDimensions();
|
|
});
|
|
|
|
socket.on('disconnect', function() {
|
|
statusDiv.textContent = 'Disconnected';
|
|
statusDiv.className = 'status disconnected';
|
|
console.log('Disconnected from server');
|
|
});
|
|
|
|
// Handle counter updates
|
|
socket.on('counter_update', function(data) {
|
|
console.log('Received counter update:', data);
|
|
updateCounter(data.values || data);
|
|
});
|
|
|
|
// Handle position updates
|
|
socket.on('position_update', function(data) {
|
|
console.log('Received position update:', data);
|
|
updatePositions(data.positions || data);
|
|
});
|
|
|
|
// Handle viewport requests from controller
|
|
socket.on('request_viewport', function(data) {
|
|
console.log('Received viewport request:', data);
|
|
sendViewportDimensions();
|
|
});
|
|
|
|
// Handle font size updates from controller
|
|
socket.on('font_size_update', function(data) {
|
|
console.log('Received font size update:', data);
|
|
updateFontSize(data.fontSize || data);
|
|
});
|
|
|
|
// Handle wheel size updates from controller
|
|
socket.on('wheel_size_update', function(data) {
|
|
console.log('Received wheel size update:', data);
|
|
updateWheelSize(data.width, data.height);
|
|
});
|
|
|
|
// Handle animation speed updates from controller
|
|
socket.on('animation_speed_update', function(data) {
|
|
console.log('Received animation speed update:', data);
|
|
updateAnimationSpeed(data.speed || data);
|
|
});
|
|
|
|
// Handle general events (for backward compatibility)
|
|
socket.on('receive_event', function(data) {
|
|
console.log('Received event:', data);
|
|
if (data.type === 'counter' || data.values) {
|
|
updateCounter(data.values || data);
|
|
}
|
|
if (data.type === 'position' || data.positions) {
|
|
updatePositions(data.positions || data);
|
|
}
|
|
if (data.type === 'font_size' || data.fontSize) {
|
|
updateFontSize(data.fontSize || data);
|
|
}
|
|
if (data.type === 'wheel_size' || (data.width && data.height)) {
|
|
updateWheelSize(data.width, data.height);
|
|
}
|
|
if (data.type === 'animation_speed' || data.speed) {
|
|
updateAnimationSpeed(data.speed || data);
|
|
}
|
|
});
|
|
|
|
function updateCounter(values) {
|
|
// Ensure we have 6 values
|
|
const newValues = Array.isArray(values) ? values : [values];
|
|
while (newValues.length < 6) {
|
|
newValues.unshift(0);
|
|
}
|
|
|
|
// Update each digit wheel
|
|
newValues.forEach((value, index) => {
|
|
if (index < 6 && value !== currentValues[index]) {
|
|
animateDigitWheel(index, currentValues[index], value);
|
|
currentValues[index] = value;
|
|
}
|
|
});
|
|
}
|
|
|
|
function updatePositions(positions) {
|
|
console.log('Updating positions:', positions);
|
|
positions.forEach((pos, index) => {
|
|
const wheel = document.getElementById(`digit${index}`);
|
|
console.log(`Digit ${index}:`, pos, wheel);
|
|
if (wheel && pos.x !== undefined && pos.y !== undefined) {
|
|
wheel.style.left = pos.x + 'px';
|
|
wheel.style.top = pos.y + 'px';
|
|
console.log(`Moved digit ${index} to ${pos.x}, ${pos.y}`);
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateFontSize(fontSize) {
|
|
console.log('Updating font size to:', fontSize);
|
|
const digits = document.querySelectorAll('.digit');
|
|
digits.forEach((digit, index) => {
|
|
digit.style.fontSize = fontSize + 'px';
|
|
console.log(`Updated digit ${index} font size to ${fontSize}px`);
|
|
});
|
|
}
|
|
|
|
function updateWheelSize(width, height) {
|
|
console.log('Updating wheel size to:', width, 'x', height);
|
|
const wheels = document.querySelectorAll('.digit-wheel');
|
|
wheels.forEach((wheel, index) => {
|
|
wheel.style.width = width + 'px';
|
|
wheel.style.height = height + 'px';
|
|
console.log(`Updated wheel ${index} size to ${width}x${height}px`);
|
|
});
|
|
|
|
// Also update the digit strip height to accommodate the new wheel height
|
|
const digitStrips = document.querySelectorAll('.digit-strip');
|
|
digitStrips.forEach((strip, index) => {
|
|
const digitHeight = height; // Each digit takes full wheel height
|
|
strip.style.height = (digitHeight * 10) + 'px'; // 10 digits
|
|
console.log(`Updated digit strip ${index} height to ${digitHeight * 10}px`);
|
|
|
|
// Recalculate and maintain the current digit position
|
|
const currentValue = parseInt(strip.getAttribute('data-current') || '0');
|
|
const targetY = -(currentValue * height);
|
|
strip.style.transform = `translateY(${targetY}px)`;
|
|
});
|
|
|
|
// Update individual digit heights and widths
|
|
const digits = document.querySelectorAll('.digit');
|
|
digits.forEach((digit, index) => {
|
|
digit.style.height = height + 'px';
|
|
digit.style.width = width + 'px';
|
|
console.log(`Updated digit ${index} size to ${width}x${height}px`);
|
|
});
|
|
}
|
|
|
|
function updateAnimationSpeed(speed) {
|
|
console.log('Updating animation speed to:', speed);
|
|
currentAnimationSpeed = speed;
|
|
|
|
// Update all digit strips with new animation speed
|
|
const digitStrips = document.querySelectorAll('.digit-strip');
|
|
digitStrips.forEach((strip, index) => {
|
|
strip.style.transition = `transform ${speed}s cubic-bezier(0.25, 0.46, 0.45, 0.94)`;
|
|
console.log(`Updated digit strip ${index} animation speed to ${speed}s`);
|
|
});
|
|
}
|
|
|
|
function animateDigitWheel(position, fromValue, toValue) {
|
|
const wheel = digitWheels[position];
|
|
const strip = wheel.querySelector('.digit-strip');
|
|
|
|
if (!wheel || !strip) return;
|
|
|
|
// Get current wheel height for proper positioning
|
|
const wheelHeight = parseInt(wheel.style.height) || 120; // Default fallback
|
|
|
|
// Calculate the target position using current wheel height
|
|
const targetY = -(toValue * wheelHeight);
|
|
|
|
// Add animation class
|
|
wheel.classList.add('animating');
|
|
|
|
// Animate the strip
|
|
strip.style.transform = `translateY(${targetY}px)`;
|
|
strip.setAttribute('data-current', toValue);
|
|
|
|
// Update active digit
|
|
const digits = strip.querySelectorAll('.digit');
|
|
digits.forEach((digit, index) => {
|
|
digit.classList.toggle('active', index === toValue);
|
|
});
|
|
|
|
// Remove animation class after animation completes
|
|
setTimeout(() => {
|
|
wheel.classList.remove('animating');
|
|
}, currentAnimationSpeed * 1000);
|
|
}
|
|
|
|
// Initialize counter display
|
|
function initializeCounter() {
|
|
digitWheels.forEach((wheel, index) => {
|
|
const strip = wheel.querySelector('.digit-strip');
|
|
const digits = strip.querySelectorAll('.digit');
|
|
|
|
// Set initial active digit
|
|
digits[0].classList.add('active');
|
|
|
|
// Set initial position
|
|
strip.style.transform = 'translateY(0px)';
|
|
strip.setAttribute('data-current', '0');
|
|
});
|
|
}
|
|
|
|
// Initialize on page load
|
|
window.addEventListener('load', function() {
|
|
initializeCounter();
|
|
});
|
|
|
|
// Handle window resize
|
|
window.addEventListener('resize', function() {
|
|
viewportWidth = window.innerWidth;
|
|
viewportHeight = window.innerHeight;
|
|
sendViewportDimensions();
|
|
});
|
|
|
|
function sendViewportDimensions() {
|
|
const viewportData = {
|
|
type: 'viewport_update',
|
|
width: viewportWidth,
|
|
height: viewportHeight,
|
|
timestamp: new Date().toISOString()
|
|
};
|
|
|
|
console.log('Sending viewport dimensions:', viewportData);
|
|
socket.emit('viewport_update', viewportData);
|
|
}
|
|
|
|
// Add some mechanical sound simulation
|
|
function playMechanicalSound() {
|
|
// Create a simple mechanical click sound using Web Audio API
|
|
try {
|
|
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
|
const oscillator = audioContext.createOscillator();
|
|
const gainNode = audioContext.createGain();
|
|
|
|
oscillator.connect(gainNode);
|
|
gainNode.connect(audioContext.destination);
|
|
|
|
oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
|
|
oscillator.frequency.exponentialRampToValueAtTime(400, audioContext.currentTime + 0.1);
|
|
|
|
gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
|
|
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
|
|
|
|
oscillator.start(audioContext.currentTime);
|
|
oscillator.stop(audioContext.currentTime + 0.1);
|
|
} catch (e) {
|
|
console.log('Audio not supported');
|
|
}
|
|
}
|
|
|
|
// Play sound when digits animate
|
|
document.addEventListener('animationstart', function(e) {
|
|
if (e.target.classList.contains('digit-wheel')) {
|
|
playMechanicalSound();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |