Feature request: project parameters and detect device/user agent

JaecadeJnight

You load projects the normal way by usually just going to its link and playing it, but there is no way at the moment to load a project but with a piece of data already in it. I am referring to a project parameter. So for example, project parameters would be useful for me because I’m planning to make a Roblox like game hooked up to my website. So I would embed the game on my site, and each game would have it’s individual page, but is using the same embedded project. The problem is I can’t send data from the site to the project like this, so I would need something like a project parameter.
A project parameter(s) would work like this:
You load the Creaticode project, whether it be in the browser normally or an embed or whatever, but it has any URL queries you choose to add to it. For example:
play.creaticode.com /projects/6570ccebe4155925c3e77843?game=basketball&difficulty=medium

The project can then use these URL queries (game=basketball&difficulty=medium) to customize whatever needs to be customized beforehand and then offer the project experience.
For my case I would be using /projects/project-code?gameid=35682 or something like that. This would find a game with that ID, and connect you to any non-full cloud/multiplayer server playing that game.

Project parameters would be really useful for people integrating their CreatiCode project with a website or HTML code, and would also be useful for when you want to load a project using the load project widget block but need to send info beforehand.
____________________________
A feature to detect the device of the user playing your project would also be wonderful, especially to make making mobile friendly projects easier.
Some new variables that could be added are:

user agent: returns your javascript user agent browser header
device: either console, PC, other, or mobile (isnt a javascript thing)
platform: returns your exact device (javascript navigator.platform) for example, iPad

Cαƚƚყ

@jeffreyrb03-gmail
Agreed. I want to make a way to detect mobile devices but I have zero clue how. We need this, but they may set it to one of their lower-priorities like Dark Mode

JaecadeJnight

@106809nes exactlyy lol. Usually when doing web coding you can figure out if a user agent is mobile or not, but it would make it easier if they just made the “device” variable for us.

CreatiCode

@jeffreyrb03-gmail

Thanks for the suggestions.

One way to implement the URL parameters is like this: if the URL contains “gameid=35”, and the project already contains a variable named “gameid”, then we will set its value to 35 upon loading. This will work for your use case, right?

For device properties, we can add these predefined variables.

JaecadeJnight

@info-creaticode Yes, that’s perfect! So the URL parameter feature suggestion is already a feature?

CreatiCode

@jeffreyrb03-gmail

No, we can add it like that. It will take a while on the queue.

JaecadeJnight

@info-creaticode Oh ok. I’m excited for when these get added!

Cαƚƚყ

@jeffreyrb03-gmail
same!!

JaecadeJnight

@info-creaticode

I just thought of a way better, easier, and more succinct way to implement this that would take like a day at most.

So you just need to make a new sensing block called [read URL parameter (input)]. I made a mockup of it below with scratchblocks:

What this does is just read the current URL, and only uses what’s after the ? symbol. Then, it looks for the parameter (in this case, gameid), and returns it’s value.

This is very easy to do in JavaScript. I don’t know how you guys add blocks to CreatiCode, it probably may be different to writing Turbowarp extensions (which I haven’t done since like 2023), but here is some sort of example JavaScript code, which I am certain the inside of the function will at least be useful:

function readURLParameter(urlparameter) {
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get(urlparameter.toString());
return myParam;
}

For this Javascript example, just note that I have no idea how your systems work on the inside, but I am just guessing. So, basically the function is just the block with the input. This takes the search parameters (? and everything after that) and then returns an individual one.
Then, used like this:

readURLParameter("gameid");

from this:

And then it’d return whatever is put there, like you said in your example, ?gameid=35

We don’t need to make a variable that will be set to a URL parameter upon loading or whatever, we could just read them anytime and it is easier to understand and use.

Also you may wonder why this is even important at all, but think about it.
Google uses URL parameters:
https://google.com/search?q=CreatiCode
Many other websites do too, like even Creaticode.
And this is also useful for me because I am doing a lot of stuff to connect a CreatiCode project and my website, and this makes that stuff almost 1000x easier.

Cαƚƚყ

@jeffreyrb03-gmail
That could work!

CreatiCode

@jeffreyrb03-gmail

Since you did all the work to spec this out, we have made a patch to add it. You can reload the playground and try it now. The new block is at the bottom of the Sensing category.

Besides reading any parameter in the URL, you can also use 3 special keywords of “user agent”, “device” and “platform”.

JaecadeJnight

@info-creaticode OH MY GOD THANK YOU!!! IM SO HAPPY!!! I’m going to use this, I am really happy that it was added in just today. Those keywords are also pretty useful, but it could interfere with an actual parameter named device or platform, so let’s just hope nobody coincidentally uses those lol. Thank you so much, I’m really happy that I can use this now.

JaecadeJnight

@jeffreyrb03-gmail Also, I just tried read URL parameters (device) and it gave me “other” even though I’m using a ChromeOS laptop right now (should be “PC”)

JaecadeJnight

@jeffreyrb03-gmail I’m so happy

these work as expected

CreatiCode

@jeffreyrb03-gmail

If the URL contains any of the 3 keywords like “device”, it will take priority over the actual device info.

We’ll check why it mapped ChromeOS to other.