We Keep Coding

Telegram Bot: Game Did not start

I am trying to run my game inside telegram in-app browser.
Below are my code so far
bot.action('wheeloffortune', ctx => {
bot.telegram.sendGame(ctx.chat.id, 'wheeloffortune');
})
bot.on("callback_query", function (query) {
let gameurl = "https://dazzling-ritchie-f3ad20.netlify.app/?id="+query.id;
bot.answerCallbackQuery({
callback_query_id: query.id,
url: gameurl
});
});
bot.on("inline_query", function(iq) {
bot.answerInlineQuery(iq.id, [ { type: "game", id: "0", game_short_name: 'wheeloffortune' } ] );
});
What I expect: after clicking the button 'Play wheeloffortune', the game should open in webview.
What is actually happening:
this image keep rendering
any advice is appreciated

According to the game example of telegraf:
You can simply use:
bot.gameQuery((ctx) => {
let queryId = ctx.callbackQuery.id
let gameurl = "https://dazzling-ritchie-f3ad20.netlify.app/?id="+queryId;
ctx.answerGameQuery(gameUrl)
})

Grapes Js: The css classes are removed and the autogenerated ids for each html tags gets changed ( Example : ivj5m-2) after each reload

How to reproduce the bug?
Install the grapes js in react app
Go to the editor and drag a component. ( Example : text component)
Style the component using the style manager
save it into DB and see the code in the editor
Reload the page
see the code in the editor
What is the expected behavior?
The html tag ids and css for that ids should not be changes or erased even though if reload the editor
What is the current behavior?
If we are reloading the editor after any changes , the ids in the html code change and the css for that ids getting erased off
If is necessary to execute some code in order to reproduce the bug, paste it here below:
const editor = grapesjs.init({
container: "#block",
canvas: {
styles: [
"https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css",
],
scripts: [
"https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js",
"https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js",
],
},
protectedCss: "",
commands: {
defaults: [
{
id: "my-command-id",
run() {
alert("This is my command");
},
},
],
},
plugins: ["gjs-preset-webpage"],
storageManager: {
id: "gjs_",
type: "remote",
autosave: true,
autoload: true,
urlStore: this.API_URL + "update_builder/" + this.state.id,
urlLoad: this.API_URL + this.state.id,
//method: 'patch',
params: {
draft: "1",
},
headers: {},
},
assetManager: {
storageType: "",
storeOnChange: true,
storeAfterUpload: true,
upload: "https://localhost/assets/images", //for temporary storage
assets: [],
uploadName: "file",
uploadFile: function (e) {
var files = e.dataTransfer
? e.dataTransfer.files
: e.target.files;
var formData = new FormData();
for (var i in files) {
formData.append("upload", files[i]); //containing all the selected images from local
}
PageService.contentUpload(formData)
.then((response) => {
console.log(response.data.path);
editor.AssetManager.add(response.data.path);
})
.catch((error) => {
// this.alert.show(error.response.data.message,{type:'error'});
});
},
},
pageManager: {
pages: this.pagesList,
},
layerManager: {
appendTo: ".layers-container",
},
styleManager: {
appendTo: '.style-container'
},
});
const pageManager = editor.Pages;
const pagesList = pageManager.getAll();
this.pages = pagesList;
this.editorData = editor;
editor.store((res) => (this.callBackAlert = true));
editor.on("storage:start:store", (objectToStore) => {
console.log(objectToStore);
});
Banner(editor);
// Resizing the components
editor.on("component:selected", function (args) {
args.set("resizable", true);
});

How to retrieve Image in Jade from Meteor FS Collection

I am working on a existing Meteor project. I have a Schema as shown below,
Activities.schema = new SimpleSchema({
title: {
type: String,
label: 'Title',
index: 1,
},
export const ActivitiesImages = new FS.Collection('activitiesImages', {
stores: [
new FS.Store.GridFS('homeActivitiesImages', { transformWrite: homeActivityImage }),
new FS.Store.GridFS('origActivitiesImages', {}),
],
filter: {
maxSize: 1024 * 1024 * 5,
allow: {
contentTypes: ['image/*'],
},
},
});
.........
)}
And I found Insert code as below
const insertObj = {
title,
description,
type: [type],
divisions: [],
clubType,
createdBy,
privateType,
};
if (image) {
insertObj.image = ActivitiesImages.insert(image);
}
Meteor.call('v1/insertActivity', insertObj, (error) => {
if (error) {
sAlert.error(error.message);
} else {
sAlert.success('Activity added');
$('.activity-modal').modal('hide');
}
});
Now My requirement is, I wanted to display the above stored image in the below Jade Template. I am finding difficulties in rendering the same.
MyProfile.tpl.jade (Jade Template)
each activity in fiveStarActivities
.slider__item
.ui.segment
.ui.vertical.segment
h3.ui.header.center.aligned {{activity.title}}
.ui.list
.item
img(
src="{{HERE I WANT TO DISPLAY IMAGE}}"
alt="image description"
).ui.fluid.rounded.image
.item
.ui.vertical.segment.big-card__btn-src
button.ui.mini.grey.basic.button {{activity.title}}
.item
p {{activity.description}}
I have tried the below but did not work.
MyProfile.js
activityImage(activity) {
return ActivitiesImages.findOne({ _id: activity.image._id });
},
Can someone assist me on how to display the image on Jade Template ?

