<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Layouts</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <div id="controls">
        <button id="btnA">Button 1</button>
        <button id="btnB">Button 2</button>
        <button id="btnC">Button 3</button>
        <div class="balls">
            <div class="ball" id="ballA"></div>
            <div class="ball" id="ballB"></div>
            <div class="ball" id="ballC"></div>
        </div>
    </div>
    <div id="layoutContainer" class="layout-container">
        <div class="inner-div" id="div1"></div>
        <div class="inner-div" id="div2"></div>
        <div class="inner-div" id="div3"></div>
        <div class="inner-div" id="div4"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>


class Controller {
    constructor(presenter) {
        this.presenter = presenter;
    }

    handleEvent(layoutType) {
        this.presenter.setLayout(layoutType);
    }
}

class Presenter {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
        this.divs = this.container.querySelectorAll('.inner-div');
    }

    setLayout(layoutType) {
        
        this.divs.forEach(div => {
            div.style.display = 'none';
            div.style.removeProperty('left');
            div.style.removeProperty('top');
            div.style.removeProperty('right');
            div.style.removeProperty('bottom');
            div.textContent = '';
        });

        
        switch (layoutType) {
            case 'A': 
                this.divs[0].style.display = 'block';
                this.divs[0].style.left = '0';
                this.divs[0].style.top = '0';
                this.divs[0].textContent = 'Michal';
                this.divs[1].style.display = 'block';
                this.divs[1].style.left = '45%';
                this.divs[1].style.top = '45%';
                this.divs[1].textContent = 'Zwolinski';
                this.divs[2].style.display = 'block';
                this.divs[2].style.right = '0';
                this.divs[2].style.bottom = '0';
                this.divs[2].textContent = '3';
                break;
            case 'B': 
                this.divs.forEach((div, index) => {
                    if (index < 3) {
                        div.style.display = 'block';
                        div.style.left = `${index * 40}%`;
                        div.style.top = '45%';
                        div.textContent = index === 0 ? 'Michal' : (index === 1 ? 'Zwolinski' : '');
                        this.divs[0].style.left = '12%';
                        this.divs[2].style.right = '60%';
                        this.divs[1].style.left = '46%';
                        this.divs[2].textContent = '3';
                    } else {
                        div.style.display = 'none';
                    }
                });
                break;
            case 'C':
                this.divs[0].style.display = 'block';
                this.divs[0].style.left = '0';
                this.divs[0].style.top = '0';
                this.divs[1].style.display = 'block';
                this.divs[1].style.left = '6.71%';
                this.divs[1].style.top = '0';
                this.divs[2].style.display = 'block';
                this.divs[2].style.right = '0';
                this.divs[2].style.bottom = '0';
                this.divs[0].textContent = 'Michal';
                this.divs[1].textContent = 'Zwolinski';
                this.divs[2].textContent = '4';
                this.divs[3].style.display = 'block';
                this.divs[3].style.right = '6.71%';
                this.divs[3].style.bottom = '0';
                this.divs[3].textContent = '3';
                break;
        }
    }
}

document.addEventListener('DOMContentLoaded', () => {
    const presenter = new Presenter('layoutContainer');
    const controller = new Controller(presenter);

    document.getElementById('btnA').addEventListener('click', () => controller.handleEvent('A'));
    document.getElementById('btnB').addEventListener('click', () => controller.handleEvent('B'));
    document.getElementById('btnC').addEventListener('click', () => controller.handleEvent('C'));
});



body {
    font-family: Arial, sans-serif;
}
.layout-container {
    width: 100%;
    height: 500px;
    position: relative;
    border: 1px solid #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.inner-div {
    display: none;
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: rgb(255, 0, 174);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
}
zamiast kwadratow chcialbym prostokaty ktorych dluzszy bok jest rowny boku tych kwadratow