Category: javascript

I’m currently working on WebGL to do number of post processing to 2d image. The Problem arises when I try to use copyTexImage2D API to send my initial texture to fragment shader with using device’s display dimensions, it resulting with solid black texture unless I artificially add any positive number that greater than one which leads to me believe issue came from some kind of rounding problem. The interesting part of the issue it’s exclusive to Android platform and won’t reproduced in iOS, OSX, Windows platforms with across different browsers.

Here is snippet from my code that copies scene that came from MapLibre to renderTexture variable.

            // render-to-texture
            gl.bindTexture(gl.TEXTURE_2D, this.renderTexture!);
            let w = gl.canvas.width;
            let h = gl.canvas.height;
            gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, w, h, 0); // Solid black texture sent to fragment shader
           // gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, w + 1, h, 0); // Texture correctly sent to fragment shader 
           // gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, w + 1, h - 1, 0); // Also works vice versa
           // gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, w - 1, h, 0); // Doesn't work

            getDeviceDimensions();

            gl.useProgram(this.program!);

            gl.uniform1i(this.sharpenLoc!, this.sharpen ? 1 : 0);
            gl.uniform1i(this.lookupLoc!, this.lookup ? 1 : 0);
            gl.uniform1i(this.grainLoc!, this.grain ? 1 : 0);

            const { lat, lng } = map.getCenter();
            gl.uniform2f(this.mapCoordsLoc!, lat, lng);

            gl.uniform2f(this.resolutionLoc!, gl.canvas.width, gl.canvas.height);

            // Pass texture
            gl.activeTexture(gl.TEXTURE0);
            gl.bindTexture(gl.TEXTURE_2D, this.renderTexture!);
            gl.uniform1i(this.renderTexLoc!, 0);

            // Pass LUT
            gl.activeTexture(gl.TEXTURE1);
            gl.bindTexture(gl.TEXTURE_2D, this.lutTexture!);
            gl.uniform1i(this.lutTexLoc!, 1);

            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

Here is how I initialise the renderTexture

            this.renderTexture = gl.createTexture()!;
            gl.bindTexture(gl.TEXTURE_2D, this.renderTexture);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.canvas.width, gl.canvas.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

Additional Context

• Dimensions not always power of 2 but rounding them does not solve the issue
• gl.canvas.width & gl.canvas.height dimensions matches with destination HTML element
• Issue can be reproduced both WebGL 1 and WebGL 2 in Android
• Using gl.viewPort to with additional one pixel size won’t effect the issue
• In fragment shader texture(…) function returns black color when renderTexture used as an input

Device: Google Pixel 5

Resolution: 1080×2340, Scale Factor 2.75

Browser: Google Chrome 103.0.5060.71

I’m working on a time submission application for contractors that work on special projects. I have two select elements, projectSelect and payPeriodSelect.

I use JavaScript promise chains to retrieve and load projects and pay periods. The pay period select is populated with options once a project is selected in the project select.

After the user clicks Submit, I save the time entries to the database and update the select option highlight colors, based on the timesheet status (green for approved, red for rejected, gray for submitted). I need to refresh the project and pay period select option lists so that the options are highlighted with the proper color.

In order to do this, I need to call getProjects() and getPayPeriods() again, and programmatically change the value of projectSelect and payPeriodSelect. I am able to change the value of payPeriodSelect with jQuery’s .val() function. However, projectSelect value is set to null when I used the same method. Why does it work for one select but not the other?

The select elements are defined like this:

<select id='projectSelect' class="form-select"></select>
<select id='payPeriodSelect' class="form-select"></select>

The promise chain to load projects gets called when the page first loads:

getProjects()
    .then(data => {
        return loadProjects(data);
    })
    .then(data => {
        $('#projectSelect').change();    // select the default project to display (1st option in list)
    })
    .catch(error => {
        // display error in modal
    });

function loadProjects(projectData) {
    return new Promise((resolve, reject) => {
  
        let select = document.getElementById("projectSelect");
        select.length = 0;
    
        projectData.reduce((previousPromise, project) => {        // map each project object in the array to a new promise
                

                return previousPromise
                    .then(x => getPayPeriods(project.id))
                    .then(payPeriods => {
                        let option = document.createElement("option")

                        if (payPeriods.length) {
                            // if all timesheets for the project have been approved, change highlight color of option to green
                            if (payPeriods.every(payPeriod => payPeriod.approvalStatus)) {
                                option.setAttribute('class', 'approvedColor')
                            }
                            // If all timesheets are rejected, change color to red
                            else if (payPeriods.every(payPeriod => payPeriod.rejectionStatus)) {
                                option.setAttribute('class', 'rejectedColor')
                            }
                            // if all timesheets are submitted, change color to gray
                            else if (payPeriods.every(payPeriod => payPeriod.submissionStatus)) {
                                option.setAttribute('class', 'submittedColor')
                            } 
                        }

                        option.text = project.code + ' - ' + project.name  
                        option.value = project.id
                        select.appendChild(option)

                        select.value = select.options[0].value    // set 1st option's project ID as default value
                        
                        return resolve(true)
                    })     
                    .catch(error => {
                        return reject(error)
                    })
            }, Promise.resolve())       // Promise.resolve() is the initial promise function that starts the chain

        return resolve(true);
    })
}

The change event for the projectSelect and the load pay period functions is shown below:

$('#projectSelect').on('change', function (e) {
    
    $('tr').find("input.timeBox").val("")       // clear timesheet inputs

    let projectId = this.value

    getPayPeriods(projectId)
        .then(data => {
            return loadPayPeriods(data)
        })
        .then(x => {
            $('#payPeriodSelect').trigger('change')
        })
        .catch(error => {
               
        })
})

