Category: javascript

Category Added in a WPeMatico Campaign

How to add array of videos links into code

How do I add this:

videoPlayer.init([
    "0dgNc5S8cLI",
    "mnfmQe8Mv1g",
    "CHahce95B1g",
    "2VwsvrPFr9w"
]);

Into here?

videoPlayer.init({
  afterPlayerReady: function initCover() {
    manageCover.init(function playVideo() {
      videoPlayer.play();
    });
  }
});

That is what I am needing to do.

https://jsfiddle.net/x4qs50wz/

Currently, there is this error:

 Cannot read properties of undefined (reading 'join')"

That is because, I have not added the array to the code because I am stuck.

LocalStorage Quasar Storing a Checkbox

This really just doesn’t make sense to me why it’s such a pain storing a value of a q-checkbox and keeping it after reloading the page. I had no issues doing this with jQuery but I really need help understanding this for Quasar.

https://quasar.dev/quasar-plugins/web-storage

I need just a working example of how to do this correctly. I love Quasar because of the preset styles and just how easy it is to implement things usually. Thanks everyone!

Enumerating sliced array using original indices

I need to slice an array and enumerate the values but I also need the reference to the original index because I’m doing an async operation that needs to be mapped back to the original index in the original array when complete.

const array = ['foo', 'bar', 'baz', 'qux', 'quux', 'corge'];
const slicedArray = array.slice(0, 3).map((v, i) => ({ v, i }));
// Returns: [{ "v": "foo", "i": 0 }, { "v": "bar", "i": 1 }, { "v": "baz", "i": 2 }]
// Required: [{ "v": "foo", "i": 0 }, { "v": "bar", "i": 1 }, { "v": "baz", "i": 2 }]
const slicedArray2 = array.slice(3, 6).map((v, i) => ({ v, i }));
// Returns: [{ "v": "qux", "i": 0 }, { "v": "quux", "i": 1 }, { "v": "corge", "i": 2 }]
// Required: [{ "v": "qux", "i": 3 }, { "v": "quux", "i": 4 }, { "v": "corge", "i": 5 }]

How can I achieve this?

Is it ok to declare variables inside of if statements?

Today I’m refactoring someone’s code from var to let which should be used in modern JS and declared variables inside of if statements occur a lot in the code. So this made me wonder is it ok to declare variables inside of if statements or should it be avoided in JS?

var Example1 = "test";

if (Example1 == "test") {
   var test1 = true;
}

if (test1) {
   console.log("Test 1 works!");
}

// Refactored code do not work with let

let Example2 = true;

if (Example2 == "test") {
   let test2 = true;
}

if (test2) {
   console.log("Test 2 works!");
}

Get point projection on line defined by two points

How can I get a point projection on a line in the two following cases:

enter image description here

I have A, B, and P points defined by the x and y values in the 2D coordinating system. How can I get P’ point coordinates using javascript?
Every point is defined by the following values:

{
   x: number;
   y: number;
}

change and text color onmouseover an js

in that html

        <article id="art">
            <h1 class="hstyle">1</h1>
            <p class="pstyle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, sed.</p>
        </article>

        <article id="art">
            <h1 class="hstyle">2</h1>
            <p class="pstyle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste, cumque!</p>
        </article>

        <article id="art">
            <h1 class="hstyle">3</h1>
            <p class="pstyle">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis, officia!</p>
        </article>

        <article id="art">
            <h1 class="hstyle">4</h1>
            <p class="pstyle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, consequatur!</p>
        </article>

        <article id="art">
            <h1 class="hstyle">5</h1>
            <p class="pstyle">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero, sed.</p>
        </article>

        <article id="art">
            <h1 class="hstyle">6</h1>
            <p class="pstyle">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officia, asperiores?</p>
        </article>
    </div>

in javascript i want to change backgroundcolor of all articles onmouseover and in the same time change h1 and p text color onmouseover the articles
i can do backgroundcolor change in js :

a = document.getElementsByTagName("article");
h = document.getElementsByClassName("hstyle");
p = document.getElementsByClassName("pstyle");
console.log(a);
console.log(h);
console.log(p);
for (i in a) {
    a[i].onmouseover = function () {
        this.style.backgroundColor = "black";
    };
    a[i].onmouseout = function () {
        this.style.backgroundColor = "white";
    };
};

but as you can see i could’nt go any further
some help would be appreciated .

Difference between a comparison function returning 0 and -1 in JavaScript? [duplicate]

I stumbled upon some unexpected behaviour when solving the following problem:

“Make a comparison function such that you can sort an array in reverse alphabetical order.”

I did solve the problem, but my initial solution did not work and I do not understand why. I also want to mention that I know one can simply use .sort() and .reverse() to achieve the same goal, but that is not the intent here.

My initial approach was the following:

function reverseAlphabetical(a, b) {
    let list = [a, b];
    list.sort();

    if (list[0] == a) {
        return true;
    } else {
        return false;
    }
}
    