I have resolved this by changing template as shown below.
MyProfile.tpl.jade
each activity in fiveStarActivities
.slider__item
.ui.segment
.ui.vertical.segment
h3.ui.header.center.aligned {{activity.title}}
.ui.list
if activityImage activity
with activityImage activity
.item
img(
src="{{this.url store='homeActivitiesImages'}}"
alt="image description"
).ui.fluid.rounded.image.medium
MyProfile.js
ActivitiesImages.findOne({ _id: activity.image._id });

Javascript/HTML - Inserting audio from object

I have an object here in a file called audio.js:
const audio = {
controls: true,
source: [
{
src: 'https://testname.com/Track03.mp3',
type: 'audio/mpeg'
},
{
src: 'https://testname.com/Track03.ogg',
type: 'audio/ogg'
}
]
};
I've included the audio.js file, but am completely lost on how to render these two audio players into my website, using a loop probably.
All I've managed to get done so far is this, which is evidently incomplete, and would like to expand on it if possible.
<div id="audio">
<script>
let audioo = document.createElement('audio');
</script>
</div>
Sorry, I'm new to all of this and can't find any reliable information. Any help would be appreciated.

Here is a way you can generate them dynamically by javascript; and you don't need to put this string inside <div id='audio'></div> to work, you can use it any where in your javascript.
const audio = {
controls: true,
source: [
{
src: 'https://testname.com/Track03.mp3',
type: 'audio/mpeg'
},
{
src: 'https://testname.com/Track03.ogg',
type: 'audio/ogg'
}
]
}
const theDiv = document.querySelector("#audio");
audio.source.forEach(as=>{
let newAudioElement = document.createElement('audio');
newAudioElement.src = as.src;
newAudioElement.type = as.type;
newAudioElement.controls = 'controls';
theDiv.appendChild(newAudioElement);
})
Here is a working example:
// replacing some working audio urls
const audio = {
controls: true,
source: [
{
src: 'https://www.w3schools.com/tags/horse.mp3',
type: 'audio/mp3'
},
{
src: 'https://www.w3schools.com/tags/horse.ogg',
type: 'audio/ogg'
}
]
}
const theDiv = document.querySelector("#audio");
audio.source.forEach(as=>{
let newAudioElement = document.createElement('audio');
newAudioElement.src = as.src;
newAudioElement.type = as.type;
newAudioElement.controls = 'controls';
theDiv.appendChild(newAudioElement);
})
<div id="audio"></div>

How to pass VueJS data to another script?

I'm converting an established site over to VueJS but hit a stumbling block on the best way to achieve this.
It's using D3-Funnel (https://github.com/jakezatecky/d3-funnel) to draw a funnel chart but how do I pass VueJS data variables to the charts constructor?
<script>
const data = [
{ label: 'Step 1', value: this.step1 },
{ label: 'Step 2', value: this.step2 },
.......
];
const options = {
block: {
dynamicHeight: true,
minHeight: 15,
},
};
const chart = new D3Funnel('#funnel');
chart.draw(data, options);
</script>
So I need to pass vue data variables into the values. My first thought is to move this into it's own function in the VueJS methods object and use the variables there using this.
Is there a better way of achieving this?
---------- Edit -------------
As per comments people wanted to see how I achieved this currently in vue. As already mentioned above I just created a function in the vue methods object and then call it.
methods : {
drawChart(){
const data = [
{ label: 'Step 1', value: 99999 },
{ label: 'Step 2', value: 9999 },
.......
];
const options = {
block: {
dynamicHeight: true,
minHeight: 15,
},
};
const chart = new D3Funnel('#funnel');
chart.draw(data, options);
}
},
mounted(){
this.drawChart();
}
Data is coming from an API and put into the vue data object.
data:{
step1: 0,
step2: 0,
....
},
methods:{
getData(){
axois.post......
response{
this.step1 = response.data.step1
this.step2 = response.data.step2
....
}
}
}

As I understand it you are trying to pass information down to a component and use it. If you are using single file components and webpack you can do something like this which is put together with examples listed on the vue website.
You can also take a look at this guys approach
App.vue
...
<my-d3-component :d3data="d3Data"></my-d3-component>
...
<script>
import d3Component from 'path/to/component'
var app = new Vue({
el: '#app',
data: {
d3Data: {}
},
components: {
'my-d3-component': d3Component
}
})
</script>
d3Component.vue
<template>
d3 html stuff goes here
</template>
<script>
export default {
props: ['d3Data'],
data() {
return {}
},
mounted: {
const options = {
block: {
dynamicHeight: true,
minHeight: 15,
},
};
const chart = new D3Funnel('#funnel');
chart.draw(this.d3Data, options);
}
}
</script>