Untitled

// Get the container element
var container = document.querySelector('.emoticon-buttons');

// Get all the buttons inside the container
var buttons = container.querySelectorAll('button');

// Get the width and height of the container
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;

// Get the width and height of a single button (assuming all buttons have the same dimensions)
var buttonWidth = buttons[0].offsetWidth;
var buttonHeight = buttons[0].offsetHeight;

// Calculate the number of columns based on the container width and the width of buttons
var columns = Math.floor(containerWidth / buttonWidth);

// Calculate the number of rows based on the container height and the height of buttons
var rows = Math.floor(containerHeight / buttonHeight);

// Create a style element and append it to the head
var styleElement = document.createElement('style');
document.head.appendChild(styleElement);

// Initialize variables to track the focused button index
var focusedButtonIndex = 0;

// Attach a click event listener to each button
buttons.forEach(function(button, index) {
  button.addEventListener('click', function() {
    // Update the focused button index when a button is clicked
    focusedButtonIndex = index;
    updateFocus();
  });
});

// Log the inferred number of rows, columns, button width, and button height
console.log('Inferred Number of Rows:', rows);
console.log('Inferred Number of Columns:', columns);
console.log('Button Width:', buttonWidth);
console.log('Button Height:', buttonHeight);

// Log the width and height of the container
console.log('Container Width:', containerWidth);
console.log('Container Height:', containerHeight);

// Update the focus based on the focusedButtonIndex
function updateFocus() {
  buttons.forEach(function(button, index) {
    // Remove focus from all buttons
    button.classList.remove('focused');

    // Add focus to the button with the focusedButtonIndex
    if (index === focusedButtonIndex) {
      button.classList.add('focused');
      button.focus();
    }
  });
}

// Handle arrow key navigation
document.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      focusedButtonIndex = Math.max(0, focusedButtonIndex - 1);
      updateFocus();
      break;
    case 'ArrowRight':
      focusedButtonIndex = Math.min(buttons.length - 1, focusedButtonIndex + 1);
      updateFocus();
      break;
    case 'ArrowUp':
      focusedButtonIndex = Math.max(0, focusedButtonIndex - columns);
      updateFocus();
      break;
    case 'ArrowDown':
      focusedButtonIndex = Math.min(buttons.length - 1, focusedButtonIndex + columns);
      updateFocus();
      break;
  }
});

// Set the styles for the 'focused' class
styleElement.textContent = `
  .focused {
    border: 2px solid #ff0000 !important; /* Red border */
  }
`;