Category: javascript

I want to know how I make this js code 3d audio. I’ve been looking for a fix because I don’t have the exact knowledge to do it myself. Here is the code:

var audio = null;
$(function(){
    window.onload = (e) => {
        window.addEventListener('message', (event) => {
            var item = event.data;
            if(item !== undefined && item.type === 'music') {
                if(item.name !== undefined) {
                    audio = new Audio(`sounds/${item.name}`);
                    audio.play();
                }
            }
       /*     else if(item !== undefined && item.type === 'update') {
                if(audio != null) {
                    audio.volume = item.value
                    audio.play();
                }
            }
            else if(item !== undefined && item.type === 'stop') {
                audio.pause();
            }
            else if(item !== undefined && item.type === 'stopmusic') {
                audio.pause();
                audio.currentTime = 0;
            } */
        });
    }
});

I tried to look for a fix for this but I had no success. The audio is not 3d meaning that I hear it at the same volume even if I am at a distance from the object that is emiting the sound. Even when I turn the camera, I can hear the sound on both sides. I was expecting to find a fix for this myself but I don’t have the necessary knowledge to do it myself.

Within my Ninja form I have created my own HTML range slider that goes from 0 – 20,000. Is there a way to send the value of the range slider along with the rest of the form fields when the user submits the form?

So far I’ve tried adding a ninja form hidden field and populating the hidden field with the value of the range slider when the user submits using Javascript with no luck.

I want to send Map<string, string[]> as a field of DO sent via http.post(). Method that calls post looks like that: this.http.post<Something>('/something', somethingDO);
DO looks basically like that:

export interface Something {
a: boolean;
b: number;
c: Map<string, string[]>
}

if I set chrome devTools breakpoint on post’s call I can see that c is filled with data and looks like that:

Map(1) {'first' => Array(5),}

0: {"first" => Array(5)} key: "first" value: Array(5) 0: "A7" 1: "A8" 2: "A9" 3: "A10" 4: "B1"

but if I try to use JSON.stringify on this object it returns indeed simply {}. So it seems for me, that this map cannot be sent in this format, but my Java app expects exactly Map<String, List>. Is this a way to send this map?

My repo is using two libraries(from these libraries UI components ex input box, number picker etc etc are used). One module can only use componets from one library. All tests were passing but when I switched to angular 14 from angular 11, some test cases started failing.
enter image description here
I am not able to proceed into a right direction where I can fix this issue.Can someone help me out or provide some context on this.

I am expecting it to work the same way it worked on the earlier versions. My package .json is attached below:

