komponent kafel trybu gry #21
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| type ContainerComponentLabel = HTMLElement | string | ||
|
|
||
| export const gameMode = ( | ||
| label: ContainerComponentLabel, | ||
| onClick: () => void, | ||
| parentId?: string, | ||
| className?: string | ||
| ): HTMLElement => { | ||
| const component: HTMLElement = document.createElement('button')! | ||
|
Collaborator
There was a problem hiding this comment. Myślę że div byłby lepszym wyborem, z tego względu że po kliknięciu nie będzie "odciśnięty" oraz jest blokowy. |
||
|
|
||
| label = HTMLElement | ||
| ? (component.innerHTML = `${label}`) | ||
|
Collaborator
There was a problem hiding this comment. Metoda appendChild będzie tutaj chyba bardziej wydajna. |
||
| : /(jpg|gif|png|JPG|GIF|PNG|JPEG|jpeg)$/.test(`${label}`) | ||
|
Collaborator
There was a problem hiding this comment. Sprawdzenie czy string jest obrazkiem zrobiłam już w moim komponencie. Przeniosę tę funkcję gdzieś indziej żebyśmy obie mogły z niej korzystać. |
||
| ? (component.style.backgroundImage = `url(${label})`) | ||
|
Collaborator
There was a problem hiding this comment. Wydaje mi się że podwójna ternary operation nie jest zbyt dobrze czytelna. |
||
| : (component.innerText = `${label}`) | ||
|
|
||
| component.addEventListener('click', onClick) | ||
|
|
||
| const parentEl = document.getElementById(`${parentId}`) | ||
| component.classList.add(`${className}`) | ||
|
Collaborator
There was a problem hiding this comment. Parametry parentId oraz className masz zaznaczone jako niewymagane parametry, więc najlepiej byłoby najpierw sprawdzić czy taka zmienna istnieje zanim ją wywołasz.. w każdym razie na pewno dla className, bo nie jest przypisana do osobnej zmiennej. |
||
|
|
||
| return parentEl ? parentEl.appendChild(component) : component | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Proponuję odwrócić kolejność: className a następnie parentId. Najprawdopodobniej częściej będzie używana klasa bez podania odnośnika rodzica więc będzie można podać wówczas mniej parametrów przy wywołaniu komponentu.