index.html

---
layout: default
title: KorGE Store Ecosystem (Assets, Modules & Libraries)
priority: 1.0
---

<div class="container">
    <div class="row">
    </div>
    <div class="row">
        <div class="col col-6">
            <h1><a href="https://github.com/korlibs/store.korge.org/commits/main" target="_blank">Latest changes 🆕</a> (<a href="https://github.com/korlibs/store.korge.org/commits/main.atom" target="_blank">RSS</a>)</h1>
            <ul id="changes"></ul>
        </div>
        <div class="col col-6">
            {% include ads.html %}
        </div>
    </div>

</div>

<script>
    async function fetchCommits() {
        const fetchResult = await fetch("https://api.github.com/repos/korlibs/store.korge.org/commits?per_page=5")
        const data = await fetchResult.json()

        let out = ""
        for (const row of data) {
            const rowCommit = row?.commit
            const rowAuthor = row?.commit?.author
            out += `<li>
                <a href="${row?.html_url}" target="_blank">${htmlspecialchars(`${rowCommit?.message}`)}</a>
                <small style="color:#999 !important;">
                by <a style="color:#999 !important;" href="https://github.com/${htmlspecialchars(rowAuthor?.name)}" target="_blank">${htmlspecialchars(rowAuthor?.name)}</a>
                on ${htmlspecialchars(new Date(rowAuthor?.date)?.toLocaleDateString?.("en-US"))}
                </small>
            </li>`
        }
        document.getElementById("changes").innerHTML = out
    }
    fetchCommits()
</script>


<div class="container">
    <div class="row">
        <form style="width:100%;">
            <div class="form-group" style="width:100%;">
                <label style="width:100%;">
                    <input id="search_field" autofocus placeholder="Search..." class="form-control" type="search" style="width:100%;" />
                </label>
            </div>
        </form>
    </div>

</div>

<div class="container hide-intellij">
<!--
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="..." class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </button>
</div>
-->
    <div class="subsection">
    <div class="row">
        <h1>Starter Kits<a href="/starterkits.json" target="_blank"><code>.json</code></a></h1>
    </div>

    <div class="jumbotron" style="padding: 1rem 2rem;background:rgba(0,0,0,0.1);">
        <div class="row">
            {% assign kits = site.starterkits | sort: "order" %}
            {% for kit in kits %}
            {% if kit.enabled %}
                {% include card.html title=kit.title content=kit.content screenshot=kit.screenshot url=kit.url %}
            {% endif %}
            {% endfor %}
        </div>
    </div>
    </div>
</div>

<div class="section subsection container hide-intellij">
    <div class="row">
        <h1>Showcases<a href="/showcases.json" target="_blank"><code>.json</code></a></h1>
    </div>
    <div class="jumbotron" style="padding: 1rem 2rem;background:rgba(0,0,0,0.1);">
        <div class="row">
            {% assign kits = site.showcases | sort: "order" %}
            {% for kit in kits %}
            {% if kit.enabled %}
            {% include card.html title=kit.title content=kit.content screenshot=kit.screenshot url=kit.url %}
            {% endif %}
            {% endfor %}
        </div>
    </div>
</div>

<div class="section subsection container">
    <div class="row">
        <h1>GFX<a href="/gfx.json" target="_blank"><code>.json</code></a></h1>
    </div>
    <div class="jumbotron" style="padding: 1rem 2rem;background:rgba(0,0,0,0.1);">
        <div class="row">
            {% assign kits = site.gfx | sort: "order" %}
            {% for kit in kits %}
            {% if kit.enabled %}
            {% include card.html title=kit.title content=kit.content screenshot=kit.screenshot url=kit.url %}
            {% endif %}
            {% endfor %}
        </div>
    </div>
</div>

<div class="section subsection container">
    <div class="row">
        <h1>SFX<a href="/sfx.json" target="_blank"><code>.json</code></a></h1>
    </div>
    <div class="jumbotron" style="padding: 1rem 2rem;background:rgba(0,0,0,0.1);">
        <div class="row">
            {% assign kits = site.sfx | sort: "order" %}
            {% for kit in kits %}
            {% if kit.enabled %}
            {% include card.html title=kit.title content=kit.content screenshot=kit.screenshot url=kit.url %}
            {% endif %}
            {% endfor %}
        </div>
    </div>
