import Component from '../lib/component.js';
import store from '../store/index.js';
const thumbnails_path = "images/agents_thumbnails/";
/**
* @classdesc UI component for the list of running agents.
*/
export default class AgentsList extends Component {
constructor() {
super({
store,
element: document.querySelector('#agents_list_container'),
eventName: 'agentsListChange'
});
}
/**
* Renders the list of running agents and adds event listeners to the different elements.
*/
render() {
let dict = window.lang_dict[store.state.language]['agentsList'];
let morph_dict = window.lang_dict[store.state.language]['morphologies'];
this.element.querySelector('#agents_list_title').innerHTML = `${dict['title']}`;
this.element.querySelector('#agents_list').innerHTML = store.state.agents.map(agent => {
// Creates a list item for each agent
return `
`;
}).join('');
// Renders the list items differently when drawing or if the agent is selected
this.element.querySelectorAll('li[name="agent-list-item"]').forEach((span, index) => {
if(store.state.drawingModeState.drawing){
span.classList.add('disabled');
}
else{
if(store.state.agents[index] == store.state.simulationState.agentSelected){
span.classList.add("active");
}
else{
span.classList.remove("active");
}
}
});
/* EVENT LISTENERS */
// Deletes the agent
this.element.querySelectorAll('button[name="deleteButton"]').forEach((span, index) => {
span.addEventListener('click', () => {
store.dispatch('deleteAgent', {index: index});
});
});
// Saves the agent's current position as initial position
this.element.querySelectorAll('button[name="savePositionButton"]').forEach((span, index) => {
span.addEventListener('click', () => {
let pos = window.game.env.agents[index].agent_body.reference_head_object.GetPosition().Clone();
store.dispatch('setAgentInitPos', {index: index, init_pos: pos});
});
});
// Resets the agent's initial position
this.element.querySelectorAll('button[name="resetPositionButton"]').forEach((span, index) => {
span.addEventListener('click', () => {
store.dispatch('setAgentInitPos', {index: index, init_pos: null});
let init_x = TERRAIN_STEP * INITIAL_TERRAIN_STARTPAD / 2;
window.game.env.set_agent_position(window.game.env.agents[index], init_x, null);
window.game.env.render();
});
});
// Follows the agent
this.element.querySelectorAll('input[name="followSwitch"]').forEach((span, index) => {
span.addEventListener('input', () => {
store.dispatch('followAgent', {index: span.checked ? index : -1});
});
span.checked = store.state.simulationState.agentFollowed == store.state.agents[index];
});
// Renames the agent
this.element.querySelectorAll('input[name="agentNameArea"]').forEach((span, index) => {
span.addEventListener('keydown', (event) => {
if(event.keyCode == '13'){
store.dispatch('renameAgent', {index: index, value: span.value});
}
});
});
/* Initializes tooltips */
this.element.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((el, index) => {
return new bootstrap.Tooltip(el, {
trigger: 'hover'
});
});
}
};