<Wrapper>
<Info />
<Background />
<Tower />
<MiniTower />
</Wrapper>

export const TRANSLATIONS: number[] = Array.from(new Array(100)).map(
() => (Math.random() - 0.5) * 20
);
const translation = TRANSLATIONS[index % TRANSLATIONS.length];

const bind = useDrag(
({ last, direction: [, dirY], vxvy: [, vy] }) => {
   if (dirY === 1 && vy > 0.2 && last) {
     gameStore.click();
   }
},
{
   axis: 'y',
   filterTaps: true,
}
);

// GameStore
@action.bound
click(): void {
this.swipes += this.swipePower; // Количество печенек за один свайп
this.rootStore.wsConnect
   .sendMessage(WSSendEvent.swipe, { times: 1 })
this.gameUI.update({ count: this.swipePower });
}
// GameUI
@action
update({ count }: { count: number }): void {
this.uiInteraction = true;
this.newDiffCount = count;
setTimeout(() => {
   this.uiInteraction = false;
// Здесь в дальнейшем добавится логика сдвига башни
}, NEW_OREO_ANIMATION_TIME + 100);
}

<Oreo
       isNew={
         (i + gameUi.newDiffCount >= gameStore.swipes) && gameUi.uiInteraction
       }
/>
OreoWrapper = styled.div<{ isNew?: boolean }>`
transition: all ${NEW_OREO_ANIMATION_TIME}ms linear,
             opacity ${NEW_OREO_ANIMATION_TIME / 3}ms linear;
opacity: 1;
${(props) =>
   props.isNew &&
   css`
     opacity: 0;
     transform: translate(-50%, -200px);
   `}
`;

@action
moveGame(deltaY: number): void {
if (Math.abs(deltaY) > 0) {
   this.uiPosition = Math.min(
     Math.max(0, this.uiPosition + deltaY),
     Math.max(
       0,
       this.game.swipes * OREO_HEIGHT_PX -
         windowHeight / 3
     )
   );
   this.trackLastOreo =
     this.towerHeight - this.uiPosition < windowHeight;
}
}

get miniTowerPosition(): number {
if (this.towerHeight === 0) {
   return 0;
}
const uiPositionPercent = this.uiPosition / this.towerHeight;
return uiPositionPercent * this.miniTowerHeight;
}

const [{ y }, set] = useSpring(() => ({
y: gameUi.uiPosition,
}));
<Tower
style={{
   transform: y.to(
     (v: number) => `translate3d(0, ${v}px, 0)`
   ),
}}
>

// GameUi
export const OVERSCAN = 100;
export const OVERSCAN_THRESHOLD = OVERSCAN * 0.8;
@action.bound
_updateVisibleIndexesImmediately = (): void => {
const minVisibleIndex = Math.max(
   0,
   Math.floor(this.uiPosition / OREO_HEIGHT_PX)
);
const maxVisibleIndex = Math.min(
   this.game.swipes,
   Math.floor(
     (this.uiPosition + this.rootStore.uiStore.windowHeight) / OREO_HEIGHT_PX
   )
);
const [cachedMin, cachedMax] = this.cachedVisibleIndexes;
if (
   (minVisibleIndex >= 0 &&
     minVisibleIndex - OVERSCAN_THRESHOLD < cachedMin) ||
   (maxVisibleIndex <= this.game.swipes &&
     maxVisibleIndex + OVERSCAN_THRESHOLD > cachedMax)
) {
   this.cachedVisibleIndexes = [
     Math.max(0, minVisibleIndex - OVERSCAN),
     Math.min(maxVisibleIndex + OVERSCAN, this.game.swipes),
   ];
}
};

const [minVisibleIndex, maxVisibleIndex] = gameUi.cachedVisibleIndexes;
const oreosBlock = useMemo(() => {
const oreos = [];
for (let i = minVisibleIndex; i < maxVisibleIndex; i += 1) {
   oreos.push(
     <Oreo
       fillingId={gameStore.getCookieFiling(i)}
       isNew={
         (i + gameUi.newDiffCount >= gameStore.swipes) && gameUi.uiInteraction
       }
       index={i}
       key={i}
     />
   );
}
return oreos;
}, [minVisibleIndex, maxVisibleIndex]);

@computed
get invisibleHeight(): number {
const [minIndex] = this.cachedVisibleIndexes;
return minIndex * OREO_HEIGHT_PX;
}
<Tower
style={{
   marginBottom: `${gameUi.invisibleHeight}px`,
   transform: y.to(
     (v: number) => `translate3d(0, ${v}px, 0)`
   ),
}}
>

@computed
get totalUiTowerBlocks(): number {
return Math.ceil(this.game.swipes / 1000000);
}

// TowerBlock
if (index === total) {
return oreos; // Рендерим печеньки
}
return (
<Tower
   style={{
     marginBottom: `${baseHeight / total + (index === 0 ? 50 : 0)}px`,
     transform: basePosition.to(
       (v: number) => `translate3d(0, ${v / total}px, 0)`
     ),
   }}
>
   <TowerBlock
     oreos={oreos}
     total={total}
     index={index + 1}
     baseHeight={baseHeight}
     basePosition={basePosition}
   />
</TowerWrapper>
);

get currentScreenPx(): number {
const currentPointerSwipes = this.uiPosition / OREO_HEIGHT_PX;
const currentLevel = getCurrentLevelBySwipes(currentPointerSwipes);
const passedSwipes = currentPointerSwipes - currentLevel.swipes;
const startProgress = Math.min(
   1,
   passedSwipes / currentLevel.startSwipesRequired
);
const mainProgress = Math.max(
   0,
   (passedSwipes - currentLevel.startSwipesRequired) /
     currentLevel.mainSwipesRequired
);
return (
   startProgress * currentLevel.startScreenHeight +
   mainProgress * currentLevel.mainScreenHeight +
   currentLevel.startPositionPx
);
}