Category: javascript

Category Added in a WPeMatico Campaign

Stripe Recurring Subscription based model giving Free Trial

I am using the below code to add products to Stripe:

const baseProduct = await stripe.products.create({
  name: 'Basetest4',
  description: 'Basetest4 subscription plan',
});

await stripe.prices.create({
  product: baseProduct.id,
  unit_amount: 800, // $8 in cents
  currency: 'usd',
  recurring: {
    interval: 'month',
    trial_period_days: 0, // Ensure no trial period is set
  },
});

This adds the product to Stripe. However, when I get that product on the frontend using the code:

const basePlan = products.find((product) => product.id === 'prod_R7C*********Zvw');
console.log('Base plan:', basePlan);

// const plusPlan = products.find((product) => product.name === 'Plusv2');
// console.log('Plus plan:', plusPlan);

const basePrice = prices.find((price) => price.productId === basePlan?.id);
// const plusPrice = prices.find((price) => price.productId === plusPlan?.id);

return (
  <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div className="grid md:grid-cols-2 gap-8 max-w-xl mx-auto">
      <PricingCard 
        name={basePlan?.name || 'Base'} 
        price={basePrice?.unitAmount || 800} 
        interval={basePrice?.interval || 'month'} 
        trialDays={basePrice?.trialPeriodDays || 7} 
        features={['Basic Access', 'Standard Support', 'Core Features']} 
        priceId={basePrice?.id} 
      />
    </div>
  </main>
);

The code has * which is changed during running (hidden for security purposes). When I run on the frontend and click on the checkout URL,
I see this: https://imgur.com/a/NQTMpSX.

Now see there is a 14 days free trial. I don’t want to give a trial and want to start the billing from the instant the payment is made. How can I make these changes? Please let me know if you need any other code blocks.

tried adding

trial_period_days = 0

TypeError: Type {} is not assignable to type string | undefined when importing an image in React

I’m using an image in my React component, and although it displays correctly, I keep seeing this warning:

TypeError: Type {} is not assignable to type string | undefined

Here’s my code:

import profilePic from './assets/profile.jpeg';

function Card() {
    return (
        <div className="card">
            <img src={profilePic} alt="profile picture" />
            <h2>Profile Card</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, reiciendis.</p>
        </div>
    );
}

export default Card;

I’m using JavaScript in a React project, and profile.jpeg is located in the assets folder.

I also tried using require instead of import:

const profilePic = require('./assets/profile.jpeg');

But it didn’t resolve the warning. Any suggestions on correctly managing this image import to avoid the warning?

How to Migrate an Electron Application with TypeScript/JavaScript Frontend and Java Backend to Work Offline on a LAN Network?

I’m currently working on an Electron application with a frontend written in TypeScript and JavaScript, and a backend server implemented in Java. The goal is to modify the application so it can function offline within a local area network (LAN), without relying on internet connectivity. all computers also have access to that network and are connected through wire.

Some specific questions I have are:

Data Synchronization: What’s the best approach to ensure that all clients on the LAN can access up-to-date data, considering the application will be offline?

Backend Server Setup: How can I set up the Java backend server so it’s accessible to all users on the LAN?

Network Configuration: Are there particular configurations for Electron or Java to make sure the application communicates efficiently over a LAN?

Database Options: Should I consider a specific type of database or storage solution to ensure reliability and speed within a LAN environment?

Any guidance or examples on similar offline LAN migrations would be really helpful!

Any guidance or examples on similar offline LAN migrations would be really helpful!

d3.js not displaying geoJSON properly after simplification

I am trying to display a geoJSON map using d3.js. I have a geoJSON file that is far too large. d3 will display that one just fine. However, when I run it through the mapshaper simplification tool, d3 starts displaying weird shapes like squares, half donuts, circles (dependent on the projection I am using, I suspect). The weird thing is, I bring the same simplified geoJSON data into leaflet, other mapbox.io, etc, and it works! I really cannot figure this out and any help is much appreciated.

The large, functioning geoJSON

The smaller, non-functioning geoJSON

const geojson = await d3.json(geojsonUrl);

const projection = d3.geoMercator().fitSize([width, height], geojson);

const path = d3
    .geoPath()
    .projection(projection)
    .context(canvas.getContext("2d"));

const context = canvas.getContext("2d");

context.clearRect(0, 0, width, height);

context.strokeStyle = "#333";
context.lineWidth = 1;
context.fillStyle = "#69b3a2";

geojson.features.forEach((feature) => {
    context.beginPath();
    path(feature);
    context.fill();
    context.stroke();
});

Is there a function or way to stop the setinterval function from keep on running after a match in jQuery or JS?