function loadPayPeriods(data) {
    return new Promise((resolve, reject)=>{

        var select = document.getElementById("payPeriodSelect")
        select.length = 0

        if (!data.length) {
            $('#payPeriodSelect').attr('disabled', true)
            return reject(false)
        }

        // enable dropdown if there are pay periods to load into it
        $('#payPeriodSelect').attr('disabled', false)

        for (let payPeriod of data) {

            let option = document.createElement("option")
            option.text = payPeriod.start_d + ' - ' + payPeriod.end_d
            option.value = payPeriod.start_d + '|' + payPeriod.end_d

            // change pay period option highlight colors based on timesheet status
            if (payPeriod.approval_d) {
                option.setAttribute('class', 'approved')
            } else if (payPeriod.rejection_d) {
                option.setAttribute('class', 'rejected')
            } else if (payPeriod.submission_d) {
                option.setAttribute('class', 'submitted')
            }

            select.appendChild(option) 
        }

        select.value = select.options[0].value
        return resolve(true)
    })     
}

The payPeriodSelect change event:

    $('#payPeriodSelect').on('change', function (e) {
   

                    // get and populate timesheet data for the selected pay period
                    getTimeData(this.value)
                        .then(data=> {
                            return loadTimeData(data)
                        })
                        .then(data => {

                            if (data) {
                                let payPeriodSelect = document.getElementById('payPeriodSelect')

                            
                                if (data.approvalStatus) {
                                    payPeriodSelect.options[payPeriodSelect.selectedIndex].setAttribute('class', 'approvedColor')
                                } else if (data.rejectionStatus) {
                                    payPeriodSelect.options[payPeriodSelect.selectedIndex].setAttribute('class', 'rejectedColor')
                                } else if (data.submissionStatus) {
                                    payPeriodSelect.options[payPeriodSelect.selectedIndex].setAttribute('class', 'submittedColor')
                                }
                            }
   
                        })
                        .then(x => {
                            return calculateTotalTime()
                        })
                        .catch(error => {
          
                        })
                })

The function for submitting time. I get and load projects, and change the values for both select elements. projectSelect value is set to null while payPeriodSelect value is set to the correct value.

