komponent kafel trybu gry

.eslintrc.json

@@ -11,7 +11,6 @@
     "prettier"
   ],
   "rules": {
-    "prettier/prettier": "error",
     "block-scoped-var": "error",
     "eqeqeq": "error",
     "no-var": "error",

.gitignore

@@ -103,3 +103,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+# webstorm
+.idea

.prettierrc.js

@@ -1,7 +1,9 @@
 module.exports = {
-  "bracketSpacing": true,
-  "singleQuote": true,
-  "trailingComma": "none",
-  "semi": false,
-  "singleQuote": true
-}
+    trailingComma: 'es5',
+    semi: true,
+    tabWidth: 2,
+    singleQuote: true,
+    bracketSpacing: true,
+    arrowParens: 'avoid',
+    printWidth: 120,
+};

src/app/App.ts

@@ -1,7 +1,6 @@
-import { render } from '../utils/domHandlers'
-import { MainScreen } from '../views/MainScreen'
-
+import { render } from '../utils/domHandlers';
+import { MainScreen } from '../views/MainScreen';
 export const App = (): void => {
-  const appComponent: HTMLElement = document.getElementById('geo-app')!
-  const mainScreen = render(MainScreen(), appComponent)
-}
+  const appComponent: HTMLElement = document.getElementById('geo-app')!;
+  const mainScreen = render(MainScreen(), appComponent);
+};

src/components/containerComponent/ContainerComponent.scss

@@ -0,0 +1,4 @@
+.img {
+  min-height: 100px;
+  min-width: 100px;
+}

src/components/containerComponent/ContainerComponent.test.ts

@@ -0,0 +1,57 @@
+import { ContainerComponent } from './ContainerComponent';
+import { render } from '../../utils/domHandlers';
+
+describe('Test ContainerComponent', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="geo-app"></div>';
+  });
+
+  it('Should render text correctly', () => {
+    const appComponent = document.getElementById('geo-app');
+    if (appComponent) {
+      render(ContainerComponent('text'), appComponent);
+      expect(document.getElementById('container-component')?.innerText).toBe('text');
+    }
+  });
+
+  it('Should render image correctly', () => {
+    const appComponent = document.getElementById('geo-app');
+    if (appComponent) {
+      render(ContainerComponent('../../assets/images/test.jpg'), appComponent);
+      expect(document.getElementById('container-component')?.style.background).toBe(
+        'url(../../assets/images/test.jpg) no-repeat'
+      );
+    }
+  });
+
+  it('Should render external component correctly', () => {
+    const appComponent = document.getElementById('geo-app');
+    const mockedComponent = document.createElement('div');
+    mockedComponent.setAttribute('id', 'mocked');
+
+    if (appComponent) {
+      render(ContainerComponent(mockedComponent), appComponent);
+      expect(document.getElementById('mocked')).toBeTruthy();
+    }
+  });
+
+  it('Should contain className', () => {
+    const appComponent = document.getElementById('geo-app');
+
+    if (appComponent) {
+      render(ContainerComponent('label-text', 'testing-class'), appComponent);
+      expect(document.getElementById('container-component')?.classList.contains('testing-class')).toBeTruthy();
+    }
+  });
+
+  it('Should render component in parent component', () => {
+    const appComponent = document.getElementById('geo-app');
+
+    if (appComponent) {
+      ContainerComponent('label-text', 'testing-class', 'geo-app');
+      expect(document.getElementById('geo-app')?.innerHTML).toBe(
+        '<div class="testing-class" id="container-component" data-testid="container-component"></div>'
+      );
+    }
+  });
+});

src/components/containerComponent/ContainerComponent.ts

@@ -0,0 +1,21 @@
+import { render } from '../../utils/domHandlers';
+import { handleStringScenario } from '../../utils/functions';
+
+type ContainerComponentLabel = string | HTMLElement;
+type ContainerComponent = HTMLDivElement | HTMLElement;
+
+export const ContainerComponent = (
+  label: ContainerComponentLabel,
+  className?: string,
+  parentId?: string
+): ContainerComponent => {
+  const container = document.createElement('div');
+  className && container.classList.add(className);
+  container.setAttribute('id', 'container-component');
+  container.setAttribute('data-testid', 'container-component');
+
+  typeof label === 'string' ? handleStringScenario(label, container) : container.appendChild(label);
+
+  const element = parentId && document.getElementById(`${parentId}`);
+  return element ? render(container, element) : container;
+};

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/normalize.scss

@@ -0,0 +1,4 @@
+*{
+  margin: 0;
+  box-sizing: border-box;
+}

src/styles/styles.scss

@@ -1,6 +1,9 @@
- // opisanie głównych elementów
+// opisanie głównych elementów
 @import 'app';
 @import "variables";
 
+@import 'normalize';
+@import 'src/components/containerComponent/ContainerComponent';
 // Components
 
+@import '../components/gameMode/game-mode.scss'

src/utils/domHandlers.ts

@@ -1,7 +1,4 @@
-export const render = (
-  component: HTMLElement,
-  parent: HTMLElement
-): HTMLElement => {
-  parent.appendChild(component)
-  return component
-}
+export const render = (component: HTMLElement, parent: HTMLElement): HTMLElement => {
+  parent.appendChild(component);
+  return component;
+};

src/utils/functions.ts

@@ -0,0 +1,9 @@
+export const handleStringScenario = (label: string, container: HTMLDivElement): HTMLDivElement => {
+  const isImage = /(jpg|gif|png|JPG|GIF|PNG|JPEG|jpeg)$/.test(`${label}`);
+  if (isImage) {
+    container.style.background = `url("${label}") no-repeat`;
+  } else {
+    container.innerText = label;
+  }
+  return container;
+};

src/views/MainScreen.ts

@@ -1,6 +1,6 @@
 export const MainScreen = (): HTMLDivElement => {
-  const mainScreen = document.createElement('div')
-  mainScreen.innerText = 'test test test'
+  const mainScreen = document.createElement('div');
+  mainScreen.innerText = 'test test test';
 
-  return mainScreen
-}
+  return mainScreen;
+};