{
“name”: “@barclays/mca-ui-unseclending-accopen”,
“version”: “23.9.3”,
“contextRoot”: “unseclendingaccopen”,
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build –project unseclendingaccopen –extra-webpack-config webpack.partial.js –configuration production”,
“build1”: “ng build –subresource-integrity –configuration production –project CONTEXT_REPLACE_ME –extra-webpack-config webpack.partial.js”,
“test:watch”: “jest –watch”,
“test”: “jest”,
“coverage”: “jest –coverage –config jest.config.js”,
“dts”: “./node_modules/.bin/npm-dts generate”,
“lint”: “ng lint”,
“lint:fix”: “ng lint — –fix”,
“e2e”: “protractor ./e2e/protractor.conf.js”,
“postinstall”: “component-style-loader –target src”,
“docs”: “echo “no docs””,
“ccmcheck”: “eagle ccmcheck”
},
“private”: false,
“dependencies”: {
“@angular/animations”: “14.3.0”,
“@angular/cdk”: “14.2.7”,
“@angular/common”: “14.3.0”,
“@angular/compiler”: “14.3.0”,
“@angular/core”: “14.3.0”,
“@angular/forms”: “14.3.0”,
“@angular/platform-browser”: “14.3.0”,
“@angular/platform-browser-dynamic”: “14.3.0”,
“@angular/router”: “14.3.0”,
“@barclays/blueprint-angular”: “0.56.0”,
“@barclays/blueprint-css-components-content”: “^0.13.0”,
“@barclays/blueprint-fonts-effra”: “0.54.0”,
“@barclays/mca-angular-beam”: “^4.0.21”,
“@barclays/mca-api-mca”: “4.2.1”,
“@barclays/mca-api-mca-launcher”: “4.2.1”,
“@barclays/mca-api-service”: “4.2.1”,
“@barclays/mca-beam-blueprint-angular”: “3.0.1”,
“@barclays/mca-build-style-loader”: “4.0.9”,
“@barclays/mca-events”: “2.0.0-MCAUI-1188.1”,
“@barclays/tcl-mca-ngx-api”: “^1.0.3”,
“@barclays/tcl-ngx”: “3.39.0”,
“@barclays/tcl-ui-validators”: “^0.4.0”,
“@ngx-translate/core”: “13.0.0”,
“@ngx-translate/http-loader”: “6.0.0”,
“@schematics/angular”: “^14.2.13”,
“@types/pdfjs-dist”: “^2.1.7”,
“core-js”: “2.5.4”,
“cors”: “2.8.5”,
“glob-parent”: “5.1.1”,
“modern-css-reset”: “^1.4.0”,
“ngx-build-plus”: “14.0.0”,
“pdfjs-dist”: “2.5.207”,
“rxjs”: “7.4.0”,
“sloc”: “^0.2.1”,
“tslib”: “^2.0.0”,
“web-animations-js”: “2.3.2”,
“webpack”: “^5.74.0”,
“zone.js”: “~0.11.4”
},
“devDependencies”: {
“@angular-devkit/architect”: “^0.1402.13”,
“@angular-devkit/build-angular”: “14.2.13”,
“@angular-eslint/builder”: “14.4.0”,
“@angular-eslint/eslint-plugin”: “14.4.0”,
“@angular-eslint/eslint-plugin-template”: “14.4.0”,
“@angular-eslint/schematics”: “14.4.0”,
“@angular-eslint/template-parser”: “14.4.0”,
“@angular/cli”: “14.2.13”,
“@angular/compiler-cli”: “14.3.0”,
“@barclays/mca-eagle-scripts”: “4.1.2”,
“@types/jasmine”: “~3.6.0”,
“@types/jasminewd2”: “2.0.3”,
“@types/jest”: “^29.1.0”,
“@types/node”: “12.11.1”,
“@typescript-eslint/eslint-plugin”: “4.3.0”,
“@typescript-eslint/parser”: “4.3.0”,
“codelyzer”: “^6.0.0”,
“eslint”: “^7.6.0”,
“eslint-plugin-import”: “2.22.1”,
“eslint-plugin-jsdoc”: “30.7.6”,
“eslint-plugin-prefer-arrow”: “1.2.2”,
“jasmine-core”: “~3.6.0”,
“jasmine-spec-reporter”: “~5.0.0”,
“jest”: “^29.1.0”,
“jest-preset-angular”: “^13.1.3”,
“jsdom”: “16.2.2”,
“karma-firefox-launcher”: “1.3.0”,
“karma-jsdom-launcher”: “8.0.2”,
“npm-dts”: “1.2.1”,
“protractor”: “~7.0.0”,
“ts-jest”: “^29.1.0”,
“ts-node”: “8.3.0”,
“tslint”: “~6.1.0”,
“typescript”: “4.8.4”
}
}

I am having issue with the regex /({{__)([^__}}]+)(__}})/g

it matches anything like {{__test a__}} and {{__testb__}} etc but it is not working for {{__first_name__}} and {{__last_name__}} because of the _ underscore between the char,

is there a way in regex that works like [^(__}})]+ but match a series of character instead of every single char?

I am not quite familiar with using negative lookahead:

will something like this ({{__)(?!(__}})[^s]+).*(__}}) work?

example string:

{{__first_name__}} something in between {{__CCCC CV__}}

I’m encountering an issue with a slider animation implemented using HTML, CSS, and JavaScript. The animation itself works fine, but there are two problems that I’m facing:

Spacing Issue: After implementing the animation, there seems to be an unexpected spacing issue between the slides. Despite setting the transition property in CSS, there’s still a noticeable gap between each slide during the animation.

