js-dos 0.80.25

package/src/window/dos/dos-window.tsx

@@ -0,0 +1,82 @@
+import { Emulators, CommandInterface } from "emulators";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { useDispatch, useSelector } from "react-redux";
+import { dosSlice } from "../../store/dos";
+import { nonSerializableStore, postJsDosEvent } from "../../non-serializable-store";
+import { State } from "../../store";
+import { useDosRuntime } from "./dos-runtime";
+import { dhry2Bundle, Dhry2Results } from "./dos-dhry2";
+import { createWsTransportLayer } from "../../ws/ws-transport-layer";
+
+declare const emulators: Emulators;
+
+export function DosWindow(props: {
+}) {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const [ci, setCi] = useState<CommandInterface | null>(null);
+    const token = useSelector((state: State) => state.auth.account?.token.access_token);
+    const worker = useSelector((state: State) => state.dos.worker);
+    const backend = useSelector((state: State) => state.dos.backend);
+    const backendHardware = useSelector((state: State) => state.dos.backendHardware);
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        try {
+            const bundles = nonSerializableStore.loadedBundle!.bundleChanges !== null ?
+                [nonSerializableStore.loadedBundle!.bundle, nonSerializableStore.loadedBundle!.bundleChanges] :
+                nonSerializableStore.loadedBundle!.bundle;
+
+            nonSerializableStore.loadedBundle!.bundle = null;
+            nonSerializableStore.loadedBundle!.bundleChanges = null;
+
+            const ci: Promise<CommandInterface> = (async () => {
+                if (backendHardware && nonSerializableStore.options.backendHardware) {
+                    const ws = await nonSerializableStore.options.backendHardware(backend);
+                    if (ws !== null) {
+                        return emulators.backend(bundles as any, await createWsTransportLayer(ws), { token });
+                    }
+                }
+
+                return (emulators as any)[backend + (worker ? "Worker" : "Direct")](bundles, {
+                    token,
+                });
+            })();
+
+            ci
+                .then((ci) => {
+                    setCi(ci);
+                    dispatch(dosSlice.actions.ci(true));
+                    nonSerializableStore.ci = ci;
+                    postJsDosEvent("ci-ready", ci);
+                    (window as any).ci = ci;
+                })
+                .catch((e) => dispatch(dosSlice.actions.emuError(e.message)));
+
+            return () => {
+                ci.then((ci) => {
+                    dispatch(dosSlice.actions.ci(false));
+                    nonSerializableStore.ci = null;
+                    ci.exit();
+                });
+            };
+        } catch (e) {
+            dispatch(dosSlice.actions.emuError((e as any).message));
+        }
+    }, [worker, backend, token ?? null]);
+
+    return <div class="bg-black h-full flex-grow overflow-hidden relative">
+        <canvas ref={canvasRef} />
+        {canvasRef.current && ci && <DosRuntime canvas={canvasRef.current} ci={ci} />}
+    </div>;
+}
+
+function DosRuntime(props: { canvas: HTMLCanvasElement, ci: CommandInterface }) {
+    const { canvas, ci } = props;
+    const bundle = useSelector((state: State) => state.dos.bundle);
+
+    useDosRuntime(canvas, ci);
+
+    return <>
+        {bundle?.endsWith(dhry2Bundle) && <Dhry2Results ci={ci} />}
+    </>;
+}

package/src/window/dos/render/canvas.ts

