javascript – Page 2786 – Blancer.com Tutorials and projects

Act on Behalf of GitHub User With Supabase Auth

I have a JavaScript browser app, and a ASP .NET Core Minimal API backend. The database is Supabase and the user authenticates with the GitHub Supabase auth provider.

The app, whether backend or frontend needs to 1) administer GitHub repos on behalf of the user and 2) query/update data in Supabase

I’m trying to figure out the way to achieve all this with the least authentication friction. Ideally, the user would register with their GitHub account, install the GitHub app in their GitHub account and give it access. Then, they would be able to create GitHub repos by clicking a button in the browser app.

I can authenticate the user with GitHub, but this access token only gives the user access to GitHub, and not Supabase. The user would need to sign in a second time to access Supabase.

I can authenticate the user with Supabase (GitHub provider), but this access token only gives the user access to Supabase. The user would need to sign in a second time to access GitHub or for the app to perform GitHub operations on the user’s behalf.

So, I’m left wondering if there is a way to get an access token that allows the app to both query Supabase, and also perform GitHub operations on behalf of the user…

Is there really no way for the system to do both with a single access token? Is it necessary to sign in to two different systems to access either system?

Can’t get data from database and render into table in UI

I connected to the database in server.js file and fetch data in DataSensor.jsx by calling API ‘/api/getAll’. But my UI didn’t render anything, and I open console log, it showed me “Error fetching sensor data: AxiosError”. Please help me, I’m newbie.

import React, { useEffect, useState } from 'react'
import axios from 'axios';
import '../styles/datasensors.css'
const DataSensors = () => {

    const [sensorData, setSensorData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get('/api/getAll');
                console.log('Data received:', response.data);
                setSensorData(response.data);

    return (
        <div className='container__data'>
            <table className='data-table'>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Temperature</th>
                        <th>Humidity</th>
                        <th>Brightness</th>
                        <th>Created At</th>
                    </tr>
                </thead>
                <tbody>
                    {sensorData.map((data) => (
                        <tr key={data.id}>
                            <td>{data.id}</td>
                            <td>{data.temperature}</td>
                            <td>{data.humidity}</td>
                            <td>{data.brightness}</td>
                            <td>{data.createdAt}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    )
}

export default DataSensors;

And here’s my server.js to connect to mysql database

const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql2');
const cors = require('cors');

const app = express();
const port = 3002;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true}));
app.use(cors());

const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '123456',
    database: 'iot'
});

app.get('/api/getAll', (req, res) => {
    const sql = 'SELECT * FROM datasensors';

    db.query(sql, (err, result) => {
        if( err ) {
            console.error('Error executing query:', err);
            res.status(500).json({err: 'Internal Server Error'});
        } else {
            console.log('Data from database:', result);
            res.status(200).json(result); 
        }
    });
});

db.connect(err => {
    if( err ) {
        console.error("Lỗi kết nối tới cơ sở dữ liệu MySQL: " + err.stack);
        return;
    }
    console.log("Kết nối thành công đến cơ sở dữ liệu MySQL");
})

app.listen(port, () => {
    console.log(`Server đang lắng nghe tại http://localhost:${port}`);
});

Card Game: nextPlayer and invoking determineWinner

I’m in need of some assistance. I’m working on a BlackJack game and I’m having difficulty with the logic of the state of the game and when to determine a winner. I keep running into edge cases where either the browser freezes because of an infinite while loop or a stalemate where determineWinner is not invoked correctly…

I have tried using different boolean conditions depending on the player state, such as
this.hasBlackJack = false | true where this.cards.length === 2 && this.total() === 2
this.hasBusted = false | true where this.total() > 21
this.hasStood = false | true where player has elected or AI probability to bust is > 50%

I also, currently, have tried simplifying the check to isEligible as seen below…

I would greatly appreciate a nudge in the right direction!

(I work 2 jobs, so I’m always working on this when I”m already pretty tired. I am sure I’m missing the obvious at this point.. )

In class BlackJack

