is-critter/asset/frontend.js

// Initialize session variables
let sessionStartTime
let lastButtonClickTime

// Function to fetch a random animal name from the server
async function getNextAnimal () {
  try {
    const response = await fetch('/getNextAnimal')
    const data = await response.json()
    document.getElementById('animal-name').textContent = data.animalName
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}

// Function to set or retrieve the session ID cookie
function getSessionId () {
  const sessionId = document.cookie.replace(
    /(?:(?:^|.*;\s*)sessionId\s*=\s*([^;]*).*$)|^.*$/,
    '$1'
  )
  if (!sessionId) {
    return newSession()
  }
  return sessionId
}

async function newSession () {
  setSessionStartTime()
  try {
    const response = await fetch('/newSession')
    const data = await response.json()
    document.getElementById('animal-name').textContent = data.animalName
  } catch (error) {
    console.error('Error fetching data:', error)
  }
  getSessionId()
}

// Function to set session start time
function setSessionStartTime () {
  sessionStartTime = new Date()
}

// Function to calculate and display time difference
function displayTimeDifference () {
  if (sessionStartTime && lastButtonClickTime) {
    const timeDifference = lastButtonClickTime - sessionStartTime
    console.log(`Time since session start: ${timeDifference} milliseconds`)
    // You can display the time difference on the page as needed
  }
}

// Function to record button clicks on the server
async function recordButtonClick (buttonName, sessionId) {
  try {
    const currentTime = new Date()
    if (lastButtonClickTime) {
      const timeDifference = currentTime - lastButtonClickTime
      // Include the time difference in the POST request data
      const animal = document.getElementById('animal-name').textContent
      const bodyData = JSON.stringify({
        animal,
        button: buttonName,
        session: sessionId,
        difference: timeDifference,
        time: sessionStartTime
      })
      // console.log(bodyData);
      await fetch('/recordButtonClick', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: bodyData
      })
    }
    lastButtonClickTime = currentTime // Record the timestamp of the button click
    displayTimeDifference() // Calculate and display time difference
    // TODO - slight delay before loading next animal, to show the user how long that decision took them
    getNextAnimal() // Load another random animal
  } catch (error) {
    console.error('Error recording button click:', error)
  }
}

// Add click event listeners to the buttons
document.getElementById('isCritterButton').addEventListener('click', () => {
  recordButtonClick('is critter', getSessionId())
})

document.getElementById('isNotCritterButton').addEventListener('click', () => {
  recordButtonClick('is not critter', getSessionId())
})

document.getElementById('startOverButton').addEventListener('click', () => {
  newSession()
  getNextAnimal()
})

// Initial random animal load and session start time
getNextAnimal()
setSessionStartTime()