@@ -0,0 +1,65 @@
+import { CommandInterface } from "emulators";
+import { resizeCanvas } from "./resize";
+
+export function canvas(canvas: HTMLCanvasElement,
+                       ci: CommandInterface,
+                       forceAspect?: number) {
+    const context = canvas.getContext("2d");
+    if (context === null) {
+        throw new Error("Unable to create 2d context on given canvas");
+    }
+
+    let frameWidth = 0;
+    let frameHeight = 0;
+
+    const onResize = () => {
+        resizeCanvas(canvas, frameWidth, frameHeight, forceAspect);
+    };
+
+    let rgba = new Uint8ClampedArray(0);
+    const onResizeFrame = (w: number, h: number) => {
+        frameWidth = w;
+        frameHeight = h;
+        canvas.width = frameWidth;
+        canvas.height = frameHeight;
+        rgba = new Uint8ClampedArray(w * h * 4);
+        onResize();
+    };
+    ci.events().onFrameSize(onResizeFrame);
+    ci.events().onFrame((frameRgb, frameRgba) => {
+        if (frameRgb === null && frameRgba === null) {
+            return;
+        }
+
+        const frame = (frameRgb !== null ? frameRgb : frameRgba) as Uint8Array;
+
+        let frameOffset = 0;
+        let rgbaOffset = 0;
+
+        while (rgbaOffset < rgba.length) {
+            rgba[rgbaOffset++] = frame[frameOffset++];
+            rgba[rgbaOffset++] = frame[frameOffset++];
+            rgba[rgbaOffset++] = frame[frameOffset++];
+            rgba[rgbaOffset++] = 255;
+
+            if (frame.length === rgba.length) {
+                frameOffset++;
+            }
+        }
+
+        context.putImageData(new ImageData(rgba, frameWidth, frameHeight), 0, 0);
+    });
+
+    onResizeFrame(ci.width(), ci.height());
+
+    const resizeObserver = new ResizeObserver(onResize);
+    resizeObserver.observe(canvas.parentElement!);
+    window.addEventListener("resize", onResize);
+
+    return () => {
+        ci.events().onFrameSize(() => {});
+        ci.events().onFrame(() => {});
+        resizeObserver.disconnect();
+        window.removeEventListener("resize", onResize);
+    };
+}

package/src/window/dos/render/resize.ts

@@ -0,0 +1,31 @@
+import { FitConstant } from "../../../store/dos";
+
+export function resizeCanvas(canvas: HTMLCanvasElement,
+                             frameWidth: number,
+                             frameHeight: number,
+                             forceAspect?: number) {
+    const rect = canvas.parentElement!.getBoundingClientRect();
+    const containerWidth = rect.width;
+    const containerHeight = rect.height;
+
+    if (frameHeight === 0) {
+        return;
+    }
+    const aspect =
+        forceAspect === FitConstant ? (containerWidth / containerHeight) :
+            (forceAspect ?? (frameWidth / frameHeight));
+
+    let width = containerWidth;
+    let height = containerWidth / aspect;
+
+    if (height > containerHeight) {
+        height = containerHeight;
+        width = containerHeight * aspect;
+    }
+
+    canvas.style.position = "relative";
+    canvas.style.top = (containerHeight - height) / 2 + "px";
+    canvas.style.left = (containerWidth - width) / 2 + "px";
+    canvas.style.width = width + "px";
+    canvas.style.height = height + "px";
+};

package/src/window/dos/render/webgl.ts