let fruits = ["melon", "apple", "orange", "pear"];
fruits.sort(reverseAlphabetical);
console.log(fruits);

This simply outputs the same array fruits. Same happens when I replace true by 1 and false by 0. If I replace false by -1 however, it works.

I was under the impression that the return value 0 means that a and b are equal, and hence should not be exchanged, while -1 means that a should be sorted before b, again meaning they should not be exchanged. I can not see why the return values 0 and -1 should yield different results. Does anybody have an explanation?

Got an error “cannot read properties” in my game code

I am working on a simple game project on my studies, still not too good at it. I’ve tried to implement an “if-statement” that limited my game character movements inside the canyon so it could not go through the walls and find itself underground. I thought that it looks pretty good and functional but I still get information in the console that properties x_pos are undefined in line 160. Can someone smarter show me where is my problem? I suppose that I should somehow recall properties inside the if-statement but as far I’ve tried I just ruined everything and made it messier than this is now.

//The Game Project 5 - Bring it all together

  

var gameChar_x;
var gameChar_y;
var floorPos_y;
var scrollPos;
var gameChar_world_x;

var isLeft;
var isRight;
var isFalling;
var isPlummeting;

var trees_x;
var treePos_y;
var collectables;

function setup() {
  createCanvas(1024, 576);
  floorPos_y = (height * 3) / 4;
  gameChar_x = width / 2;
  gameChar_y = floorPos_y;
  treePos_y = floorPos_y - 150;

  // Variable to control the background scrolling.
  scrollPos = 0;

  // Variable to store the real position of the gameChar in the game
  // world. Needed for collision detection.
  gameChar_world_x = gameChar_x - scrollPos;

  // Boolean variables to control the movement of the game character.
  isLeft = false;
  isRight = false;
  isFalling = false;
  isPlummeting = false;

  // Initialise arrays of scenery objects.
  trees_x = [
    100, 250, 500, 650, 950, 1390, 1560, 1840, 2130, 2450, 2900, 3100, 3380,
    3500, 3710, 3900,
  ];
  clouds = [{
      x_pos: 120,
      y_pos: 100
    },
    {
      x_pos: 400,
      y_pos: 150
    },
    {
      x_pos: 600,
      y_pos: 100
    },
    {
      x_pos: 900,
      y_pos: 150
    },
    {
      x_pos: 600,
      y_pos: 100
    },
    {
      x_pos: 900,
      y_pos: 150
    },
    {
      x_pos: 1600,
      y_pos: 100
    },
    {
      x_pos: 1400,
      y_pos: 150
    },
    {
      x_pos: 1900,
      y_pos: 150
    },
    {
      x_pos: 2400,
      y_pos: 150
    },
    {
      x_pos: 2600,
      y_pos: 100
    },
    {
      x_pos: 2900,
      y_pos: 150
    },
    {
      x_pos: 3400,
      y_pos: 150
    },
    {
      x_pos: 3600,
      y_pos: 100
    },
    {
      x_pos: 3900,
      y_pos: 150
    },
  ];
  mountains = [{
      x_pos: 10,
      y_pos: 432
    },
    {
      x_pos: 400,
      y_pos: 432
    },
    {
      x_pos: 800,
      y_pos: 432
    },
    {
      x_pos: 1200,
      y_pos: 432
    },
    {
      x_pos: 1600,
      y_pos: 432
    },
    {
      x_pos: 1900,
      y_pos: 432
    },
    {
      x_pos: 2400,
      y_pos: 432
    },
    {
      x_pos: 2800,
      y_pos: 432
    },
    {
      x_pos: 3700,
      y_pos: 432
    },
  ];
  canyons = [{
      x_pos: 10,
      width: 80
    },
    {
      x_pos: 270,
      width: 80
    },
    {
      x_pos: 730,
      width: 80
    },
    {
      x_pos: 1010,
      width: 80
    },
    {
      x_pos: 1270,
      width: 80
    },
    {
      x_pos: 1730,
      width: 80
    },
    {
      x_pos: 2010,
      width: 80
    },
    {
      x_pos: 2270,
      width: 80
    },
    {
      x_pos: 2730,
      width: 80
    },
    {
      x_pos: 3010,
      width: 80
    },
    {
      x_pos: 3570,
      width: 80
    },
    {
      x_pos: 3730,
      width: 80
    },
  ];
  collectables = [{
      x_pos: 140,
      y_pos: floorPos_y,
      isFound: false
    },
    {
      x_pos: 380,
      y_pos: floorPos_y,
      isFound: false
    },
    {
      x_pos: 480,
      y_pos: floorPos_y - 50,
      isFound: false
    },
    {
      x_pos: 670,
      y_pos: floorPos_y - 50,
      isFound: false
    },
    {
      x_pos: 900,
      y_pos: floorPos_y,
      isFound: false
    },
    {
      x_pos: 1250,
      y_pos: floorPos_y - 50,
      isFound: false
    },
    {
      x_pos: 1400,
      y_pos: floorPos_y,
      isFound: false
    },
    {
      x_pos: 1550,
      y_pos: floorPos_y - 50,
      isFound: false
    },
    {
      x_pos: 1900,
      y_pos: floorPos_y,
      isFound: false
    },
    {
      x_pos: 2500,
      y_pos: floorPos_y,
      isFound: false
    },
    {
      x_pos: 2700,
      y_pos: floorPos_y - 50,
      isFound: false
    },
    {
      x_pos: 2900,
      y_pos: floorPos_y - 50,
      isFound: false
    },
    {
      x_pos: 3300,
      y_pos: floorPos_y,
      isFound: false
    },
    {
      x_pos: 3540,
      y_pos: floorPos_y - 50,
      isFound: false
    },
    {
      x_pos: 3850,
      y_pos: floorPos_y,
      isFound: false
    },
  ];
}