Scrollbar Appearance: Additionally, a horizontal scrollbar appears at the bottom of the slider, which I’m unable to remove. I’ve tried various CSS properties like overflow-x: hidden, but it doesn’t seem to resolve the issue.

Here’s a simplified version of my code:
HTML

<div class="slider">
  <div class="slides-container">
    <div class="firstSlider slide">
        <h1 class="brand">Cannondale</h1>
        <h2 class="model">Scalpel Carbon <bold>SE 1</bold></h2>
        <img class="modelImg" src="assets/slider/Scalpel Carbon SE 1.png">
        <button class="learn">Buy now</button>
    </div>
    <div class="secondSlider slide">
        <h1 class="brand">Polygon</h1>
        <h2 class="model">Bend <bold>v9x</bold></h2>
        <img class="modelImg" src="assets/slider/BendV9X.png">
        <button class="learn">Buy now</button>
    </div>
    <div class="thirdSlider slide">
        <h1 class="brand">Cannondale</h1>
        <h2 class="model">Trail <bold>se 2</bold></h2>
        <img class="modelImg" src="assets/slider/trail se 2.png">
        <button class="learn">Buy now</button>
    </div>
  </div>
    <div class="sliderControls">
        <ul>
            <li class="sliderPrev"><i class="fa-solid fa-chevron-left"></i></li>
            <li class="slider-item-indicator active">01</li>
            <li class="slider-item-indicator">02</li>
            <li class="slider-item-indicator">03</li>
            <li class="sliderNext"><i class="fa-solid fa-chevron-right"></i></li>
        </ul>
    </div>
</div>

CSS

.slide {    
    transition: transform 0.5s ease; /* Add transition for smooth sliding */
}

.brand {
  font-size: 5rem;
  font-family: BerlinSans;
  text-transform: uppercase;
  color: #3a3a3a;
  position: absolute;
  top: 105px;
  right: 95px;
  transform: rotate(-90deg);
  transform-origin: right;
}
.model {
  font-size: 8rem;
  font-family: BerlinSans;
  text-transform: uppercase;
  color: white;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  margin-left: 50px;
  margin-top: 30px;
}
.modelImg {
  height: 550px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 150px;
  transform-origin: center;
}
.secondSlider .modelImg {
  height: 700px;
  top: 70px;
}
.thirdSlider .modelImg {
  height: 720px;
  top: -10px;
}
.learn {
  font-size: 40px;
  outline: none;
  background-color: white;
  color: #000;
  text-transform: uppercase;
  font-weight: bold;
  font-family: Myriad;
  position: absolute;
  margin-left: 50px;
  outline: none;
  cursor: pointer;
  padding: 12px;
  border: none;
  border-radius: 5px;
}
.sliderControls {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
}
.sliderControls ul {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  gap: 30px;
  margin: 0;
  padding: 0;
}
.sliderControls li {
  color: white;
  font-family: Myriad;
  font-size: 2rem;
  display: inline;
  vertical-align: top;
}
.sliderControls .active {
  color: #3a3a3a;
  font-weight: bold;
}
.sliderPrev,
.sliderNext {
  cursor: pointer;
}

JS

document.addEventListener("DOMContentLoaded", function () {
  const slides = document.querySelectorAll(".slide");
  const totalSlides = slides.length;
  let currentSlide = 0;
  let slideInterval;
  function showSlide(index) {
    slides.forEach((slide, i) => {
      if (i === index) {
        slide.style.transform = "translateX(0)";
      } else {
        slide.style.transform = `translateX(${100 * (i - index)}vw)`;
      }
    });
  }

  function nextSlide() {
    currentSlide = (currentSlide + 1) % totalSlides;
    showSlide(currentSlide);
  }

  function prevSlide() {
    currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
    showSlide(currentSlide);
  }

  document.querySelector(".sliderPrev").addEventListener("click", function () {
    prevSlide();
    resetInterval();
  });

  document.querySelector(".sliderNext").addEventListener("click", function () {
    nextSlide();
    resetInterval();
  });

  function startInterval() {
    slideInterval = setInterval(nextSlide, 2500);
  }

  function resetInterval() {
    clearInterval(slideInterval);
    startInterval();
  }

  showSlide(currentSlide);
});

