Lord_TCG#9068 Posts - Answer Overflow

Lord_TCG#9068

Explore posts from servers

DIAdiscord.js - Imagine an app KPCKevin Powell - Community

Posts Comments

KPCKevin Powell - Community

•Created by Lord_TCG#9068 on 10/5/2024 in #front-end

How Supported Is Supported Enough?

29 replies

KPCKevin Powell - Community

•Created by Lord_TCG#9068 on 5/16/2024 in #os-and-tools

PM2 timestamps for error logs?

Anyone here use PM2 a lot? pm2 start "npm run start" --name "appName" --time gives me time stamps in the appName-out.log file... but not in the appName-error.log file... What am I missing?

1 replies

DIAdiscord.js - Imagine an app

•Created by Lord_TCG#9068 on 2/21/2024 in #djs-questions

Issues with DJS dependencies?

I was just running an npm audit as I sporadically do, and came across this

undici  <=5.28.2
Undici proxy-authorization header not cleared on cross-origin redirect in fetch - https://github.com/advisories/GHSA-3787-6prv-h9w3
fix available via `npm audit fix`
node_modules/@discordjs/rest/node_modules/undici
  @discordjs/rest  2.0.1-dev.1690848847-1af7e5a0b.0 - 2.3.0-dev.1707178154-3755e66d4
  Depends on vulnerable versions of undici
  node_modules/@discordjs/rest
    @discordjs/ws  >=1.0.1-dev.1690848792-1af7e5a0b.0
    Depends on vulnerable versions of @discordjs/rest
    node_modules/@discordjs/ws

undici  <=5.28.2
Undici proxy-authorization header not cleared on cross-origin redirect in fetch - https://github.com/advisories/GHSA-3787-6prv-h9w3
fix available via `npm audit fix`
node_modules/@discordjs/rest/node_modules/undici
  @discordjs/rest  2.0.1-dev.1690848847-1af7e5a0b.0 - 2.3.0-dev.1707178154-3755e66d4
  Depends on vulnerable versions of undici
  node_modules/@discordjs/rest
    @discordjs/ws  >=1.0.1-dev.1690848792-1af7e5a0b.0
    Depends on vulnerable versions of @discordjs/rest
    node_modules/@discordjs/ws

If I'm reading that correctly that is issues with the deps of djs? Just wanted to point this out. audit fix and audit fix --force don't fix the issue. I'm if I'm not reading that correctly then apologies 🙏

5 replies

DIAdiscord.js - Imagine an app

•Created by Lord_TCG#9068 on 2/15/2024 in #djs-questions

Can you parse and return components?

I had a button action row working just fine

...
        const leBtn = new ButtonBuilder()
          .setStyle(ButtonStyle.Secondary)
          .setEmoji(`${config.leRoleEmoji}`)
          .setCustomId("le_btn");
        const row = new ActionRowBuilder()
          .addComponents(tuBtn)
          .addComponents(suBtn)
          .addComponents(leBtn)

...
        const leBtn = new ButtonBuilder()
          .setStyle(ButtonStyle.Secondary)
          .setEmoji(`${config.leRoleEmoji}`)
          .setCustomId("le_btn");
        const row = new ActionRowBuilder()
          .addComponents(tuBtn)
          .addComponents(suBtn)
          .addComponents(leBtn)

But I wanted to centralise some code so I tried to make a function to create the button action rows and return them for later use

          const embed = await buildEmbedOptions(interaction, selectedOption);
          const row = await buildEmbedButtons(interaction, selectedOption);
          await interaction.reply({
            embeds: [embed],
            components: [row],
          });

          const embed = await buildEmbedOptions(interaction, selectedOption);
          const row = await buildEmbedButtons(interaction, selectedOption);
          await interaction.reply({
            embeds: [embed],
            components: [row],
          });

I can log the return of the action row fine:

buttons [
  { style: 'Secondary', label: '⚽', customId: 'tu_btn' },
  { style: 'Secondary', label: '📁', customId: 'su_btn' },
  { style: 'Secondary', label: '👍', customId: 'le_btn' },
]
final row [
  ActionRowBuilder {
    data: { type: 1 },
    components: [
      [ButtonBuilder],
      [ButtonBuilder],
      [ButtonBuilder],
    ]
  }
]

buttons [
  { style: 'Secondary', label: '⚽', customId: 'tu_btn' },
  { style: 'Secondary', label: '📁', customId: 'su_btn' },
  { style: 'Secondary', label: '👍', customId: 'le_btn' },
]
final row [
  ActionRowBuilder {
    data: { type: 1 },
    components: [
      [ButtonBuilder],
      [ButtonBuilder],
      [ButtonBuilder],
    ]
  }
]

