-
Couldn't load subscription status.
- Fork 2
komponent kafel trybu gry #21
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
update git-ignore; normalize styles; add assets; create Container-Component
create first test of component
small changes of component
…ny_komponent_#4 # Conflicts: # src/styles/styles.scss
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.
Kilka uwag do kodu.
src/components/gameMode/GameMode.ts
Outdated
| parentId?: string, | ||
| className?: string | ||
| ): HTMLElement => { | ||
| const component: HTMLElement = document.createElement('button')! |
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.
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.
src/components/gameMode/GameMode.ts
Outdated
| const component: HTMLElement = document.createElement('button')! | ||
|
|
||
| label = HTMLElement | ||
| ? (component.innerHTML = `${label}`) |
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.
Metoda appendChild będzie tutaj chyba bardziej wydajna.
src/components/gameMode/GameMode.ts
Outdated
| label = HTMLElement | ||
| ? (component.innerHTML = `${label}`) | ||
| : /(jpg|gif|png|JPG|GIF|PNG|JPEG|jpeg)$/.test(`${label}`) | ||
| ? (component.style.backgroundImage = `url(${label})`) |
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.
Wydaje mi się że podwójna ternary operation nie jest zbyt dobrze czytelna.
src/components/gameMode/GameMode.ts
Outdated
|
|
||
| label = HTMLElement | ||
| ? (component.innerHTML = `${label}`) | ||
| : /(jpg|gif|png|JPG|GIF|PNG|JPEG|jpeg)$/.test(`${label}`) |
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.
Sprawdzenie czy string jest obrazkiem zrobiłam już w moim komponencie. Przeniosę tę funkcję gdzieś indziej żebyśmy obie mogły z niej korzystać.
src/components/gameMode/GameMode.ts
Outdated
| component.addEventListener('click', onClick) | ||
|
|
||
| const parentEl = document.getElementById(`${parentId}`) | ||
| component.classList.add(`${className}`) |
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.
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.
src/components/gameMode/GameMode.ts
Outdated
| label: ContainerComponentLabel, | ||
| onClick: () => void, | ||
| parentId?: string, | ||
| className?: string |
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.
…t_#4' into UI-Komponent-Kafel-trybu-gry
…t styles added and imported to overal styles
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.
Tylko jedna uwaga :)
| @@ -0,0 +1,35 @@ | |||
| .game-mode_container { | |||
| box-sizing: border-box; | |||
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.
Tego nie musisz pisać, bo to jest w resecie Mirona dla wszystkich elementów.
No description provided.