I expected the slider to have a sliding animation when manually operated and automatically as well. I tried using the transform property in JavaScript, which did work, but there is an unknown spacing issue.

How to change Mouse event and Keyboard Input In Dygraphs.

I want to change the Range selector or X Axis movement to keyboard and mouse combinations

Range Selector [Drag] –> Shift + Drag

X Axis movement [ Shift + Drag ] –> Ctrl + Drag

BR

I’m creating a “Search File” page that lets users enter a string to find some local files (with NodeJS). I want it so the user can type a part of the string and still get results. For example, if they only typed “ha” then all files that contain the string “ha” should be displayed.

Here’s my current code:

app.post("/search", (req, res) => {
  //to read all the file names in the directory, returns ["file_01.txt", "file_02.txt"]
  const fileNames = fs.readdirSync(__dirname)
  
  const userInput = req.body.userInput;
  const subArr = fileNames.filter((str) => str.includes(userInput));
  console.log(subArr); //returns empty
  res.render("search.ejs");
});

However, if I declare it explicitly:

const abc = ["ab", "bc", "cd"];
const subArr = abc.filter((str) => str.includes(userInput));
console.log(subArr) //returns an array of words that contain the user input, just like I want it to

Why can’t I filter from fileNames but it works with abc? Please help, thank you!

I created a vite project created a navigation component, created a router and then added vuetify to the project by running npm i vuetify. I get the following error now:

Uncaught Error: [Vuetify] Could not find injected layout at useLayoutItem (chunk-E7QQUSJ2.js?v=0b7a6fc0:121:11) at Object.setup [as _setup] (vuetify_components.js?v=0b7a6fc0:1505:9) at setup (chunk-ULC6QWEU.js?v=0b7a6fc0:1145:24) at callWithErrorHandling (chunk-PD2AWGJV.js?v=0b7a6fc0:1652:19) at setupStatefulComponent (chunk-PD2AWGJV.js?v=0b7a6fc0:9063:25) at setupComponent (chunk-PD2AWGJV.js?v=0b7a6fc0:9024:36) at mountComponent (chunk-PD2AWGJV.js?v=0b7a6fc0:7354:7) at processComponent (chunk-PD2AWGJV.js?v=0b7a6fc0:7320:9) at patch (chunk-PD2AWGJV.js?v=0b7a6fc0:6786:11) at ReactiveEffect.componentUpdateFn [as fn] (chunk-PD2AWGJV.js?v=0b7a6fc0:7464:11)

I just added a single .use(vuetify) and it messes up the entire code

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
    components,
    directives,
  })
  
  createApp(App)
  .use(router)
  .use(vuetify)
  .mount('#app')

This is my app.vue

<template>
  <TheNavigation></TheNavigation>
  <div class="container">
    <router-view></router-view>
  </div>
</template>

<script setup>
import TheNavigation from './components/TheNavigation.vue';

</script>
<style scoped>
</style>

The following is my Navigation.vue

<template>
  <v-app-bar color="primary">
    <v-toolbar-title>My App</v-toolbar-title>
    <v-toolbar-items class="hidden-sm-and-down">
      <router-link to="/" class="nav-link" :class="{ 'active-menu': $route.path === '/' }">Dashboard</router-link>
      <router-link to="/currencies" class="nav-link" :class="{ 'active-menu': $route.path === '/currencies' }">Currencies</router-link>
      <router-link to="/settings" class="nav-link" :class="{ 'active-menu': $route.path === '/settings' }">Settings</router-link>
    </v-toolbar-items>
    <v-btn icon class="hidden-md-and-up" @click="drawer = !drawer">
      <v-icon>mdi-menu</v-icon>
    </v-btn>
  </v-app-bar>
</template>

<script setup>
import { ref } from 'vue';

  const drawer = ref(false)

</script>

