prototype 1
This commit is contained in:
342
static/js/operation.js
Normal file
342
static/js/operation.js
Normal file
@@ -0,0 +1,342 @@
|
||||
// Initialize the clock
|
||||
// Define Matrices
|
||||
const IDENTITY_MATRIX = [
|
||||
[1, 0, 0],
|
||||
[0, 1, 0],
|
||||
[0, 0, 1]
|
||||
];
|
||||
|
||||
const MODIFIED_MATRIX = [
|
||||
[0.6, 0.3, 0.1], // Red: Strongly H, Medium M, Weak S
|
||||
[0.1, 0.6, 0.3], // Green: Weak H, Strongly M, Medium S
|
||||
[0.3, 0.1, 0.6] // Blue: Medium H, Weak M, Strongly S
|
||||
];
|
||||
|
||||
const CLOCK_TYPES = {
|
||||
'linear_crt': {
|
||||
class: CRTClock,
|
||||
matrix: IDENTITY_MATRIX,
|
||||
label: 'Linear CRT'
|
||||
},
|
||||
'modified_crt': {
|
||||
class: CRTClock,
|
||||
matrix: MODIFIED_MATRIX,
|
||||
label: 'Modified CRT'
|
||||
},
|
||||
'linear_cosine_crt': {
|
||||
class: CRTCosineClock,
|
||||
matrix: IDENTITY_MATRIX,
|
||||
label: 'Linear Cosine CRT'
|
||||
},
|
||||
'modified_cosine_crt': {
|
||||
class: CRTCosineClock,
|
||||
matrix: MODIFIED_MATRIX,
|
||||
label: 'Modified Cosine CRT'
|
||||
}
|
||||
};
|
||||
|
||||
let currentClockType = 'modified_cosine_crt'; // Default
|
||||
let clock = new CRTCosineClock(MODIFIED_MATRIX);
|
||||
|
||||
const container = document.getElementById('boxContainer');
|
||||
const clockSelect = document.getElementById('clockSelect');
|
||||
const flushButton = document.getElementById('flushButton');
|
||||
const infoPanel = document.getElementById('infoPanel');
|
||||
const infoClock = document.getElementById('infoClock');
|
||||
const infoTime = document.getElementById('infoTime');
|
||||
const infoRGB = document.getElementById('infoRGB');
|
||||
const colorPreview = document.getElementById('colorPreview');
|
||||
|
||||
const MAX_BOXES = 256;
|
||||
let zIndexCounter = 1;
|
||||
let isHovering = false;
|
||||
let pendingBoxes = [];
|
||||
|
||||
function saveState() {
|
||||
const boxesData = [];
|
||||
for (let i = 0; i < container.children.length; i++) {
|
||||
const box = container.children[i];
|
||||
boxesData.push({
|
||||
time: box.dataset.time,
|
||||
rgb: box.dataset.rgb,
|
||||
clockinfo: box.dataset.clockinfo,
|
||||
zIndex: box.style.zIndex
|
||||
});
|
||||
}
|
||||
const state = {
|
||||
boxes: boxesData,
|
||||
zIndexCounter: zIndexCounter
|
||||
};
|
||||
localStorage.setItem('clockEngagementState', JSON.stringify(state));
|
||||
}
|
||||
|
||||
function loadState() {
|
||||
const savedState = localStorage.getItem('clockEngagementState');
|
||||
if (savedState) {
|
||||
try {
|
||||
const state = JSON.parse(savedState);
|
||||
if (state.zIndexCounter) {
|
||||
zIndexCounter = state.zIndexCounter;
|
||||
}
|
||||
if (Array.isArray(state.boxes)) {
|
||||
state.boxes.forEach(data => {
|
||||
const box = document.createElement('div');
|
||||
box.className = 'box';
|
||||
box.style.backgroundColor = data.rgb;
|
||||
box.style.zIndex = data.zIndex;
|
||||
box.dataset.time = data.time;
|
||||
box.dataset.rgb = data.rgb;
|
||||
|
||||
// Restore without animation for saved state
|
||||
box.classList.add('entered');
|
||||
|
||||
box.dataset.clockinfo = data.clockinfo;
|
||||
container.appendChild(box);
|
||||
});
|
||||
updateLayout();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to load state:", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateLayout() {
|
||||
// Dynamic compression logic
|
||||
const count = container.children.length;
|
||||
|
||||
// Get current box size from CSS variable
|
||||
const boxSizePx = getComputedStyle(document.documentElement).getPropertyValue('--box-size').trim();
|
||||
const boxSize = parseInt(boxSizePx, 10) || 300;
|
||||
|
||||
let visibleWidth = 80;
|
||||
if (count > 10) {
|
||||
// Decrease visibility as count increases (basic linear interpolation)
|
||||
visibleWidth = Math.max(22, 80 - (1 * (count - 5)));
|
||||
}
|
||||
const overlap = -(boxSize - visibleWidth);
|
||||
container.style.setProperty('--card-overlap', `${overlap}px`);
|
||||
}
|
||||
|
||||
function flushPendingBoxes() {
|
||||
if (pendingBoxes.length === 0) return;
|
||||
|
||||
// Add all pending boxes
|
||||
while (pendingBoxes.length > 0) {
|
||||
const box = pendingBoxes.shift();
|
||||
container.appendChild(box);
|
||||
// Force reflow and animate
|
||||
void box.offsetWidth;
|
||||
box.classList.add('entered');
|
||||
}
|
||||
|
||||
// Remove excess boxes
|
||||
while (container.children.length > MAX_BOXES) {
|
||||
container.removeChild(container.firstChild);
|
||||
}
|
||||
updateLayout();
|
||||
saveState();
|
||||
}
|
||||
|
||||
container.addEventListener('mouseenter', () => {
|
||||
isHovering = true;
|
||||
});
|
||||
|
||||
container.addEventListener('mouseleave', () => {
|
||||
isHovering = false;
|
||||
infoPanel.classList.remove('visible'); // Hide info panel
|
||||
flushPendingBoxes();
|
||||
});
|
||||
|
||||
// Event delegation for box hovering to show info
|
||||
container.addEventListener('mouseover', (e) => {
|
||||
const box = e.target.closest('.box');
|
||||
if (box) {
|
||||
const time = box.dataset.time;
|
||||
const rgb = box.dataset.rgb;
|
||||
|
||||
if (time && rgb) {
|
||||
infoTime.textContent = time;
|
||||
infoRGB.textContent = rgb;
|
||||
infoClock.textContent = box.dataset.clockinfo || "Unknown";
|
||||
colorPreview.style.backgroundColor = rgb;
|
||||
infoPanel.classList.add('visible');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function createBox() {
|
||||
const box = document.createElement('div');
|
||||
box.className = 'box';
|
||||
|
||||
// Calculate color based on current time
|
||||
const now = new Date();
|
||||
const color = clock.transform(now);
|
||||
const r = Math.floor(color[0] * 255);
|
||||
const g = Math.floor(color[1] * 255);
|
||||
const b = Math.floor(color[2] * 255);
|
||||
const rgbStr = `rgb(${r}, ${g}, ${b})`;
|
||||
|
||||
box.style.backgroundColor = rgbStr;
|
||||
|
||||
// Store data for info panel
|
||||
box.dataset.time = now.toLocaleTimeString();
|
||||
box.dataset.rgb = rgbStr;
|
||||
|
||||
// Get label from CLOCK_TYPES using currentClockType
|
||||
let typeInfo = CLOCK_TYPES[currentClockType];
|
||||
// Fallback if not found (should not happen normally)
|
||||
const typeLabel = typeInfo ? typeInfo.label : "Unknown Clock";
|
||||
|
||||
box.dataset.clockinfo = typeLabel;
|
||||
|
||||
// Ensure the new box is visually on top of the older ones
|
||||
box.style.zIndex = zIndexCounter++;
|
||||
|
||||
if (isHovering) {
|
||||
// Create it but don't show it yet (prevent visual shift)
|
||||
pendingBoxes.push(box);
|
||||
} else {
|
||||
// Append to the end (right side, newest)
|
||||
container.appendChild(box);
|
||||
|
||||
// Trigger reflow to ensure the initial state is rendered before adding the class
|
||||
void box.offsetWidth;
|
||||
box.classList.add('entered');
|
||||
|
||||
// Limit the number of boxes
|
||||
if (container.children.length > MAX_BOXES) {
|
||||
container.removeChild(container.firstChild);
|
||||
}
|
||||
updateLayout();
|
||||
saveState();
|
||||
}
|
||||
}
|
||||
|
||||
// Load saved state on startup
|
||||
loadState();
|
||||
|
||||
function setClockType(type) {
|
||||
const config = CLOCK_TYPES[type];
|
||||
if (config) {
|
||||
currentClockType = type;
|
||||
// Instantiate the clock with the specific matrix
|
||||
clock = new config.class(config.matrix);
|
||||
clockSelect.value = type;
|
||||
localStorage.setItem('clockType', type);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize clock selection from localStorage
|
||||
const savedClockType = localStorage.getItem('clockType');
|
||||
// Validate if saved type exists in our new structure
|
||||
if (savedClockType && CLOCK_TYPES[savedClockType]) {
|
||||
setClockType(savedClockType);
|
||||
} else {
|
||||
// Default fallback
|
||||
setClockType('modified_cosine_crt');
|
||||
}
|
||||
|
||||
// Clock selection handler
|
||||
clockSelect.addEventListener('change', (e) => {
|
||||
setClockType(e.target.value);
|
||||
});
|
||||
|
||||
// Flush Button Logic
|
||||
flushButton.addEventListener('click', () => {
|
||||
// Confirm before flushing if there are many items
|
||||
if (container.children.length > 0) {
|
||||
// Clear DOM
|
||||
while (container.firstChild) {
|
||||
container.removeChild(container.firstChild);
|
||||
}
|
||||
// Clear pending boxes
|
||||
pendingBoxes = [];
|
||||
// Reset zIndex (optional, but cleaner)
|
||||
// zIndexCounter = 1;
|
||||
|
||||
// Reset scroll
|
||||
currentOffset = 0;
|
||||
container.style.setProperty('--scroll-offset', '0px');
|
||||
|
||||
// Update stats and storage
|
||||
updateLayout();
|
||||
saveState();
|
||||
}
|
||||
});
|
||||
|
||||
// Swipe / Drag Logic
|
||||
let isDragging = false;
|
||||
let startX = 0;
|
||||
let currentOffset = 0;
|
||||
let initialDragOffset = 0;
|
||||
|
||||
// Add event listeners to the container (or window/document if you want full screen drag)
|
||||
// Using window for smoother drag even if mouse leaves container
|
||||
window.addEventListener('mousedown', (e) => {
|
||||
// Only start drag if not clicking on the info panel
|
||||
if (e.target.closest('#infoPanel')) return;
|
||||
|
||||
isDragging = true;
|
||||
startX = e.clientX;
|
||||
initialDragOffset = currentOffset;
|
||||
container.style.cursor = 'grabbing';
|
||||
});
|
||||
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
if (!isDragging) return;
|
||||
e.preventDefault(); // Prevent text selection etc
|
||||
|
||||
const deltaX = e.clientX - startX;
|
||||
let newOffset = initialDragOffset + deltaX;
|
||||
|
||||
// Bounds (optional but good)
|
||||
// Min offset 0 (cannot pull the newest card further left/center is looked) -> Actually prevent pull to left
|
||||
if (newOffset < 0) newOffset = 0;
|
||||
|
||||
// Max offset? Rough estimate: Total width.
|
||||
// Just letting it be somewhat open for now or we can calculate.
|
||||
// Ideally we stop when the first card reaches center.
|
||||
// But let's keep it simple first.
|
||||
|
||||
currentOffset = newOffset;
|
||||
container.style.setProperty('--scroll-offset', `${currentOffset}px`);
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', () => {
|
||||
isDragging = false;
|
||||
container.style.cursor = 'grab';
|
||||
});
|
||||
|
||||
// Touch support for mobile
|
||||
window.addEventListener('touchstart', (e) => {
|
||||
if (e.target.closest('#infoPanel')) return;
|
||||
isDragging = true;
|
||||
startX = e.touches[0].clientX;
|
||||
initialDragOffset = currentOffset;
|
||||
}, { passive: false });
|
||||
|
||||
window.addEventListener('touchmove', (e) => {
|
||||
if (!isDragging) return;
|
||||
if (e.cancelable) e.preventDefault(); // Block browser scroll
|
||||
|
||||
const deltaX = e.touches[0].clientX - startX;
|
||||
let newOffset = initialDragOffset + deltaX;
|
||||
|
||||
if (newOffset < 0) newOffset = 0;
|
||||
|
||||
currentOffset = newOffset;
|
||||
container.style.setProperty('--scroll-offset', `${currentOffset}px`);
|
||||
});
|
||||
|
||||
window.addEventListener('touchend', () => {
|
||||
isDragging = false;
|
||||
});
|
||||
|
||||
|
||||
// Create a box every 1 second (1000ms)
|
||||
setInterval(createBox, 1000);
|
||||
|
||||
// Initialize with one box immediately
|
||||
createBox();
|
||||
Reference in New Issue
Block a user