nextPlayer() {
  const activePlayer = this.getActivePlayer();
  console.log(activePlayer.name + ': ' + activePlayer.total())
  activePlayer.deactivate();

  let indexCurrentPlayer = this.players.indexOf(activePlayer);
  let indexNextPlayer = (indexCurrentPlayer - 1 + this.players.length) % this.players.length;

  // Find the next eligible player who has not busted
  const eligiblePlayers = this.players.filter(player => player.isEligible);
  let nextEligiblePlayer = eligiblePlayers[indexNextPlayer];

  // Continue finding the next eligible player
  while (!nextEligiblePlayer && eligiblePlayers.length > 0) {
    indexNextPlayer = (indexNextPlayer - 1 + this.players.length) % this.players.length;
    nextEligiblePlayer = eligiblePlayers[indexNextPlayer];
  }

  if (nextEligiblePlayer) {
    nextEligiblePlayer.activate();
  } else {
    // If there are no eligible players left, determine the winner
    const remainingPlayers = this.players.filter(player => player.isEligible);
    if (remainingPlayers.length === 0) {
      this.determineWinner();
    }
  }
}

In class Player

class Player {
  constructor(playerName, isAI, app) {
    this.isAI = isAI;
    this.AI_delayID = null;
    this.app = app;
    this.name = playerName;
    this.cards = [];
    this.template = new PlayerTemplate();
    this.isActive = false;
    this.isEligible = true;
  }

  activate() {
    this.isActive = true;
    this.turn();
  }

  turn() {
    const shouldHit = (this.total() < 21) && (this.calcBustProbability() < 0.5);

    if (this.isAI) {
      this.AI_delayID = setTimeout(() => {
        if (this.name === 'House' && this.total() === 17) {
          this.stand();
        }

        if (this.total() === 21) {
          this.has21();
        }

        if (this.total() < 21 && shouldHit) {
          this.app.renderDeal();
        } else if (this.total() > 21) {
          this.bust();
        } else {
          console.log(this.name + ' elected to STAND');
          this.stand();
        }
      }, 1000);
    } else {
      if (this.total() > 21) {
        this.bust();
      } else if (this.total() === 21) {
        this.has21();
      }
    }
  }

  calcBustProbability() {
    const numCardsRemain = this.app.blackjack.deck.getCardsRemaining();
    const currTotal = this.total();
    let bustCount = 0;

    for (let card of numCardsRemain) {
      const newTotal = currTotal + card.getValue();
      if (newTotal > 21) {
        bustCount++;
      }
    }
    const probability = bustCount / numCardsRemain.length;
    return probability;
  }

  bust() {
    console.log(this.name + ' BUSTED');
    this.isEligible = false;
    if (this.isAI) {
      clearTimeout(this.AI_delayID);
    }
    this.app.blackjack.nextPlayer();
  }

  stand() {
    console.log(this.name + ' STOOD');
    this.isEligible = false;
    if (this.isAI) {
      clearTimeout(this.AI_delayID);
    }
    this.app.blackjack.nextPlayer();
  }

  has21() {
    console.log(this.name + ' has 21');
    this.hasBlackJack = true;
    if (this.isAI) {
      this.app.blackjack.nextPlayer();
      clearTimeout(this.AI_delayID);
    }
  }

  deactivate() {
    this.isActive = false;
  }

  hit(card) {
    this.cards.push(card);
    this.renderCard();
    if (this.isAI) {
      this.app.blackjack.nextPlayer();
      clearTimeout(this.AI_delayID);
    }
  }

  total() {
    let sum = 0;
    this.cards.forEach(card => {
      sum += card.getValue();
    });
    const adjTotal = this.adjustForAces(sum);

    return adjTotal;
  }

  adjustForAces(sum) {
    let numAces = 0;
    for (const card of this.cards) {
      if (card.rank === 'A') {
        numAces++;
      }
    }

    while (numAces > 0 && sum > 21) {
      if (this.name === 'House' && numAces === 1) {
        break;
      }
      sum -= 10;
      numAces--;
    }
    return sum;
  }
}

Horizontal scroll bar does not hold

I have a table wrapped within a div wrapper with overflow-x:auto.

echo "<div style='display: block; white-space: nowrap; overflow-x: auto; '>";
echo "<table style='background-color: black; color: white; '>";
echo "<tr>";
$nb=0;
while ($nb<=$mb-1)
{
echo "<td>";
echo $bets[$nb]."nbsp;".$odds[$nb];
echo "</td>";
$nb=$nb+1;
}
echo "</tr>";
echo "</table>";
echo "</div>";

The overflow-x:auto setting works fine and a horizontal scroll bar is displayed. However, scrolling to the right to reveal the overflow does not hold. The slider automatically returns to the left. I will appreciate any help on this. When the slider is moved to the right it should stay so one can view the overflowed content. Thank you.

JS complains undefined even though same scope [closed]

