jonas.js

jonas.js

class Jonas {
    
  constructor() {
    this.video = "1_0";
    this.added = false;      
    this.loaded = false;      
    this.jonas = "";
    this.circle_incr = 0;
    this.start_x = 200;
    this.start_y = 200;
    this.$container = $(".avatarContainer");
    this.moving = true;
    this.movement_type = "circle";
    this.random = 0;
    this.random_value = Math.floor(Math.random() * 30) + 42;
    this.follow = false;
    this.move_incrementer = 0;
    this.id = 1;
    this.map_jonas;
    this.followable = true;
    this.video_array = false;
    this.videos = [];      
  }

  init(id, x, y, video, movement_type, follow, followable) {
    
    if(Array.isArray(video)) {
      this.videos = video;
      this.video = `${this.videos[Math.floor(Math.random() * this.videos.length)]}.mp4`;
      this.video_array = true;

    } else {
      this.video = `${video}.mp4`;
    }

    this.start_x = x;
    this.start_y = y;
    this.html = `<div class="jonas_avatar avatar user small jonas_${id}"> <div class='hitbox'><div class='name'>JONAS</div></div></div>`;
    this.movement_type = movement_type;
    this.follow = follow;
    this.id = id;
    this.followable = followable;

    if(!this.added) {
      this.added = true;

      //add Jonas Avatar
      this.jonas = $(this.html).css({
        left: `${this.start_x}px`,
        top: `${this.start_y}px`,
        background: `linear-gradient(${Math.floor(Math.random() * 360)}deg, rgb(0, 0, 255) 49%, rgb(255, 0, 0) 50%)`
      }).appendTo($(".avatarContainer"));
      
      //add Jonas Map Avatar
      this.map_jonas = $(`<div class="mapUser jonasUser" style="left: 10px; top: 10px;"></div>`).css({
        left: `${this.start_x/mapscale}px`,
        top: `${this.start_y/mapscale}px`
      }).appendTo($(".map"));

      //bind events
      this.$container.on("mouseenter", `.jonas_${id} .hitbox`, () => {
        if(!this.loaded) {
          this.loaded = true;
          this.load_video();
        }            
      });

      //detect start on mobile
      if(window.mobileCheck()) {                        
        this.mobile_load();            
      }

      this.movement();
    }
  }

  mobile_load() {
    let distance = calculateDistance(this.jonas, currentX, currentY);
    
    if(distance < 500) {
      this.loaded = true;
      this.load_video();                  
    }

    if(!this.loaded) {
      setTimeout(() => {
        this.mobile_load();
      }, 250);
    }
  }

  load_video() {
    if(this.video_array) {
      this.video = `${this.videos[Math.floor(Math.random() * this.videos.length)]}.mp4`;        
    }

    $(`<video class='adminAudio' autoplay loop><source type="video/mp4" src="https://walkwithme.jonaslund.com/jonas/${this.video}"></video>`).appendTo(this.jonas); 
    this.jonas.addClass("big");      
    this.moving = false;  
  }

  movement() {
    
    this.move_incrementer++;

    if(this.move_incrementer > 100) {
      this.move_incrementer = 0;
    }

    if(this.movement_type === "circle") {

      if(this.circle_incr > 360) {
        this.circle_incr = 0;
      }

      // let {x, y} = getC({x: 400, y: 400}, {x: 400, y: 0}, this.circle_incr);
      // let {x, y} = circle_position(this.circle_incr, 400);
      let {x, y} = make_circle(this.start_x, this.start_y, 300, this.circle_incr);

      this.move(x, y);
      this.circle_incr++;        
    }

    if(this.movement_type === "noise") {
      let speed = 1 * 0.0003;

      const noiseX = (noise.simplex3(1, 0, speed) + 1) / 2;
      const noiseY = (noise.simplex3(10, 0, speed) + 1) / 2;
      
      this.random += this.random_value / 1000;

      const randX = noise.simplex3(1, 0, this.random) * window.innerWidth * 0.1;
      const randY = noise.simplex3(3, 0, this.random) * window.innerHeight * 0.1;

      const x = noiseX * window.innerWidth  + randX;
      const y = noiseY * window.innerHeight  + randY;

      this.move(x, y)          
    }

    if(this.follow) {        
      if(this.move_incrementer % 5 === 0) {

        let x = currentX;
        let y = currentY;
        
        if(this.random_value % 2 === 0) {

          x = currentX - Math.floor(Math.random()*50) + 15;
          y = currentY - Math.floor(Math.random()*50) + 15;
        }

        this.move_start_position(x, y);
      }     
    }

    if(this.moving) {
    
      setTimeout(() => {
        this.movement();
      }, 100);

    }
  };
  
  follow_user() {
    if(this.followable) {
      this.follow = true;
    }
  }

  stop_follow_user() {
    this.follow = false;
  }

  unload_video() {
    this.jonas.find("video").remove();
    this.jonas.removeClass("big");
    
    this.loaded = false;
    this.moving = true;
    
    this.movement();
  }

  stop_jonas() {
    this.moving = false;
  }

  delete_jonas() {
    this.jonas.remove();
  }

  move(x, y) {
    this.jonas.css({transform: `translate(${x}px, ${y}px)`});
    
    //update map?      
    if(this.move_incrementer % 3 === 0) {      
      this.map_jonas.css({
        left: `${(parseInt(this.jonas.css("left")) + x)/mapscale}px`,
        top: `${(parseInt(this.jonas.css("top")) + y)/mapscale}px`
      });
    } 
  }

  move_start_position(x, y) {
    this.jonas.css({left: `${x}px`, top: `${y}px`});
  }

  get_jonas() {
    return this.jonas;
  }
}

//init
const jonases = [];
let jonas_one = new Jonas();
    jonas_one.init(1, 450, 180, clarinets, "noise", follow_state, true); //1_0
    jonases.push(jonas_one);