function draw() {
  background(100, 155, 255); // fill the sky blue

  noStroke();
  fill(240, 240, 240);
  rect(0, floorPos_y, width, height / 4); // draw some green ground

  push();
  translate(scrollPos, 0);
  // Draw clouds.
  drawClouds();

  // Draw mountains.
  drawMountains();

  // Draw trees.
  drawTrees();
  // Draw canyons.
  for (var i = 0; i < canyons.length; i++) {
    drawCanyon(canyons[i]);
    checkCanyon(canyons[i]);
  }

  // Draw collectable items.
  for (var i = 0; i < collectables.length; i++) {
    if (collectables[i].isFound == false) {
      drawCollectable(collectables[i]);
      checkCollectable(collectables[i]);
    }
  }
  pop();
  // Draw game character.

  drawGameChar();

  //Logic to make the game character move or the background scroll.

  if (isLeft == true) {
    var spaceLeft = gameChar_x - (canyons[i].x_pos + 20);
    var deltaX = gameChar_y <= floorPos_y ? 4 : Math.min(4, spaceLeft);
    gameChar_x -= deltaX;
  } else {
    scrollPos += 5;
  }
  if (isRight == true) {
    var spaceRight = canyons[i].x_pos + canyons[i].width - 20 - gameChar_x;
    var deltaX = gameChar_y <= floorPos_y ? 4 : Math.min(4, spaceRight);
    gameChar_x += deltaX;
  } else {
    scrollPos -= 5;
  }

  // Logic to make the game character rise and fall.
  //jumping
  if (gameChar_y <= floorPos_y) {
    gameChar_y += 4;
    isFalling = true;
  } else {
    isFalling = false;
  }

  // Update real position of gameChar for collision detection.
  gameChar_world_x = gameChar_x - scrollPos;
}

// ---------------------
// Key control functions
// ---------------------

function keyPressed() {
  console.log(keyCode);
  if (keyCode == 37) {
    isLeft = true;
  }
  if (keyCode == 39) {
    isRight = true;
  }
  if (keyCode == 32 && gameChar_y <= floorPos_y + 5) {
    gameChar_y -= 70;
  }
}

function keyReleased() {
  if (keyCode == 37) {
    isLeft = false;
  }
  if (keyCode == 39) {
    isRight = false;
  }
}

// ------------------------------
// Game character render function
// ------------------------------

// Function to draw the game character.

