Is it possible to customise the keyboard layout

[EmpAhmadK]

Is it possible to arrange the keyboard layout in a customised way so that it doesn't just align itself based on the amount of letters, but rather according to a custom format?

I currently have mine (view) complete with my desired orthography, but I would like to make the arrangement as similar to the Arabic keyboard as possible.

Currently it looks like this

If possible, I would like to have it arranged to something like this

I tried to use a different type of module but it caused quite a lot of errors and so I've reverted it back for now; but from what I could see, I wasn't able to find a way to split it at my desired areas.

Thanks.

[roedoejet]

Hi @EmpAhmadK - yes, so the code for that is here: https://github.com/roedoejet/AnyLanguage-Wordle/blob/main/src/components/keyboard/Keyboard.tsx currently, it splits your keyboard so that the first row are the first 40% of your characters, the second row is 40%-70% and then the third row is what remains. You can change the numbers or number of rows. so for example here is 4 equal rows:

return (
    <div>
      <div className="flex justify-center mb-1">
        {ORTHOGRAPHY.slice(0, Math.floor(ORTHOGRAPHY.length * 0.25)).map(
          (char) => (
            <Key
              key={char}
              value={char}
              onClick={onClick}
              status={charStatuses[char]}
            />
          )
        )}
      </div>
      <div className="flex justify-center mb-1">
        {ORTHOGRAPHY.slice(
          Math.floor(ORTHOGRAPHY.length * 0.25),
          Math.floor(ORTHOGRAPHY.length * 0.5)
        ).map((char) => (
          <Key
            key={char}
            value={char}
            onClick={onClick}
            status={charStatuses[char]}
          />
        ))}
      </div>
      <div className="flex justify-center mb-1">
        {ORTHOGRAPHY.slice(
          Math.floor(ORTHOGRAPHY.length * 0.5),
          Math.floor(ORTHOGRAPHY.length * 0.75)
        ).map((char) => (
          <Key
            key={char}
            value={char}
            onClick={onClick}
            status={charStatuses[char]}
          />
        ))}
      </div>
      <div className="flex justify-center">
        <Key key="enterKey" width={65.4} value="ENTER" onClick={onClick}>
          {t('enterKey')}
        </Key>
        {ORTHOGRAPHY.slice(
          Math.floor(ORTHOGRAPHY.length * 0.75),
          ORTHOGRAPHY.length
        ).map((char) => (
          <Key
            key={char}
            value={char}
            onClick={onClick}
            status={charStatuses[char]}
          />
        ))}
        <Key key="deleteKey" width={65.4} value="DELETE" onClick={onClick}>
          {t('deleteKey')}
        </Key>
      </div>
    </div>
  )

you might have to play around with the numbers a bit to get the delete key and enter key to fit, so maybe the last one is slightly less than 25%. Also, you might want to remove the width={65.4} attribute from the enter and delete keys. I'll close this, but feel free to post again if you have problems.