Davidobot / love.js

LÖVE ported to the web using Emscripten, updated to the latest Emscripten and LÖVE (v11.5)
MIT License
605 stars 27 forks source link

Query Strings (URL Parameters) #89

Open ChicknTurtle opened 5 months ago

ChicknTurtle commented 5 months ago

Would be nice to have the ability to get/set the url parameters.

Example: mygame.com?seed=12345 love.system.getParam('seed') -> '12345' love.system.setParam('seed') -> '54321'

https://en.wikipedia.org/wiki/Query_string https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

alexjgriffith commented 5 months ago

I'm not sure if expanding the core functionality of any of the love modules is in scope for this project.

If you'd like to roll your own extensions, the love.js-api-player lets you interop with the javascript environment. Check out #26.

Below is an example of how you could go about getting parameters from your URL into love2d.

Once you have the js-api-player setup, add the following to your love2d project.

function getParam (param)
  local return_value = {}

  function getSeedOnDataLoadCallback (data)
    -- JS doesn't let us access the return value directly.
    -- To work around this we return a table, and then update
    -- that table when the return value is ready.
    -- Alternatively, you could use a global value.
    return_value[1] = data
  end

  JS.newRequest('getParam(\'' .. param .. '\'), getSeedOnDataLoadCallback)

  return return_value
end

Add the following to index.html.

function getParam (param) {
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  const product = urlParams.get(param);
  return product;
}

To check if data has been returned from the javascript environment use JS.retrieveData. Note, this will not return the data directly, but will call your callback function once the data is ready.

If you want this to run synchronously to avoid headaches make sure you add the following to the top of update. This will skip the update if the data is not ready.

function love.update (dt)
  -- retrieveData will run our onDataCallback when the data
  -- is ready.
  if(JS.retrieveData(dt)) then
      return
  end
  ...
end

If you want to get data from the javascript environment during the love.load stage, for example if you want to generate a map before the game begins, you can try the following.

function love.load ()
  local seedTable = getParams('seed') -- seed = {}
  while (not(JS.retrieveData(0.001))
  do
  -- so we don't hog the core
  if love.timer then love.timer.sleep(0.001) end
  end
  -- seed = {'your-param'}
  local seed = seedTable[1] 
  ...
end

For a more thorough breakdown, and to see how to set up the environment, check out the API-player repo https://github.com/MrcSnm/Love.js-Api-Player