</div>

<div class="section subsection container">
    <div class="row">
        <h1>Fonts<a href="/fonts.json" target="_blank"><code>.json</code></a></h1>
    </div>
    <div class="jumbotron" style="padding: 1rem 2rem;background:rgba(0,0,0,0.1);">
        <div class="row">
            {% assign kits = site.fonts | sort: "order" %}
            {% for kit in kits %}
            {% if kit.enabled %}
            {% include card.html title=kit.title content=kit.content screenshot=kit.screenshot url=kit.url %}
            {% endif %}
            {% endfor %}
        </div>
    </div>
</div>

<div class="section container">
    <div class="row">
        <h1>Libraries & Modules<a href="/modules.json" target="_blank"><code>.json</code></a></h1>
    </div>
    <div class="row">
        {% assign grouped_modules = site.modules | group_by: "category" | sort: "name" %}
        {% for grouped_module in grouped_modules %}
            {% assign modules = grouped_module.items %}
            <div class="subsection jumbotron col-12 {% if modules.size <= 3 %}col-lg-4{% endif %}" style="padding: 0.25rem 2rem;border-radius:0;background:rgba(0,0,0,0.1);">
                <div class="container-fluid">
                <div class="row">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb" style="background:none;margin-bottom:0;">
                            <li class="breadcrumb-item active" aria-current="page">
                                <h2 class="section-title">{{ grouped_module.name }}</h2>
                            </li>
                        </ol>
                    </nav>
                </div>
                <div class="row">
                    {% for module in modules %}
                    {% if module.enabled != false %}
                        {% include card.html title=module.title content=module.content show_title=module.show_title screenshot=module.icon screenshot_size=module.icon_size screenshot_position=module.icon_position url=module.url %}
                    {% endif %}
                    {% endfor %}
                </div>
                    </div>
            </div>
        {% endfor %}
    </div>
</div>

