JS Dice Roller – why do I have no error or output?

I’m brand new to JavaScript, and I’m trying to create a dice roller. The user can choose the number of dice and the number of sides on the dice. I’d like to have the individual dice results displayed on the webpage. My JS is

howManySides = Number(document.getElementById('howManySidesInput').value);  
howManyDice = Number(document.getElementById('howManyDiceInput').value);

document.getElementById('submitButtonDice').onclick = function() {               
    for(let i = 1; i >= howManyDice; i += 1){
        var roll = ((Math.floor(Math.random() * howManySides)) + 1);
        document.getElementById('diceResultIndividual').innerHTML += roll + " ";
    }
}

I expected the results of each die roll to be added to my HTML document, but there’s no output at all. I tried console.log(roll) between lines 6 and 7, hoping to see an error in the console, but I’m getting nothing. What am I doing wrong?

TypeScript Async/Await Bad Javascript Translation

I’m brand new to TypeScript and I’ve nearly blown a fuse trying to figure this out. I’ve got the following .ts code:

import * as fs from "fs";

import type { Trophy } from "psn-api";
import {
  exchangeCodeForAccessToken,
  exchangeNpssoForCode,
  getTitleTrophies,
  getUserTitles,
  getUserTrophiesEarnedForTitle,
  makeUniversalSearch,
  TrophyRarity
} from "psn-api";

async function main() {
  // 1. Authenticate and become authorized with PSN.
  // See the Authenticating Manually docs for how to get your NPSSO.
  const accessCode = await exchangeNpssoForCode("GqO4rje8Hx1sFqeEbzckLYND101S51LqWaXIrlMbC7TWybbZAYZygCqCSE8wx64E");
  const authorization = await exchangeCodeForAccessToken(accessCode);

  // 2. Get the user's `accountId` from the username.
  const allAccountsSearchResults = await makeUniversalSearch(
    authorization,
    "andykasen13",
    "SocialAllAccounts"
  );

  const targetAccountId =
    allAccountsSearchResults.domainResponses[0].results[0].socialMetadata
      .accountId;

  // 3. Get the user's list of titles (games).
  const { trophyTitles } = await getUserTitles(authorization, targetAccountId);

  const games: any[] = [];
  for (const title of trophyTitles) {
    // 4. Get the list of trophies for each of the user's titles.
    const { trophies: titleTrophies } = await getTitleTrophies(
      authorization,
      title.npCommunicationId,
      "all",
      {
        npServiceName:
          title.trophyTitlePlatform !== "PS5" ? "trophy" : undefined
      }
    );

    // 5. Get the list of _earned_ trophies for each of the user's titles.
    const { trophies: earnedTrophies } = await getUserTrophiesEarnedForTitle(
      authorization,
      targetAccountId,
      title.npCommunicationId,
      "all",
      {
        npServiceName:
          title.trophyTitlePlatform !== "PS5" ? "trophy" : undefined
      }
    );

    // 6. Merge the two trophy lists.
    const mergedTrophies = mergeTrophyLists(titleTrophies, earnedTrophies);

    games.push({
      gameName: title.trophyTitleName,
      platform: title.trophyTitlePlatform,
      trophyTypeCounts: title.definedTrophies,
      earnedCounts: title.earnedTrophies,
      trophyList: mergedTrophies
    });
  }

  // 7. Write to a JSON file.
  fs.writeFileSync("./games.json", JSON.stringify(games));
}

const mergeTrophyLists = (
  titleTrophies: Trophy[],
  earnedTrophies: Trophy[]
) => {
  const mergedTrophies: any[] = [];

  for (const earnedTrophy of earnedTrophies) {
    const foundTitleTrophy = titleTrophies.find(
      (t) => t.trophyId === earnedTrophy.trophyId
    );

    mergedTrophies.push(
      normalizeTrophy({ ...earnedTrophy, ...foundTitleTrophy })
    );
  }

  return mergedTrophies;
};

const normalizeTrophy = (trophy: Trophy) => {
  return {
    isEarned: trophy.earned ?? false,
    earnedOn: trophy.earned ? trophy.earnedDateTime : "unearned",
    type: trophy.trophyType,
    rarity: 0,
    earnedRate: Number(trophy.trophyEarnedRate),
    trophyName: trophy.trophyName,
    groupId: trophy.trophyGroupId
  };
};

main();