<style scoped>
.nav-link {
  color: blue;
  text-decoration: none;
  padding: 10px;
}

.active-menu {
  color: lightblue;
}
</style>

if I were to briefly explain my problem; I want to send the Select2-Autocomplete operation to the BaseController according to the parameters I give and get the relevant data. The problem I encounter here is that I do not experience any problems when I am working on a normal page, but when I do the same operation on the modal, I cannot even send a request to the BaseController. I am waiting for your help for this problem. Below I have js codes that will help.

Tools.JS
function CallSelect2() {
    $('.Select2').select2(
        {
            escapeMarkup: function (m) {
                return m;
            }
        });
    $('.Select2-Autocomplete').each(function () {
        var selectElement = $(this);

        var modalContent = selectElement.closest('.modal').find('.modal-content');

        selectElement.select2({
            dropdownParent: modalContent.length ? modalContent : $('body'),
            closeOnSelect: true,
            placeholder: 'Select',
            minimumInputLength: 3,
            width: '100%',
            ajax: {
                url: '/Base/Search_Select2',
                type: 'post',
                dataType: 'json',
                delay: 50,
                data: function (params) {
                    return {
                        prefix: params.term,
                        Params: selectElement.attr("Params"),
                        TargetID: selectElement.attr("TargetID"),
                        TableName: selectElement.attr("TableName")
                    };
                },
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return { id: item.Id, text: item.Name };
                        })
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) { return markup; }
        });
    });
}

Product.JS
function OpenModal1() {
    $('#PageModal1').modal('show').on('shown.bs.modal', function () {
        console.log("Modal gösterildi, CallSelect2 çağrılıyor");

        $('.Select2-Autocomplete').select2({
            dropdownParent: $('#PageModal1 .modal-content'),
        });
    });
}

$(function () {
    CallSelect2();
});

View Page
<div class="modal fade" id="PageModal1" tabindex="-1" aria-labelledby="PageModal1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title Rb" id="titleModal1">Add New Component</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">                            
                <div class="row">
                    <div class="col col-12">
                        <label class="FormLabel-b">Used Poduct / Raw</label>
                        
                        <select class="form-select Select2-Autocomplete" Title="Product" id="M_UsedProductID" Params="">
                            <option value="0">Select</option> 
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a id="BtnUpsert" onclick="OptModal1()" class="btn btn-primary">Add New Item</a>
            </div>
        </div>
    </div>
</div>
<script src="~/js/Views/Commerce/Product_Component.js"></script>

In airtable, I have 2 cells, each containing 3 unique linked records. I want to combine the linked records in both cells into just one cell containing 6 unique linked records.

I have tried concatenate cell formula to do this, but it returns the text string of the record and not the linked record itself.

I don’t want to manually add the 6 unique records to that cell, looking for ways to do it via automation/javascript/cell formulae.

for our ham-radio project I’ve created a “livemap” that shows our repeaters, hotspot and so on. this works very good. the next step is to enhanced the map with mqtt, then we can “live” show if a repeater is speaking or not. mosquitto and paho-mqtt are also working here fine.

var mymap = L.map('mapid', { closePopupOnClick: true, tap: false}).setView(
[51, 13],
        7
      )
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap)
     
    var repeatericon = L.icon({
        iconUrl: 'https://www.lausitzlink.de/repeatermap/images/relais.png',
        iconSize: [35]
    });
    var simplexicon = L.icon({
        iconUrl: 'https://www.lausitzlink.de/repeatermap/images/simplex.png',
        iconSize: [35]
    });
    var hotspoticon = L.icon({
        iconUrl: 'https://www.lausitzlink.de/repeatermap/images/hotspot.png',
        iconSize: [35]
    });
    var ownicon = L.icon({
        iconUrl: 'https://www.lausitzlink.de/repeatermap/images/own.png',
        iconSize: [35]
    });

var markers = L.markerClusterGroup.layerSupport({
    spiderfyOnMaxZoom: true,
    showCoverageOnHover: false,
    zoomToBoundsOnClick: true,
    maxClusterRadius: 30
});

