UI komponent menu głowne

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

package.json

@@ -62,6 +62,9 @@
       "json",
       "ts"
     ],
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
+    },
     "setupFiles": [
       "./setupJest.ts"
     ],
@@ -72,14 +75,6 @@
     ],
     "transform": {
       "^.+\\.(t|j)s$": "ts-jest"
-    },
-    "staticFiles": {
-      "staticPath": [
-        {
-          "staticPath": "static",
-          "staticOutDir": "static"
-        }
-      ]
     }
   }
 }

src/components/Title/Title.scss

@@ -8,24 +8,32 @@
     transform: translate(0);
   }
   100% {
-    transform: translate(0);
+    transform: translate(0, 70px);
   }
 }
 
 .title {
   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;
 

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: '🡆';
+  }
+}

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;

src/styles/styles.scss

@@ -6,10 +6,12 @@
 
 // Components
 @import '../components/button/Button';
+@import '../components/rulesSelect/RulesSelect';
 @import '../components/Title/Title';
-@import 'src/components/containerComponent/ContainerComponent';
+@import '../components/containerComponent/ContainerComponent';
 @import '../components/startWindow/StartWindow';
 
 // Views
 @import '../views/MapGameScreen/MapGameScreen';
 @import '../components/endWindow/endWindow.scss';
+@import '../views/MainScreen/MainScreen';

src/views/MainScreen/MainScreen.scss

@@ -0,0 +1,108 @@
+@-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: 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;
+  }
+}
+
+.rules__wrapper > label {
+  font-size: 30px;
+  font-weight: 400;
+
+  font-style: normal;
+  font-weight: bold;
+  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_buttons-wrapper > button:hover {
+  box-shadow: 1px 1px 1px 1px black;
+}
+
+.break-line {
+  height: 5px;
+  width: 100%;
+  background-color: rgba($color: #ffffff, $alpha: 0.6);
+}

src/views/MainScreen/MainScreen.ts

@@ -0,0 +1,39 @@
+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 = `
+    <label>O aplikacji: </label>
+    <p>GeoMind</p>
+    <label>Zasady Gry: </label>
+    <p>Po naciśnięciu na odpowiednią strzałkę zobaczysz zasady dla wybranego trybu gry</p>`;
+  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;
+};