class User {
    constructor(name, age, job, messageList, messageEl, direction, color){
        this.name = name;
        this.age = age;
        this.job = job;
        this.messageList = messageList;
        this.messageEl = messageEl;
        this.direction = direction;
        this.color = color;
    }
    SayHello(){
        alert(`Привет, меня зовут ${this.name}, мне ${this.age} лет.
        Работаю в ${this.job}
        `);
    }
    render(el){
        let div = document.createElement('div');
        div.classList.add('chat-hero-content');
        div.innerHTML = `
        <h2> ${this.name}</h2>
        <p>${this.age} лет, Работаю в ${this.job}</p>
        `;
        el.appendChild(div);
    }
    message(){
        if( this.messageList.length == 0) return;
        let p = document.createElement('p');
        p.innerHTML = `<span> ${this.messageList.shift()} </span>`;
        p.style.textAlign = this.direction;
        p.style.color = this.color;

        this.messageEl.appendChild(p);

    }

}



var list = ['Привет', 'Что делаешь', 'Как дела', 'ясно'];

var list1 = ['Привет', 'А ты что', 'Как дела', 'НУ и пока'];

var chat_message = document.querySelector(".chat-message");



var Vasya = new User('Вася', 15, "Макдональс", list, chat_message, "left", "red");
var Kolay= new User('Коля', 17, "KFC", list1, chat_message, "right", "green");




Vasya.render(document.querySelector(".hero-1"));
Kolay.render(document.querySelector(".hero-2"));




setInterval(() => {
    Vasya.message();
    Kolay.message();
}, 2000);