var RepeaterLayer = L.layerGroup();
var SimplexLayer = L.layerGroup();
var HotspotLayer = L.layerGroup();


var overlays = {
"Relais": RepeaterLayer,
"Simplex": SimplexLayer,
"Hotspot": HotspotLayer
};

    var layersControl = L.control.layers(null, overlays);
     //layersControl.setPosition("bottomleft");
     layersControl.addTo(mymap);

mymap.addLayer(RepeaterLayer);
mymap.addLayer(SimplexLayer);
mymap.addLayer(HotspotLayer);

var marker = L.marker([51.63804, 14.040286],  {
 icon: repeatericon,
 title: 'DB0AF',
 alt: 'DB0AF',
}).addTo(RepeaterLayer)
                  
var popup = marker.bindPopup(
 Some Infos about the Repeater
)

markers.addLayer(marker)

var marker = L.marker([51.52781, 13.831336],  {
 icon: repeatericon,
 title: 'DB0LS',
 alt: 'DB0LS',
}).addTo(RepeaterLayer)
                  
var popup = marker.bindPopup(
 Some Infos about the Repeater
)
        
markers.addLayer(marker)

mymap.addLayer(markers)

the goal is, every time when mqtt message is arrived to modify an existing marker like with a circle or let the icon blinking. the function when mqtt message arrived, already exist:

function onMessageArrived(message) {
  alert(message.payloadString);
}

for testing reasons, a popup are shown if a message arrived. that works good.

I’ve created a css class “blinking” and try to modify the marker with:

L.DomUtil.addClass(marker._icon, 'className');

but I don’t know how I can assign an existing marker

is it possible to assign an existing marker and change the icon or add an circle? can I give an ID to an marker to assign them?

thank you very much!

Good Morning,

I have created my app with Gdevelop and I see that when you buy an item, the first time the result is duplicated and if I try again the app freezes.

On iOS I can see the following error a lot of times:

00:48.851.916 Default Space Warhog (3570) Space
Warhog Default [CdvPurchase.Validator] DEBUG: Schedule validation:
{“className”:”Transaction”,”transactionId”:”appstore.application”,”state”:”approved”,”products”:[{“id”:”com.stilugames.jabaliespacial”}],”platform”:”ios-appstore”}
00:48.851.949 Default Space Warhog (3570) Space
Warhog Default [CdvPurchase] DEBUG: Calling callback: type=approved()
name=#efee3d7b1bea62da4bf830ac52793314
reason=adapterListener_receiptsUpdated_approved
00:48.851.983 Default Space Warhog (3570) Space
Warhog Default [CdvPurchase] INFO: verify(Transaction)
00:48.852.026 Error Space Warhog
(3570) com.apple.WebKit IPC 0x112064220 –
Connection::dispatchIncomingMessages: IPC throttling was triggered
(has 11’306 pending incoming messages, will only process 60 before
yielding) 00:48.852.055 Error Space Warhog
(3570) com.apple.WebKit IPC 0x112064220 –
Connection::dispatchIncomingMessages: first IPC message in queue is
WebUserContentControllerProxy_DidPostMessage
00:48.852.115 Default Space Warhog (3570) Space
Warhog Default [CdvPurchase.Validator] DEBUG: Schedule validation:
{“className”:”Transaction”,”transactionId”:”appstore.application”,”state”:”approved”,”products”:[{“id”:”com.stilugames.jabaliespacial”}],”platform”:”ios-appstore”}
00:48.852.156 Default Space Warhog (3570) Space
Warhog Default [CdvPurchase] DEBUG: Calling callback: type=approved()
name=#efee3d7b1bea62da4bf830ac52793314
reason=adapterListener_receiptsUpdated_approved
00:48.852.190 Default Space Warhog (3570) Space
Warhog Default [CdvPurchase] INFO: verify(Transaction)
00:48.852.223 Default Space Warhog (3570) Space
Warhog Default [CdvPurchase.Validator] DEBUG: Schedule validation:
{“className”:”Transaction”,”transactionId”:”appstore.application”,”state”:”approved”,”products”:[{“id”:”com.stilugames.jabaliespacial”}],”platform”:”ios-appstore”}
00:48.852.257 Default Space Warhog (3570) Space
Warhog Default [CdvPurchase] DEBUG: Calling callback: type=approved()
name=#efee3d7b1bea62da4bf830ac52793314
reason=adapterListener_receiptsUpdated_approved

