2022-04-10 21:42:53 +00:00
|
|
|
<div
|
|
|
|
use:movable={{
|
|
|
|
disabled: !isMovable,
|
|
|
|
}}
|
|
|
|
on:translate={({ detail: translate }) => {
|
|
|
|
ship.dispatch.setUITransform({ system: "screens", translate });
|
|
|
|
}}
|
|
|
|
style:transform={uiTransform}
|
|
|
|
>
|
|
|
|
{#each range(1, standard) as i}
|
2022-04-05 23:58:32 +00:00
|
|
|
<img src="{base}/icons/screen.svg" alt="screen" />
|
2020-07-29 23:17:25 +00:00
|
|
|
{/each}
|
2022-04-10 21:42:53 +00:00
|
|
|
{#each range(1, advanced) as i}
|
2022-04-05 23:58:32 +00:00
|
|
|
<img src="{base}/icons/screen-advanced.svg" alt="advanced screen" />
|
2020-07-29 23:17:25 +00:00
|
|
|
{/each}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
2022-04-10 21:42:53 +00:00
|
|
|
import { base } from "$app/paths";
|
|
|
|
import { range } from "$lib/utils.js";
|
|
|
|
import { getContext } from "svelte";
|
|
|
|
|
|
|
|
import { movable } from "../../MainSystems/movable.js";
|
2020-07-29 23:17:25 +00:00
|
|
|
|
|
|
|
export let standard = 0;
|
|
|
|
export let advanced = 0;
|
2022-04-10 21:42:53 +00:00
|
|
|
export let uiTransform = "";
|
|
|
|
export let isMovable = false;
|
|
|
|
|
|
|
|
const ship = getContext("ship");
|
2020-07-29 23:17:25 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
img {
|
|
|
|
width: 1em;
|
|
|
|
}
|
|
|
|
div {
|
|
|
|
display: flex;
|
|
|
|
gap: 0.5em;
|
|
|
|
}
|
|
|
|
</style>
|