and tsc index.ts turns it into this horribleness (index.js)…

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (g && (g = 0, op[0] && (_ = 0)), _) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
Object.defineProperty(exports, "__esModule", { value: true });
var fs = require("fs");
var psn_api_1 = require("psn-api");
function main() {
    return __awaiter(this, void 0, void 0, function () {
        var accessCode, authorization, allAccountsSearchResults, targetAccountId, trophyTitles, games, _i, trophyTitles_1, title, titleTrophies, earnedTrophies, mergedTrophies;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0: return [4 /*yield*/, (0, psn_api_1.exchangeNpssoForCode)("GqO4rje8Hx1sFqeEbzckLYND101S51LqWaXIrlMbC7TWybbZAYZygCqCSE8wx64E")];
                case 1:
                    accessCode = _a.sent();
                    return [4 /*yield*/, (0, psn_api_1.exchangeCodeForAccessToken)(accessCode)];
                case 2:
                    authorization = _a.sent();
                    return [4 /*yield*/, (0, psn_api_1.makeUniversalSearch)(authorization, "andykasen13", "SocialAllAccounts")];
                case 3:
                    allAccountsSearchResults = _a.sent();
                    targetAccountId = allAccountsSearchResults.domainResponses[0].results[0].socialMetadata
                        .accountId;
                    return [4 /*yield*/, (0, psn_api_1.getUserTitles)(authorization, targetAccountId)];
                case 4:
                    trophyTitles = (_a.sent()).trophyTitles;
                    games = [];
                    _i = 0, trophyTitles_1 = trophyTitles;
                    _a.label = 5;
                case 5:
                    if (!(_i < trophyTitles_1.length)) return [3 /*break*/, 9];
                    title = trophyTitles_1[_i];
                    return [4 /*yield*/, (0, psn_api_1.getTitleTrophies)(authorization, title.npCommunicationId, "all", {
                            npServiceName: title.trophyTitlePlatform !== "PS5" ? "trophy" : undefined
                        })];
                case 6:
                    titleTrophies = (_a.sent()).trophies;
                    return [4 /*yield*/, (0, psn_api_1.getUserTrophiesEarnedForTitle)(authorization, targetAccountId, title.npCommunicationId, "all", {
                            npServiceName: title.trophyTitlePlatform !== "PS5" ? "trophy" : undefined
                        })];
                case 7:
                    earnedTrophies = (_a.sent()).trophies;
                    mergedTrophies = mergeTrophyLists(titleTrophies, earnedTrophies);
                    games.push({
                        gameName: title.trophyTitleName,
                        platform: title.trophyTitlePlatform,
                        trophyTypeCounts: title.definedTrophies,
                        earnedCounts: title.earnedTrophies,
                        trophyList: mergedTrophies
                    });
                    _a.label = 8;
                case 8:
                    _i++;
                    return [3 /*break*/, 5];
                case 9:
                    // 7. Write to a JSON file.
                    fs.writeFileSync("./games.json", JSON.stringify(games));
                    return [2 /*return*/];
            }
        });
    });
}
var mergeTrophyLists = function (titleTrophies, earnedTrophies) {
    var mergedTrophies = [];
    var _loop_1 = function (earnedTrophy) {
        var foundTitleTrophy = titleTrophies.find(function (t) { return t.trophyId === earnedTrophy.trophyId; });
        mergedTrophies.push(normalizeTrophy(__assign(__assign({}, earnedTrophy), foundTitleTrophy)));
    };
    for (var _i = 0, earnedTrophies_1 = earnedTrophies; _i < earnedTrophies_1.length; _i++) {
        var earnedTrophy = earnedTrophies_1[_i];
        _loop_1(earnedTrophy);
    }
    return mergedTrophies;
};
var normalizeTrophy = function (trophy) {
    var _a;
    return {
        isEarned: (_a = trophy.earned) !== null && _a !== void 0 ? _a : false,
        earnedOn: trophy.earned ? trophy.earnedDateTime : "unearned",
        type: trophy.trophyType,
        rarity: 0,
        earnedRate: Number(trophy.trophyEarnedRate),
        trophyName: trophy.trophyName,
        groupId: trophy.trophyGroupId
    };
};
main();

Everyone on the internet says to change my tsconfig.json, but I’m using ES6 (here’s my code)

{
    "compilerOptions": {
        "target" : "ES6",
        "module": "CommonJS",
        "outDir": "./build",
        "strict": true
    }
}

I’m running Windows 11, using VS Code, installed Node.js from the website and then npm install-ed typescript. Please help me out I’m losing it. What am I doing wrong that index.js isn’t just using async/await normally?