I’ve been checking and it comes from this JS script the problem, but I don’t understand where it is:

Code10 JS:

gdjs.evtsExt__InAppPurchase__WatchItemEvent.func(runtimeScene, "500monedas", "quinientos_paid", "approved", (typeof eventsFunctionContext !== 'undefined' ? eventsFunctionContext : undefined));

gdjs-evtsext_inapppurchase_watchitemevent-func:

store.when().approved((transaction) => {
    // If we're watching this event, call the callback.
    if (eventName === 'approved') {
        transactionCallback(transaction);
    }
    // Automatically verify the transaction on approved.
    transaction.verify();

It also connects to the Cordova-plugin-purchase store file.

I have a test app where the same error appears and it is configured like this in GDevelop:

First Part

End Part

If anyone can help me or if it has worked well for someone and I am doing something wrong, I would appreciate your help.

Context is jest unit tests in combination with msw version 2.0.
The following polyfill is required to allow Node globals to be defined.

import { FormData, Headers, Request, Response, fetch } from 'undici';

Object.defineProperties(globalThis, {
  fetch: { value: fetch, writable: true },
  Headers: { value: Headers },
  FormData: { value: FormData },
  Request: { value: Request },
  Response: { value: Response },
});

In one of the unit tests I need to overwrite again Response, to mock differently data, this is my expected mock for Response

Response: {
  error: jest.fn(() => {
    return new Error('Fake network error');
  }),
},

But any of these code snippets work.

Approach 1

Object.assign(globalThis, {
   Response: {
      error: jest.fn(() => {
        return new Error('Fake network error');
      }),
    },
  });

or

Object.assign(globalThis, {
   Response: {
      error: jest.fn(() => {
        return new Error('Fake network error');
      }),
    },
  });

returns this error, breaking all unit tests.

TypeError: Cannot assign to read only property 'Response' of object '[object Window]'
        at Function.assign (<anonymous>)

Approach 2

jest.mock('undici', () => {
  const actual = jest.requireActual('undici');
  return {
    ...actual,
    Response: {
      error: jest.fn(() => {
        return new Error('Fake network error');
      }),
    },
  };
});

or

jest.mock('undici', () => {
  const actual = jest.requireActual('undici');
  return {
    ...actual,
    Response: jest.fn((...args) => {
      const originalResponse = new actual.Response(...args);
      originalResponse.error = jest.fn(() => {
        return new Error('Fake network error');
      });
      return originalResponse;
    }),
  };
});

or

jest.mock('undici', () => {
  const actual = jest.requireActual('undici');
  return {
    ...actual,
    Response: class MockedResponse extends actual.Response {
      error(): Error {
        return new Error('Fake network error');
      }
    },
  };
});

or

jest.mock('undici', () => {
  const originalModule = jest.requireActual('undici');
  return {
    ...originalModule,
    Response: jest.fn().mockImplementation(() => {
      return {
        error: jest.fn(() => {
          return new Error('Fake network error');
        }),
      };
    }),
  };
});

doesn’t overwrite Response, [Error: Fake network error] is not part of my Response test expectations.

Ideas how to fix this scenario?

I want to create a new page and then print the unique page id once its done

I am able to create the page using this code:

await notion.pages.create({
  parent: {
    database_id: process.env.EVENTS_DATABASE_ID,
  },
  properties: {
    Name: {
      title: [
        {
          text: {
            content: name,
          },
        },
      ],
    },
    Description: {
      rich_text: [
        {
          text: {
            content: "some words here...",
          },
        },
      ],
    },
  },
})

This database has automatic unique ids but I have no idea how to print it once its created (I don’t want to print all of the current IDs, just the newest one that is created).
Thanks in advance!