wm-fontis-tibi-2023/frontend/src/lib/components/widgets/iconCycleCircle.svelte

<script lang="ts">
    import { apiBaseURL } from "../../../config"
    import { onMount } from "svelte"

    export let col: Column
    export let pageId: string

    let count = col.iconCycleCircle.boxes.length // The number of surrounding circles.
    let angleStep = 360 / count
    let radius = 300

    let circles = []

    onMount(() => {
        for (let i = 0; i < count; i++) {
            let angle = (angleStep * i - 90) * (Math.PI / 180) // Convert to radians

            circles.push({
                x: radius * Math.cos(angle),
                y: radius * Math.sin(angle),
                rotation: angleStep * i + 180, // subtract 90 to point towards the circle
            })
        }
        circles = circles
    })
    let focused = -1
    setInterval(() => {
        focused += 1
        if (focused == count) focused = 0
        const svgObject = document.getElementById("mySvgObject" + focused)
    }, 1000)
</script>

<div class="container">
    <div class="main-circle">
        <div class="content">
            {col.iconCycleCircle.innerText}
        </div>
        {#each circles as { x, y, rotation }, i}
            <div
                class:focused="{focused == i}"
                class="circle"
                style="transform: translate(calc(100px + {x}px - 90px), calc(100px + {y}px - 90px))"
            >
                <div class="half" style="transform: rotate(calc({rotation}deg + 90deg))">
                    <div class="number" style="transform: rotate(calc( -1 * {rotation}deg - 90deg ))">{i + 1}</div>
                </div>

                <div class="content" style="">
                    <div class="icon">
                        <svg
                            id="mySvgObject{i}"
                            stroke="{i == focused ? 'white' : 'black'}"
                            fill="{i == focused ? 'white' : 'black'}"
                            data-src="{apiBaseURL}page/{pageId}/{col.iconCycleCircle?.boxes[i]?.icon?.src}"></svg>
                    </div>
                    <div class="text" style="text-align: center;">
                        {@html col.iconCycleCircle?.boxes[i]?.text}
                    </div>
                </div>
            </div>
            <div
                class="arrow"
                style="transform-origin: center; transform: translate(calc(90px + {(x * 0.9) /
                    2}px - 5px ), calc(90px + {(y * 0.9) / 2}px - 37.5px)) rotate(calc({rotation}deg - 90deg))"
            >
                <img src="/media/arrow-l-fat.svg" alt="arrow" />
            </div>
        {/each}
    </div>
</div>

<style lang="less">
    @import "../../assets/css/main.less";

    .container {
        height: 1000px;
        display: flex;
        align-items: flex-start;
        justify-content: center;

        @media (max-width: 1430px) {
            transform: scale(0.9);
            height: 900px;
        }

        @media (max-width: 1290px) {
            transform: scale(0.7);
            height: 700px;
        }

        @media (max-width: 680px) {
            transform: scale(0.5);
            height: 500px;
        }
        @media (max-width: 520px) {
            transform: scale(0.37);
            height: 370px;
        }
        .main-circle {
            position: relative;
            width: 180px;
            height: 180px;
            margin: auto;
            background: rgb(0, 0, 0);
            border-radius: 50%;
            & > .content {
                font-weight: bold;
                position: absolute;
                height: 100%;
                color: @font-color-secondary;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 120;
                font-size: 0.8rem;
            }
            .circle {
                position: absolute;
                width: 180px;
                overflow: hidden;
                height: 180px;
                background: rgba(255, 255, 255, 0);
                border: 4px solid @bg-color-secondary;
                z-index: 100;
                transform-origin: center;
                border-radius: 50%;
                transform-origin: center;
                & > .content {
                    position: relative;
                    display: flex;
                    line-height: 1;
                    flex-direction: column;
                    transform-origin: center;
                    width: 95%;
                    border-radius: 50%;
                    height: 95%;
                    align-items: center;
                    font-size: 0.8rem;
                    justify-content: center;
                    padding: 15px;
                    svg {
                        width: 80%;
                        height: 80%;
                    }
                }

                .half {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    overflow: hidden;
                    background: rgb(255, 255, 255);
                    color: white;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .number {
                        position: absolute;
                        top: 0%;
                        left: 0%;
                        width: 19%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 26px; /* oder eine passende Größe */
                        font-weight: 700;
                        color: white;
                    }
                    &::before {
                        content: "";
                        position: absolute;
                        background: rgb(0, 0, 0);
                        border-radius: 50%;
                        top: -50%;
                        left: 0;
                        width: 19%;
                        height: 200%;
                    }
                }

                &.focused {
                    background: @bg-color-secondary !important;
                    .number {
                        color: @font-color !important;
                    }
                    .content {
                        color: @font-color-secondary !important;
                    }
                    .half {
                        background: @bg-color-secondary !important;
                        &::before {
                            background: @bg-color !important;
                        }
                    }
                }
            }

            .arrow {
                position: absolute;
                width: 10px;
                height: 75px;

                transform-origin: center;
            }
        }
    }
</style>