function drawGameChar() {
  // draw game character
  if (isLeft && isFalling) {
    // add your jumping-left code
    fill(255);
    stroke(1);
    strokeWeight(1);
    //lower body
    ellipse(gameChar_x, gameChar_y - 20, 20, 20);
    //legs
    ellipse(gameChar_x - 6, gameChar_y - 7, 7, 7);
    ellipse(gameChar_x - 12, gameChar_y - 14, 7, 7);
    //upper body
    ellipse(gameChar_x - 5, gameChar_y - 31, 15, 15);
    //head
    ellipse(gameChar_x - 9, gameChar_y - 46, 12, 17);
    fill(0);
    //button
    ellipse(gameChar_x - 9, gameChar_y - 27, 3, 3);
    //eye
    ellipse(gameChar_x - 11, gameChar_y - 48, 2, 2);
    stroke(116, 58, 8);
    strokeWeight(2);
    fill(116, 58, 8);
    //"hair"
    line(gameChar_x - 9, gameChar_y - 57, gameChar_x - 3, gameChar_y - 57);
    line(gameChar_x - 9, gameChar_y - 56, gameChar_x - 3, gameChar_y - 62);
    line(gameChar_x - 9, gameChar_y - 57, gameChar_x - 9, gameChar_y - 63);
    //arm
    line(gameChar_x - 6, gameChar_y - 30, gameChar_x - 20, gameChar_y - 35);
    //nose
    noStroke();
    fill(255, 0, 0);
    triangle(
      gameChar_x - 13,
      gameChar_y - 47,
      gameChar_x - 23,
      gameChar_y - 40,
      gameChar_x - 13,
      gameChar_y - 43
    );
  } else if (isRight && isFalling) {
    // add your jumping-right code
    fill(255);
    stroke(1);
    strokeWeight(1);
    //lower body
    ellipse(gameChar_x, gameChar_y - 20, 20, 20);
    //legs
    ellipse(gameChar_x + 6, gameChar_y - 7, 7, 7);
    ellipse(gameChar_x + 12, gameChar_y - 14, 7, 7);
    //upper body
    ellipse(gameChar_x + 5, gameChar_y - 31, 15, 15);
    //head
    ellipse(gameChar_x + 9, gameChar_y - 46, 12, 17);
    fill(0);
    //button
    ellipse(gameChar_x + 9, gameChar_y - 27, 3, 3);
    //eye
    ellipse(gameChar_x + 11, gameChar_y - 48, 2, 2);
    stroke(116, 58, 8);
    strokeWeight(2);
    fill(116, 58, 8);
    //"hair"
    line(gameChar_x + 9, gameChar_y - 57, gameChar_x + 3, gameChar_y - 57);
    line(gameChar_x + 9, gameChar_y - 56, gameChar_x + 3, gameChar_y - 62);
    line(gameChar_x + 9, gameChar_y - 57, gameChar_x + 9, gameChar_y - 63);
    //arm
    line(gameChar_x + 6, gameChar_y - 30, gameChar_x + 20, gameChar_y - 35);
    //nose
    noStroke();
    fill(255, 0, 0);
    triangle(
      gameChar_x + 13,
      gameChar_y - 47,
      gameChar_x + 23,
      gameChar_y - 40,
      gameChar_x + 13,
      gameChar_y - 43
    );
  } else if (isLeft) {
    // add your walking left code
    fill(255);
    stroke(1);
    strokeWeight(1);
    //lower body
    ellipse(gameChar_x, gameChar_y - 13, 20, 20);
    //legs
    ellipse(gameChar_x, gameChar_y, 7, 7);
    ellipse(gameChar_x - 12, gameChar_y - 7, 7, 7);
    //upper body
    ellipse(gameChar_x, gameChar_y - 26, 15, 15);
    //head
    ellipse(gameChar_x, gameChar_y - 40, 12, 17);
    fill(0);
    //button
    ellipse(gameChar_x - 4, gameChar_y - 23, 3, 3);
    //eye
    ellipse(gameChar_x - 2, gameChar_y - 42, 2, 2);
    stroke(116, 58, 8);
    strokeWeight(2);
    fill(116, 58, 8);
    //"hair"
    line(gameChar_x, gameChar_y - 51, gameChar_x - 5, gameChar_y - 56);
    line(gameChar_x, gameChar_y - 49, gameChar_x, gameChar_y - 56);
    line(gameChar_x, gameChar_y - 51, gameChar_x + 5, gameChar_y - 56);
    //arm
    line(gameChar_x, gameChar_y - 27, gameChar_x, gameChar_y - 15);
    //nose
    noStroke();
    fill(255, 0, 0);
    triangle(
      gameChar_x - 6,
      gameChar_y - 39,
      gameChar_x - 17,
      gameChar_y - 33,
      gameChar_x - 6,
      gameChar_y - 36
    );
  } else if (isRight) {
    // add your walking right code
    fill(255);
    stroke(1);
    strokeWeight(1);
    //lower body
    ellipse(gameChar_x, gameChar_y - 13, 20, 20);
    //legs
    ellipse(gameChar_x, gameChar_y, 7, 7);
    ellipse(gameChar_x + 12, gameChar_y - 7, 7, 7);
    //upper body
    ellipse(gameChar_x, gameChar_y - 26, 15, 15);
    //head
    ellipse(gameChar_x, gameChar_y - 40, 12, 17);
    fill(0);
    //button
    ellipse(gameChar_x + 4, gameChar_y - 23, 3, 3);
    //eye
    ellipse(gameChar_x + 2, gameChar_y - 42, 2, 2);
    stroke(116, 58, 8);
    strokeWeight(2);
    fill(116, 58, 8);
    //"hair"
    line(gameChar_x, gameChar_y - 51, gameChar_x - 5, gameChar_y - 56);
    line(gameChar_x, gameChar_y - 49, gameChar_x, gameChar_y - 56);
    line(gameChar_x, gameChar_y - 51, gameChar_x + 5, gameChar_y - 56);
    //arm
    line(gameChar_x, gameChar_y - 27, gameChar_x, gameChar_y - 15);
    //nose
    noStroke();
    fill(255, 0, 0);
    triangle(
      gameChar_x + 6,
      gameChar_y - 39,
      gameChar_x + 17,
      gameChar_y - 33,
      gameChar_x + 6,
      gameChar_y - 36
    );
  } else if (isFalling || isPlummeting) {
    // add your jumping facing forwards code
    fill(255);
    stroke(1);
    strokeWeight(1);
    //lower body
    ellipse(gameChar_x, gameChar_y - 23, 20, 20);
    //legs
    ellipse(gameChar_x - 7, gameChar_y - 13, 7, 7);
    ellipse(gameChar_x + 7, gameChar_y - 13, 7, 7);
    //upper body
    ellipse(gameChar_x, gameChar_y - 36, 15, 15);
    //head
    ellipse(gameChar_x, gameChar_y - 50, 12, 17);
    fill(0);
    //button
    ellipse(gameChar_x, gameChar_y - 33, 3, 3);
    //eyes
    ellipse(gameChar_x - 2, gameChar_y - 52, 2, 2);
    ellipse(gameChar_x + 2, gameChar_y - 52, 2, 2);
    stroke(116, 58, 8);
    strokeWeight(2);
    fill(116, 58, 8);
    //"hair"
    line(gameChar_x, gameChar_y - 61, gameChar_x - 5, gameChar_y - 66);
    line(gameChar_x, gameChar_y - 59, gameChar_x, gameChar_y - 66);
    line(gameChar_x, gameChar_y - 61, gameChar_x + 5, gameChar_y - 66);
    //arms
    line(gameChar_x - 7, gameChar_y - 37, gameChar_x - 15, gameChar_y - 57);
    line(gameChar_x + 7, gameChar_y - 37, gameChar_x + 15, gameChar_y - 57);
    //nose
    noStroke();
    fill(255, 0, 0);
    triangle(
      gameChar_x - 2,
      gameChar_y - 49,
      gameChar_x - 10,
      gameChar_y - 43,
      gameChar_x + 2,
      gameChar_y - 49
    );
  } else {
    // add your standing front facing code
    fill(255);
    stroke(1);
    strokeWeight(1);
    //lower body
    ellipse(gameChar_x, gameChar_y - 13, 20, 20);
    //legs
    ellipse(gameChar_x - 5, gameChar_y, 7, 7);
    ellipse(gameChar_x + 5, gameChar_y, 7, 7);
    //upper body
    ellipse(gameChar_x, gameChar_y - 26, 15, 15);
    //head
    ellipse(gameChar_x, gameChar_y - 40, 12, 17);
    fill(0);
    //button
    ellipse(gameChar_x, gameChar_y - 23, 3, 3);
    //eyes
    ellipse(gameChar_x - 2, gameChar_y - 42, 2, 2);
    ellipse(gameChar_x + 2, gameChar_y - 42, 2, 2);
    stroke(116, 58, 8);
    strokeWeight(2);
    fill(116, 58, 8);
    //"hair"
    line(gameChar_x, gameChar_y - 51, gameChar_x - 5, gameChar_y - 56);
    line(gameChar_x, gameChar_y - 49, gameChar_x, gameChar_y - 56);
    line(gameChar_x, gameChar_y - 51, gameChar_x + 5, gameChar_y - 56);
    //arms
    line(gameChar_x - 7, gameChar_y - 27, gameChar_x - 15, gameChar_y - 17);
    line(gameChar_x + 7, gameChar_y - 27, gameChar_x + 15, gameChar_y - 17);
    //nose
    noStroke();
    fill(255, 0, 0);
    triangle(
      gameChar_x - 2,
      gameChar_y - 39,
      gameChar_x - 10,
      gameChar_y - 33,
      gameChar_x + 2,
      gameChar_y - 39
    );
  }
}

