add a simple language switch

[TechHoruser]

Wow, @frudolph77, we're working on the same pull request to add other languages! 😆 Check it out here: https://github.com/zyle87/turing-machine-interactive-sheet/pull/33

I really appreciate your component for the selector, but I believe saving the language in the settings is a good idea. What are your thoughts?

Apologies for submitting a duplicate pull request; I began working on it 1.5 hours earlier when this PR didn't exist.

[frudolph77]

@TechHoruser I have been working on the language switch for a fork of this repo earlier this week. I used a different key to store the language just on personal preference.

But your approach has the benefit that it is possible to switch the language anytime you want during playing, haven't managed this on my trials. I've hacked together a new switch, just a prototype on stackblitz, based on @mui/base/Select. I'll need to strip down the sample code from MUI. The language switch will go where you placed it. I currently hide it after selection, due to limited space on tablet screens.

You will see the <TranslateIcon/> when the drop down is closed and no language is selected, when you select one you will only see the flag. The flags will be taken from https://flagcdn.com/.

It was my initial intend to display flags and the language, but this wont work with plain html <select>...

@zyle87 Please do not merge for the moment, i'll rework the PR this evening.

[TechHoruser]

Perfect, @frudolph77.

If I can support you in anything, feel free to ask me. 😄

I am closing my pull request (PR) (#33) in favor of this one.

[frudolph77]

That's the final solution, just decided to use an other source for the flag icons. On flagcdn the flags have all slightly different sizes and they just don't look good in the menu and I thought round icons will be more pleasing.

@TechHoruser Please check if there is room for improvements. I'm no JavaScript/React developer, I can handle them but I've only basic knowledge. The idea for this drop down is taken form https://mui.com/base-ui/react-select/#customization

Update ~10:00: There are two minor issues:

• the component name and filename differ-
• the css for the <Listbox> needs to be adjusted for Firefox under Windows. I'm awaiting feedback and will update the PR later on.

Update: 11:20 PR is updated