<style>
    .single-features {
        cursor: pointer;
        transform: perspective(4000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
        box-shadow: rgba(15, 102, 116, 0.45) 0 0 5px;
        transition: transform .5s, box-shadow 1s;
        overflow: hidden;
        border-radius: 16px;
    }
    .single-features:hover {
        box-shadow: rgba(15, 102, 116, 0.17) 0 0 45px;
        /*opacity: calc(100% + var(--mouse-ratioX));*/
        /*
        transform: perspective(4000px)
            rotateX(
                calc(
                    var(--mouse-mY, 0) * -8deg
                )
            )
            rotateY(
                calc(
                    var(--mouse-mX, 0) * 8deg
                )
            )
            scale3d(1.1, 1.1, 1.1);
         */
        transition: transform .1s, box-shadow 1s;
    }
    .single-features:hover a {
        color: var(--purple) !important;
        transition: color 0.5s;
    }
</style>

<script type="application/javascript">

    function getMouseCoordinatesRelativeToElementCoords(coords, element) {
        const rect = element.getBoundingClientRect();
        const mouseX = coords.x - rect.left;
        const mouseY = coords.y - rect.top;

        const style = getComputedStyle(element);
        const transform = style.transform;

        const matrix = new DOMMatrix(transform);
        const inverseMatrix = matrix.invertSelf();

        const point = new DOMPoint(mouseX, mouseY);
        const transformedPoint = point.matrixTransform(inverseMatrix);

        return {
            x: transformedPoint.x,
            y: transformedPoint.y
        };
    }

    function getMouseCoordinatesRelativeToElement(event, element = event.currentTarget) {
        const clientRoot = event.touches ? event.touches[0] : event;
        return getMouseCoordinatesRelativeToElementCoords({ x: clientRoot.clientX, y: clientRoot.clientY }, element)
    }

    function bilinearInterpolation(topLeft, topRight, bottomLeft, bottomRight, ratioX, ratioY) {
        // Interpolate values along the top edge
        const E = topLeft * (1 - ratioX) + topRight * ratioX;

        // Interpolate values along the bottom edge
        const F = bottomLeft * (1 - ratioX) + bottomRight * ratioX;

        // Interpolate values between E and F
        const G = E * (1 - ratioY) + F * ratioY;

        return G;
    }

    function createTransform(ratioX, ratioY, over, time) {
        const scale = 16

        const mX = (ratioX - 0.5) * 2;
        const mY = (ratioY - 0.5) * 2;

        const rotateY = mX * scale;
        const rotateX = -mY * scale;
        //const rotateY = -mX * scale;

        /*
        const topLeft = { rotateX: scale, rotateY : -scale }
        const topRight = { rotateX: scale, rotateY : scale }

        const bottomLeft = { rotateX: -scale, rotateY : -scale }
        const bottomRight = { rotateX: -scale, rotateY : scale }

        const rotateX = bilinearInterpolation(topLeft.rotateX, topRight.rotateX, bottomLeft.rotateX, bottomRight.rotateX, ratioX, ratioY)
        const rotateY = bilinearInterpolation(topLeft.rotateY, topRight.rotateY, bottomLeft.rotateY, bottomRight.rotateY, ratioX, ratioY)

         */

        return `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.1, 1.1, 1.1)`
    }

    document.querySelectorAll(".single-features").forEach((element) => {
        // @type HTMLElement
        const htmlElement = element;
        const mouseMoveEvent = (e) => {
            //console.log(e.touches)
            //if (e.target != htmlElement) return
            const { x, y } = getMouseCoordinatesRelativeToElement(e)
            //var rect = e.target.getBoundingClientRect();
            //var x = e.clientX - rect.left; //x position within the element.
            //var y = e.clientY - rect.top;  //y position within the element.

            const ratioX = Math.min(Math.max(x / htmlElement.offsetWidth, 0), 1)
            const ratioY = Math.min(Math.max(y / htmlElement.offsetHeight, 0), 1)

            //console.log(x, y, ratioX, ratioY)

            //htmlElement.style.setProperty('--mouse-mX', (ratioX - 0.5) * 2);
            //htmlElement.style.setProperty('--mouse-mY', (ratioY - 0.5) * 2);

            htmlElement.style.transform = createTransform(ratioX, ratioY, true, 0)
            htmlElement.style.zIndex = 10000;
            //console.log(htmlElement.style.transform);
        }
        const mouseExit = (e) => {
            htmlElement.style.transform = "inherit"
            htmlElement.style.zIndex = 'inherit';
        }

        htmlElement.addEventListener('touchstart', mouseMoveEvent)
        htmlElement.addEventListener('touchmove', mouseMoveEvent)
        htmlElement.addEventListener('touchend', mouseExit)

        htmlElement.addEventListener('mousemove', mouseMoveEvent)
        htmlElement.addEventListener('mouseleave', mouseExit)

        htmlElement.addEventListener('click', (e) => {
            document.location = htmlElement.querySelector("a").href
        })
    })

    const search_field = document.querySelector("#search_field")
    const all_subsections = document.querySelectorAll(".subsection")
    search_field.addEventListener("input", (e) => {
        const value = `${e.target.value}`
        const valueRegex = new RegExp(value.replace(/\s+/g, "\\s*"), "dmsi")
        console.log("valueRegex", valueRegex)
        for (const subsection of all_subsections) {
            const sectionTextList = subsection.querySelectorAll("h1.section-title, h2.section-title, h3.section-title")
            const sectionText = Array.from(sectionTextList).map(it => it.textContent).join("\n")
            const sectionTest = valueRegex.test(sectionText)
            const all_cards = subsection.querySelectorAll(".card")
            let visibleCount = 0
            for (const card of all_cards) {
                const cardText = card.textContent.trim()
                if (sectionTest || valueRegex.test(cardText)) {
                    visibleCount++
                    card.classList.remove("d-none")
                } else {
                    card.classList.add("d-none")
                }
            }
            if (visibleCount > 0) {
                subsection.classList.remove("d-none")
            } else {
                subsection.classList.add("d-none")
            }
        }
        //console.log(value, all_cards);
    })
</script>