Listening to global events and setting data values

Hello,
I am running into an issue. I have this basic script that detects when my head rotates left or right and on tik fires events for each side. that portion works fine.

I also set up a global event listening to tapping on the screen. I can set up and receive the event that part works fine.

The part that I am having trouble is trying to set the values inside of data. I have this line
“component.data.touchTriggeredLeft = true” but the value never seems to be set to true. inside the tik it never registers as being true. I tested that I can call the methods directly but even if I try to set the data from within the function it does not work.

I must be missing something that connects the component.data to the one object that set up and received the listeners. I tried printing the eid before and the numbers matched.

I would appreciate any help

//Code

import * as ecs from ‘@8thwall/ecs’
// Function to handle logic for the right side
function handleRightSide(world, component) {
console.log(handleRightSide)
}

// Function to handle logic for the left side
function handleLeftSide(world, component) {
console.log(handleLeftSide)
}

const faceTracking = ecs.registerComponent({
name: ‘faceTracking’,
schema: {
},
data: {
touchTriggeredLeft: ecs.boolean,
touchTriggeredRight: ecs.boolean,
},
add: (world, component) => {
const { eid } = component
const { scoreDisplay } = component.schema
component.data.touchTriggeredLeft = false
component.data.touchTriggeredRight = false

// Dispatch global events on touch
world.events.addListener(world.events.globalId, ecs.input.SCREEN_TOUCH_START, (event) => {
  const touchX = event.data?.position?.x
  console.log(`Touch Event Received: X=${component.eid}`)
  if (touchX < 0.5) {
    console.log("Dispatching 'touchLeft' event")
    world.events.dispatch(component.eid, 'touchLeft')
  } else {
    console.log("Dispatching 'touchRight' event")
    world.events.dispatch(world.events.globalId, 'touchRight')
  }
})

// Listen for global touch events within this component
world.events.addListener(component.eid, 'touchLeft', () => {
  console.log(`Touch Left Event Received  X=${component.eid}`)
  component.data.touchTriggeredLeft = true
})

world.events.addListener(world.events.globalId, 'touchRight', () => {
  console.log(`Touch Right Event Received  X=${component.eid}`)
  component.data.touchTriggeredRight = true
})

},
tick: (world, component) => {
const { killerArea } = component.schema
const rotation = ecs.Quaternion.get(world, component.eid)

if (rotation) {
  const { z } = rotation

  // Handle right-side logic
  if (z > 0.20) {
      handleRightSide(world, component)
  } else if (z < -0.20) {
      handleLeftSide(world, component)
  } else {
    // Reset state when head returns to neutral
  }
}

// Handle touch-triggered logic
if (component.data.touchTriggeredRight) {
  console.log("Tick handling right touch")
  handleRightSide(world, component)
  component.data.touchTriggeredRight = false
}

if (component.data.touchTriggeredLeft) {
  console.log("Tick handling left touch")
  handleLeftSide(world, component)
  component.data.touchTriggeredLeft = false
}

},
remove: () => {
// No specific cleanup required
},
})

export { faceTracking }

Component data shouldn’t be called directly inside of events. You could use dataAttribute. Our guide here should make it more clear.

It works now. thank you, I understand it now :slight_smile:

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.