The project that I’m working on, generates 2 different p elements and each one is triggered independently. It takes about 5 seconds to load after the callback. I have no control over any of these p elements, but to wait for it to finish loading so I can run a script. I’m using the setInterval() function to check when one of the p elements loads up. I then insert a div element before the p element. For this I’m targeting the class of each p element with a switch statement.

The issue I have is that this will keep generating the div over and over and I only need it once after each call. I can stop the intervals with the clearInterval() but that kills it completely and have no way to restart it because it will not fire back again even if I call the setInterval() function.

Is there a way I can approach this maybe in a different and better way without the setInterval()?

function whichOneisVisible() {
    var target = $('.result-content').children("p:first");

        switch (target.attr('class')) { 
          case "available": 
             console.log('Congrats, this p element is available!');
                
            clearInterval(check);
            break;
          case "not-available": 
             console.log('Sorry, this p element is NOT available!');

            break;
          default:      
            console.log('Nothing is available!');
        } 
}
check = setInterval(whichOneisVisible, 550);

The html..

<div class="result-content">
    <p class="not-available">This P element is not available</p>
    <div>This is just a div</div>
    <div>This is just a div</div>
    <div>This is just a div</div>
</div>

How to apply dhtmlx library in codepen?

i’m trying to test grid in codepen. I’m newbie with codepen and html, javascript. 🙁

1)This is dhtmlx official example code in docs.

https://snippet.dhtmlx.com/9txizaow?text=grid&mode=wide

2)There’s HTML, Javascript so i paste it to my codepen

https://codepen.io/youhost/pen/BaXYpZK

but i can’t see anything in my codepen. Is there anything wrong in my trying??

Thanks for reading.

TranslateY doesn’t work with the eyelid keyframes but scaleY does

I just finished putting a mask over the left eyelid outline of my project, but I messed up with its alignment with the eyelid (the wipe in animation). Currently I used scaleY to have it infinitely float up and down with it, but when I use translateY, it doesn’t work.
Here’s the code with scaleY:

function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

document.addEventListener('keydown', (event) => {
    if (event.key === 's' || event.key === 'S') {
        const headColor = document.getElementById('head_color');
        headColor.setAttribute('fill', getRandomColor());

        // Optional: If eyelids need to match the head color, add this:
        const eyelids = document.getElementById('eyelids_color');
        eyelids.setAttribute('fill', headColor.getAttribute('fill'));
    }
});
document.addEventListener('DOMContentLoaded', function() {
    const pupils = document.getElementById('pupils'); // Group containing both pupils

    document.addEventListener('mousemove', function(event) {
        const eyesSvg = document.getElementById('eyes_svg');
        const eyesBox = eyesSvg.getBoundingClientRect();

        // Approximate center of the eyes (you may need to adjust these values based on your design)
        const eyeCenterX = eyesBox.left + eyesBox.width / 2;
        const eyeCenterY = eyesBox.top + eyesBox.height / 2;

        const maxPupilMovement = 10; // Maximum movement inside the eye

        // Calculate the mouse position relative to the center of the eyes
        const mouseX = event.clientX;
        const mouseY = event.clientY;

        // Calculate the angle and distance for pupil movement
        const angle = Math.atan2(mouseY - eyeCenterY, mouseX - eyeCenterX);
        const distance = Math.min(maxPupilMovement, Math.hypot(mouseX - eyeCenterX, mouseY - eyeCenterY));

        // Calculate the new pupil positions
        const pupilX = Math.cos(angle) * distance;
        const pupilY = Math.sin(angle) * distance;

        // Apply the transformation to the pupils group (move it down based on calculated values)
        pupils.setAttribute('transform', `translate(${48.5 + pupilX}, ${29.0 + pupilY})`);
    });
});
.character {
  position: relative;
}

.guide {
  position: absolute;
}

.part {
  position: absolute;
}

.eyes {
  position: absolute;
  z-index: 3;
  left: 19px;
}