// ---------------------------
// Background render functions
// ---------------------------

// Function to draw cloud objects.
function drawClouds() {
  for (var i = 0; i < mountains.length; i++) {
    //cloud 1
    fill(224, 224, 224, 210);
    ellipse(clouds[i].x_pos, clouds[i].y_pos, 100 * 0.8, 100 * 0.8);
    ellipse(
      clouds[i].x_pos + 50 * 0.8,
      clouds[i].y_pos + 10 * 0.8,
      80 * 0.8,
      80 * 0.8
    );
    ellipse(
      clouds[i].x_pos - 50 * 0.8,
      clouds[i].y_pos + 10 * 0.8,
      80 * 0.8,
      80 * 0.8
    );
    ellipse(
      clouds[i].x_pos - 90 * 0.8,
      clouds[i].y_pos + 20 * 0.8,
      60 * 0.8,
      60 * 0.8
    );
    ellipse(
      clouds[i].x_pos + 90 * 0.8,
      clouds[i].y_pos + 20 * 0.8,
      60 * 0.8,
      60 * 0.8
    );
    //cloud 2
    fill(154, 153, 161, 210);
    ellipse(
      clouds[i].x_pos - 100 * 0.8,
      clouds[i].y_pos + 30 * 0.8,
      50 * 0.8,
      50 * 0.8
    );
    ellipse(
      clouds[i].x_pos - 125 * 0.8,
      clouds[i].y_pos + 40 * 0.8,
      30 * 0.8,
      30 * 0.8
    );
    ellipse(
      clouds[i].x_pos - 75 * 0.8,
      clouds[i].y_pos + 40 * 0.8,
      30 * 0.8,
      30 * 0.8
    );
    //cloud 3
    ellipse(
      clouds[i].x_pos + 110 * 0.8,
      clouds[i].y_pos + 30 * 0.8,
      50 * 0.8,
      50 * 0.8
    );
    ellipse(
      clouds[i].x_pos + 85 * 0.8,
      clouds[i].y_pos + 40 * 0.8,
      30 * 0.8,
      30 * 0.8
    );
    ellipse(
      clouds[i].x_pos + 135 * 0.8,
      clouds[i].y_pos + 40 * 0.8,
      30 * 0.8,
      30 * 0.8
    );
  }
}

