rewrite adpage to use reactivity

components/AdCard/AdCard.hbs

@@ -6,7 +6,6 @@
             src='{{currentImagePath}}'
             alt='Housing card image'
         />
-        <p>{{toShowIndex}}</p>
         <div class='housing-card__image-pagination-div js-pagination-div'>
             <!-- Здесь будут кружочки -->
             {{#each images}}

components/AdCard/AdCard.ts

@@ -27,7 +27,7 @@ export default class AdCard extends ReactiveComponent {
                 toShowIndex: 0,
             },
             computedValues: {
-                currentImagePath: (state: Record<string, unknown>) => {
+                currentImagePath: (state) => {
                     return data.images[state.toShowIndex as number].path;
                 },
             },
@@ -43,9 +43,11 @@ export default class AdCard extends ReactiveComponent {
             router.navigateTo(`/ads/?id=${this.#data.id}`);
         };
 
-        this.thisElement
-            .querySelector('.js-like-button')!
-            .addEventListener('click', this.#addToFavorite);
+        (
+            this.thisElement.querySelector(
+                '.js-like-button'
+            ) as HTMLButtonElement
+        ).onclick = this.#addToFavorite;
 
         setTimeout(() => {
             this.#addImageScrolling();
@@ -67,10 +69,8 @@ export default class AdCard extends ReactiveComponent {
             'housing-card__circle'
         );
 
-        imgElem.addEventListener('mousemove', (e) =>
-            this.#onMouseMove(e, areaFraction)
-        );
-        imgElem.addEventListener('mouseout', () => this.#onMouseOut());
+        imgElem.onmousemove = (e) => this.#onMouseMove(e, areaFraction);
+        imgElem.onmouseout = () => this.#onMouseOut();
 
         this.#circles[this.state.toShowIndex as number].classList.add(
             'housing-card__circle--fill'
@@ -91,6 +91,7 @@ export default class AdCard extends ReactiveComponent {
         }
         console.log('new to show index:', toShowIndex);
 
+        // todo: fix this
         // setTimeout(() => {
         this.state.toShowIndex = toShowIndex;
         // }, SCROLL_DELAY);

components/AdPage/AdPage.hbs

@@ -1,9 +1,15 @@
-<div class='ad-page'>
+<div class='ad-page' id='{{elementId}}'>
     <main>
         <div class='advert-images-carousel'>
             <div class='advert-images-carousel__main-img-div js-main-img-div'>
-                <img class='advert-images-carousel__img-background' />
-                <img class='advert-images-carousel__main-img' />
+                <img
+                    class='advert-images-carousel__img-background'
+                    src='{{currentImagePath}}'
+                />
+                <img
+                    class='advert-images-carousel__main-img'
+                    src='{{currentImagePath}}'
+                />
             </div>
             <div class='advert-images-carousel__secondary_images'>
                 {{#each images}}
@@ -33,6 +39,7 @@
         class='ad-page__fullscreen-overlay ad-page__fullscreen-overlay_hidden js-fullscreen-overlay'
     >
         <img
+            src='{{currentImagePath}}'
             class='ad-page__fullscreen-overlay__image js-main-image-fullscreen'
         />
     </div>