$('#submitTol').on('click', function (e) {
    return saveDataToDatabase()
        .then(data => {
            return getProjects()
        })
        .then(data => {
            return loadProjects(data)
        })
        .then(x => {
            return new Promise((resolve, reject) => {
                    $('#projectSelect').val(project.id).change()
                    return resolve(true)
                })
        })
        .then(x => {
            return new Promise((resolve, reject) => {
                    $('#payPeriodSelect').val( payPeriod.start_d + '-' + payPeriod.end_d).change()
                    return resolve(true)
                })
        }
}

Sorry for the heap of code, but I wanted to give some context about how I retrieve and display data in the select elements. I am so confused as to why changing payPeriodSelect‘s value works, but not projectSelect.

I am having an issue inserting a document into MongoDB. I am able to successfully connect to the database, but when i try to insert a new document i get the following error:

Error: Operation `bootcamps.insertOne()` buffering timed out after 10000ms
[nodemon] app crashed - waiting for file changes before starting...

URI Connection string:

MONGO_URI=mongodb+srv://blahblah:<password>@cluster0.ohppr.mongodb.net/devcamper?retryWrites=true&w=majority&appName=Cluster0

db.js

const mongoose = require('mongoose')

const connectDB = async () => {
  const conn = await mongoose.connect(process.env.MONGO_URI)

  console.log(`MongoDB Connected: ${conn.connection.host}`.cyan.underline.bold)
}

module.exports = connectDB

MongoDB Network:

server.js

const express = require('express')
const dotenv = require('dotenv')
const connectDB = require('./config/db')

// Load env variables.
dotenv.config({ path: './config/config.env' })

// Connect to DB
connectDB()

bootcamp.js

const Bootcamp = require('../models/Bootcamps')

// @desc    Create new bootcamp
// @route   POST /api/v1/bootcamps
// @access  Private
exports.createBootcamp = async (req, res, next) => {
  //console.log(req.body)
  //res.status(201).json({success: true})
  const bootcamp = await Bootcamp.create(req.body);
  res.status(201).json({
  sucess: true,
  data: bootcamp
  })
}

if i comment out the following lines of code everything runs ok.

const bootcamp = await Bootcamp.create(req.body);
  res.status(201).json({
  sucess: true,
  data: bootcamp
  })
}

Postman

Currently attempting to fetch some JSON to an API. I am testing my fetch requests using requestcatcher.com. Here is an example, which highlights the problem I am having:

fetch("https://example.requestcatcher.com",
{
    method: "POST",
    mode: "no-cors",
    headers: new Headers({ "Accept":"application/json", "Content-Type":"application/json" }),
    body: "{}"
});

Upon sending this request, I expected the request catcher API to receive the header Content-Type: application/json. However, this is not happening – the Content-Type keeps getting reset to text/plain;charset=UTF-8. This happens whether I pass in a Headers object or simply an Object. The Content-Type is also the only header to be modified in this way – the Accept header doesn’t suffer this issue.

Interestingly, this substitution doesn’t happen if I pass in Content-Type: application/x-www-form-urlencoded: that header, unlike application/json, is received unaltered by the request catcher. It seems to have an unique problem with application/json. I’ve seen no successful explanation online regarding why this would happen – if anyone is able to shed some light on this I would be much grateful.

I have found this code for a hide/show ID effect. I am building with Elementor in WP.

<button onclick="myFunction()">show / hide</button>

function myFunction() {
  var x = document.getElementById ("showprice");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
} 

This works, but I would like to modify the code to hide/show a Class instead of ID – but changing it to the following doesn’t work. Any tips?

function myFunction() {
  var x = document.getElementsByClassName("showprice");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
} 

I have an importer that is supposed to upload a special file from a third-party program. The file is structured as follows:

TITLE,DESCRIPTION,PRICE,CURRENCY_CODE,QUANTITY,TAGS
"This is the file title","This is the file description and it can include line breaks

Size: 16x16
Weight: 1,5
for example here

more information.",12.99,USD,10,"Tag1,Tag2,Tag3"
"Next line","This is the file description and it can include line breaks

Size: 16x16
Weight: 1,5
for example here

more information.",12.99,USD,10,"Tag1,Tag2,Tag3"
"Next line","This is the file description and it can include line breaks

Size: 16x16
Weight: 1,5
for example here

more information.",12.99,USD,10,"Tag1,Tag2,Tag3"

I am trying to read this file line by line, which unfortunately does not work in JS.

    const reader = new FileReader();
    reader.onload = async (evt) => {
        const file = evt.target.result.split('rn')

When I open the file in Numbers (Mac = Excel) and save via File > Export > CSV > Text encoding Unicode (UTF-8), the file is spit out as follows:

TITLE;DESCRIPTION;PRICE;CURRENCY_CODE;QUANTITY;TAGS
"This is the file title";"This is the file description and it can include line breaks

Size: 16x16
Weight: 1,5
for example here

more information.";12.99;USD;10;"Tag1;Tag2;Tag3"
"Next line";"This is the file description and it can include line breaks

Size: 16x16
Weight: 1,5
for example here

more information.";12.99;USD;10;"Tag1;Tag2;Tag3"
"Next line";"This is the file description and it can include line breaks

Size: 16x16
Weight: 1,5
for example here

more information.";12.99;USD;10;"Tag1;Tag2;Tag3"

I can work wonderfully with this file formatting. As i can see, all columns are now marked via ; and the line break evt.target.result.split('rn') works as well.

Unfortunately, I cannot assume that my users will be able to convert this file.

Therefore, I would like to convert the file as Numbers does when uploading it.

How does this work via JavaScript new FileReader() ?

So in my application I have a profile page which I have checked successfully sets the redux state with the profile data after dispatching when the page is loaded, I then try to access this state in another component within my app after a redirect (not a browser refresh) and using the useSelector hook but it tells me that the redux data in null and I cannot figure out why have I done something wrong in my reducers, component or store?

profileSlicer:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

export const fetchProfileByUsername = createAsyncThunk("profile/fetchByUsername", async (username) => {
    console.log("fetching by username in redux ")
    const response = await axios.get('http://localhost:3002/userProfile', {
        params: {
            username: username
        }
    });
    return response.data;
});

export const fetchProfileByQrId = createAsyncThunk("profile/fetchByQrId", async (qr_id) => {
    console.log("fetching by qr_id in redux ")
    //const response = await axios.get('https://lovinglegacy.onrender.com/getProfile', {
    const response = await axios.get('http://localhost:3002/getProfile', {
    params: {
            qr_id: qr_id
        }
    });
    return response.data;
});

const profileSlice = createSlice({
    name: 'profile',
    initialState: {
        isLoading: false,
        data: null,
        error: false,
    },
    reducers: {},
    extraReducers: (builder) => {
        builder
            .addCase(fetchProfileByUsername.pending, (state) => {
                state.isLoading = true;
            })
            .addCase(fetchProfileByUsername.fulfilled, (state, action) => {
                state.isLoading = false;
                state.data = action.payload;
            })
            .addCase(fetchProfileByUsername.rejected, (state) => {
                state.isLoading = false;
                state.error = true;
            })
            .addCase(fetchProfileByQrId.pending, (state) => {
                state.isLoading = true;
            })
            .addCase(fetchProfileByQrId.fulfilled, (state, action) => {
                state.isLoading = false;
                state.data = action.payload;
            })
            .addCase(fetchProfileByQrId.rejected, (state) => {
                state.isLoading = false;
                state.error = true;
            });
    }
});

export default profileSlice.reducer;

store:

import {configureStore} from '@reduxjs/toolkit';
import profileReducer from '../redux/ProfileSlicer';

export const store = configureStore({
    reducer: {
        profile: profileReducer,
    }
})

Component trying to access redux state in after it has been set:

import React, { useEffect } from "react";
import CreateNewMedallionProfile from "../../CreateMedallionProfile";
import { useSelector } from "react-redux";

const ProfileDetails = () => {
    const profileData = useSelector(state => state.profile.data);

    useEffect(() => {
        console.log("Profile data in profile details ", profileData);
    }, [profileData]); // Add profileData to dependency array to listen for changes

    const handleClick = () => {
        console.log("clicked profile data ", profileData);
    }

    // Render the component only if profileData exists
    if (!profileData) {
        return <div>Loading...</div>;
    }

    return (
        <div>
            <button onClick={handleClick}>Click</button>
            <CreateNewMedallionProfile />
        </div>
    );
}

export default ProfileDetails;

Snippet from where redux state is set component:

const profileData  = useSelector(state => state.profile.data);
  const dispatch = useDispatch();
  console.log("profile data from redux store = ", profileData);

 

  useEffect(() => {
    const username = localStorage.getItem('username');
    const qr_id = localStorage.getItem('qr_id');
    if(username) {
      console.log("username from local storage ")
      dispatch(fetchProfileByUsername(username));
      
    }
    else if(qr_id) {
      console.log("qr_id from local storage");
      dispatch(fetchProfileByQrId(qr_id));
    }
    // Dispatch action to fetch profile data only on page refresh
    
  }, [])

  // Effect to make GET request to sever function when profileData changes
  useEffect(() => {
    if(profileData) {
      // Extract the username from profileData
      const username = profileData.username;
      console.log("in here");
    

    // make a GET request to the server-side function
    const fetchData = async () => {
      try {
        const response = await axios.get(`http://localhost:3002/userProfile`, {
          params : {
            username: username
          }
        });
        console.log("Response from server: ", response.data);
        setMedallionProfile(response.data.medallionProfile); // store fetched data in the state
        // Handle the response data as needed here 
      } catch(error) {
        console.error('Error fetching data: ', error);
        // Rest of handling the error show error msg client side??
        }
      };
    fetchData() // Call the fetchData function
    }
  }, [profileData])   // dependancy to run the effect when ever profile data changes

I used elementor html box tool to inject a small calculator into a blog. The calculator has chinese character as javascript objects used for mapping. The calculator works fine when I’m logging but it does not when I’m in not logging in. I used console command and saw the chinese characters are not getting interpreted properly. It’s showing ASCII like

&#19985
&#20133

I made sure the encoding is set to utf-8.I tried different solution from Google and nothing seems to work.

I am using ngx-graphs with Angular 17 (currently there is an open PR for the angular 17 support but not merged so I used a forked version of the user made the PR (https://github.com/Kr0san89/ngx-graph) of ngx-charts that includes this change for the support in Angular 17).

I don’t stumbled in any functional issues with the graph and data I am using but I have 2 runtime errors that I don’t know if will result in some problems. My code does not deviate a lot from the ngx-graphs demos and I have no build errors.

Specifically

ERROR TypeError: hostElem.parentNode.getBoundingClientRect is not a function
    at _GraphComponent.getContainerDims (/ui/node_modules/@kr0san89/ngx-graph/fesm2022/kr0san89-ngx-graph.mjs:2503:40)
    at _GraphComponent.basicUpdate (/ui/node_modules/@kr0san89/ngx-graph/fesm2022/kr0san89-ngx-graph.mjs:2478:25)
    at _GraphComponent.ngOnChanges (/ui/node_modules/@kr0san89/ngx-graph/fesm2022/kr0san89-ngx-graph.mjs:1641:10)
    at _GraphComponent.rememberChangeHistoryAndInvokeOnChangesHook (/ui/node_modules/@angular/core/fesm2022/core.mjs:4101:14)
    at callHookInternal (/ui/node_modules/@angular/core/fesm2022/core.mjs:5136:14)
    at callHook (/ui/node_modules/@angular/core/fesm2022/core.mjs:5167:9)
    at callHooks (/ui/node_modules/@angular/core/fesm2022/core.mjs:5118:17)
    at executeInitAndCheckHooks (/ui/node_modules/@angular/core/fesm2022/core.mjs:5068:9)
    at refreshView (/ui/node_modules/@angular/core/fesm2022/core.mjs:12351:21)
    at detectChangesInView$1 (/ui/node_modules/@angular/core/fesm2022/core.mjs:12560:9)
ERROR TypeError: hostElem.parentNode.getBoundingClientRect is not a function
    at _GraphComponent.getContainerDims (/ui/node_modules/@kr0san89/ngx-graph/fesm2022/kr0san89-ngx-graph.mjs:2503:40)
    at _GraphComponent.basicUpdate (/ui/node_modules/@kr0san89/ngx-graph/fesm2022/kr0san89-ngx-graph.mjs:2478:25)
    at _GraphComponent.ngOnChanges (/ui/node_modules/@kr0san89/ngx-graph/fesm2022/kr0san89-ngx-graph.mjs:1641:10)
    at _GraphComponent.rememberChangeHistoryAndInvokeOnChangesHook (/ui/node_modules/@angular/core/fesm2022/core.mjs:4101:14)
    at callHookInternal (/ui/node_modules/@angular/core/fesm2022/core.mjs:5136:14)
    at callHook (/ui/node_modules/@angular/core/fesm2022/core.mjs:5167:9)
    at callHooks (/ui/node_modules/@angular/core/fesm2022/core.mjs:5118:17)
    at executeInitAndCheckHooks (/ui/node_modules/@angular/core/fesm2022/core.mjs:5068:9)
    at refreshView (/ui/node_modules/@angular/core/fesm2022/core.mjs:12351:21)
    at detectChangesInView$1 (/ui/node_modules/@angular/core/fesm2022/core.mjs:12560:9)
ERROR ReferenceError: window is not defined

I’m not sure how I can handle this, one thought was to debug this through changes directly from node_modules but I cannot see the reflected changes in the browser, I understand that they won’t be reflected because the package has to be rebuilt again and angular has to understand it as new and reload it but i’m not exactly sure how to do this. Also I’m not sure if this problem is due to the Angular 17 or it is also present in the previous versions. I will also open an issue later in the official repository but cannot make a reproduction due to the forked repository. Any ideas on how I can at least debug this and/or make local changes to it?

I have the function “analysis” doing lots of linear alegbra calculations in arrays,part of it is in the snippet below. However, when this function is called I want all the involved arrays to be empty so I call a function “varNeutral” that empties all the arrays. But, the arrays remain the same containing values from previous “analysis” run, causing large inaccuracy in the results. It is clear if one of the arrays remains all the rest don’t get cleared either. However I need to keep that array named “line” and only empty all the rest. Not only that I also fill them with zero but for example K contains values from previous analysis run regardless. Do you know how to solve this?

let line= [{x1:1, y1:1, x0:2, y0:2, m:2, l: 1.44, c: 1, s: 1, n1: 1, n2: 2,ea:2000,ca: 10}];
let numbNodes2      = [1,2]
  
function analysis(){
    varNeutral();
    RhA             = 8;
    let uniqueNode2 = [...line.map(a => a.n1) , ...line.map(a => a.n2)];
    for (var r = 0; r < 2*numbNodes2.length; r++){
        K[r] = [];
        M[r] = [];
        Kf[r]= [];
        C[r] = [];
        for (var c=0; c < 2*numbNodes2.length; c++) {
            K[r][c]  = 0;
            M[r][c]  = 0;
            Kf[r][c] = 0;
            C[r][c]  = 0;
        }
    }
    for (var r = 0; r<line.length; r++){
            KN1[r]                = 2*numbNodes2.indexOf(line[r].n1);
            KN2[r]                = 2*numbNodes2.indexOf(line[r].n2);
    }
    //k11 k22
    for (var r = 0; r<numbNodes2.length; r++){
        for (var mem = 0; mem<line.length; mem++) {
            if(line[mem].n1 == numbNodes2[r] || line[mem].n2 == numbNodes2[r]){
                let tmpl          = line[mem].l;
                let tmpc          = line[mem].c;
                let tmps          = line[mem].s;
                let tmpea         = line[mem].ea*canWidth/8;
                let tmpca         = line[mem].ca*8/canWidth;
                K[2*r][2*r]      += tmpea*Math.pow(tmpc,2)/tmpl;
                K[2*r][2*r+1]    += tmpea*tmps*tmpc/tmpl;
                K[2*r+1][2*r+1]  += tmpea*Math.pow(tmps,2)/tmpl;
                K[2*r+1][2*r]    += tmpea*tmps*tmpc/tmpl;  
                Kf[2*r][2*r]     += tmpea*Math.pow(tmpc,2)/tmpl;
                M[2*r][2*r]      += RhA*0.5*line[mem].l;
                M[2*r+1][2*r+1]  += RhA*0.5*line[mem].l;
                //
                C[2*r][2*r]      += tmpca*Math.pow(tmpc,2)*tmpl;
                C[2*r][2*r+1]    += tmpca*tmps*tmpc*tmpl;
                C[2*r+1][2*r+1]  += tmpca*Math.pow(tmps,2)*tmpl;
                C[2*r+1][2*r]    += tmpca*tmps*tmpc*tmpl;  
            }
        }
    } 
    KK = K;
 }

function varNeutral(){
    numbNodes2              =  [];
    KN1                     =  [];
    KN2                     =  [];
    K                       =  [];
    M                       =  [];
    Ka                      =  [];
    Kf                      =  [];
    Pa                      =  [];
    Ua                      =  [];
    Va                      =  [];
    KK                      =  [];
}

I’m fetching a .wasm file and converting that file to a Uint8Array using TextEncoder encode().

Unfortunately the buffer of the Uint8Array when passed to WebAssembly.instantiate() throws

fetch("/path/to/file.wasm")
  .then((r) => r.text())
  .then((text) => {
    return new TextEncoder().encode(text)
  })
  .then((uint8) => {
      console.log(WebAssembly.validate(uint8));
      WebAssembly.instantiate(uint8.buffer, 
  // ...

CompileError: WebAssembly.instantiate(): section (code 1, “Type”) extends past end of the module (length 7299055, remaining bytes 166825) @+8

In this case I can’t use instantiateStreaming() because the context I’m running the WebAssembly module in does not expose fetch() or Response.

What I’m working on doing is writing the .wasm file as an array [...] in the script dynamically that will be run in the context that doesn’t support fetch() or Response(), pass the array to a TypedArray then pass the buffer from the TypedArray to instantiate().

How to convert raw .wasm file text to a TypedArray whose buffer is compatible with instantiate()?

When playtesting (Flappigtrail, v0.1.2), I noticed that the jump height works for 144 FPS but not so much for 60 FPS (the jump height is way lower for 60 FPS).

When the player jumps, player_dy becomes -2.7 (jump_height “is a constant” == 2.7); meaning that the playing will gain -2.7 (+ cumulative gravity ) per frame.
However, note that since gravity is 0.06, it will take:
| jump_height | * gravity == 2.7 / 0.06 == 45 frames at 144 fps to turn player_dy into 0, then negative with additional frames (add gravity; falling instead of flying up).
Note that 45 Frames / 144 FPS == 0.31 seconds
We can roughly model (maybe I’m wrong here ?) the height gained with nb_frames / 2 * jump_height == 22.5 * -2.7 == -60.75 => 61 pixels gained upwards for the jump at 144 FPS.

However, at 60 FPS, if gravity gained per height remains the same, it will still take 45 frames to get player_dy to 0, then negative with additional frames.
Note that 45 Frames / 60 FPS == 0.75 seconds (so more than twice as long).
Also note that while the jump height is the same as before (i.e. 61 pixels), it will take more than twice as long to get to player_dy == 0, giving this “jumping on the moon” feel (it is not desired).

Therefore, I thought of using the ratio BASE FPS (144) / CUR_FPS (e.g. 60 FPS) to update the amount of height the player should get from jumping && the amount of height the player should lose when get gravity applied each frame.

Note the scenario where we updated height gained (player_dy) from jump from -2.7 to -2.7 * (BASE_FPS / CUR_FPS) == -2.7 * 144/60 ~= -2.7 * 2.4 ~= -6.48
With this greater jump height and gravity unchanged, it will take:
| jump_height | * gravity == 6.48 / 0.06 == 108 frames before turning player_dy back to 0
=> i.e. nb_frames / 2 * jump_height == 108 / 2 * -6.48 == 54 * -6.48 ~= 350 pixels gained from the jump at 60 FPS with gravity unchanged
It will take us roughly 10 frames to gain 61 pixels (with gravity remained unchanged; yes, I have not accounted to player_dy losses from gravity_dy but it’s minimal here):
height_to_gain_px / | player_dy (after jump) | == 61 / 6.48 ~= 10 frames
Note that 10 Frames / 60 FPS ~= 0.17 seconds

However, we would also update the gravity gained per tick from 0.06 to 0.06 * (BASE_FPS / CUR_FPS) == 0.06 * 144/60
~= 0.06 * 2.4 == 0.144

With this greater gravity it will take:
| jump_height | * gravity == 6.48 / 0.144 == 45 frames before turning player_dy back to 0
=> i.e. nb_frames / 2 * jump_height == 45 / 2 * -6.48 == 22.5 * -6.48 ~= 146 pixels gained from the jump at 60 FPS with gravity unchanged
It will take us roughly 10 frames to gain 61 pixels (with gravity remained unchanged; yes, I have not accounted to player_dy losses from gravity_dy but it’s minimal here):
height_to_gain_px / | player_dy (after jump) | == 61 / 6.48 ~= 10 frames
Note that 10 Frames / 60 FPS ~= 0.17 seconds

Nonetheless, it seems that the 60 FPS jump in practice is still way higher than that…

Any clue ?

Edit:

If we only update gravity:
gravity * (BASE_FPS / CUR_FPS) == 0.06 * 2.4 == 0.144
| jump_height | * gravity == 2.7 / 0.144 == 18.75 Frames at 60 FPS to turn player_dy into 0.
Note that 18.75 Frames / 60 FPS == 0.31 seconds

This should work lol

Except–plot twist–it doesn’t

help…

See relevant code below

const BASE_FPS = 144;
const BASE_GRAVITY = IS_MOBILE ? 0.035 : 0.06;  // height lost per tick
const BASE_JUMP_Y = IS_MOBILE ? -1.3 : -2.7;  // player height gained per jump

// GAME LOGIC (per tick; e.g. 60 FPS)
function update(timeStamp) {
    requestAnimationFrame(update);  // request next frame

    calcDeltaTime(timeStamp);

    if (!gameStarted) {
        return;  // skip game logic updates if game did not start yet
    }
    // On player loss, display gameOver and retry texts
    if (gameOver) {
        spawn_bonus = true;  // reset in case player died before last_digit % 10 == 0
        drawGameOverText();  // draw gameOver text in center of screen
        if (!wroteRetry) {  // write retry only once
            waitAndDrawRetryText();  // draw retry text after GAMEOVER_TIME ms
            wroteRetry = true;
        }
        return;  // do not update canvas anymore if player lost
    }
    // // Skip current frame (if IRLplayer's PC framerate > FRAMERATE) or clear board/canvas
    // if (skipFrameOrClearBoard(timeStamp)) {  // if we should skip current frame
    //     return;  // skip current frame
    // }
    context.clearRect(0, 0, board.width, board.height);
    applyGravityAndBounds();  // constant heigth loss + bounds + gameOver on fall
    drawPipes();  // draw pipes every INTERVAL seconds (e.g. every 1s)
    drawScore();  // draw score text
    drawFPS();
}

/* Function: calcDeltaTime()
 * -----------------------------------------------------------------------------------
 * SUMMARY:
 *   Calculates deltaTime (for each update)
 */
function calcDeltaTime(timeStamp) {
    deltaTime = (timeStamp - lastFrameTime) / 1000;  // div 1000 for ms -> s
    lastFrameTime = timeStamp;  // 1 FRAME time length passed, update lastFrame2curFrame
}

/* Function: applyGravityAndBounds()
 * -----------------------------------------------------------------------------------
 * SUMMARY:
 *   Draw score at canvas top-middle
 */
function applyGravityAndBounds() {
    // player_dy += gravity * deltaTime * BASE_FPS;  // player is subject to GRAVITY
    player_dy += gravity * (BASE_FPS / (1 / deltaTime));  // applyGrav
    if (gamemode === GAMEMODE.EXTREME) {
        player_dy += gravity * (BASE_FPS / (1 / deltaTime));  // double gravity if EXTREME
    }
    if (player.y + player_dy < 0) {  // if player jumps above ceiling
        player.y = 0;  // block player on ceiling
        // Else if player fell (and is offscreen)
    } else if ((player.y + player_dy) > BOARD_HEIGHT) {
        gameOver = true;
    } else {  // player is in screen (normal case)
        player.y += player_dy;
    }
    player.y = Math.max(player.y + player_dy, 0);  // Math.max for ceiling
    if (player.img) {  // wait for player sprite to load
        context.drawImage(player.img, player.x, player.y, player.width, player.height);
    }
}

/* Function: playerJump()
 * -----------------------------------------------------------------------------------
 * SUMMARY:
 *   If IRLplayer presses Spacebar, ArrowUp or touches the screen (mobile), 
 *   makes character jump by player.jump_height
 */
function playerJump(event) {
    if (event.code == "Space" || event.code == "ArrowUp" || event.type === "touchstart"
        || event.type == "click") {
        if (!gameStarted) {
            gameStarted = true;
            // Start game logic
            spawnPipes();  // spawn first pipe without delay
            setInterval(spawnPipes, pipeSpawnInterval);  // spawn pipes pair from right
        }

        // player_dy = player.jump_height * (BASE_FPS / (1 / deltaTime));
        player_dy = player.jump_height;
        console.log("player_dy=", player_dy);
        console.log("player.jump_height=", player.jump_height);
        console.log("deltaTime=", deltaTime);
        console.log("FPS=", 1 / deltaTime);
        console.log("player.jump_height * deltaTime=", player.jump_height * deltaTime);

        applyFlap();

        // Reset the game if gameOver == true
        if (gameOver && restarting) {  // can only replay after restarting timer
            resetGlobals();// Reset game fields to defaults
        }
    }
}

can someone help me with reading the loggly records, I have problems with reading the message “undefined is not an object (evaluating ‘a.L’)” since I don’t have a.L anywhere in my code, I assume it’s rendered html or some script but I can’t to find exactly where the problem is.
I think the error was thrown by window.onerror

enter image description here

i tried to find some code in the scripts i uploaded but no luck in finding it

So I have this code that delete me some classes every 8000 milliseconds. But I want to clear the interval everytime it delete that class and start over when that class exist again.

So here’s an example

<div id="oneTab" class='secondaryNav activeTab'></div>

I want to delete the “activeTab” class after 8000 milliseconds and reset and stop the timer then only when the class exists again to start the timer again.

  var count = 1;
 var timer = 8000;

function transition() {
    if(count == 1) {
        $('.secondaryNav').removeClass('activeTab');
        $('.navLink').removeClass('active');
         count = 2;
    } else if(count == 2) {
        $('.secondaryNav').removeClass('activeTab');
        $('.navLink').removeClass('active');
         count = 3;
    } else if(count == 3) {
        $('.secondaryNav').removeClass('activeTab');
        $('.navLink').removeClass('active');
        count = 1;
    }
}
    setInterval(transition, timer);

Or it might be an easier way with JS to delete a class a add another when clicking outside the div or link

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("secondaryNav");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].classList.remove("activeTab");
  }
  tablinks = document.getElementsByClassName("navLink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks.className = tablinks[i].classList.remove("active");
  }
  document.getElementById(tabName).classList.add("activeTab");
  evt.currentTarget.className += " active";
  tabcontent[i].classList.remove("activeTab");
}

I have this code that opens different tab depending on the link but I want that tab to disappear if I click outside the tab or everywhere else except his link.

I tried making some clearInterval(timer) methods, but I couldn’t make it.
On the JS code I tried adding a class “fadedTab” but it adds that class to all tabs except the activeTab one and I only want to add it to the last tab for like 3-4 seconds that remove that class.

I have added two firebase functions to my flutter app to implement Stripe.

const functions = require("firebase-functions");
const stripe = require("stripe")(functions.config().stripe.testKey)

const calculateOrderAmount = (items) => {
    prices = [];
    catalog = [
        { 'id': '0', 'price': 3.99, },
        { 'id': '1', 'price': 7.99, },
        { 'id': '2', 'price': 9.99, },
    ];

    items.array.forEach(item => {
        price = catalog.find(x => x.id == item.id).price;
        prices.push(price);
    });

    return parseInt(prices.reduce((a, b) => a + b) * 100);
}

const generateResponse = function (intent) {
    switch (intent.status) {
        case 'requires_action':
            return {
                clientSecret: intent.clientSecret,
                requiresAction: true,
                status: intent.status,
            }
        case 'requires_payment_method':
            return {
                'error': 'Your card was denied, please provide a new payment method',
            };
        case 'succeded':
            console.log('Payment succeded')
            return {
                clientSecret: intent.clientSecret,
                status: intent.status,
            };
    }
    return {
        error: 'Failed'
    };
}

exports.StripePayEndpointMethodId = functions.https.onRequest(async (req, res) => {
    const { paymentMethodId, items, curency: currency, useStripeSdk, } = req.body;

    const orderAmount = calculateOrderAmount(items);

    try {
        if (paymentMethodId) {
            const params = {
                amount: orderAmount,
                confirm: true,
                confirmation_method: 'manual',
                currency: currency,
                payment_method: paymentMethodId,
                use_stripe_sdk: useStripeSdk,
            }

            const intent = await stripe.paymentIntents.create(params);
            console.log('Intent: ${intent}');
            return res.send(generateResponse(intent));
        }
        res.sendStatus(400)
    } catch (error) {
        return res.send({ error: error.message });
    }
});

exports.StripePayEndpointIntentId = functions.https.onRequest(async (req, res) => {
    const { paymentIntentId } = req.body;
    try {
        if (paymentIntentId) {
            const intent = await stripe.paymentIntents.confirm(paymentIntentId);
            return res.send(generateResponse(intent));
        }
        return res.sendStatus(400)
    } catch (error) {
        return res.send({ error: error.message })
    }
});

However when I run the command firebase deploy --only functions it shows me an error. Here is the full log:

=== Deploying to 'jimv01'...

i  deploying functions
✔  functions: Finished running predeploy script.
i  functions: preparing codebase default for deployment
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
i  artifactregistry: ensuring required API artifactregistry.googleapis.com is enabled...
✔  artifactregistry: required API artifactregistry.googleapis.com is enabled
✔  functions: required API cloudfunctions.googleapis.com is enabled
✔  functions: required API cloudbuild.googleapis.com is enabled
i  functions: Loading and analyzing source code for codebase default to determine what to deploy
Serving at port 8950

i  functions: preparing functions directory for uploading...
i  functions: packaged /Users/fscozano/Desktop/GymPT_0.2/server/functions (75.05 KB) for uploading
✔  functions: functions folder uploaded successfully
i  functions: updating Node.js 18 (1st Gen) function StripePayEndpointMethodId(us-central1)...
i  functions: updating Node.js 18 (1st Gen) function StripePayEndpointIntentId(us-central1)...
Function failed on loading user code. This is likely due to a bug in the user code. Error message: Provided module can't be loaded.
Did you list all required modules in the package.json dependencies?
Detailed stack trace: Error: Cannot find module 'stripe'
Require stack:
- /workspace/index.js
- /layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/loader.js
- /layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/main.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1134:15)
    at Module._load (node:internal/modules/cjs/loader:975:27)
    at Module.require (node:internal/modules/cjs/loader:1225:19)
    at require (node:internal/modules/helpers:177:18)
    at Object.<anonymous> (/workspace/index.js:2:16)
    at Module._compile (node:internal/modules/cjs/loader:1356:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
    at Module.load (node:internal/modules/cjs/loader:1197:32)
    at Module._load (node:internal/modules/cjs/loader:1013:12)
    at Module.require (node:internal/modules/cjs/loader:1225:19)
Could not load the function, shutting down.. Please visit https://cloud.google.com/functions/docs/troubleshooting for in-depth troubleshooting documentation.
Function failed on loading user code. This is likely due to a bug in the user code. Error message: Provided module can't be loaded.
Did you list all required modules in the package.json dependencies?
Detailed stack trace: Error: Cannot find module 'stripe'
Require stack:
- /workspace/index.js
- /layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/loader.js
- /layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/main.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1134:15)
    at Module._load (node:internal/modules/cjs/loader:975:27)
    at Module.require (node:internal/modules/cjs/loader:1225:19)
    at require (node:internal/modules/helpers:177:18)
    at Object.<anonymous> (/workspace/index.js:2:16)
    at Module._compile (node:internal/modules/cjs/loader:1356:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
    at Module.load (node:internal/modules/cjs/loader:1197:32)
    at Module._load (node:internal/modules/cjs/loader:1013:12)
    at Module.require (node:internal/modules/cjs/loader:1225:19)
Could not load the function, shutting down.. Please visit https://cloud.google.com/functions/docs/troubleshooting for in-depth troubleshooting documentation.

Functions deploy had errors with the following functions:
        StripePayEndpointIntentId(us-central1)
        StripePayEndpointMethodId(us-central1)
i  functions: cleaning up build files...
⚠  functions: Unhandled error cleaning up build images. This could result in a small monthly bill if not corrected. You can attempt to delete these images by redeploying or you can delete them manually at https://console.cloud.google.com/gcr/images/jimv01/us/gcf
Error: There was an error deploying functions:
- Error Failed to update function StripePayEndpointMethodId in region us-central1
- Error Failed to update function StripePayEndpointIntentId in region us-central1

Here is also the package.json file:

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "lint": "eslint .",
    "serve": "firebase emulators:start --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "18"
  },
  "main": "index.js",
  "dependencies": {
    "firebase-admin": "^11.8.0",
    "firebase-functions": "^4.3.1"
  },
  "devDependencies": {
    "eslint": "^8.15.0",
    "eslint-config-google": "^0.14.0",
    "firebase-functions-test": "^3.1.0"
  },
  "private": true
}

From the log, I assume that the problem is that it can’t find the stripe module and, as you can see, the stripe dependency doesn’t show even though I added it through the command npm install stripe --save. For this reason, I tried adding it manually:

"dependencies": {
    "firebase-admin": "^11.8.0",
    "firebase-functions": "^4.3.1",
    "stripe": "^6.28.0"
  },

However, it shows another error:

=== Deploying to 'jimv01'...

i  deploying functions
✔  functions: Finished running predeploy script.
i  functions: preparing codebase default for deployment
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
i  artifactregistry: ensuring required API artifactregistry.googleapis.com is enabled...
✔  functions: required API cloudbuild.googleapis.com is enabled
✔  artifactregistry: required API artifactregistry.googleapis.com is enabled
✔  functions: required API cloudfunctions.googleapis.com is enabled
i  functions: Loading and analyzing source code for codebase default to determine what to deploy
Serving at port 8640

i  functions: preparing functions directory for uploading...
i  functions: packaged /Users/fscozano/Desktop/GymPT_0.2/server/functions (75.06 KB) for uploading
✔  functions: functions folder uploaded successfully
i  functions: updating Node.js 18 (1st Gen) function StripePayEndpointMethodId(us-central1)...
i  functions: updating Node.js 18 (1st Gen) function StripePayEndpointIntentId(us-central1)...
Build failed: npm ERR! code EUSAGE
npm ERR! 
npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
npm ERR! 
npm ERR! Missing: [email protected] from lock file
npm ERR! 
npm ERR! Clean install a project
npm ERR! 
npm ERR! Usage:
npm ERR! npm ci
npm ERR! 
npm ERR! Options:
npm ERR! [--install-strategy <hoisted|nested|shallow|linked>] [--legacy-bundling]
npm ERR! [--global-style] [--omit <dev|optional|peer> [--omit <dev|optional|peer> ...]]
npm ERR! [--include <prod|dev|optional|peer> [--include <prod|dev|optional|peer> ...]]
npm ERR! [--strict-peer-deps] [--foreground-scripts] [--ignore-scripts] [--no-audit]
npm ERR! [--no-bin-links] [--no-fund] [--dry-run]
npm ERR! [-w|--workspace <workspace-name> [-w|--workspace <workspace-name> ...]]
npm ERR! [-ws|--workspaces] [--include-workspace-root] [--install-links]
npm ERR! 
npm ERR! aliases: clean-install, ic, install-clean, isntall-clean
npm ERR! 
npm ERR! Run "npm help ci" for more info

npm ERR! A complete log of this run can be found in: /www-data-home/.npm/_logs/2024-03-17T19_44_48_688Z-debug-0.log; Error ID: beaf8772
Build failed: npm ERR! code EUSAGE
npm ERR! 
npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
npm ERR! 
npm ERR! Missing: [email protected] from lock file
npm ERR! 
npm ERR! Clean install a project
npm ERR! 
npm ERR! Usage:
npm ERR! npm ci
npm ERR! 
npm ERR! Options:
npm ERR! [--install-strategy <hoisted|nested|shallow|linked>] [--legacy-bundling]
npm ERR! [--global-style] [--omit <dev|optional|peer> [--omit <dev|optional|peer> ...]]
npm ERR! [--include <prod|dev|optional|peer> [--include <prod|dev|optional|peer> ...]]
npm ERR! [--strict-peer-deps] [--foreground-scripts] [--ignore-scripts] [--no-audit]
npm ERR! [--no-bin-links] [--no-fund] [--dry-run]
npm ERR! [-w|--workspace <workspace-name> [-w|--workspace <workspace-name> ...]]
npm ERR! [-ws|--workspaces] [--include-workspace-root] [--install-links]
npm ERR! 
npm ERR! aliases: clean-install, ic, install-clean, isntall-clean
npm ERR! 
npm ERR! Run "npm help ci" for more info

npm ERR! A complete log of this run can be found in: /www-data-home/.npm/_logs/2024-03-17T19_45_17_967Z-debug-0.log; Error ID: beaf8772

Functions deploy had errors with the following functions:
        StripePayEndpointIntentId(us-central1)
        StripePayEndpointMethodId(us-central1)
i  functions: cleaning up build files...
⚠  functions: Unhandled error cleaning up build images. This could result in a small monthly bill if not corrected. You can attempt to delete these images by redeploying or you can delete them manually at https://console.cloud.google.com/gcr/images/jimv01/us/gcf
Error: There was an error deploying functions:
- Error Failed to update function StripePayEndpointMethodId in region us-central1
- Error Failed to update function StripePayEndpointIntentId in region us-central1

Then, I discarded the option of manually adding the stripe module. Moreover, when I faced the first issue, the functions were loaded on firebase but with an error, so they are there but I can’t use them.