frogmc.dev/install/client.md

# Client

Here's how to install FrogLoader to your game.

## Minecraft Launcher

Insert section about the installer here

## Third-Party Launchers


### PrismLauncher/MultiMC

<script setup>
    import JSZip from 'jszip'
    import { ref, onMounted } from 'vue'
    import { saveAs } from 'file-saver'

    const assetBaseUrl = "/resources/prism"
    const instanceNameRef = ref()
    const showSnapshots = ref()
    const versionSelector = ref()
    let releases = []
    let snapshots = []
    let versions = []

    async function getGameVersions() {
        const response = await fetch("https://piston-meta.mojang.com/mc/game/version_manifest_v2.json")
        return await response.json()
    }

    function getVersions() {
        versionSelector.value.innerHTML = ""

        for (let version of releases) {
            versionSelector.value.innerHTML += "<option value=\""+version.id+"\">"+version.id+"</option>"    
        }
        if (showSnapshots.value) {
            for (let version of snapshots) {
                versionSelector.value.innerHTML += "<option value=\""+version.id+"\">"+version.id+"</option>"
            }
        }
    }
    
    onMounted(() => {
        getGameVersions().then((v) => {
            versions = v.versions
            for (let version of versions){
                if (version.type === "snapshot"){
                    snapshots.push(version)
                } else {
                    releases.push(version)
                }
            }
            getVersions()
        })
    })

    function download(){
        let missing = []

        if (instanceNameRef.value === undefined){
            missing.push("Instance Name")
        }

        if (missing.length > 0) {
            let html = "<div class=\"danger custom-block\"><p class=\"custom-block-title\">Missing Inputs</p><p>"
            html += missing.join("</p><p>")
            html += "</p></div>"
            document.getElementById("missingBox").innerHTML = html
            return
        }

        let zip = JSZip()
        let promises = []



        Promise.all(promises).then((values) => {
            zip.generateAsync({type:"blob"}).then(function (blob) {
                saveAs(blob, instanceNameRef.value+".zip")
            }, function (err) {
                alert("Failed to download generated zip file, please report this!")
            })
        })
    }

    async function readAsset(path){
        const response = await fetch(assetBaseUrl+path)
        return await response.text().then((data) => {
            data = data.replaceAll("$instance_name", instanceNameRef.value)
            return data
        })
    }

    function inputsChanged() {
        document.getElementById("missingBox").innerHTML = ""
    }
</script>

::: warning Dependencies for a generator here
- loader libraries in meta
:::

Add an instance generator to the installer and describe it here\
**or**\
PR direct support to Prism

<div id="inputs">
    <table>
    <tbody>
        <tr>
            <td>Instance Name</td>
            <td><input v-model="instanceNameRef" @input="inputsChanged" /></td>
        </tr>
        <tr>
            <td>Minecraft Version</td>
            <td>
                <select ref="versionSelector">
                    <option value="loading">Loading Versions...</option>
                </select>
                <input type="checkbox" v-model="showSnapshots" @change="getVersions">Show Snapshots</input>
            </td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    </table>
    <div id="missingBox"></div>
    <button @click="download">Download</button>
</div>