JavaScript library for curve fitting using a custom equation

I have an equation showing the relationship between two variables. I need to find certain coefficients in the equation, which can be fit to the data.

I’m wondering if there is a curve fitting library out there which allows passing a custom function as a parameter, such as can be found in the Python SciPy library function ‘curve_fit’: https://docs.scipy.org/doc/scipy/reference/generated/scipy.optimize.curve_fit.html

I’ve looked at some of the main curve fitting libraries for JS, such as ‘regression-js’ and ‘d3-regression’. I haven’t found anything in the docs so far which suggests a custom function can be passed in.

Stumped over undefined output on code.org project

Sorry if my formatting is incorrect, this is my first post and me and my friends are stumped.
I’ve run into an issue with my code.org project regarding my output being undefined. My project’s goal is to take a number value (the drive distance of the user in Golf) and their gender and assign a skill level to them based on their drive distance. However, the output, resultOutput, which is supposed to display the assigned level, is undefined.

//Drive distances and levels for men
var driveDistancesMale = [100, 150, 175, 200, 215, 225, 250, 275, 300];
var driveLevelsMale = ["Complete Beginner", "Beginner", "Learning", "Novice", "Average", "Good", "Great", "Amazing", "Pro"];





//Drive distances and levels for women
var driveDistancesWomen = [75, 100, 125, 150, 175, 200, 225, 250, 275];
var driveLevelsWomen = ["Complete Beginner", "Beginner", "Learning", "Novice", "Average", "Good", "Great", "Amazing", "Pro"];



//Function which uses the user's input to find their golfing level
function Find(gender, drive){
  var selectedLevel;
  if(gender == "Male"){
    for(var i=0; i<driveDistancesMale.length; i++){
      var driveMale = driveDistancesMale[i];
      var levelMale = driveLevelsMale[i];
        if(drive >= driveMale[i]){
          selectedLevel = "Your level: " +levelMale[i]; 
         
        }
      } 
      return selectedLevel;
    }
  else if(gender == "Female"){
    for(var j=0; j<driveDistancesWomen.length; j++){
      var driveWomen = driveDistancesWomen[j];
      var levelWomen = driveLevelsWomen[j];
        if(drive >= driveWomen[j]){
          selectedLevel = "Your level: " +levelWomen[j]; 
         
    
      }
    }
  }
  return selectedLevel;
}





//Buttons for changing screens
onEvent("beginButton", "click", function( ) {
  setScreen("screen2");
});

onEvent("resultButton", "click", function( ) {
  setScreen("screen3");
  setProperty("resultOutput", Find(getProperty("genderDropdown", "text"), getNumber("driveInput")));
});

Here is a link for context on my project: text

and here is the exact error(s):

WARNING: Line: 54: setProperty() property parameter value (undefined) is not a string.
ERROR: Line: 54: There is no property named "undefined" for element "resultOutput". Make sure you choose a property from the dropdown.

I tried reformatting my code more than a few times, but to no avail. I wrote the code a few days ago and it was late so it may just be a stupid error or it may make to sense at all. Any tips at all is greatly appreciated. Again, sorry for any mistakes, first post.

Toggle component visibility in React by clicking it

I want to do as follows:

  • if the component is visible, then clicking off of it hides the component
  • if the component is hidden, the clicking on it (or I guess whatever area on the screen it would take up if it was visible) shows the component.

How can I do this? I’m trying to do this with a MUI textfield using the sx prop and a visibility state that toggles when you click on it, but the onClick doesn’t seem to trigger if the component has visibility: hidden.

Algorithm: Return all possible matchups for a set of 32 teams who have a smaller subset of allowable opponents

I’m having a problem writing an algorithm to return all possible valid matchups for a set of 32 teams. The rules are:

  • The schedule is for only one game per pair of teams. This does not need to be a round robin or anything like that. The algorithm needs to be all valid possibilities of the 16 games between the 32 teams.
  • Home/away does not matter
  • Each team only has a subset of 14 other teams that they are eligible to play.
  • Teams must have an opponent. If a version of the schedule does not end up with all teams having a match, it is invalid and shouldn’t be returned.

An exmaple of the teams would be

[
  {
    id: "teamId1",
    opponents: ["teamId2", "teamId3", "teamId5", "teamId8", "teamId14", ...etc] // length 14
  },
  {
    id: "teamId2",
    opponents: ["teamId1", "teamId3", "teamId6", "teamId11", "teamId12", ...etc] // length 14
  }
  ...etc
] // length 32

