Feature request: project parameters and detect device/user agent
-
JaecadeJnight ππ²ππ ππΌπΏππΊ ππ²πΉπ½π²πΏ last edited by jeffreyrb03-gmail
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=mediumThe 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
-
ββ§βΎαͺααα©β½β§β ππ²ππ ππΌπΏππΊ ππ²πΉπ½π²πΏ last edited by
@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 -
@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.
-
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.
-
@info-creaticode Yes, thatβs perfect! So the URL parameter feature suggestion is already a feature?
-
No, we can add it like that. It will take a while on the queue.
-
@info-creaticode Oh ok. Iβm excited for when these get added!
-
ββ§βΎαͺααα©β½β§β ππ²ππ ππΌπΏππΊ ππ²πΉπ½π²πΏ last edited by
@jeffreyrb03-gmail
same!! -
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. -
ββ§βΎαͺααα©β½β§β ππ²ππ ππΌπΏππΊ ππ²πΉπ½π²πΏ last edited by
@jeffreyrb03-gmail
That could work! -
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β.
-
@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.
-
@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 ππ²ππ ππΌπΏππΊ ππ²πΉπ½π²πΏ last edited by jeffreyrb03-gmail
@jeffreyrb03-gmail Iβm so happy
these work as expected -
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.