// Function to draw mountains objects.
function drawMountains() {
  for (var i = 0; i < mountains.length; i++) {
    //big mountain 1
    fill(99, 106, 136);
    triangle(
      mountains[i].x_pos,
      mountains[i].y_pos,
      mountains[i].x_pos + 170 * 0.95,
      mountains[i].y_pos - 282 * 0.95,
      mountains[i].x_pos + 340 * 0.95,
      mountains[i].y_pos
    );
    //big mountain 2
    fill(110, 118, 150);
    triangle(
      mountains[i].x_pos - 30,
      mountains[i].y_pos,
      mountains[i].x_pos + 60 * 0.95,
      mountains[i].y_pos - 232 * 0.95,
      mountains[i].x_pos + 170 * 0.95,
      mountains[i].y_pos
    );
    //medium mountain 3
    fill(133, 137, 166);
    triangle(
      mountains[i].x_pos + 20,
      mountains[i].y_pos,
      mountains[i].x_pos + 160 * 0.95,
      mountains[i].y_pos - 152 * 0.95,
      mountains[i].x_pos + 280 * 0.95,
      mountains[i].y_pos
    );
  }
}

// Function to draw trees objects.
function drawTrees() {
  for (var i = 0; i < trees_x.length; i++) {
    //trunk
    fill(43, 24, 14);
    rect(trees_x[i] - 10, treePos_y + 90, 20, 60);
    //branches
    noFill();
    stroke(43, 24, 14);
    strokeWeight(5);
    bezier(
      trees_x[i] + 8,
      treePos_y + 90,
      trees_x[i] + 50,
      treePos_y + 60,
      trees_x[i] + 60,
      treePos_y + 10,
      trees_x[i] + 60,
      treePos_y + 10
    );
    bezier(
      trees_x[i] - 8,
      treePos_y + 90,
      trees_x[i] - 50,
      treePos_y + 60,
      trees_x[i] - 60,
      treePos_y + 10,
      trees_x[i] - 60,
      treePos_y + 10
    );
    bezier(
      trees_x[i] + 3,
      treePos_y + 90,
      trees_x[i] + 30,
      treePos_y + 30,
      trees_x[i] + 30,
      treePos_y + 30,
      trees_x[i] + 30,
      treePos_y - 5
    );
    bezier(
      trees_x[i] - 3,
      treePos_y + 90,
      trees_x[i] - 30,
      treePos_y + 30,
      trees_x[i] - 30,
      treePos_y + 30,
      trees_x[i] - 30,
      treePos_y - 5
    );
    bezier(
      trees_x[i] - 25,
      treePos_y + 75,
      trees_x[i] - 50,
      treePos_y + 90,
      trees_x[i] - 50,
      treePos_y + 80,
      trees_x[i] - 65,
      treePos_y + 70
    );
    bezier(
      trees_x[i] + 25,
      treePos_y + 75,
      trees_x[i] + 50,
      treePos_y + 90,
      trees_x[i] + 50,
      treePos_y + 80,
      trees_x[i] + 65,
      treePos_y + 70
    );
    bezier(
      trees_x[i] - 25,
      treePos_y + 75,
      trees_x[i] - 50,
      treePos_y + 90,
      trees_x[i] - 50,
      treePos_y + 80,
      trees_x[i] - 65,
      treePos_y + 70
    );
    bezier(
      trees_x[i] - 25,
      treePos_y + 40,
      trees_x[i] - 10,
      treePos_y + 35,
      trees_x[i] - 10,
      treePos_y + 45,
      trees_x[i],
      treePos_y + 30
    );
    bezier(
      trees_x[i] + 27,
      treePos_y + 20,
      trees_x[i],
      treePos_y + 10,
      trees_x[i] - 10,
      treePos_y + 10,
      trees_x[i],
      treePos_y
    );
    //snow on trees
    noStroke();
    fill(255, 200);
    //first snow from the left
    ellipse(trees_x[i] - 44, treePos_y + 79, 10, 7);
    ellipse(trees_x[i] - 49, treePos_y + 81, 8, 5);
    ellipse(trees_x[i] - 39, treePos_y + 81, 8, 5);
    //second snow from the left
    ellipse(trees_x[i] - 10, treePos_y + 35, 10, 7);
    ellipse(trees_x[i] - 14, treePos_y + 37, 8, 5);
    ellipse(trees_x[i] - 6, treePos_y + 33, 8, 5);
    //third snow from the left
    ellipse(trees_x[i] + 16, treePos_y + 10, 15, 10);
    ellipse(trees_x[i] + 10, treePos_y + 9, 13, 8);
    ellipse(trees_x[i] + 20, treePos_y + 14, 13, 8);
    //fourth snow from the left
    ellipse(trees_x[i] + 45, treePos_y + 76, 15, 10);
    ellipse(trees_x[i] + 40, treePos_y + 79, 13, 8);
    ellipse(trees_x[i] + 50, treePos_y + 79, 13, 8);
  }
}