I’m thinking there probably is a recursive solution that would be elegant for this, but I really am having a problem wrapping my head around it or finding the appropriately named algorithm that already exists.

I will be implementing this using javascript but obviously the algorithm is language independent. But any examples specifically in javascript/using javascript operators etc would help.

100ms delay between pointermove events in Android webviews?

I noticed that gesture animations in Android webviews felt laggy, so after some debugging, I found the root cause: pointermove events have a ~100ms delay between them whereas it should be a ~17ms delay.

In Android Chrome, the timeline looks something like:

0ms: pointerdown
3ms: pointermove
10ms: pointermove
27ms: pointermove
44ms: pointermove

enter image description here

In Android webviews, it’s something like:

0ms: pointerdown
3ms: pointermove
100ms: pointermove
117ms: pointermove
134ms: pointermove

enter image description here

In each screenshot, I hovered over the first pointermove, then you can see each subsequent pointermove as yellow blocks.

Is this a known webview issue? Is there a way to control the frequency of pointermove? It doesn’t look like the thread is busy, so I have no idea why the second pointermove is always delayed by ~100ms.

How to get validationMessage in playwright?

I have to check if input value passed.

Fields displaying

But can’t find the right way

There how it works:
If I click “submit” with incorrect input – getting popup with “Please fill out this field.”

I’d try

const asd = page.locator('//input[@id="user_registration_form_firstName"][required]:invalid');
console.log('00000 ' + asd);

But get in console this:

00000 locator('//input[@id="user_registration_form_firstName"][required]:invalid')

I’d try to do this