.eyesoutline {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.whole_head {
  position: absolute;
  animation: float 2s ease-in-out infinite;
}

.head {
  position: absolute;
  margin-top: 19px;
  z-index: 2;
}

.headcolor {
  z-index: 1;
  margin-top: -500px;
  position: relative;
}

.headoutline {
  z-index: 2;
  position: relative;
  width: 100%;
  height: 100%;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}



@keyframes wipe-in-out-eyelid {
  0% {
    clip-path: inset(0 0 100% 0); /* Fully hidden from the bottom */
  }
  5% {
    clip-path: inset(0 0 0 0); /* Fully visible (wipe-in complete) */
  }
  10% {
    clip-path: inset(0 0 100% 0); /* Fully hidden again (wipe-out complete) */
  }
  100% {
    clip-path: inset(0 0 100% 0); /* Stay hidden for the rest of the duration */
 }
}



@keyframes eyelids-outlines {
    0% {
        transform: scaleY(0.885);
  }
  5% {
    transform: scaleY(0.35); /*full length of the eye.*/
  }
  10% {
    transform: scaleY(0.885);
  }
  100% {
    transform: scaleY(0.885);
  }
}

.eyelid {
  fill: #ffcc66; /* Eyelid color */
  animation: wipe-in-out-eyelid 5s ease-out infinite; /* Wipe animation */
  transform-origin: center;
  position: relative;
  bottom: 0;
}
/* Animation for the line growing down, shrinking, and moving back up */
.eyelid_outline {
  animation: eyelids-outlines 5s ease-out infinite;
  transform-origin: center;
  position: absolute;
  top:8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Character Assembly</title>
    <link rel="stylesheet" href="player.css">
</head>
<body>
    <div class="guide">
        <object data="/svgs/char/shapes/30.svg" type="image/svg+xml" class="part body"></object>

    </div>
    
    <div class="character">

    <div class="guide">
        <object data="/svgs/char/shapes/30.svg" type="image/svg+xml" class="part body"></object>

    </div>

    <div class="whole_head">
        

    <div class="eyes">
        
        

<svg id="eyes_svg">
    <g transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
        <path d="M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6 M-24.7 -12.75 Q-19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7 -57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75" fill="#ffffff" fill-rule="evenodd" stroke="none"/>
    </g>

    <!-- Pupils -->
    <g id="pupils" transform="matrix(1.0, 0.0, 0.0, 1.0, 34.5, 7.0)">
        <path d="M-24.25 4.75 Q-26.0 6.5 -28.5 6.5 -31.0 6.5 -32.75 4.75 -34.5 3.0 -34.5 0.5 -34.5 -2.0 -32.75 -3.75 -31.0 -5.5 -28.5 -5.5 -26.0 -5.5 -24.25 -3.75 -22.5 -2.0 -22.5 0.5 -22.5 3.0 -24.25 4.75" fill="#000000" fill-rule="evenodd" stroke="none"/>
        <path d="M33.15 4.95 Q31.1 7.0 28.2 7.0 25.3 7.0 23.25 4.95 21.2 2.9 21.2 0.0 21.2 -2.9 23.25 -4.95 25.3 -7.0 28.2 -7.0 31.1 -7.0 33.15 -4.95 35.2 -2.9 35.2 0.0 35.2 2.9 33.15 4.95" fill="#000000" fill-rule="evenodd" stroke="none"/>
    </g>
          <clipPath id="cut-bottom">
      <defs><clipPath clipPathUnits="userSpaceOnUse" id="a"><path d="M-57.3-26.6v53.2H3.839c-.02-.301-.042-.6-.06-.901-2.963-.245-5.933-.587-8.878-.643-.655-1.858-1.444-3.675-1.967-5.574-.263-.958-.582-3.19-.855-5.266-6.813-.163-3.393-1.313-.123-.97-.095-.755-.228-1.738-.274-2.133-.457-3.96-.765-7.936-1.072-11.91-.203-2.596-.417-5.192-.633-7.787-.846-10.18 3.516-15.993 8.582-17.073.037-.314.08-.628.118-.943zm52.1 40.836-.01.002.01.008v-.01z"/></clipPath></defs><path d="M26.55-26.6q12.7 0 21.7 7.8t9 18.8q0 11-9 18.8-9 7.8-21.7 7.8t-21.7-7.8q-9-7.8-9-18.8t9-18.8q9-7.8 21.7-7.8M-24.7-12.75q5.6 6.4 5.6 15.45 0 9.05-5.6 15.45-5.6 6.4-13.5 6.4t-13.5-6.4q-5.6-6.4-5.6-15.45 0-9.05 5.6-15.45 5.6-6.4 13.5-6.4t13.5 6.4" fill="#fff" fill-rule="evenodd" style="fill:blue" clip-path="url(#a)" transform="translate(57.3 26.6)"/>
    </clipPath>
      

    <!-- Eyelids (blinking animation) -->

<g clip-path="url(#cut-bottom)">
<g class="eyelid_outline" transform="matrix(1.0, 0.0, 0.0, 1.0, 66.55, 1.35)">
    <path d="M66.55 1.4 L-66.55 1.4 -66.55 -1.35 66.55 -1.35 66.55 1.4" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
  </g>
  </g>

 <g class="eyelid"  transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
    <path id="eyelids_color" d="M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6 M-24.7 -12.75 Q-19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7 -57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75" fill="#ffcc66"/>

       
</g>
    
    <g id="eyesoutline" transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
    <path d="M-50.2 -11.05 Q-55.2 -5.35 -55.2 2.7 -55.2 10.8 -50.2 16.5 -45.25 22.2 -38.15 22.2 -31.1 22.2 -26.1 16.5 -21.15 10.8 -21.1 2.7 -21.15 -5.35 -26.1 -11.05 -31.1 -16.8 -38.15 -16.8 -45.25 -16.8 -50.2 -11.05 M-57.3 2.7 Q-57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75 -19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
    <path d="M26.55 -24.3 Q14.9 -24.3 6.7 -17.15 -1.55 -10.05 -1.55 0.05 -1.55 10.1 6.7 17.25 14.9 24.35 26.55 24.4 38.15 24.35 46.4 17.25 54.65 10.1 54.65 0.05 54.65 -10.05 46.4 -17.15 38.15 -24.3 26.55 -24.3 M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
  </g>


</svg>


        </div>
        
        <!-- Outline SVG -->
        <div class="head">



            <svg id="head_svg">
               

    <svg id="head_shape" xmlns="http://www.w3.org/2000/svg" width="150" height="90">



              <g transform="matrix(1.0, 0.0, 0.0, 1.0, 75.0, 45.0)">
    <path id="head_color" d="M75.0 0.0 Q75.0 18.65 53.0 31.8 31.05 45.0 0.0 45.0 -31.05 45.0 -53.05 31.8 -75.0 18.65 -75.0 0.0 -75.0 -18.65 -53.05 -31.85 -31.05 -45.0 0.0 -45.0 31.05 -45.0 53.0 -31.85 75.0 -18.65 75.0 0.0" fill="#ffcc66" fill-rule="evenodd" stroke="none" />
  </g>
         
        <g id="headoutline" transform="matrix(1.0, 0.0, 0.0, 1.0, 75.0, 45.0)">
    <path d="M53.0 -31.85 Q75.0 -18.65 75.0 0.0 75.0 18.65 53.0 31.8 31.05 45.0 0.0 45.0 -31.05 45.0 -53.05 31.8 -75.0 18.65 -75.0 0.0 -75.0 -18.65 -53.05 -31.85 -31.05 -45.0 0.0 -45.0 31.05 -45.0 53.0 -31.85 M51.05 -29.9 Q29.9 -42.25 0.0 -42.25 -29.9 -42.25 -51.05 -29.9 -72.2 -17.5 -72.2 0.0 -72.2 17.5 -51.05 29.85 -29.9 42.25 0.0 42.25 29.9 42.25 51.05 29.85 72.2 17.5 72.2 0.0 72.2 -17.5 51.05 -29.9" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
  </g>

  </svg>
</svg>
</div>



</div>
      <!--  <object data="body.svg" type="image/svg+xml" class="part body"></object>
        <object data="leftarms.svg" type="image/svg+xml" class="part arms"></object>
        <object data="rightarms.svg" type="image/svg+xml" class="part arms"></object>
        <object data="leftlegs.svg" type="image/svg+xml" class="part legs"></object>
        <object data="rightlegs.svg" type="image/svg+xml" class="part legs"></object>-->
    </div> 

    <script src="player.js"></script>
</body>
</html>

And with translateY:

function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

document.addEventListener('keydown', (event) => {
    if (event.key === 's' || event.key === 'S') {
        const headColor = document.getElementById('head_color');
        headColor.setAttribute('fill', getRandomColor());

        // Optional: If eyelids need to match the head color, add this:
        const eyelids = document.getElementById('eyelids_color');
        eyelids.setAttribute('fill', headColor.getAttribute('fill'));
    }
});
document.addEventListener('DOMContentLoaded', function() {
    const pupils = document.getElementById('pupils'); // Group containing both pupils

    document.addEventListener('mousemove', function(event) {
        const eyesSvg = document.getElementById('eyes_svg');
        const eyesBox = eyesSvg.getBoundingClientRect();

        // Approximate center of the eyes (you may need to adjust these values based on your design)
        const eyeCenterX = eyesBox.left + eyesBox.width / 2;
        const eyeCenterY = eyesBox.top + eyesBox.height / 2;

        const maxPupilMovement = 10; // Maximum movement inside the eye

        // Calculate the mouse position relative to the center of the eyes
        const mouseX = event.clientX;
        const mouseY = event.clientY;

        // Calculate the angle and distance for pupil movement
        const angle = Math.atan2(mouseY - eyeCenterY, mouseX - eyeCenterX);
        const distance = Math.min(maxPupilMovement, Math.hypot(mouseX - eyeCenterX, mouseY - eyeCenterY));

        // Calculate the new pupil positions
        const pupilX = Math.cos(angle) * distance;
        const pupilY = Math.sin(angle) * distance;

        // Apply the transformation to the pupils group (move it down based on calculated values)
        pupils.setAttribute('transform', `translate(${48.5 + pupilX}, ${29.0 + pupilY})`);
    });
});
.character {
  position: relative;
}

.guide {
  position: absolute;
}

.part {
  position: absolute;
}

.eyes {
  position: absolute;
  z-index: 3;
  left: 19px;
}

.eyesoutline {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.whole_head {
  position: absolute;
  animation: float 2s ease-in-out infinite;
}

.head {
  position: absolute;
  margin-top: 19px;
  z-index: 2;
}

.headcolor {
  z-index: 1;
  margin-top: -500px;
  position: relative;
}

.headoutline {
  z-index: 2;
  position: relative;
  width: 100%;
  height: 100%;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}



@keyframes wipe-in-out-eyelid {
  0% {
    clip-path: inset(0 0 100% 0); /* Fully hidden from the bottom */
  }
  5% {
    clip-path: inset(0 0 0 0); /* Fully visible (wipe-in complete) */
  }
  10% {
    clip-path: inset(0 0 100% 0); /* Fully hidden again (wipe-out complete) */
  }
  100% {
    clip-path: inset(0 0 100% 0); /* Stay hidden for the rest of the duration */
 }
}



@keyframes eyelids-outlines {
    0% {
        transform: translateY(0.885);
  }
  5% {
    transform: translateY(0.35); /*full length of the eye.*/
  }
  10% {
    transform: translateY(0.885);
  }
  100% {
    transform: translateY(0.885);
  }
}

.eyelid {
  fill: #ffcc66; /* Eyelid color */
  animation: wipe-in-out-eyelid 5s ease-out infinite; /* Wipe animation */
  transform-origin: center;
  position: relative;
  bottom: 0;
}
/* Animation for the line growing down, shrinking, and moving back up */
.eyelid_outline {
  animation: eyelids-outlines 5s ease-out infinite;
  transform-origin: center;
  position: absolute;
  top:8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Character Assembly</title>
    <link rel="stylesheet" href="player.css">
</head>
<body>
    <div class="guide">
        <object data="/svgs/char/shapes/30.svg" type="image/svg+xml" class="part body"></object>

    </div>
    
    <div class="character">

    <div class="guide">
        <object data="/svgs/char/shapes/30.svg" type="image/svg+xml" class="part body"></object>

    </div>

    <div class="whole_head">
        

    <div class="eyes">
        
        

<svg id="eyes_svg">
    <g transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
        <path d="M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6 M-24.7 -12.75 Q-19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7 -57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75" fill="#ffffff" fill-rule="evenodd" stroke="none"/>
    </g>

    <!-- Pupils -->
    <g id="pupils" transform="matrix(1.0, 0.0, 0.0, 1.0, 34.5, 7.0)">
        <path d="M-24.25 4.75 Q-26.0 6.5 -28.5 6.5 -31.0 6.5 -32.75 4.75 -34.5 3.0 -34.5 0.5 -34.5 -2.0 -32.75 -3.75 -31.0 -5.5 -28.5 -5.5 -26.0 -5.5 -24.25 -3.75 -22.5 -2.0 -22.5 0.5 -22.5 3.0 -24.25 4.75" fill="#000000" fill-rule="evenodd" stroke="none"/>
        <path d="M33.15 4.95 Q31.1 7.0 28.2 7.0 25.3 7.0 23.25 4.95 21.2 2.9 21.2 0.0 21.2 -2.9 23.25 -4.95 25.3 -7.0 28.2 -7.0 31.1 -7.0 33.15 -4.95 35.2 -2.9 35.2 0.0 35.2 2.9 33.15 4.95" fill="#000000" fill-rule="evenodd" stroke="none"/>
    </g>
          <clipPath id="cut-bottom">
      <defs><clipPath clipPathUnits="userSpaceOnUse" id="a"><path d="M-57.3-26.6v53.2H3.839c-.02-.301-.042-.6-.06-.901-2.963-.245-5.933-.587-8.878-.643-.655-1.858-1.444-3.675-1.967-5.574-.263-.958-.582-3.19-.855-5.266-6.813-.163-3.393-1.313-.123-.97-.095-.755-.228-1.738-.274-2.133-.457-3.96-.765-7.936-1.072-11.91-.203-2.596-.417-5.192-.633-7.787-.846-10.18 3.516-15.993 8.582-17.073.037-.314.08-.628.118-.943zm52.1 40.836-.01.002.01.008v-.01z"/></clipPath></defs><path d="M26.55-26.6q12.7 0 21.7 7.8t9 18.8q0 11-9 18.8-9 7.8-21.7 7.8t-21.7-7.8q-9-7.8-9-18.8t9-18.8q9-7.8 21.7-7.8M-24.7-12.75q5.6 6.4 5.6 15.45 0 9.05-5.6 15.45-5.6 6.4-13.5 6.4t-13.5-6.4q-5.6-6.4-5.6-15.45 0-9.05 5.6-15.45 5.6-6.4 13.5-6.4t13.5 6.4" fill="#fff" fill-rule="evenodd" style="fill:blue" clip-path="url(#a)" transform="translate(57.3 26.6)"/>
    </clipPath>
      

    <!-- Eyelids (blinking animation) -->

<g clip-path="url(#cut-bottom)">
<g class="eyelid_outline" transform="matrix(1.0, 0.0, 0.0, 1.0, 66.55, 1.35)">
    <path d="M66.55 1.4 L-66.55 1.4 -66.55 -1.35 66.55 -1.35 66.55 1.4" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
  </g>
  </g>

 <g class="eyelid"  transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
    <path id="eyelids_color" d="M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6 M-24.7 -12.75 Q-19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7 -57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75" fill="#ffcc66"/>

       
</g>
    
    <g id="eyesoutline" transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
    <path d="M-50.2 -11.05 Q-55.2 -5.35 -55.2 2.7 -55.2 10.8 -50.2 16.5 -45.25 22.2 -38.15 22.2 -31.1 22.2 -26.1 16.5 -21.15 10.8 -21.1 2.7 -21.15 -5.35 -26.1 -11.05 -31.1 -16.8 -38.15 -16.8 -45.25 -16.8 -50.2 -11.05 M-57.3 2.7 Q-57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75 -19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
    <path d="M26.55 -24.3 Q14.9 -24.3 6.7 -17.15 -1.55 -10.05 -1.55 0.05 -1.55 10.1 6.7 17.25 14.9 24.35 26.55 24.4 38.15 24.35 46.4 17.25 54.65 10.1 54.65 0.05 54.65 -10.05 46.4 -17.15 38.15 -24.3 26.55 -24.3 M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
  </g>


</svg>


        </div>
        
        <!-- Outline SVG -->
        <div class="head">



            <svg id="head_svg">
               

    <svg id="head_shape" xmlns="http://www.w3.org/2000/svg" width="150" height="90">



              <g transform="matrix(1.0, 0.0, 0.0, 1.0, 75.0, 45.0)">
    <path id="head_color" d="M75.0 0.0 Q75.0 18.65 53.0 31.8 31.05 45.0 0.0 45.0 -31.05 45.0 -53.05 31.8 -75.0 18.65 -75.0 0.0 -75.0 -18.65 -53.05 -31.85 -31.05 -45.0 0.0 -45.0 31.05 -45.0 53.0 -31.85 75.0 -18.65 75.0 0.0" fill="#ffcc66" fill-rule="evenodd" stroke="none" />
  </g>
         
        <g id="headoutline" transform="matrix(1.0, 0.0, 0.0, 1.0, 75.0, 45.0)">
    <path d="M53.0 -31.85 Q75.0 -18.65 75.0 0.0 75.0 18.65 53.0 31.8 31.05 45.0 0.0 45.0 -31.05 45.0 -53.05 31.8 -75.0 18.65 -75.0 0.0 -75.0 -18.65 -53.05 -31.85 -31.05 -45.0 0.0 -45.0 31.05 -45.0 53.0 -31.85 M51.05 -29.9 Q29.9 -42.25 0.0 -42.25 -29.9 -42.25 -51.05 -29.9 -72.2 -17.5 -72.2 0.0 -72.2 17.5 -51.05 29.85 -29.9 42.25 0.0 42.25 29.9 42.25 51.05 29.85 72.2 17.5 72.2 0.0 72.2 -17.5 51.05 -29.9" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
  </g>

  </svg>
</svg>
</div>



</div>
      <!--  <object data="body.svg" type="image/svg+xml" class="part body"></object>
        <object data="leftarms.svg" type="image/svg+xml" class="part arms"></object>
        <object data="rightarms.svg" type="image/svg+xml" class="part arms"></object>
        <object data="leftlegs.svg" type="image/svg+xml" class="part legs"></object>
        <object data="rightlegs.svg" type="image/svg+xml" class="part legs"></object>-->
    </div> 

    <script src="player.js"></script>
</body>
</html>

How can I get translateY to work?

Javascript is saying my values are not equal even though they are [closed]

What i’m trying to do is compare two variables. Basically it is from a double computation, and the values appear to be the same, but the computer doesn’t think they are.

public Line(double x, double y, double slope)
    {
        this.slope=0;
        this.slope = slope;
        this.yIntercept = y-x*slope;
        this.isVertical = false;
    }

...

(this.slope == other.slope) // when these are equal, this is returning false

this.slope and other.slope are both supposed to be equal. However, the computer is saying that the variables are not equal. When i check debug, these are the variables and their values.
this.slope = 1.0, other.slope = 1.0
essentially they are the same value, but my computer is deciding that they are not.
I tried adding tolerance of 0.001 and such, but the computer is still saying the two variables are not equal.

I think this could have been a bit flip but not entirely sure what happened here.

“[nodemon] app crashed – waiting for file changes” – I’m completely stumped

This is actually part of a training exercise, but I’m sure I’ll need it for a Capstone project I’m working on. I’ve tried a couple of things, but a lot of what I looked up is confusing to me. Does anyone know of a simple way to fix this?…

My index.js code.

I’ve tried killing the server elsewhere and checking if I installed Express erroneously. I double-checked to make sure my files were saved and in proper syntax. Nothing changed. Some of the solutions I looked up were hard to follow, and I didn’t want to risk messing up my files using the wrong thing.

The error in question is “listen EADDRINUSE: address already in use ::: 5000.”

I can’t play multiple sounds on iOS due to restrictions. Work-arounds for a game?

I am creating a JavaScript game that needs sound to make it engaging, even without client interaction. However, on iOS, there are heavy restrictions in place to prevent potential misuse of sounds, videos, etc., which I completely understand.

In my case, I have one button to start the game. There are a few other buttons, but none of which could be used for the sounds I want to play.

Knowing the restrictions, are there any other possible work-arounds for this besides buttons/clicks?

I have done some research on SO, Reddit and ChatGPT, and so far nothing fits this type of situation (an application that needs audio without more than 1-2 document clicks).
One thing I have tried is using the first button (the game start button) to play multiple clips. However, this only played one of them.

Are there any possible or ideal solutions? My guess is no, but it doesn’t hurt to have extra opinions.

Thanks in advance.

Get child component name from Outlet in parent component

I am trying to find out the name of the component rendered within the Outlet component in order to further decide whether a user has permissions to view it.

My Root component:

import {
  Outlet,
  useNavigation,
  useOutlet
} from "react-router-dom";
import { OrbitProgress } from 'react-loading-indicators';
import { StoreContext } from "./store";

const Root = () => {
  const navigation = useNavigation();

  const outletData = useOutlet();

  console.log(outletData);

  return (
    <>
      {navigation.state === 'loading' &&
        <div className="loading">
          <OrbitProgress
            color="#0d6efd"
            size="medium"
            text=""
            textColor=""
          />
        </div>
      }
      <Outlet context={StoreContext} />
    </>
  );
}

I tried using useOutlet hook, but it provides an object with a bunch of nested objects, however I couldn’t find the name of the child component rendered. Is it possible to know the child component name?

Getting ERR_HTTP_INVALID_STATUS_CODE instead of the actual error

I wrote an error handler like this:
AppError class:

const getStatus = (statusCode) => {
if (statusCode >= 400 && statusCode < 500) return "fail";
return "error";
};

export class AppError extends Error {
 constructor(message, statusCode) {
  super(message);
  this.statusCode = statusCode;
  this.status = getStatus(statusCode);

  this.isOperational = true;

  Error.captureStackTrace(this, this.constructor);
 }
}

and this is some of the error handler:

const sendErrorDev = (err, req, res) => {
  console.log("dev", err);
  return res.status(err.statusCode ?? 500).json({
    status: err.status,
    error: err,
    message: err.message,
    stack: err.stack,
  });
};
const globalErrorHandler = (err, req, res, next) => {
  console.log("Caught Error:", err.statusCode);
  err.statusCode = err.statusCode || 500;
  err.status = err.status || "error";

  if (process.env.NODE_ENV === "development") {
    console.log("env", process.env.NODE_ENV);
    sendErrorDev(err, req, res);
  } else if (process.env.NODE_ENV === "production") {
    let error = cloneError(err);

    // Map known error types
    error = handleError(error);

    // MongoDB duplicate key errors (code 11000)
    if (error.code === 11000) error = handleDuplicateFieldDB(error);

    sendErrorProd(error, req, res);
  }
};

export default globalErrorHandler;

I am using this for login and I send the error like this:

  if (!user || !(await user.correctPassword(password, user.password))) {
    return next(new AppError("Incorrect email or password", 401));
  }

I get an error in postman 500 Internal Server Error

"status": "error",
"error": {
    "code": "ERR_HTTP_INVALID_STATUS_CODE",
    "statusCode": 500,
    "status": "error"
},
"message": "Invalid status code: fail",
"stack": "RangeError [ERR_HTTP_INVALID_STATUS_CODE]: Invalid status code: failn

The env is a dev env. The err.statusCode and err.status are for some reason undefined in the globalErrorHandler.
If I change the this.status in the AppError to 401 (this.status=401) I get my error but the error in postman remains 500 Internal Server Error and the err.status and err.statusCode are not printed from globalErrorHandler so it doesn’t even enter the function.
I am very confused, please help.
Thank you

Setting CSP Headers to Allow Javascript fIles

I’m encountering a problem with something called CSP when trying to execute a Javascript file in my project.

Error message in console:

bootstrapAutofill.ts…oader-R_TAdozE.js:8 Refused to load the script ‘chrome-extension://d7f89120-b3fb-4edf-a0c6-6aca3e7e7d97/assets/bootstrapAutofill.ts-DSLwOlpR.js’ because it violates the following Content Security Policy directive: “script-src ‘self’ ‘wasm-unsafe-eval’ ‘inline-speculation-rules'”. Note that ‘script-src-elem’ was not explicitly set, so ‘script-src’ is used as a fallback.*

The script file is located locally on my computer and inserted via the <script> tag in HTML Header.

I have never seen this error before and can’t seem to solve it.
I have no experience with setting HTTP Headers before so any help/guiding on the issue is appreciated.
I have tried using the tag with no luck either.

Thanks in advance.

I have tried using the <meta> tag to allow CSP for src-script.

javascript: JOI merge fields conditionally

Haven’t found any working solution for my case, so I’m creating a new one.
I’ve got this architecture:

function getParts1() {
  return {
    common: joi.object({
      common_key: joi.number().integer().required(),
      common_conditional: joi.string().valid("AB", "CD", "EF").required(),
      common_value1: joi.string().max(144).required(),
    }),

    variation1: joi.object({
      field1: joi.number().allow(0).required(),
      field2: joi.string().max(255).allow("").required(),
    }),

    variation2: joi.object({
      another_field1: joi.number().allow(0).required(),
      another_field2: joi.string().max(255).allow("").required(),
    }),

    variation3: joi.object({
      super_another_field1: joi.number().allow(0).required(),
      super_another_field2: joi.string().max(255).allow("").required(),
    }),
  };
}

function getParts2() {}; //And much more functions like getParts1 with the same keys but different objects as values

I need to create a function that can work with the output of this kind of functions in the next way:

  • Initially it will get a common part from resulting array.
  • Then it conditionally merge other variations, condition based on value of common_conditional. In this example I need to merge to array.common keys from array.variation1 if array.common.common_conditional == "AB", variation2 if "CD", etc. It can be much more.

Because of difference in joi.object(...) of each variation for each Parts, I can’t find any solution for this problem.

For example, for the code above if such schema will be created:

const schema = getSchemaFromParts(getParts1());

const data1 = {
  common_key: 12,
  common_conditional: "AB",
  common_value1: "somevalue",
  field1: 14,
  field2: "Value for field2"
}

const data2 = {
  common_key: 16,
  common_conditional: "CD",
  common_value1: "somevalue2",
  another_field1: 18,
  another_field2: "Hello world"
}

const data3 = {
  common_key: 16,
  common_conditional: "EF",
  common_value1: "somevalue3",
  another_field1: 20,
  another_field2: "Broken data"
}

const res1 = schema.validate(data1);
const res2 = schema.validate(data2);
const res3 = schema.validate(data3);
console.log(res1.error)
console.log(res2.error)
console.log(res3.error)

It should pass the res1 and res2, but res3 should throw an error of ValidationError: "another_field1" is not allowed { …(2) }.
Is there any solutions for this case, or maybe it’s better to create a different architecture for the Parts function?

Working with filter: filter is not a function issue

I’m using spread to “merge” the objects from my functions into a single object. I want to check if the values I’m sending at my “profiles” array of strings matches any of the values at the merged object and print them.

async getAll() {
    try {
      const triangles = await this.getAlltriangles(true);
      const squares = await this.getAllsquares(true);
      const circles = await this.getAllcircles(true);

      const output = {
        ...triangles, ...squares, ...circles,
      };

      
      console.log('unified list:', output);
      console.log(typeof (output)); // just double checking if the outcome is an array indeed
      return output;
    } catch (error) {
      this.logger.error(error);
    }
  }

The next function will try doing the operation. I’m trying to work with filter and includes:

async findProfiles(profiles: string[], authorizedUser: string) {
    if (!authorizedUser) return 'Invalid User';
    if (!profiles || profiles.length === 0) {
      return 'No profiles were informed';
    }
    try {
      await this.getAll();
      const getAllarray = await this.getAll();
      const matches = getAllarray.filter((obj) => profiles.includes(obj.name));

      console.log(matches);
      return { matches };
    } catch (error) {
      console.log(error);
      return error;
    }
  }

this line const matches = getAllarray.filter((obj) => profiles.includes(obj.name)); returns me an empty object instead ,along with a TypeError: getAllarray.filter is not a function