feat: add decoration section to tree page

Bonamente · Dec 24, 2021 · 03b50d8 · 03b50d8
1 parent 27e6940
commit 03b50d8
Show file tree

Hide file tree

Showing 29 changed files with 945 additions and 141 deletions.
diff --git a/christmas-task-part2/src/app/app.ts b/christmas-task-part2/src/app/app.ts
@@ -13,16 +13,16 @@ export const app = () => {
       searchedToys: new Set(),
     },
 
-    mediaForm: {    
+    mediaForm: {
       audio: false,
       snow: false,
-      garland: false,      
+      garland: false,
     },
 
     treeForm: {
       tree: 1,
       bg: 1,
-      garland: 'multicolored', 
+      garland: 'multicolored',
     },
 
     valueFilter: {
@@ -93,5 +93,5 @@ export const app = () => {
 
   const currentState = getCurrentState();
 
-  renderPage(currentState); 
+  renderPage(currentState);
 };
diff --git a/christmas-task-part2/src/app/builders/controls/treePageControls/buildTreePageSettings.ts b/christmas-task-part2/src/app/builders/controls/treePageControls/buildTreePageSettings.ts
@@ -1,4 +1,4 @@
-import { IState } from '../../../types'; 
+import { IState } from '../../../types';
 import buildTreeForm from './tree-form';
 import buildMediaForm from './media-form';
 
@@ -11,7 +11,7 @@ const buildTreePageSettings = (state: IState): Node => {
   const treeSettingsTitle = document.createElement('h3');
   const settingsButtonContainer = document.createElement('div');
   const resetSettingsBtn = document.createElement('button');
-  
+
   settingsSection.classList.add('settings');
   settingsSectionTitle.textContent = 'Настройки';
   settingsSectionTitle.classList.add('settings__title', 'sr-only');
@@ -23,21 +23,18 @@ const buildTreePageSettings = (state: IState): Node => {
   treeSettings.classList.add('settings__tree-settings', 'tree-settings');
   treeSettingsTitle.textContent = 'Настройки ёлки';
   treeSettingsTitle.classList.add('tree-settings__title', 'sr-only');
-  
+
   settingsButtonContainer.classList.add('settings__btn-container');
   resetSettingsBtn.classList.add('settings__reset-btn');
   resetSettingsBtn.textContent = 'Сброс настроек';
 
   resetSettingsBtn.addEventListener('click', (): void => {
     //TODO logic
-
     // localStorage.clear();
-
     // resetFilters(state);
     // state.searchInput = '';
     // state.favoritesIds.clear();
     // state.sortingType = 'name-ascending';
-
     // renderPage(state);
   });
 
@@ -49,4 +46,4 @@ const buildTreePageSettings = (state: IState): Node => {
   return settingsSection;
 };
 
-export default buildTreePageSettings;
+export default buildTreePageSettings;
diff --git a/christmas-task-part2/src/app/builders/controls/treePageControls/htmlForMediaForm.ts b/christmas-task-part2/src/app/builders/controls/treePageControls/htmlForMediaForm.ts
@@ -1,7 +1,7 @@
 import { IState } from '../../../types';
 
 const buildHtmlForMediaForm = (state: IState): string => {
-  const { mediaForm } = state;  
+  const { mediaForm } = state;
 
   return `
     <fieldset class="form__media media-form">

diff --git a/christmas-task-part2/src/app/builders/controls/treePageControls/htmlForTreeForm.ts b/christmas-task-part2/src/app/builders/controls/treePageControls/htmlForTreeForm.ts
@@ -122,8 +122,8 @@ const buildHtmlForTreeForm = (state: IState): string => {
       <legend class="garland-form__title">Гирлянда</legend>
       <ul class="garland-form__list">
         <li class="garland-form__item">
-          <input class="garland-form__input sr-only" id="multicolored" type="radio" name="garland" value="multicolored"        
-          ${garland === 'multicolored' ? 'checked' : ''}>
+          <input class="garland-form__input sr-only" id="multicolored" type="radio" 
+          name="garland" value="multicolored" ${garland === 'multicolored' ? 'checked' : ''}>
           <label class="garland-form__label garland-form__label--multicolored" for="multicolored">
           <span class="sr-only">Разноцветная</span></label>
         </li>

diff --git a/christmas-task-part2/src/app/builders/controls/treePageControls/media-form.ts b/christmas-task-part2/src/app/builders/controls/treePageControls/media-form.ts
@@ -1,32 +1,34 @@
-import { IState, IMediaForm } from '../../../types';
-import setLocalStorage from '../../../utils/set-local-storage';
+import { IState } from '../../../types';
+// import setLocalStorage from '../../../utils/set-local-storage';
 import buildHtmlForMediaForm from './htmlForMediaForm';
-import renderMediaForm from '../../../renders/renderMediaForm';
+// import renderMediaForm from '../../../renders/renderMediaForm';
+import runMedia from '../../../utils/media/run-media';
 
 const buildMediaForm = (state: IState): Node => {
   const formElement = document.createElement('form');
   formElement.innerHTML = buildHtmlForMediaForm(state);
   formElement.classList.add('media-settings__form', 'form');
 
   formElement.addEventListener('change', (e: Event): void => {
+    const { audio, snow, garland } = state.mediaForm;
+
     const activeElement = e.target as HTMLInputElement;
     const { name } = activeElement;
-  
+
     if (activeElement.checked) {
       state.mediaForm[name] = true;
     } else {
       state.mediaForm[name] = false;
     }
 
-
-    renderMediaForm(state);
-    //TODO 
-    // runMedia(state);
-    // setLocalStorage(state);   
+    runMedia(state, [audio, snow, garland]);
+    //TODO
+    // setLocalStorage(state);
+
+    // renderMediaForm(state); ???
   });
 
-
   return formElement;
 };
 
-export default buildMediaForm;
+export default buildMediaForm;
diff --git a/christmas-task-part2/src/app/builders/controls/treePageControls/tree-form.ts b/christmas-task-part2/src/app/builders/controls/treePageControls/tree-form.ts
@@ -1,30 +1,28 @@
-import { IState, ITreeForm } from '../../../types';
-import setLocalStorage from '../../../utils/set-local-storage';
+import { IState } from '../../../types';
+// import setLocalStorage from '../../../utils/set-local-storage';
 import buildHtmlForTreePageForm from './htmlForTreeForm';
-import renderTreeForm from '../../../renders/renderTreeForm';
+// import renderTreeForm from '../../../renders/renderTreeForm';
+import changeDecorations from '../../../utils/decoration/change-decorations';
 
-const buildTreeForm = (state: IState): Node => { 
+const buildTreeForm = (state: IState): Node => {
   const formElement = document.createElement('form');
   formElement.innerHTML = buildHtmlForTreePageForm(state);
   formElement.classList.add('tree-settings__form', 'form');
 
   formElement.addEventListener('change', (e: Event): void => {
     const activeElement = e.target as HTMLInputElement;
-    const { name } = activeElement;   
+    const { name } = activeElement;
 
-    const currentValue = name === 'garland' 
-      ? activeElement.value
-      : Number(activeElement.value);
-
-      state.treeForm[name] = currentValue;
+    const currentValue = name === 'garland' ? activeElement.value : Number(activeElement.value);
 
-      // renderTreeForm(state); фокус не срабатывает с клавиатурф потому что ререндер?
+    state.treeForm[name] = currentValue;
 
-      //TODO 
-      // setLocalStorage(state);
-  }); 
+    changeDecorations(state);
+    //TODO
+    // setLocalStorage(state);
+  });
 
   return formElement;
 };
 
-export default buildTreeForm;
+export default buildTreeForm;
diff --git a/christmas-task-part2/src/app/builders/decoration-section.ts b/christmas-task-part2/src/app/builders/decoration-section.ts
@@ -0,0 +1,22 @@
+import { IState } from '../types';
+
+const buildDecorationSection = (state: IState): Node => {
+  const { tree, bg } = state.treeForm;
+  const decorationSection = <HTMLElement>document.createElement('section');
+  decorationSection.classList.add('decoration', `bg-tree-${bg}`);
+
+  decorationSection.innerHTML = `
+    <h2 class="decoration__title sr-only">Украшаемая ёлка</h2>    
+    <div class="decoration__snowflakes"></div>
+    <div class="decoration__garland"></div>
+    <map name="tree-map">
+      <area coords="365,699,189,706,113,683,31,608,2,555,2,539,18,437,73,351,106,224,
+      161,134,243,-1,306,75,353,144,399,221,424,359,452,459,496,550,444,664" shape="poly">
+    </map>
+    <img class="decoration__tree" src="./trees/${tree}.png"  usemap="#tree-map" alt="украшаемая ёлка">        
+  `;
+
+  return decorationSection;
+};
+
+export default buildDecorationSection;
diff --git a/christmas-task-part2/src/app/builders/header.ts b/christmas-task-part2/src/app/builders/header.ts
@@ -11,7 +11,7 @@ const buildHeader = (state: IState): Node => {
   const MainPageLink = document.createElement('a');
   const ToysPageLink = document.createElement('a');
   const TreePageLink = document.createElement('a');
-  const headerControls = document.createElement('div');  
+  const headerControls = document.createElement('div');
   const headerCounter = document.createElement('div');
   const toyCounter = document.createElement('span');
 
@@ -70,18 +70,18 @@ const buildHeader = (state: IState): Node => {
     headerSearchInput.setAttribute('autocomplete', 'off');
     headerSearchInput.setAttribute('placeholder', 'найти игрушку...');
     headerSearchInput.setAttribute('autofocus', 'autofocus');
-  
+
     headerSearchInput.addEventListener('input', (): void => {
       headerSearchInput.classList.remove('header__search--stand-by');
-  
+
       state.searchInput = headerSearchInput.value.toLowerCase();
       state.uiState.searchedToys.clear();
       state.uiState.searchedToys.add(getSearchedItems(state));
-  
+
       if (headerSearchInput.value === '') {
         headerSearchInput.classList.add('header__search--stand-by');
       }
-  
+
       renderSearchedCards(state);
     });
 

diff --git a/christmas-task-part2/src/app/builders/htmlForGarland.ts b/christmas-task-part2/src/app/builders/htmlForGarland.ts
@@ -0,0 +1,118 @@
+const buildHtmlForGarland = (garlandColor: string): string =>
+  `<ul class="lightrope lightrope--1">
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+    </ul>
+
+    <ul class="lightrope lightrope--2">
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+    </ul>
+
+    <ul class="lightrope lightrope--3">
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+    </ul>
+
+    <ul class="lightrope lightrope--4">
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+    </ul>
+
+    <ul class="lightrope lightrope--5">
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+    </ul>
+
+    <ul class="lightrope lightrope--6">
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+    </ul>
+
+    <ul class="lightrope lightrope--7">
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+      <li class="${garlandColor}"></li>
+    </ul>
+`;
+
+export default buildHtmlForGarland;
diff --git a/christmas-task-part2/src/app/builders/page-content.ts b/christmas-task-part2/src/app/builders/page-content.ts
@@ -28,7 +28,7 @@ const buildPageContent = (state: IState): Node => {
       throw new Error('invalid activePage value');
   }
 
-  overlayElement.append(activePageContent);  
+  overlayElement.append(activePageContent);
   mainElement.append(overlayElement);
 
   return mainElement;

diff --git a/christmas-task-part2/src/app/pages/main-page/main-page.ts b/christmas-task-part2/src/app/pages/main-page/main-page.ts
@@ -20,11 +20,11 @@ const buildMainPageContent = (state: IState): HTMLElement => {
     e.preventDefault();
     state.activePage = 'toys-page';
     renderPage(state);
-  })
+  });
 
   pageContainer.append(startButton);
 
   return pageContainer;
 };
 
-export default buildMainPageContent;
+export default buildMainPageContent;