@@ -0,0 +1,173 @@
+import { CommandInterface } from "emulators";
+import { resizeCanvas } from "./resize";
+
+const vsSource = `
+attribute vec4 aVertexPosition;
+attribute vec2 aTextureCoord;
+
+varying highp vec2 vTextureCoord;
+
+void main(void) {
+  gl_Position = aVertexPosition;
+  vTextureCoord = aTextureCoord;
+}
+`;
+
+const fsSource = `
+varying highp vec2 vTextureCoord;
+uniform sampler2D uSampler;
+
+
+void main(void) {
+  highp vec4 color = texture2D(uSampler, vTextureCoord);
+  gl_FragColor = vec4(color.r, color.g, color.b, 1.0);
+}
+`;
+
+export function webGl(canvas: HTMLCanvasElement,
+                      ci: CommandInterface,
+                      forceAspect?: number) {
+    const gl = canvas.getContext("webgl");
+    if (gl === null) {
+        throw new Error("Unable to create webgl context on given canvas");
+    }
+
+    const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
+    const vertexPosition = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+    const textureCoord = gl.getAttribLocation(shaderProgram, "aTextureCoord");
+    const uSampler = gl.getUniformLocation(shaderProgram, "uSampler");
+
+    initBuffers(gl, vertexPosition, textureCoord);
+
+    const texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+
+    const pixel = new Uint8Array([0, 0, 0]);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB,
+        1, 1, 0, gl.RGB, gl.UNSIGNED_BYTE,
+        pixel);
+
+    gl.useProgram(shaderProgram);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.uniform1i(uSampler, 0);
+
+    let frameWidth = 0;
+    let frameHeight = 0;
+
+    let requestAnimationFrameId: number | null = null;
+    let frame: Uint8Array | null = null;
+    let frameFormat: number = 0;
+
+    const updateTexture = () => {
+        if (frame !== null) {
+            gl.texImage2D(gl.TEXTURE_2D, 0, frameFormat,
+                frameWidth, frameHeight, 0, frameFormat, gl.UNSIGNED_BYTE,
+                frame);
+            frame = null;
+        }
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+
+        requestAnimationFrameId = null;
+    };
+
+    const onResize = () => {
+        resizeCanvas(canvas, frameWidth, frameHeight, forceAspect);
+    };
+
+    const onResizeFrame = (w: number, h: number) => {
+        frameWidth = w;
+        frameHeight = h;
+        canvas.width = frameWidth;
+        canvas.height = frameHeight;
+        frame = null;
+        gl.viewport(0, 0, frameWidth, frameHeight);
+        onResize();
+    };
+
+    ci.events().onFrameSize(onResizeFrame);
+    ci.events().onFrame((rgb, rgba) => {
+        frame = rgb != null ? rgb : rgba;
+        frameFormat = rgb != null ? gl.RGB : gl.RGBA;
+        if (requestAnimationFrameId === null) {
+            requestAnimationFrameId = requestAnimationFrame(updateTexture);
+        }
+    });
+
+    onResizeFrame(ci.width(), ci.height());
+
+    const resizeObserver = new ResizeObserver(onResize);
+    resizeObserver.observe(canvas.parentElement!);
+    window.addEventListener("resize", onResize);
+
+    return () => {
+        ci.events().onFrameSize(() => {});
+        ci.events().onFrame(() => {});
+        resizeObserver.disconnect();
+        window.removeEventListener("resize", onResize);
+    };
+}
+
+function initShaderProgram(gl: WebGLRenderingContext, vsSource: string, fsSource: string) {
+    const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+    const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+    const shaderProgram = gl.createProgram() as WebGLShader;
+    gl.attachShader(shaderProgram, vertexShader);
+    gl.attachShader(shaderProgram, fragmentShader);
+    gl.linkProgram(shaderProgram);
+
+    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+        throw new Error("Unable to initialize the shader program: " + gl.getProgramInfoLog(shaderProgram));
+    }
+
+    return shaderProgram;
+}
+
+function loadShader(gl: WebGLRenderingContext, shaderType: GLenum, source: string) {
+    const shader = gl.createShader(shaderType) as WebGLShader;
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        const info = gl.getShaderInfoLog(shader);
+        gl.deleteShader(shader);
+        throw new Error("An error occurred compiling the shaders: " + info);
+    }
+
+    return shader;
+}
+
+function initBuffers(gl: WebGLRenderingContext, vertexPosition: number, textureCoord: number) {
+    const positionBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    const positions = [
+        -1.0, -1.0, 0.0,
+        1.0, -1.0, 0.0,
+        1.0, 1.0, 0.0,
+        -1.0, -1.0, 0.0,
+        1.0, 1.0, 0.0,
+        -1.0, 1.0, 0.0,
+    ];
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+    gl.vertexAttribPointer(vertexPosition, 3, gl.FLOAT, false, 0, 0);
+    gl.enableVertexAttribArray(vertexPosition);
+
+    const textureCoordBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
+    const textureCoordinates = [
+        0.0, 1.0,
+        1.0, 1.0,
+        1.0, 0.0,
+        0.0, 1.0,
+        1.0, 0.0,
+        0.0, 0.0,
+    ];
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
+        gl.STATIC_DRAW);
+
+    gl.vertexAttribPointer(textureCoord, 2, gl.FLOAT, false, 0, 0);
+    gl.enableVertexAttribArray(textureCoord);
+}

package/src/window/dos/sound/audio-node.ts

