I tried to add a flashbang effect to the frag grenade, but it didn't work.

[fyflo]

Hello guys

I tried to add a flashbang effect to the frag grenade, but it didn't work. What I added: file: smokes.js Added and corrected the code for the noise grenade for the fragmentation grenade

// The live position of all frags
socket.element.addEventListener("frags", (event) => {
  let frags = event.data;

  // Go through each frag
  for (let frag of frags) {
    // Get the frag element
    let fragElement = document.getElementById("frag" + frag.id);

    // If the element does not exist yet, add it
    if (!fragElement) {
      // Create a new element
      fragElement = document.createElement("div");
      fragElement.id = "frag" + frag.id;
      fragElement.className = "fragEntity";

      // Calculate the height and width based on the map resolution
      fragElement.style.height = fragElement.style.width =
        (300 / global.mapData.resolution / 1024) * 100 + "%";

      // Add it to the DOM
      document.getElementById("frags").appendChild(fragElement);

      // Set the location of the frag
      fragElement.style.left = global.positionToPerc(frag.position, "x") + "%";
      fragElement.style.bottom =
        global.positionToPerc(frag.position, "y") + "%";

      // Play a "pop" animation after adding
      setTimeout(() => {
        fragElement.className = "fragEntity full";
      }, 100);

      // Fade out slowly
      setTimeout(() => {
        fragElement.className = "fragEntity full hide";
      }, 1200);

      // Remove element when invisible
      setTimeout(() => {
        fragElement.remove();
      }, 2200);
    }
  }
});

// Clear all smokes and infernos on round reset
socket.element.addEventListener("roundend", (event) => {
  document.getElementById("smokes").innerHTML = "";
  document.getElementById("trails").innerHTML = "";
  document.getElementById("infernos").innerHTML = "";
  document.getElementById("flashbangs").innerHTML = "";
  **document.getElementById("frags").innerHTML = "";**
});

file: map.css Added

#smokes,
#entities,
#flashbangs,
**#frags,**
#projectiles,
#trails {
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 2;
}
#frags> div {
    position: absolute;
    opacity: .8;
    background: #FFF;
    box-sizing: border-box;
    transform-origin: center;
    border-radius: 100%;
    transform: translate(-50%, 50%);
    clip-path: polygon(15% 8%, 40% 25%, 50% 0%, 60% 25%, 85% 8%, 74% 35%, 100% 36%, 78% 50%, 100% 70%, 72.5% 67%, 77.5% 92.5%, 60% 75%, 50% 100%, 40% 75%, 22.5% 92.5%, 27.5% 67%, 0% 70%, 22% 50%, 0% 36%, 26% 35%);
    box-shadow: inset 0 0 0vmin 1.7vmin #FC9F2D, inset 0 0 5vmin 0 #FEA130;
    transition: opacity .3s;
}

#frags> div.full {
    opacity: .8;
}

#frags> div.hide {
    opacity: 0;
}

Please correct me if I forgot anything or what needs to be added so that after the explosion of a fragmentation grenade there is an effect on the map

P.S. Changes in js & ccs are marked

[boltgolt]

Nothing that's obviously wrong as far as i can see, do the elements get added within #frags at all?

[boltgolt]

Is "frags" an event that actually gets emitted in your version?

[fyflo]

Is "frags" an event that actually gets emitted in your version?

Hi. Nothing happens when adding frags. On the mini map, a fragment just flies and disappears. Maybe I didn't add information to some file for processing.

[boltgolt]

Right, but did you implement a handler for that custom frag event in gsi.js?

[fyflo]

Right, but did you implement a handler for that custom frag event in gsi.js?

gsi.js no I forgot about this. I will do it. thanks for the tip

[fyflo]

It worked, but the effect lasts a long time and is duplicated after some time in a neighboring place. I will continue to compose, why is it duplicated and the effect works for so long.

gsi.js:

if (game.grenades) {
      let grenades = {
        smokes: [],
        infernos: [],
        flashbangs: [],
        frags: [],
        projectiles: [],
      };

---

 } else if (nade.type == "frag" && parseFloat(nade.lifetime) >= 1.4) {
          let pos = nade.position.split(", ");
          grenades.frags.push({
            id: nadeID,
            position: {
              x: parseFloat(pos[0]),
              y: parseFloat(pos[1]),
              z: parseFloat(pos[2]),
            },
          });

map.html

<!-- Lowest layer: Area of effect -->
      <div id="smokes"></div>
      <div id="infernos"></div>
      <div id="flashbangs"></div>
      <div id="frags"></div>

[fyflo]

Found the correctness. in gsi frags I put it in a separate if & corrected the timing.

if (nade.type == "frag" && parseFloat(nade.lifetime) >= 1.65) {
          let pos = nade.position.split(", ");
          grenades.frags.push({
            id: nadeID,
            position: {
              x: parseFloat(pos[0]),
              y: parseFloat(pos[1]),
              z: parseFloat(pos[2]),
            },
          });
        }

corrected the timing in the smokes.js file

// Play a "pop" animation after adding
      setTimeout(() => {
        fragElement.className = "fragEntity full";
      }, 200);

      // Fade out slowly
      setTimeout(() => {
        fragElement.className = "fragEntity full hide";
      }, 2600);

      // Remove element when invisible
      setTimeout(() => {
        fragElement.remove();
      }, 5000);

[boltgolt]

If you got it working please do open a PR!

[fyflo]

If you got it working please do open a PR!

Okay. I'll do it in a couple of hours. I'm working now.

[fyflo]

I tried PR and nothing worked for me. It requires being a co-author. Some error appears.

That's why I'm posting the build here:

How does this work

Assembly for download: Download