But I get this error when trying to send them

DiscordAPIError[50035]: Invalid Form Body
data.components[0].components[BASE_TYPE_BAD_LENGTH]: Must be between 1 and 5 in length.
...
  requestBody: {
    files: [],
    json: {
      type: 4,
      data: {
        content: undefined,
        tts: false,
        nonce: undefined,
        embeds: [
          {
            title: 'Get Notified!',
            description: 'txt here',
            color: 13408563,
            footer: [Object]
          }
        ],
        components: [ { '0': [Object], type: 1, components: [] } ],

DiscordAPIError[50035]: Invalid Form Body
data.components[0].components[BASE_TYPE_BAD_LENGTH]: Must be between 1 and 5 in length.
...
  requestBody: {
    files: [],
    json: {
      type: 4,
      data: {
        content: undefined,
        tts: false,
        nonce: undefined,
        embeds: [
          {
            title: 'Get Notified!',
            description: 'txt here',
            color: 13408563,
            footer: [Object]
          }
        ],
        components: [ { '0': [Object], type: 1, components: [] } ],

9 replies

KPCKevin Powell - Community

•Created by Lord_TCG#9068 on 1/23/2024 in #front-end

Help Replicating This

As a tool to learn new techniques, I'm recreating things I find on the web. Today I'm trying to do the mouseover image effect seen on this website (while in desktop screen sizes) https://en.bazil.fr/ I managed to get close with this react hook...

import { useEffect, useRef } from "react";

export default function useMouseMove() {
  const imageRef = useRef();
  const yCap = 1;
  const xCap = 3;

  useEffect(() => {
    const handleMouseMove = (event) => {
      const { clientX, clientY } = event;
      const centerX = window.innerWidth / 2;
      const centerY = window.innerHeight / 2;

      let posX = ((clientX - centerX) / centerX) * 100; // as a percentage of half the viewport width
      let posY = ((clientY - centerY) / centerY) * 100; // as a percentage of half the viewport height

      // Calculate the distance of the mouse from the center of the viewport
      const distance = Math.sqrt(
        Math.pow(clientX - centerX, 2) + Math.pow(clientY - centerY, 2)
      );

      // Use the distance to calculate the scaling factor
      const scaleFactor = Math.pow(distance, 2);

      posX *= scaleFactor;
      posY *= scaleFactor;

      const cappedPosX = Math.min(Math.max(posX, xCap * -1), xCap);
      const cappedPosY = Math.min(Math.max(posY, yCap * -1), yCap);

      imageRef.current.style.transform = `translate(${cappedPosX}vw, ${cappedPosY}vh)`;
    };

    window.addEventListener("mousemove", handleMouseMove);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);

  return imageRef;
}

import { useEffect, useRef } from "react";

export default function useMouseMove() {
  const imageRef = useRef();
  const yCap = 1;
  const xCap = 3;

  useEffect(() => {
    const handleMouseMove = (event) => {
      const { clientX, clientY } = event;
      const centerX = window.innerWidth / 2;
      const centerY = window.innerHeight / 2;

      let posX = ((clientX - centerX) / centerX) * 100; // as a percentage of half the viewport width
      let posY = ((clientY - centerY) / centerY) * 100; // as a percentage of half the viewport height

      // Calculate the distance of the mouse from the center of the viewport
      const distance = Math.sqrt(
        Math.pow(clientX - centerX, 2) + Math.pow(clientY - centerY, 2)
      );

      // Use the distance to calculate the scaling factor
      const scaleFactor = Math.pow(distance, 2);

      posX *= scaleFactor;
      posY *= scaleFactor;

      const cappedPosX = Math.min(Math.max(posX, xCap * -1), xCap);
      const cappedPosY = Math.min(Math.max(posY, yCap * -1), yCap);

      imageRef.current.style.transform = `translate(${cappedPosX}vw, ${cappedPosY}vh)`;
    };

    window.addEventListener("mousemove", handleMouseMove);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);

  return imageRef;
}

... I noticed in dev tools that his image translated up to 3vw and 1vh respectively... but his is buttery smooth, and almost elasticated. The further the mouse moves away from the origin the less the image moves. Mine just stops at the movement cap... I made a sandbox Any advice in getting this to work would be amazing. Thanks!

2 replies

KPCKevin Powell - Community

•Created by Lord_TCG#9068 on 1/22/2024 in #front-end

Curious Coverage Question

I'm curious. What % coverage do you look on caniuse.com before you consider something to be production ready?

7 replies

Gaming

Programming