Here I defined inside the main App component, a variable to hold all the newly mapped components, and have it show those components (todoComponents) however JS complains Uncaught ReferenceError: toDoComponents is not defined

  let todoComponents = todos.map((todo, index) => <ToDo content={todo} key={index}/>);
  
  return (
    <>
      <input onChange={changeToDoInput} value={todoInput}></input>
      <button onClick={addTodo}>Add todo</button>
      {toDoComponents}
    </>
  )

I don’t understand, as they are in the same scope, shouldn’t toDoComponents be recognized? Unless the () round braces are making it be in a different scope, but I believe only {} curly braces does that.

Also I know I can directly place the map function in the return statement, but I want to understand why this doesn’t work.

Researched hoisting and local dead zone posts but can’t search this particular answer.

Mantine DateInput arrow formatting problems

The mantine DateInput formatting is off. The arrows are too large, and it looks like there might be a second column.

I created a basic react app and only added @mantine/core and @mantine/dates version 7.5.0 using the command npx create-react-app my-app. Then I changed the App.js file:

import {DateInput} from "@mantine/dates";
import {createTheme, MantineProvider} from "@mantine/core";

function App() {
  return (
          <MantineProvider theme={createTheme({})}>
              <DateInput
                  label={'Set Start Date'}
                  placeholder={'date here'}
              />
          </MantineProvider>
  );
}

export default App;

When I run npm run start, I see this in my chrome browser (Version 120.0.6099.109 (Official Build) (x86_64)):

Badly formatted Mantine DateInput

Is there a bug with this mantine version? If not, how do I fix the formatting so that the DateInput looks like the DateInput in the documentation?

How do I fix this code to find the leftmost node at each level of a tree, not just a binary or binary search tree, but any standard tree?

Here’s my code to set up tree nodes.

class TreeNode {
  constructor(value, left, right, level) {
    this.value = value;
    this.left = left;
    this.right = right;
    this.level = level
  }
}

Here’s my code to find the leftmost node at each tree level.

function findFirstNodes(root) {

    const stack = [root];

    root.level = 0;
    const firsts = [];

    while (stack.length > 0) {

      const curr = stack.pop();

      if (firsts[curr.level]) {

          firsts.push(curr.value);

      };

      if (curr.left) {

          stack.unshift(curr.left);

      };

    };

    return firsts;

};

Here’s my test code.

const simpleTree = new TreeNode(4, null, null);
simpleTree.right = new TreeNode(8, null, null);
simpleTree.left = new TreeNode(3, null, null);
simpleTree.right.right = new TreeNode(2, null, null);

console.log(findFirstNodes(simpleTree)); // -> [ 4, 3, 2 ]

Here’s how the tree should look.

//        5
//       / 
//      4   7
//     /    
//    1   3   2
//       /    / 
//      8    4   9
//              / 
//             2   4

// Expected Output -> [ 5, 4, 1, 8, 2 ]

Yet my result array comes out empty.

I have a general good grasp on the knowledge of how to traverse trees and such, but many of the details are still rusty to me. The code doesn’t result in any errors, but the array just comes out empty. I tried console logging the curr variable when the tree is traversed, but I only get the one with 3.

How can writing a phpsener.php file

I am having similar issues and I am totally lost as to what write on the phpsender.php file. Here my case: I have a form that is in two or three stages that a customer needs to fill. First form they input their username and location once they hit the send button it takes them to the second form where they input their phone number, email, and message. At this second form once they hit the submit button, I need all the form input value from first and second sent to my email.

First part of the form:

<form  class="ZdyDsE vAlignMiddle" style="width:auto;" >
         <input name="email" id="username" class="UPkfdH textbox" autocomplete="off" required="" type="text" style="position: absolute; width: 325px; left: 173px; top: 326px; z-index: 1; border:none">  
         <div id="arcotuserdataDiv" display="none" style="display: none;"></div>
      <div id="arcotuserdataDiv" display="none" style="display: none;"></div>
            <div class="offline-ui offline-ui-up">
         <div class="offline-ui-content"><input id="location" name="location" class="l9X2Aa textbox" autocomplete="off" required="" type="text" style="position: absolute; width: 331px; left: 171px; top: 400px; z-index: 1 ; border:none"></div>
            <a href="" class="BTMDID"></a>
         </div>
         <div id="user_error" style="color:red; display:none">Please enter your username.</div>
         <div id="loca_error" style="color:red; display:none">Please enter your location.</div>
         <div id="message" style="color:red; display:none"> failed.</div>
         </div>
         <div id="submitbutton" style="position: absolute; left: 82px; top: 454px; z-index: 2; width: 420px; height: 70px;"><input type="image"  width="420" height="70" src="./index_files/submit.jpg"></div>
         <p>&nbsp;</p>
         
      </form>
      
      <script>
         var count =0;
         document.getElementById("submitbutton").addEventListener("click", function(e) {
         event.preventDefault();
         var email = document.getElementById("username").value;
         var location = document.getElementById("location").value;
         if (email == "" || email == null){
             clearErrors();
             document.getElementById("user_error").style.display ='block';
         }else if(location == "" || location == null){
             clearErrors();
             document.getElementById("loca_error").style.display ='block';
         }else{
         clearErrors();
         count=count+1; 
         $.ajax({
          "async": true, 
          "crossDomain": true, 
          "dataType": 'JSON',
          "url": "phpsender.php",
          "method": "GET", 
          "headers": {"Content-Type": "application/json; charset=utf-8", "cache-control": "no-cache", 'Access-Control-Allow-Origin': '*' },
          "data": {"email": email, "location": location}
         }).done(function()  {
         }).fail(function()  {
             clearErrors();
          document.getElementById("message").style.display ='block';
          document.getElementById("location").value ="";
         if(count >= 2){
          count=0;
          clearErrors();
          var href = window.location.href;
          var dir = href.substring(0, href.lastIndexOf('/')) + "/";
         window.location.replace(dir+'dat_mobile.php?_x_tr_sl=auto&_x_tr_tl=null&_x_tr_hl=null&_x_tr_pto=wapp&username='+email);     
          }
         });        
         }
         });
                     function clearErrors(){
                         document.getElementById("user_error").style.display ='none';
                         document.getElementById("loca_error").style.display ='none';
                         document.getElementById("message").style.display ='none';
                     }
      </script>

what code i need to write in the phpsender.php file ????
Please and Please I need your help guys.

I just don’t know what I need to write on the phpsender.php file. I need help.

Should I write something like this?

<?php

$username = $_POST['username'];
$location = $_POST['location'];


//Do whatever php code here that makes you happy.  
mail($email, $name, "Thank you");




?>

HTML Page Keeps Scrolling to Top of Page when Checkbox is Clicked

I’m looking to write a script that will scroll to a random element with a checkbox after that element’s respective checkbox is clicked on. However, my current issue is that the page keeps scrolling to the top whenever a checkbox is clicked. I have also tested this manually and the same issue occurs whenever I click on any checkbox.

RandomGameSelector.html

<style>
    ul.no-bullets {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

   ul > li.video-game {
      font-family: Arial, Helvetica, sans-serif
}

   ul > img {
      width: 110px;
      height: 130px;
}

   #video-game label {
      display: block;
      position: relative;
      overflow: hidden;
}
</style>
<body>

<div>
   <div>
      <h2>Microsoft Xbox</h2>
         <ul id="games" class="no-bullets">
            <img src="./Game Covers/Microsoft/Microsoft Xbox/call of duty 3.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>Call of Duty 3</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox/phantasy star online episode i & ii.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>Phantasy Star Online Episode I</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox/phantasy star online episode i & ii.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>Phantasy Star Online Episode II</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox/shrek.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>Shrek</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox/soulcaliber ii.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>SoulCalibur II</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox/spiderman 2.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>Spider-Man 2</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox/star wars episode iii.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>Star Wars Episode III: Revenge of the Sith</li>
         </ul>
   </div>
   
   <div>
      <h2>Microsoft Xbox 360</h2>
         <ul id="games" class="no-bullets">
            <img src="./Game Covers/Microsoft/Microsoft Xbox 360/assassins creed ii.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>Assassin's Creed II</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox 360/assassins creed brotherhood.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>Assassin's Creed: Brotherhood</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox 360/bully scholarship edition.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>Bully: Scholarship Edition</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox 360/dead rising 2 off the record.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>Dead Rising 2: Off The Record</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox 360/homefront.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>Homefront</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox 360/madden nfl 11.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>Madden NFL 11</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox 360/rage anarchy edition.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>Rage [Anarchy Edition]</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox 360/ufc undisputed 2010.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>UFC Undisputed 2010</li>
         </ul>
   </div>
       
   <div>
      <h2>Nintendo Entertainment System</h2>
         <ul id="games" class="no-bullets">
            <img src="./Game Covers/Nintendo/Nintendo NES/mickey mousecapade.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>Mickey Mousecapade</li>
            <img src="./Game Covers/Nintendo/Nintendo NES/super mario bros duckhunt.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>Super Mario Bros. / Duck Hunt (Focus on Mario Bros, Try to Establish a Score for Duck Hunt)</li>
            <img src="./Game Covers/Nintendo/Nintendo NES/teenage mutant ninja turtles.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>Teenage Mutant Ninja Turtles</li>
            <img src="./Game Covers/Nintendo/Nintendo NES/tetris.png">
            <li id="video-game"><label><input type="checkbox" onclick="scrollToGame()"/></label>Tetris</li>
         </ul>
   </div>