@@ -0,0 +1,148 @@
+import { CommandInterface } from "emulators";
+
+class SamplesQueue {
+    private samplesQueue: Float32Array[] = [];
+
+    push(samples: Float32Array) {
+        this.samplesQueue.push(samples);
+    }
+
+    length() {
+        let total = 0;
+        for (const next of this.samplesQueue) {
+            total += next.length;
+        }
+        return total;
+    }
+
+    writeTo(dst: Float32Array, bufferSize: number) {
+        let writeIt = 0;
+        while (this.samplesQueue.length > 0) {
+            const src = this.samplesQueue[0];
+            const toRead = Math.min(bufferSize - writeIt, src.length);
+            if (toRead === src.length) {
+                dst.set(src, writeIt);
+                this.samplesQueue.shift();
+            } else {
+                dst.set(src.slice(0, toRead), writeIt);
+                this.samplesQueue[0] = src.slice(toRead);
+            }
+
+            writeIt += toRead;
+
+            if (writeIt === bufferSize) {
+                break;
+            }
+        }
+
+        if (writeIt < bufferSize) {
+            dst.fill(0, writeIt);
+        }
+    }
+}
+
+export function audioNode(ci: CommandInterface,
+                          bindVolumeFn?: (fn: (volume: number) => void) => () => void) {
+    const sampleRate = ci.soundFrequency();
+    const channels = 1;
+
+    if (sampleRate === 0) {
+        console.warn("Can't create audio node with sampleRate === 0, ingnoring");
+        return () => {};
+    }
+
+    let audioContext: AudioContext | null = null;
+
+    if (typeof AudioContext !== "undefined") {
+        audioContext = new AudioContext({
+            sampleRate,
+            latencyHint: "interactive",
+        });
+    } else if (typeof (window as any).webkitAudioContext !== "undefined") {
+        // eslint-disable-next-line new-cap
+        audioContext = new (window as any).webkitAudioContext({
+            sampleRate,
+            latencyHint: "interactive",
+        });
+    }
+
+    if (audioContext == null) {
+        return () => {};
+    }
+
+    const samplesQueue = new SamplesQueue();
+    const bufferSize = 2048;
+    const preBufferSize = 2048;
+
+    ci.events().onSoundPush((samples) => {
+        if (samplesQueue.length() < bufferSize * 2 + preBufferSize) {
+            samplesQueue.push(samples);
+        }
+    });
+
+    const audioNode = audioContext.createScriptProcessor(bufferSize, 0, channels);
+    let started = false;
+
+    const onQueueProcess = (event: AudioProcessingEvent) => {
+        const numFrames = event.outputBuffer.length;
+        const numChannels = event.outputBuffer.numberOfChannels;
+        const samplesCount = samplesQueue.length();
+
+        if (!started) {
+            started = samplesCount >= preBufferSize;
+        }
+
+        if (!started) {
+            return;
+        }
+
+        for (let channel = 0; channel < numChannels; channel++) {
+            const channelData = event.outputBuffer.getChannelData(channel);
+            samplesQueue.writeTo(channelData, numFrames);
+        }
+    };
+
+    audioNode.onaudioprocess = onQueueProcess;
+
+    const gainNode = audioContext.createGain();
+    gainNode.connect(audioContext.destination);
+    audioNode.connect(gainNode);
+
+    gainNode.gain.value = 1.0;
+
+    let unbindVolumeFn: () => void;
+    if (bindVolumeFn) {
+        unbindVolumeFn = bindVolumeFn((volume: number) => {
+            gainNode.gain.value = volume;
+        });
+    }
+
+    const resumeWebAudio = () => {
+        if (audioContext !== null && audioContext.state === "suspended") {
+            audioContext.resume();
+        }
+    };
+
+    document.addEventListener("pointerdown", resumeWebAudio, { once: true });
+    document.addEventListener("keydown", resumeWebAudio, { once: true });
+
+    return () => {
+        ci.events().onSoundPush(() => {});
+
+        if (audioContext !== null) {
+            audioNode.disconnect();
+            gainNode.disconnect();
+            audioContext
+                .close()
+                .catch(console.error);
+            audioContext = null;
+        }
+
+        if (unbindVolumeFn !== undefined) {
+            unbindVolumeFn();
+        }
+
+        document.removeEventListener("pointerdown", resumeWebAudio);
+        document.removeEventListener("keydown", resumeWebAudio);
+    };
+}

package/src/window/error-window.tsx

@@ -0,0 +1,9 @@
+import { useSelector } from "react-redux";
+import { Error } from "../components/error";
+import { State } from "../store";
+
+export function ErrorWindow() {
+    const error = useSelector((state: State) => state.dos.error);
+    return <Error error={error} />;
+}
+

package/src/window/loading-window.tsx