// ---------------------------------
// Canyon render and check functions
// ---------------------------------

// Function to draw canyon objects.

function drawCanyon(t_canyon) {
  fill(99);
  rect(t_canyon.x_pos, floorPos_y, t_canyon.width, height);
  fill(70);
  rect(t_canyon.x_pos + 10, floorPos_y, t_canyon.width - 20, height);
  //water
  fill(123, 193, 239);
  rect(t_canyon.x_pos + 10, floorPos_y + 80, t_canyon.width - 20, height / 4);
}

// Function to check character is over a canyon.

function checkCanyon(t_canyon) {
  if (
    gameChar_world_x > t_canyon.x_pos &&
    gameChar_world_x < t_canyon.x_pos + t_canyon.width &&
    gameChar_y >= floorPos_y
  ) {
    isPlummeting = true;
    gameChar_y += 5;
  } else {
    isPlummeting = false;
  }
}

// ----------------------------------
// Collectable items render and check functions
// ----------------------------------

// Function to draw collectable objects.

function drawCollectable(t_collectable) {
  fill(255, 223, 128);
  noStroke();
  triangle(
    t_collectable.x_pos,
    t_collectable.y_pos,
    t_collectable.x_pos - 8,
    t_collectable.y_pos - 30,
    t_collectable.x_pos + 8,
    t_collectable.y_pos - 30
  );
  fill(165, 23, 105);
  strokeWeight(1);
  stroke(1);
  ellipse(t_collectable.x_pos, t_collectable.y_pos - 35, 20);
  fill(247, 196, 225);
  ellipse(t_collectable.x_pos, t_collectable.y_pos - 45, 18);
}

// Function to check character has collected an item.

function checkCollectable(t_collectable) {
  if (
    dist(
      gameChar_world_x,
      gameChar_y,
      t_collectable.x_pos,
      t_collectable.y_pos
    ) < 50
  ) {
    t_collectable.isFound = true;
  }
}

How to read a local image file in javascript? [duplicate]

I am reposting this question, don’t mark as duplicate. this is not duplicate of this question

I have a JSON

MyJson = {name:"file1",path:"d://photos/photo.jpg"}

I want to get photo.jpg in a const variable

const file: File = MyJson.path;

I want to perform multiple operations on file. If i can read it as dataURL then also that is fine. Please help me
How can i do this using javascript or angular?

JS-Cookie not being able to be set due to “HTTPONLY cookie already exists”

Next.js v12.0.7
NodeJS v14.17.4

I’m trying to create change my authentication from localstorage to a httponly cookie. I’ve chosen to use js-cookie for this but for some reason I just can’t create a cookie with the httponly parameter. I’m using this code below to set the cookie:

Cookies.set('authtoken', 'test', {
     path: '/',
     expires: 7,
     sameSite: 'strict',
     httpOnly: true
});

If I remove the httponly then the cookie would be set.. If I keep the httponly I get an error saying:

Cookie “authtoken” has been rejected because there is already an HTTP-Only cookie but script tried to store a new one.

I use Mozilla Firefox as my browser and I’ve tried changing the browser to see if something is up with the browser. Chrome does not state any errors in console but cookie also would not be set with httponly but without, no problemos.

Just in case it could be the value, my value consists of an base64 encoded jwt token. Could this break it?

Do we have any cookie experts out there who could assist, preferably not Santa. I’ve also done a short GIF to show my issue:
https://gyazo.com/16e02f4c095ee3309e1b57d9cabc6bd7

I’m going to keep trying. Was just hoping someone could end my suffering 😉

check date existence on array of string

This is my dataset from MongoDB Collection:


{
  "_id": "60c0ace96e93993880efd337",
  "lv": [
   uid: 1,
   "createdate": "2021-12-15T12:30:01.935Z",
   "updatedAt": [
      "2021-12-15T12:31:11.635Z",
      "2021-12-15T12:31:51.955Z",
      "2021-12-16T12:30:01.935Z",
      "2021-12-16T12:30:01.935Z",
      "2021-12-17T12:30:01.935Z",
      "2021-12-18T12:30:01.935Z"
   ]
  ]
},
{
...
}

I want to filterout only the data which date range lies in createdate column or updatedAt column.

I am not able to get the desired result. Not getting the idea that where I am making the mistake in the query or coed.

What I have tried I will mention here.

let startA = new Date("2021-12-14");
const a = new Date(startA.setHours(startA.getHours() - 5));
const start = new Date(a.setMinutes(startA.getMinutes() - 30));

let endA = new Date("2021-12-17");
const b = new Date(endA.setHours(endA.getHours() - 5));
const end = new Date(b.setMinutes(endA.getMinutes() - 30));

const fetchData = await MyCollection.findOne(
  { 
    _id: ObjectId(req.body.id),
    'lv.createdate': { $gte: start, $lt: end },
    'lv.updatedAt': {
      $elemMatch: { $gte: start, $lt: end }
    }
  }
).lean().exec();

Any help or suggestion is really appreciated. Thanks in advance for the interaction.

React script is found but it won’t render the simple hello world element

I’m new to react and i’m just testing out a simple render at the moment. I get no errors in the browser but nothing shows up on my screen that appears in my javascript react file.

html

<html>
    <head>
         <script  type="text/babel" src="reactfile.js"> testing</script>
    </head>
<link rel="stylesheet" href="/styles.css">
<body id="app">
    <p>react test</p>
</body>
</html>

react javascript file

import React from 'react';
import ReactDOM from 'react-dom';
class Helloworld extends React.Component {
  render() {
    return (
      <div>
        <p>Hello world!</p>
      </div>
    );
  }
}

ReactDOM.render(<Helloworld />, document.getElementById('root'));

How to implement this method in Ruby? or is there third party lib to do this?

I have this ts function:

import { keccak_256 } from "js-sha3";
import { Buffer } from "buffer/";


export function getNamehash(name: string) {
  let node = "0000000000000000000000000000000000000000000000000000000000000000";

  if (name) {
    let labels = name.split(".");

    for (let i = labels.length - 1; i >= 0; i--) {
      let labelSha = keccak_256(labels[i]);
      node = keccak_256(Buffer.from(node + labelSha, "hex"));
    }   
  }

  return "0x" + node;
}

and when calling this method, it gives results like:

getNamehash("a")
// "0xc3025f6c23b9ab4d91adbcccf350072ec880c65db9a3f42e802fe4ceed56e728"

getNamehash("a.b")
// "0xa57dcb7e802753630ec035bae538ca332465791509b1375525fe8b3b0bada7ef"

getNamehash("abc.def")
// "0xc3025f6c23b9ab4d91adbcccf350072ec880c65db9a3f42e802fe4ceed56e728"

How to implement this method in Ruby?

How do I ensure that my media query sidebar nav closes without affect my main nav menu

In my max-width:320px media query I have a sidebar navigation as oppose to the regular normal bar that is in the other max-width’s. now the problem I’m experiencing is that every time I close my sidebar nav in max-width:320px. the regular menu in the largest width:1440px is removed because the browser’s element style is set to “display:none”. How do I get around this, close my sidebar nav without removing main nav in the other width?

html

 <div id="mynavbar" class="navbar">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div class="logo">
          <img src="{% static 'TheMachine Images/The Machine 2.png' %}" alt="">
        </div>
        <span class="HOME">HOME</span>
        <span class="ARTIST">ARTIST</span>
        <span class="ABOUTUS">ABOUT US</span>
        <div class="search-bar">
          <textarea name="" placeholder="Search" id="search-area" cols="16" rows="1"></textarea>
          <div class="search-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi-search" viewBox="0 0 16 16">
              <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
            </svg>
          </div>
        </div>
          <div class="rec">
            <span class="SignIn">SignIN</span>
          </div>
          <div class="rec2">
            <span class="SignUP">SignUp</span>
          </div>
          <span class="nav-menu" style="font-size: 17px; cursor:pointer" onclick="openNav()">&#9776;OPEN</span>

          <script>
            function openNav() {
              document.getElementById("mynavbar").style.display = "block";
            }
            function closeNav() {
              document.getElementById("mynavbar").style.display = "none";
            }
          </script>
      </div>

Navbar css

.navbar{
    position: absolute;
    height: 91px;
    width: 1094px !important;
    left: 152px;
    top: 46px;
    border-radius: 0px;
}

Navbar css (max-width:320px)

.navbar{
        height: 100%;
        width: 250px !important;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        padding-top: 60px;
    }
    .navbar a{
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
    }
    .navbar a:hover{
        color: #f1f1f1;
    }
    .closebtn{
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }
    .nav-menu{
        display: block;
        z-index: auto;
    }