From c0372671a9ecb36d9df70dcdb96caad79fa516b3 Mon Sep 17 00:00:00 2001 From: olafk Date: Wed, 3 Feb 2021 14:20:28 +0100 Subject: [PATCH 01/13] create folder for MainScreen view --- src/views/MainScreen.ts | 6 ------ src/views/MainScreen/MainScreen.scss | 0 src/views/{ => MainScreen}/MainScreen.test.ts | 0 src/views/MainScreen/MainScreen.ts | 5 +++++ 4 files changed, 5 insertions(+), 6 deletions(-) delete mode 100644 src/views/MainScreen.ts create mode 100644 src/views/MainScreen/MainScreen.scss rename src/views/{ => MainScreen}/MainScreen.test.ts (100%) create mode 100644 src/views/MainScreen/MainScreen.ts diff --git a/src/views/MainScreen.ts b/src/views/MainScreen.ts deleted file mode 100644 index 0f2a28f..0000000 --- a/src/views/MainScreen.ts +++ /dev/null @@ -1,6 +0,0 @@ -export const MainScreen = (): HTMLDivElement => { - const mainScreen = document.createElement('div') - mainScreen.innerText = 'test test test' - - return mainScreen -} diff --git a/src/views/MainScreen/MainScreen.scss b/src/views/MainScreen/MainScreen.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/views/MainScreen.test.ts b/src/views/MainScreen/MainScreen.test.ts similarity index 100% rename from src/views/MainScreen.test.ts rename to src/views/MainScreen/MainScreen.test.ts diff --git a/src/views/MainScreen/MainScreen.ts b/src/views/MainScreen/MainScreen.ts new file mode 100644 index 0000000..a757dda --- /dev/null +++ b/src/views/MainScreen/MainScreen.ts @@ -0,0 +1,5 @@ +export const MainScreen = (): HTMLDivElement => { + const mainScreen = document.createElement('div'); + + return mainScreen; +} From c92babdffa1647477ce697cf63ed3437e829a542 Mon Sep 17 00:00:00 2001 From: olafk Date: Wed, 3 Feb 2021 14:20:44 +0100 Subject: [PATCH 02/13] update import for MainScreen view --- src/components/Title/Title.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Title/Title.test.ts b/src/components/Title/Title.test.ts index bd24a8d..29c733d 100644 --- a/src/components/Title/Title.test.ts +++ b/src/components/Title/Title.test.ts @@ -3,7 +3,7 @@ import '@testing-library/jest-dom' import { getByTestId } from '@testing-library/dom' import { render } from '../../utils/domHandlers' -import { MainScreen } from '../../views/MainScreen' +import { MainScreen } from '../../views/MainScreen/MainScreen' import Title from './Title' describe('Test title component', () => { const AnimatedTitle: HTMLDivElement = Title('titleText', 'animatedTitle') From a602c56540cbcaee932b41ca1edceb0bbc042787 Mon Sep 17 00:00:00 2001 From: olafk Date: Fri, 5 Feb 2021 13:51:23 +0100 Subject: [PATCH 03/13] Update MainScreen.scss --- src/views/MainScreen/MainScreen.scss | 135 +++++++++++++++++++++++++++ 1 file changed, 135 insertions(+) diff --git a/src/views/MainScreen/MainScreen.scss b/src/views/MainScreen/MainScreen.scss index e69de29..245a036 100644 --- a/src/views/MainScreen/MainScreen.scss +++ b/src/views/MainScreen/MainScreen.scss @@ -0,0 +1,135 @@ +@-webkit-keyframes swing-bottom-fwd { + 0% { + -webkit-transform: rotateX(0); + transform: rotateX(0); + -webkit-transform-origin: bottom; + transform-origin: bottom; + } + 100% { + -webkit-transform: rotateX(-180deg); + transform: rotateX(-180deg); + -webkit-transform-origin: bottom; + transform-origin: bottom; + } +} + +@keyframes slide-bottom { + 100% { + -webkit-transform: translateY(10px); + transform: translateY(230px); + } +} +@keyframes show-up { + 0% { + transform: scale(0.8); + } + 100% { + opacity: 1; + } +} +.animated-logo { + animation: slide-bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + animation-delay: 1200ms; +} +.logo__wrapper { + position: absolute; + z-index: 0; + top: -100px; + left: 50%; + transform: translate(-50%, -50%); +} +.rules__wrapper { + margin: 20px auto; + height: 400px; + background: #fad586; + border-radius: 15px; + padding: 22px; + width: 83%; + font-family: Rubik; + opacity: 0; + animation: show-up 600ms ease-in-out 1500ms forwards; +} +@media (min-width: 1856px) { + .rules__wrapper { + margin: 145px auto; + } +} + +.rules__wrapper > label { + font-size: 30px; + font-weight: 400; + + font-style: normal; + font-weight: normal; + font-size: 24px; + line-height: 28px; +} +.rules__wrapper > p { + font-size: 22px; + margin: 10px 2px; +} +.main-screen__button { + font-size: 45px; +} +.main-screen_buttons-wrapper { + display: flex; + flex-direction: column; + margin: auto; + justify-content: center; + align-items: center; + width: 100%; + flex-wrap: nowrap; + gap: 30px; + + padding: 0 320px; + opacity: 0; + animation: show-up 600ms ease-in-out 1500ms forwards; + box-sizing: border-box; + text-align: center; +} +@media (min-width: 1856px) { + .main-screen_buttons-wrapper { + flex-direction: row; + justify-content: space-between; + } +} +.main-screen__rules-select { + background-color: $color-background-secondary; + font-family: Coiny; + font-size: 36px; + font-style: normal; + font-weight: 400; + width: 400px; + height: 100px; + border-radius: 15px; + + text-align: center; + + color: black; + display: flex; + text-align: center; +} +.righ-arrow-button, +.left-arrow-button { + background-color: transparent; + border: 0; + color: black; + box-shadow: none; + width: fit-content; + padding: 8px; +} + +.left-arrow-button::after { + content: '🡅'; +} +.righ-arrow-button::after { + content: '🡇'; +} +@media (min-width: 1856px) { + .left-arrow-button::after { + content: '🡄'; + } + .righ-arrow-button::after { + content: '🡆'; + } +} From 7004b458821a65038c6e59a8da4b4ed2edf24cb4 Mon Sep 17 00:00:00 2001 From: olafk Date: Mon, 8 Feb 2021 20:48:10 +0100 Subject: [PATCH 04/13] add mocks for media fiiles --- __mocks__/fileMock.js | 1 + package.json | 11 +++-------- 2 files changed, 4 insertions(+), 8 deletions(-) create mode 100644 __mocks__/fileMock.js diff --git a/__mocks__/fileMock.js b/__mocks__/fileMock.js new file mode 100644 index 0000000..86059f3 --- /dev/null +++ b/__mocks__/fileMock.js @@ -0,0 +1 @@ +module.exports = 'test-file-stub'; diff --git a/package.json b/package.json index be0ec47..a371bfb 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,9 @@ "json", "ts" ], + "moduleNameMapper": { + "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js" + }, "setupFiles": [ "./setupJest.ts" ], @@ -68,14 +71,6 @@ ], "transform": { "^.+\\.(t|j)s$": "ts-jest" - }, - "staticFiles": { - "staticPath": [ - { - "staticPath": "static", - "staticOutDir": "static" - } - ] } } } From 419711fac1ea4324ffa1a1f71cfbca2d0f7d798d Mon Sep 17 00:00:00 2001 From: olafk Date: Tue, 16 Feb 2021 16:52:05 +0100 Subject: [PATCH 05/13] add logo img --- src/assets/img/swiat.png | Bin 0 -> 14487 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/assets/img/swiat.png diff --git a/src/assets/img/swiat.png b/src/assets/img/swiat.png new file mode 100644 index 0000000000000000000000000000000000000000..a71787055c8882cf30460ead583e4347a47f476a GIT binary patch literal 14487 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 Date: Tue, 16 Feb 2021 16:52:21 +0100 Subject: [PATCH 06/13] Create RulesSelect component --- src/components/rulesSelect/RulesSelect.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/components/rulesSelect/RulesSelect.ts diff --git a/src/components/rulesSelect/RulesSelect.ts b/src/components/rulesSelect/RulesSelect.ts new file mode 100644 index 0000000..badbc7e --- /dev/null +++ b/src/components/rulesSelect/RulesSelect.ts @@ -0,0 +1,13 @@ +import { Button } from '../button/Button'; +import { ContainerComponent } from '../containerComponent/ContainerComponent'; + +const RulesSelect = (handleRulesChange: any) => { + const rulesSelect: HTMLDivElement = document.createElement('div'); + + rulesSelect.className = 'rules-select'; + rulesSelect.appendChild(Button('', () => handleRulesChange('Prawda/Fałsz'), 'left-arrow-button')); + rulesSelect.appendChild(ContainerComponent('Wybierz tryb')); + rulesSelect.appendChild(Button('', () => handleRulesChange('Wskaż na mapie'), 'righ-arrow-button')); + return rulesSelect; +}; +export default RulesSelect; From cbb2370aac6c62d224d8c83a58a104933a0b2213 Mon Sep 17 00:00:00 2001 From: olafk Date: Tue, 16 Feb 2021 16:52:39 +0100 Subject: [PATCH 07/13] add styles for RulesSelect component --- src/components/rulesSelect/RulesSelect.scss | 40 +++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 src/components/rulesSelect/RulesSelect.scss diff --git a/src/components/rulesSelect/RulesSelect.scss b/src/components/rulesSelect/RulesSelect.scss new file mode 100644 index 0000000..f70c668 --- /dev/null +++ b/src/components/rulesSelect/RulesSelect.scss @@ -0,0 +1,40 @@ +.rules-select { + background-color: $color-background-secondary; + font-family: Coiny; + font-size: 36px; + font-style: normal; + font-weight: 400; + width: 400px; + height: 100px; + border-radius: 15px; + + text-align: center; + + color: black; + display: flex; + text-align: center; +} +.righ-arrow-button, +.left-arrow-button { + background-color: transparent; + border: 0; + color: black; + box-shadow: none; + width: fit-content; + padding: 8px; +} + +.left-arrow-button::after { + content: '🡅'; +} +.righ-arrow-button::after { + content: '🡇'; +} +@media (min-width: 1856px) { + .left-arrow-button::after { + content: '🡄'; + } + .righ-arrow-button::after { + content: '🡆'; + } +} From a2cc87389f94de8e65c800aa22e7d58cc0b9d9bc Mon Sep 17 00:00:00 2001 From: olafk Date: Tue, 16 Feb 2021 16:53:11 +0100 Subject: [PATCH 08/13] Create MainScreen view --- src/views/MainScreen/MainScreen.ts | 38 ++++++++++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/src/views/MainScreen/MainScreen.ts b/src/views/MainScreen/MainScreen.ts index a757dda..a27ac00 100644 --- a/src/views/MainScreen/MainScreen.ts +++ b/src/views/MainScreen/MainScreen.ts @@ -1,5 +1,39 @@ -export const MainScreen = (): HTMLDivElement => { +import Title from '../../components/Title/Title'; + +import logo from '../../assets/img/swiat.png'; +import { Button } from '../../components/button/Button'; +import RulesSelect from '../../components/rulesSelect/RulesSelect'; +export const MainScreen = (startGame: VoidFunction): HTMLDivElement => { const mainScreen = document.createElement('div'); + mainScreen.appendChild(Title('GeoMind', 'animatedTitle')); + mainScreen.setAttribute('data-testid', 'mainScreenTestId'); + const animatedLogoWrapper: HTMLDivElement = document.createElement('div'); + animatedLogoWrapper.className = 'logo__wrapper'; + const animatedLogo: HTMLImageElement = document.createElement('img'); + animatedLogo.src = logo; + animatedLogo.className = 'animated-logo'; + animatedLogoWrapper.appendChild(animatedLogo); + mainScreen.appendChild(animatedLogoWrapper); + const textWrapperTemplate = ` + +

GeoMind

+ +

Po naciśnięciu na odpowiednią strzałkę zobaczysz zasady dla wybranego trybu gry

`; + const textWrapper: HTMLDivElement = document.createElement('div'); + textWrapper.className = 'rules__wrapper'; + textWrapper.innerHTML = textWrapperTemplate; + + mainScreen.appendChild(textWrapper); + const buttonsWrapper: HTMLDivElement = document.createElement('div'); + buttonsWrapper.className = 'main-screen_buttons-wrapper'; + const handleRulesChange = (rules: string) => { + textWrapper.children[3].textContent = rules; + }; + mainScreen.appendChild(buttonsWrapper); + buttonsWrapper.appendChild(Button('Prawda/Fałsz', () => startGame(), 'main-screen__button')); + + buttonsWrapper.appendChild(RulesSelect(handleRulesChange)); + buttonsWrapper.appendChild(Button('Wskaż na mapie', () => startGame(), 'main-screen__button')); return mainScreen; -} +}; From 9d636d2f1ac14c950c116313337f1599855f1ebb Mon Sep 17 00:00:00 2001 From: olafk Date: Tue, 16 Feb 2021 16:53:50 +0100 Subject: [PATCH 09/13] update main screen styles --- src/views/MainScreen/MainScreen.scss | 51 +++++++--------------------- 1 file changed, 12 insertions(+), 39 deletions(-) diff --git a/src/views/MainScreen/MainScreen.scss b/src/views/MainScreen/MainScreen.scss index 245a036..702d452 100644 --- a/src/views/MainScreen/MainScreen.scss +++ b/src/views/MainScreen/MainScreen.scss @@ -43,15 +43,19 @@ height: 400px; background: #fad586; border-radius: 15px; - padding: 22px; + padding: 50px; width: 83%; font-family: Rubik; opacity: 0; animation: show-up 600ms ease-in-out 1500ms forwards; + display: flex; + flex-direction: column; + justify-content: space-between; } @media (min-width: 1856px) { .rules__wrapper { margin: 145px auto; + border-bottom: 0.1px solid white; } } @@ -60,7 +64,7 @@ font-weight: 400; font-style: normal; - font-weight: normal; + font-weight: bold; font-size: 24px; line-height: 28px; } @@ -93,43 +97,12 @@ justify-content: space-between; } } -.main-screen__rules-select { - background-color: $color-background-secondary; - font-family: Coiny; - font-size: 36px; - font-style: normal; - font-weight: 400; - width: 400px; - height: 100px; - border-radius: 15px; - - text-align: center; - - color: black; - display: flex; - text-align: center; -} -.righ-arrow-button, -.left-arrow-button { - background-color: transparent; - border: 0; - color: black; - box-shadow: none; - width: fit-content; - padding: 8px; +.main-screen_buttons-wrapper > button:hover { + box-shadow: 1px 1px 1px 1px black; } -.left-arrow-button::after { - content: '🡅'; -} -.righ-arrow-button::after { - content: '🡇'; -} -@media (min-width: 1856px) { - .left-arrow-button::after { - content: '🡄'; - } - .righ-arrow-button::after { - content: '🡆'; - } +.break-line { + height: 5px; + width: 100%; + background-color: rgba($color: #ffffff, $alpha: 0.6); } From ce5113b07d336267c232c9004ad7945aa6595fa7 Mon Sep 17 00:00:00 2001 From: olafk Date: Tue, 16 Feb 2021 16:54:09 +0100 Subject: [PATCH 10/13] Update Title component styles --- src/components/Title/Title.scss | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/Title/Title.scss b/src/components/Title/Title.scss index 6cfe3ad..18cc954 100644 --- a/src/components/Title/Title.scss +++ b/src/components/Title/Title.scss @@ -8,7 +8,7 @@ transform: translate(0); } 100% { - transform: translate(0); + transform: translate(0, 70px); } } @@ -16,16 +16,24 @@ font-size: 125px; text-align: center; position: relative; - color: $color-font-secondary; - font-family: 'Rubik'; + color: $color-font-primary; + text-shadow: 2px 2px 4px #000000; + font-family: Coiny; + font-size: 96px; + font-style: normal; + font-weight: 400; + line-height: 106px; + letter-spacing: 0em; + text-align: center; } .title > span { position: relative; display: inline-block; + z-index: 10; animation-duration: 1.2s; animation-timing-function: ease-in-out; - transform: translate(-1500px, 300px); + transform: translate(-1900px, 300px); animation-fill-mode: forwards; From 6c68cba245ee853347f7d1155247f041e4749898 Mon Sep 17 00:00:00 2001 From: olafk Date: Tue, 16 Feb 2021 16:54:34 +0100 Subject: [PATCH 11/13] add imports for components --- src/styles/styles.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 34d9c8d..70e752e 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -2,11 +2,11 @@ @import 'app'; @import 'normalize'; @import 'variables'; -@import "reset"; - +@import 'reset'; // Components @import '../components/button/Button'; - +@import '../views/MainScreen/MainScreen'; @import '../components/Title/Title.scss'; @import 'src/components/containerComponent/ContainerComponent'; +@import '../components/rulesSelect/RulesSelect'; From 6f56ba0df913896734eca2d1a17986dc9a575129 Mon Sep 17 00:00:00 2001 From: olafk Date: Tue, 16 Feb 2021 16:59:53 +0100 Subject: [PATCH 12/13] Update Title.test.ts --- src/components/Title/Title.test.ts | 55 +++++++++++++++--------------- 1 file changed, 28 insertions(+), 27 deletions(-) diff --git a/src/components/Title/Title.test.ts b/src/components/Title/Title.test.ts index 29c733d..b9fa314 100644 --- a/src/components/Title/Title.test.ts +++ b/src/components/Title/Title.test.ts @@ -1,37 +1,38 @@ /* eslint-disable */ -import '@testing-library/jest-dom' -import { getByTestId } from '@testing-library/dom' -import { render } from '../../utils/domHandlers' -import { MainScreen } from '../../views/MainScreen/MainScreen' -import Title from './Title' +import '@testing-library/jest-dom'; +import { getByTestId } from '@testing-library/dom'; +import { render } from '../../utils/domHandlers'; +import { MainScreen } from '../../views/MainScreen/MainScreen'; +import Title from './Title'; describe('Test title component', () => { - const AnimatedTitle: HTMLDivElement = Title('titleText', 'animatedTitle') + const AnimatedTitle: HTMLDivElement = Title('titleText', 'animatedTitleTest'); beforeAll(() => { document.body.innerHTML = `
- ` - const appComponent: HTMLElement = document.getElementById('geo-app')! - const mainScreen: HTMLElement = render(MainScreen(), appComponent) - render(AnimatedTitle, mainScreen) - }) + `; + const appComponent: HTMLElement = document.getElementById('geo-app')!; + const mainScreen: HTMLElement = render( + MainScreen(() => {}), + appComponent + ); + render(AnimatedTitle, mainScreen); + }); it('should render properly', () => { - expect( - getByTestId(document.documentElement, 'animatedTitle') - ).toBeInTheDocument() - }) + expect(getByTestId(document.documentElement, 'animatedTitleTest')).toBeInTheDocument(); + }); it('should render every single letter in diffrent span', () => { 'titleText'.split('').map((letter, index) => { - expect(AnimatedTitle.children[index].tagName).toBe('SPAN') - expect(AnimatedTitle.children[index].textContent).toBe(letter) - }) - }) + expect(AnimatedTitle.children[index].tagName).toBe('SPAN'); + expect(AnimatedTitle.children[index].textContent).toBe(letter); + }); + }); it("should have default class 'title' and custom id ", () => { - expect(AnimatedTitle.className).toBe('title') - expect(AnimatedTitle.id).toBe('animatedTitle') - }) + expect(AnimatedTitle.className).toBe('title'); + expect(AnimatedTitle.id).toBe('animatedTitleTest'); + }); it('should have custom class and custom id', () => { - const AnimatedTitleCustomClass = Title('titleText', 'id1', 'titleClass') - expect(AnimatedTitleCustomClass.className).toBe('titleClass') - expect(AnimatedTitleCustomClass.id).toBe('id1') - }) -}) + const AnimatedTitleCustomClass = Title('titleText', 'id1', 'titleClass'); + expect(AnimatedTitleCustomClass.className).toBe('titleClass'); + expect(AnimatedTitleCustomClass.id).toBe('id1'); + }); +}); From e0b8998911eca49a634cd8025d13741459acc2a3 Mon Sep 17 00:00:00 2001 From: olafk Date: Tue, 16 Feb 2021 17:02:19 +0100 Subject: [PATCH 13/13] Update Title.test.ts --- src/components/Title/Title.test.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/Title/Title.test.ts b/src/components/Title/Title.test.ts index b9fa314..c6ed909 100644 --- a/src/components/Title/Title.test.ts +++ b/src/components/Title/Title.test.ts @@ -11,11 +11,8 @@ describe('Test title component', () => { document.body.innerHTML = `
`; const appComponent: HTMLElement = document.getElementById('geo-app')!; - const mainScreen: HTMLElement = render( - MainScreen(() => {}), - appComponent - ); - render(AnimatedTitle, mainScreen); + + render(AnimatedTitle, appComponent); }); it('should render properly', () => { expect(getByTestId(document.documentElement, 'animatedTitleTest')).toBeInTheDocument();