Playground page design

[jojojojojoj5564656465465]

Hey there,

Could you enhance the playground usability? Here are a few suggestions:

• Add an event listener to trigger the play button without requiring a mouse click.
• Clear the terminal each time the run button is pressed.
• Implement CSS Grid for a side-by-side layout of the editor and terminal using grid-template-columns: 2fr 1fr.

Thanks!”

[fabian-hiller]

Hey, thanks for your feedback!

What kind of event listener would you use? At what point should it automatically trigger execution? Maybe a shortcut would be better than an event listener.

Why would you automatically clear the output console? If we did, the user would have no control over it. Maybe a shortcut or an option to configure it would be better then taking control away from the user.

The editor and output console are already displayed side by side. Only on smaller devices like smartphones we use a different layout. Can you provide more details?

[jojojojojoj5564656465465]

function handleCtrlEnter(event) {
  if (event.ctrlKey && event.key === 'Enter') {
    document.getElementById('action').click();
  }
}

document.addEventListener('keydown', handleCtrlEnter);

CTRL + ENTER => RUn the terminal

[jojojojojoj5564656465465]

  useOnWindow(
    'keydown',
    $((event) => {
      if (event.ctrlKey && event.key === 'Enter') {
        runPlayer()
      }
    })
  );```

[fabian-hiller]

I think CTRL + ENTER or CMD + ENTER is a great idea. We could also add CTRL + BACKSPACE or CMD + BACKSPACE to clear the console. What do you think?

[fabian-hiller]

This works now! Thank you for your feedback!

[jojojojojoj5564656465465]

I can't read the error i always need to scroll right

[jojojojojoj5564656465465]

if you can on pc use css grid with 2fr 1fr

[fabian-hiller]

We can make it bigger, but we need a limit. Otherwise it becomes unusable for ultra wide screens.

[jojojojojoj5564656465465]

max-width:2000px

[fabian-hiller]

Thank you very much! As soon as I have more time, I will improve the playground based on your feedback.

[fabian-hiller]

I have slightly increased the width of the output terminal on large screens. I will evaluate if we should increase it further in the long run.