const validationMessageHandle = await page.evaluateHandle(() => {
            const element = document.evaluate('//input[@id="user_registration_form_firstName"]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
            return element ? element.validationMessage : null;
        });
        
        const validationMessage = await validationMessageHandle.jsonValue();
        console.log('00000000 ' + validationMessage);

But get this:

00000000 Fill out this field

Even without clicking “submit”

How to store return value from a middleware in express js to be accessed by rest of the application?

I have a middleware and it returns an object back. I need to store this object so that the rest of the application can use the data from that object. How do I do it?

This is what I have in my app.js file:

import { myMiddlewareFunction } from "@mymiddleware"

app.use(async function (req, res, next) {
  try {
    const params = {...someparams};
    const response: MyMiddlewareResponse  = await myMiddlewareFunction (
      req,
      params
    );

    if (!response.isValid) {
      res.send("401: Not Valid");
      return;
    }   
    next();
  } catch (err) {
    next(err);
  }
});

The response interface looks like this:

interface MyMiddlewareResponse {
  isValid: boolean;
  store_id: number;
  salesManInfo?: SalesMan;
}

I want the response object to be available to the rest of my application so that it can access response.store_id and response.salesManInfo for business logic.

Some really old posts here said that I can tag the value to req object.

So, I tried req.mymiddlewarerespose=response but that threw an error Property 'mymiddlewarerespose' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>.

TIA

How do I stop my function from returning undefined before the variable is updated in JavaScript? [duplicate]

I’m attempting to send several lists of names from a database to a variable according to their attendance in a specific class. I have a for loop to make an array of the name lists which are represented as strings.

function storeAllAttendeesLocally(){
    let currAtt = "";
    for (let i = 0; i < allClasses.length; i++) {
        currAtt = getClassAttendees(i);
        allAttendees.push(currAtt);
    }
    
}

My issue is that this function always returns undefined even though in the console log immediately prior to the return it shows the results that I’m expecting. Any help would be appreciated.

function getClassAttendees(ClassID){
    let classAttendees = [];
    let currAttendees = "";
    // Get all the users who are in the class and push them into the allAttendees array
    db.all(`SELECT * FROM Class_Attendance inner join Classes on Class_Attendance.ClassID = Classes.ClassID inner join Users on Class_Attendance.UserID = Users.UserID WHERE Attendance_Status = "Attended" AND Class_Attendance.ClassID = ?`, ClassID, (err, rows) => {
      if (err) {
          console.error('Error retrieving attendees', err.message);
      } else {
          rows.forEach((row) => {
              classAttendees.push(new User(row.UserID, row.FirstName, row.LastName, row.Username, row.Password, row.Email, row.Phone_Number, row.Role));
          });
          console.log('Attendees retrieved successfully.');
        for (let i = 0; i < classAttendees.length; i++){
            currAttendees += (classAttendees[i].firstName + "n")
        }
        console.log(currAttendees)
        return currAttendees;                                         
      }
  });
}

I’ve tried using setTimeouts in various places to hopefully get the timing to properly align to the way its written, though for some reason no matter what I try the console log that comes after the return always shows before the one that comes before the return. I assume this has something to do with async and I’ve tried using await in a few places but to no avail.

Create File object from parsed CSV data

I’m currently working on a project that involves uploading a CSV file and doing some processing of that file. I’m using papa parse to get the data from the original file so I can modify it as needed:

const reader = new FileReader()

reader.onload = async ({ target }) => {
  const csv = Papa.parse(target?.result as any, {
    header: true
  })
  const parsedData: any[] = csv?.data;
  setOriginalData(parsedData);
}

reader.readAsText(file)

I then hit an API endpoint to map through the data and modify it as needed. Once it’s been modified, I need to convert it back to a file object so I can upload it to an S3 bucket through my API. After processing, the data has the shape of:

[
  {
    Col_1: 'value_1',
    Col_2: 'value_2,
    ...
  },
  ...
]

I need to take this data and translate it into a File object in order for the upload endpoint to work.

I’ve spent some time digging into documentation, but there seems to be more focus on downloading the data as a CSV file (such as with libraries like react-csv). I need to save both the original and processed files, and this is how I’m currently trying to approach it:

const originalFormData = new FormData();
originalFormData.append('file', file);

const uploadOriginalRes = await fetch('/api/lists/save', {
  method: 'POST',
  body: originalFormData
})
const originalJsonRes = await uploadOriginalRes.json();

const fileName = originalJsonRes.data.filename;
const processedFile = new File(processData, `${fileName}-processed`, { type: 'text/csv' })

const processedFormData = new FormData();
processedFormData.append('file', processedFile)

const processedFileUploadRes = await fetch('/api/lists/save', {
  method: 'POST',
  body: processedFormData
})

const processedFileJsonRes = await processedFileUploadRes.json();
console.log('PROCESSED FILE:', processedFileJsonRes);

The file that I’m uploading in the first API call is read directly from the file input, and is saved as a csv file the way I expect it to. But somewhat unsurprisingly, the resulting CSV file from the call where I’m trying to upload the processed data looks like this:

[object Object][object Object][object Object][object Object]...

I’m not sure how I need to modify the data to have it be read properly as CSV data.

How can I export an array I created in server.js to my App.jsx?

I’m creating a speech app that transcribes mic input—so far, I’m using rev.ai to transcribe the speech and I’m saving it into the speecharray array. How can I then export the speech to my App.js file so I can display the transcript on my website?

Here’s my file structure:
file structure

Here’s my code for server.js:

const mic = require('mic');
const readline = require('readline');


const token = 'TOKEN';

// initialize client with audio configuration and access token
const audioConfig = new revai.AudioConfig(
    /* contentType */ "audio/x-raw",
    /* layout */      "interleaved",
    /* sample rate */ 16000,
    /* format */      "S16LE",
    /* channels */    1
);

// initialize microphone configuration
// note: microphone device id differs
// from system to system and can be obtained with
// arecord --list-devices and arecord --list-pcms
const micConfig = {
    /* sample rate */ rate: 16000,
    /* channels */    channels: 1,
    /* device id */   device: 'hw:0,0'
};

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

var client = new revai.RevAiStreamingClient(token, audioConfig);

var micInstance = mic(micConfig);

// create microphone stream
var micStream = micInstance.getAudioStream();

// create event responses
client.on('close', (code, reason) => {
    console.log(`Connection closed, ${code}: ${reason}`);
});
client.on('httpResponse', code => {
    console.log(`Streaming client received http response with code: ${code}`);
});
client.on('connectFailed', error => {
    console.log(`Connection failed with error: ${error}`);
});
client.on('connect', connectionMessage => {
    console.log(`Connected with message: ${connectionMessage}`);
});
micStream.on('error', error => {
  console.log(`Microphone input stream error: ${error}`);
});

// begin streaming session
var stream = client.start();

const speecharray = [];

// create event responses
stream.on('data', data => {
    if (data.type == 'final')
        for (i in data.elements)
            speecharray.push(data.elements[i].value.toLowerCase());

            // umCount = speecharray.filter(value => value == "um");
            // console.log("um count:" + umCount.length);

            // uhCount = speecharray.filter(value => value == "uh");
            // console.log("uh count:" + uhCount.length)

            // score = (umCount.length + uhCount.length) / speecharray.length
            // console.log("score:" + score)


});

// listen for spacebar press to end streaming and display score
readline.emitKeypressEvents(process.stdin);
process.stdin.setRawMode(true);

process.stdin.on('keypress', (str, key) => {
  if (key.name === 'return') {
    micInstance.stop(); // stop the microphone
    stream.end(); // end the streaming session

    // Calculate and display the score
    const weight = 4;
    const umCount = speecharray.filter(value => value === 'um').length;
    const uhCount = speecharray.filter(value => value === 'uh').length;
    const totalWords = speecharray.length;
    const score = ((umCount*weight + uhCount*weight) / totalWords) * 100;

    console.log(speecharray.join(" "));
    console.log(`Um count: ${umCount}`);
    console.log(`Uh count: ${uhCount}`);
    console.log(`Total words: ${totalWords}`);
    console.log(score)
    console.log(`Fluency: ${100 - score}%`);

    process.stdin.pause(); // pause stdin to stop listening for keypresses
  }
});



//on certain button press log it

stream.on('end', function () {
  console.log("End of Stream");
});

// pipe the microphone audio to Rev AI client
micStream.pipe(stream);

// start the microphone
micInstance.start();

// Forcibly ends the streaming session
// stream.end();```

I tried to use export default and import into the App.js but it had a bunch of polyfill errors, which I don't know what that is. Thanks!

Setting contenteditable div puts text twice when done from user script

I am making a user script using greasemonkey in firefox.

The overall goal is to replace reddit links that I send with rxddit links so that the video is embedded in chat instead of the default reddit embed of a still image.

To do this, I am trying to replace the text in the input box.

function setChatTextBoxContent(message)
{
    let chatTextBox = document.querySelector(`[contenteditable="true"][aria-label*="Message @"]`);

    inputEvent = new InputEvent('beforeinput', {
    inputType: 'insertText',
    data: message,
    });

    let range = new Range();
    range.selectNodeContents(chatTextBox);

    inputEvent.getTargetRanges = function()
    {
        return [range];
    }

    chatTextBox.dispatchEvent(inputEvent);
}

When I run it on firefox’s dev tools. It works as expected:

https://i.imgur.com/YdczYTK.png

When I run it through the user script. It sets the text twice and if there is any text in the input box. Then it appends it to the end instead of replacing it entirely.

enter image description here

I took a look at the beforeinput handler and its minified and probably using react so trying to decipher it is troublesome.

Any ideas why setting the text through a user script would cause different results?

Things I’ve tried:

Stepped through it and added console logging. It is not executing twice.

The range is exactly the same.

CSP security prevents me from embedding the code via creating a script element and appending it from the user script.

how to replace place holders in an typescript object using another object

I need to replace some place holders in an object using values from another object. My object with place holders looks like below

const programmer  = {
  firstname: "Phil {ReplaceMeWithValue1}",
  age: 21,
  backendDeveloper: true,
  skillLevels: { "JavaScript": "basic {ReplaceMeWithValue1}", "Java": "Intermediate {ReplaceMeWithValue1}"},
  currentProjectName: "The Amazing App {ReplaceMeWithValue2}"
};

And the object that contains values looks like

 const dataToReplace = { "ReplaceMeWithValue1": "ReplacingValue1", "ReplaceMeWithValue2": "ReplacingValue2" };

I’m trying something like below but not able to figure that out

ngOnInit(): void {
const programmer  = {
  firstname: "Phil {ReplaceMeWithValue1}",
  age: 21,
  backendDeveloper: true,
  skillLevels: { "JavaScript": "basic {ReplaceMeWithValue1 }", "Java": "Intermediate {ReplaceMeWithValue1}"},
  currentProjectName: "The Amazing App {ReplaceMeWithValue }"
};

const dataToReplace = { "ReplaceMeWithValue1": "ReplacingValue1", "ReplaceMeWithValue2": "ReplacingValue2" };

Object.keys(programmer).forEach(key => {
  this.replacePlaceHolders(programmer[key as keyof typeof programmer], dataToReplace);
});
 }

replacePlaceHolders(value: string | number | boolean | { JavaScript: string; Java: string; }, dataToReplace: { ReplaceMeWithValue1: string; ReplaceMeWithValue2: string; }) {
 Object.keys(dataToReplace).forEach(key => {
 value = value?.replace(`{${key}}`, dataToReplace[key as keyof typeof dataToReplace]) || value;  
  });
 }

}