@@ -0,0 +1,54 @@
+import { useDispatch, useSelector } from "react-redux";
+import { formatSize, Loading } from "../components/loading";
+import { useT } from "../i18n";
+import { State } from "../store";
+import { authSlice } from "../store/auth";
+
+export function LoadingWindow() {
+    const t = useT();
+    const step = useSelector((state: State) => state.dos.step);
+    const received = useSelector((state: State) => state.storage.recived);
+    const total = useSelector((state: State) => state.storage.total);
+    const ready = useSelector((state: State) => state.storage.ready);
+
+    let head = t("loading");
+    let message = "100%";
+
+    switch (step) {
+        case "bnd-load": {
+            head = t("bundle_loading");
+            if (received > 0) {
+                message = `${formatSize(received)} / ${formatSize(total)}`;
+
+                if (total > 0) {
+                    message += ` (${Math.round(received * 1000 / total) / 10}%)`;
+                }
+            }
+        } break;
+        case "bnd-config": {
+            head = t("bundle_config");
+        }
+
+        default: {
+        }
+    }
+
+    return <div class="flex flex-col w-full h-full items-center justify-center">
+        <Loading head={head} message={message} />
+        {step === "bnd-load" && ready && <AccountNotReady />}
+    </div>;
+}
+
+function AccountNotReady() {
+    const t = useT();
+    const dispatch = useDispatch();
+    function skip() {
+        dispatch(authSlice.actions.ready());
+    }
+    return <>
+        <div class="mt-16 text-2xl">{t("loading_saves")}</div>
+        <div onClick={skip} class="self-center cursor-pointer underline mt-4 text-lg animate-pulse">
+            {t("account_not_ready")}
+        </div>
+    </>;
+}

package/src/window/prerun-window.tsx

@@ -0,0 +1,98 @@
+import { useDispatch, useSelector } from "react-redux";
+import { BackendSelect, RenderAspectSelect, RenderSelect } from "../components/dos-option-select";
+import { dosSlice } from "../store/dos";
+import { State } from "../store";
+import { HardwareCheckbox, MouseCapture, WorkerCheckbox } from "../components/dos-option-checkbox";
+import { MouseSensitiviySlider, VolumeSlider } from "../components/dos-option-slider";
+import { updateBundleConf } from "../load";
+import { useT } from "../i18n";
+import { dispatchLoginAction } from "../store/ui";
+
+export function PreRunWindow() {
+    const account = useSelector((state: State) => state.auth.account);
+    const emuVersion = useSelector((state: State) => state.dos.emuVersion);
+    const lang = useSelector((state: State) => state.i18n.lang);
+    const dispatch = useDispatch();
+    const t = useT();
+
+    function login() {
+        dispatchLoginAction(account, dispatch);
+    }
+
+    function openPremiumPage() {
+        window.open(lang === "ru" ?
+            "https://dos.zone/ru/blog/premium-subscription/" :
+            "https://dos.zone/blog/premium-subscription/", "_blank");
+    }
+
+    return <div class="pre-run-window">
+        <Play class="mb-8" />
+
+        {(account === null || !account.premium) &&
+                <div class="flex flex-row mb-4 -mt-4 items-center">
+                    <div class="btn btn-accent" onClick={login}>
+                        <svg xmlns="http://www.w3.org/2000/svg"
+                            fill="red"
+                            viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor"
+                            class="stroke-current flex-shrink-0 h-6 w-6">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597
+                                    1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75
+                                    3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
+                        </svg>
+                        {t("not_premium")}
+                    </div>
+                    <div class="ml-2 cursor-pointer" onClick={openPremiumPage}>
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                            stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025
+                                 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45
+                                 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                        </svg>
+                    </div>
+                </div>
+        }
+
+        <div class="flex flex-row flex-wrap justify-end">
+            <div class="flex flex-col items-end">
+                <BackendSelect />
+                <RenderSelect />
+            </div>
+            <div class="ml-10 flex flex-col items-end">
+                <HardwareCheckbox />
+                <WorkerCheckbox />
+                <RenderAspectSelect />
+                <MouseCapture />
+            </div>
+        </div>
+
+        <MouseSensitiviySlider class="mt-4 w-full max-w-sm" />
+        <VolumeSlider class="w-full max-w-sm" />
+
+        <div class="text-center mt-8">emu-version: <span class="text-ellipsis overflow-hidden">{emuVersion}</span></div>
+    </div>;
+}
+
+function Play(props: { class?: string }) {
+    const configChanged = useSelector((state: State) => state.editor.configChanged);
+    const dispatch = useDispatch();
+    function onPlay() {
+        if (configChanged) {
+            updateBundleConf()
+                .then(() => dispatch(dosSlice.actions.bndPlay()))
+                .catch((e) => dispatch(dosSlice.actions.bndError(e.message ?? "unexpected error")));
+        } else {
+            dispatch(dosSlice.actions.bndPlay());
+        }
+    }
+
+    return <div class={props.class + " cursor-pointer"} onClick={onPlay}>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+            stroke-width="1.5" stroke="currentColor" class="w-48 h-48 play-button">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15.91 11.672a.375.375 0 010
+                .656l-5.603 3.113a.375.375 0 01-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112z" />
+        </svg>
+    </div>;
+}