komponent kafel trybu gry

.gitignore

@@ -104,5 +104,7 @@ dist
 # TernJS port file
 .tern-port
 
+
 # Webstorm
+
 .idea

.prettierrc.js

@@ -5,5 +5,7 @@ module.exports = {
     singleQuote: true,
     bracketSpacing: true,
     arrowParens: 'avoid',
-    printWidth: 120
+
+    printWidth: 120,
+
 };

src/components/gameMode/GameMode.ts

@@ -0,0 +1,29 @@
+import { handleStringScenario } from '../../utils/functions';
+type ContainerComponentLabel = HTMLElement | string;
+
+export const gameMode = (
+  label: ContainerComponentLabel,
+  onClick: () => void,
+  className?: string,
+  parentId?: string
+): HTMLDivElement => {
+  const component: HTMLDivElement = document.createElement('div');
+  component.classList.add('game-mode_container');
+
+  //creates overlay appearing on hover
+  const overlay: HTMLDivElement = document.createElement('div');
+  overlay.classList.add('game-mode_overlay');
+  component.appendChild(overlay);
+
+  //setting parametres
+  typeof label === 'string' ? handleStringScenario(label, component) : component.appendChild(label);
+
+  if (className) {
+    component.classList.add(`${className}`);
+  }
+  const parentEl = document.getElementById(`${parentId}`)!;
+
+  component.addEventListener('click', onClick);
+
+  return parentEl ? parentEl.appendChild(component) : component;
+};

src/components/gameMode/game-mode.scss

@@ -0,0 +1,35 @@
+.game-mode_container {
+    box-sizing: border-box;
+    width: 300px;
+    height: 300px;
+    background-color: $color-background-primary;
+    color: $color-font-primary;
+    transition: all 0.5s ease-in-out;
+    font-style: $font-primary;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.game-mode_overlay {
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: all 0.5s ease-in-out;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.game-mode_container:hover .game-mode_overlay {
+    opacity: 1;
+    background-color: rgb(22, 22, 21, 0.5);
+}
+
+.game-mode_container:hover {
+    transform: rotate(-5deg) scale(1.2);
+}

src/styles/styles.scss

@@ -5,8 +5,14 @@
 @import "reset";
 
 
+@import 'normalize';
+@import 'src/components/containerComponent/ContainerComponent';
 // Components
 @import '../components/button/Button';
 
+
+@import '../components/gameMode/game-mode.scss'
+
 @import '../components/Title/Title.scss';
 @import 'src/components/containerComponent/ContainerComponent';
+