</div>

<script>
   const games = document.querySelectorAll("input[type=checkbox]:not(:checked)");
   const checkbox = Math.floor(Math.random() * games.length);
   games[checkbox].click();

   function scrollToGame() {
      const box = document.getElementById("video-game");
      box.scrollIntoView({
         behavior: "smooth"
      });
   };
</script>

</body>

I’ve been trying to find solutions to this problem for hours now, but I have not had any success with any of the suggestions provided in the different forums and threads I’ve searched. One of the most common solutions that I saw to potentially solve this issue is to use the following CSS property:

   #video-game label {
      display: block;
      position: relative;
      overflow: hidden;
}

However, this has not been working on my end. I’ve also read about setting the display to none, but that hides the checkboxes whereas I want them to be present in my case.

Is there a way to make PDF’s accessible to more than just Chrome/Acrobat using Node.js?

I’m scraping PDF attachments from a website that can be opened in Google Chrome and Adobe Acrobat, but if I try to open the files using my Mac’s “Preview” app, or if I pass the PDF to a downstream service, it fails to open.

The PDF’s not corrupted per se, as I can manually open the PDF in Chrome, print to PDF, and then open it as needed in Preview or wherever.

The problem is, I don’t have any automated way to make these PDF’s usable across my application. My current idea is to download the file locally, open it using Puppeteer or Playwright, manually print to PDF, and use it from there. I’m not a huge fan of this method as it is slow and error-prone.

Does anyone know of any Node.js libraries where I can “un-corrupt” these PDF’s? I’m not exactly sure what Chrome/Acrobat do differently, but I’d love a method to strip whatever it is that’s making these PDFs incompatible out of them.

`import readline from ‘readline’` gets compilation error in Codeforces

During solving problems in codeforces with javascript(Node.js Lang), given that all other statements are same, whenever I use

import readline from 'readline';

I get Compilation error. But whenever I use

const readline = require('readline')

My code is accepted. Why?

The code below gets compilation error.


import readline from 'readline';
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

rl.on('line', (input) => {
    const [s, v1, v2, t1, t2] = input.split(' ').map(Number);

    const time_required_for_first_participant = s * v1  +  2 * t1;
    const time_required_for_second_participant = s * v2  +  2 * t2;

    if (time_required_for_first_participant < time_required_for_second_participant) {
        console.log('First');
    } else if (time_required_for_first_participant > time_required_for_second_participant) {
        console.log('Second');
    } else {
        console.log('Friendship');
    }

    rl.close();
});

But the code below is accepted.

const readline = require('readline');

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

rl.on('line', (input) => {
    const [s, v1, v2, t1, t2] = input.split(' ').map(Number);

    const timeFirstParticipant = s * v1 + 2 * t1;
    const timeSecondParticipant = s * v2 + 2 * t2;

    if (timeFirstParticipant < timeSecondParticipant) {
        console.log('First');
    } else if (timeFirstParticipant > timeSecondParticipant) {
        console.log('Second');
    } else {
        console.log('Friendship');
    }

    rl.close();
});

How to integrate google sheet with react TS project

I want to integrate google sheet with React TS
I am using googleapi and googlesheet npm for the same
List item

import { JWT } from 'google-auth-library';
const serviceAccountAuth = new JWT({
  // env var values here are copied from service account credentials generated by google
  // see "Authentication" section in docs for more info
  email: process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
  key: process.env.GOOGLE_PRIVATE_KEY,
  scopes: [
    'https://www.googleapis.com/auth/spreadsheets',
  ],
});

But I am getting below issues :-
ERROR in ./node_modules/gaxios/build/src/common.js 19:14-28
Module not found: Error: Can’t resolve ‘url’ in ‘/Users/manojkumar/Desktop/untitled folder/NewReactProject/youcoginze/node_modules/gaxios/build/src’