Merge branch 'docks62-heavy-missiles'
This commit is contained in:
commit
70a1d06ed4
@ -0,0 +1,72 @@
|
||||
<span>heavy missile</span>
|
||||
|
||||
<div class="arcs">
|
||||
<Arcs
|
||||
size={48}
|
||||
selected={arcs}
|
||||
on:clickArc={({ detail }) => setFirstArc(detail)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label class="switch">
|
||||
<input type="checkbox" bind:checked={extended}/>
|
||||
<span>extended range</span>
|
||||
</label>
|
||||
|
||||
<label class="switch">
|
||||
<input type="checkbox" bind:checked={multiStage}/>
|
||||
<span>multi-stage</span>
|
||||
</label>
|
||||
|
||||
<script lang="ts">
|
||||
import u from "@yanick/updeep-remeda";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import memoize from "memoize-one";
|
||||
|
||||
import Arcs from "../Arcs.svelte";
|
||||
import {
|
||||
weaponTypes,
|
||||
arcs as allArcs,
|
||||
} from "$lib/store/ship/weaponry/rules.ts";
|
||||
|
||||
export let arcs = ["F", "FS", "FP"];
|
||||
|
||||
export let extended = false;
|
||||
export let multiStage = false;
|
||||
|
||||
|
||||
const nbrArcs = 3;
|
||||
|
||||
let firstArc = allArcs[0];
|
||||
const setFirstArc = (a) => (firstArc = a);
|
||||
|
||||
$: arcs = setArcs(firstArc, nbrArcs);
|
||||
|
||||
function setArcs(firstArc, nbrArcs) {
|
||||
let first_index = allArcs.findIndex((arc) => arc === firstArc);
|
||||
if (first_index === -1) first_index = 0;
|
||||
|
||||
return Array.from({ length: nbrArcs }).map(
|
||||
(_dummy, i) => allArcs[(first_index + i) % allArcs.length]
|
||||
);
|
||||
}
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
const memoChange = memoize((extended,multiStage, ...arcs) =>
|
||||
dispatch("change", {
|
||||
extended,multiStage,
|
||||
arcs,
|
||||
})
|
||||
);
|
||||
|
||||
$: memoChange(extended,multiStage, ...arcs);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.arcs {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
label span {
|
||||
padding-left: 1em; }
|
||||
</style>
|
@ -19,6 +19,7 @@
|
||||
import Needle from "./Needle.svelte";
|
||||
import Graser from "./Graser/index.svelte";
|
||||
import Torpedo from "./Torpedo/index.svelte";
|
||||
import Missile from "./HeavyMissile/index.svelte";
|
||||
|
||||
const component = {
|
||||
beam: Beam,
|
||||
@ -28,6 +29,7 @@
|
||||
needle: Needle,
|
||||
graser: Graser,
|
||||
torpedo: Torpedo,
|
||||
heavyMissile: Missile,
|
||||
};
|
||||
|
||||
export let reqs = {};
|
||||
|
@ -35,6 +35,16 @@ export const weaponTypes = [
|
||||
reqs: { mass: 2, cost: 6 },
|
||||
initial: { arc: "F" },
|
||||
},
|
||||
{
|
||||
name: "heavy missile",
|
||||
type: "missile",
|
||||
reqs: missileReqs,
|
||||
initial: {
|
||||
arcs: ["FS", "F", "FP"],
|
||||
extended: false,
|
||||
multiState: false,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const weaponsSlice = createSlice({
|
||||
|
@ -27,6 +27,13 @@ type Scattergun = { type: "scattergun" };
|
||||
|
||||
type Needle = { type: "needle"; arc: Arc };
|
||||
|
||||
type HeavyMissile = {
|
||||
type: "heavyMissile";
|
||||
arcs: Arc[];
|
||||
extended: boolean;
|
||||
multiStage: boolean;
|
||||
};
|
||||
|
||||
type Graser = {
|
||||
type: "graser";
|
||||
weaponClass: 1 | 2 | 3;
|
||||
@ -46,7 +53,8 @@ export type Weapon =
|
||||
| Scattergun
|
||||
| Needle
|
||||
| Graser
|
||||
| Torpedo;
|
||||
| Torpedo
|
||||
| HeavyMissile;
|
||||
|
||||
export const weaponTypes = [
|
||||
{
|
||||
@ -120,6 +128,17 @@ export const weaponTypes = [
|
||||
reqs: { mass: 2, cost: 6 },
|
||||
initial: { arc: "F", type: "needle" },
|
||||
},
|
||||
{
|
||||
name: "heavy missile",
|
||||
type: "heavyMissile",
|
||||
reqs: missileReqs,
|
||||
initial: {
|
||||
arcs: ["FP", "F", "FS"],
|
||||
extended: false,
|
||||
multiStage: false,
|
||||
type: "heavyMissile",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export function weaponReqs(weapon): Reqs {
|
||||
@ -213,6 +232,21 @@ function graserReqs({ weaponClass, arcs }: Graser) {
|
||||
};
|
||||
}
|
||||
|
||||
function missileReqs({ extended, multiStage }: HeavyMissile): Reqs {
|
||||
let mass = 2;
|
||||
let cost = 6;
|
||||
if (extended) {
|
||||
mass += 1;
|
||||
cost += 3;
|
||||
}
|
||||
if (multiStage) {
|
||||
mass += 2;
|
||||
cost *= 2;
|
||||
}
|
||||
|
||||
return { cost, mass };
|
||||
}
|
||||
|
||||
function torpedoReqs({ weaponClass, arcs }: Torpedo): Reqs {
|
||||
let mass: number = 4;
|
||||
|
||||
|
@ -0,0 +1,52 @@
|
||||
<div class="heavyMissile">
|
||||
<Arcs selected={arcs} size={40}>
|
||||
<image href="/icons/heavy-missile.svg" width="10" x="16" y="7" />
|
||||
</Arcs>
|
||||
<div>
|
||||
{#if extended}
|
||||
<div>extended range</div>
|
||||
{/if}
|
||||
{#if multiStage}
|
||||
<div>multi-stage</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import Arcs from "$lib/components/ShipEdit/Weaponry/Weapon/Arcs.svelte";
|
||||
export let arcs = [];
|
||||
export let extended = false;
|
||||
export let multiStage = false;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.torpedo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.weaponClass {
|
||||
text-align: center;
|
||||
background-color: black;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
}
|
||||
div {
|
||||
margin: 0px 0.5rem;
|
||||
}
|
||||
div :global(path.arc) {
|
||||
fill: none;
|
||||
}
|
||||
div :global(path.active) {
|
||||
fill: black;
|
||||
}
|
||||
div :global(path.active:hover) {
|
||||
fill: black;
|
||||
}
|
||||
text {
|
||||
text-anchor: middle;
|
||||
dominant-baseline: central;
|
||||
font-size: var(--font-scale-10);
|
||||
}
|
||||
</style>
|
@ -0,0 +1,14 @@
|
||||
import { render } from "@testing-library/svelte";
|
||||
import HeavyMissile from "./index.svelte";
|
||||
|
||||
test("basic", () => {
|
||||
const { queryByText } = render(HeavyMissile, {
|
||||
props: {
|
||||
extended: true,
|
||||
multiStage: false,
|
||||
},
|
||||
});
|
||||
|
||||
expect(queryByText("extended range")).toBeTruthy();
|
||||
expect(queryByText("multi-stage")).toBeFalsy();
|
||||
});
|
@ -0,0 +1,18 @@
|
||||
<div>
|
||||
{#each heavyMissiles as w}
|
||||
<HeavyMissile {...w.specs} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import HeavyMissile from "./HeavyMissile/index.svelte";
|
||||
|
||||
export let heavyMissiles = [];
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.beam-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
@ -5,6 +5,7 @@ import Scattergun from "./Scattergun.svelte";
|
||||
import Needlebeam from "./Needlebeam.svelte";
|
||||
import Graser from "./Graser/index.svelte";
|
||||
import Torpedo from "./Torpedo/index.svelte";
|
||||
import HeavyMissile from "./HeavyMissile/index.svelte";
|
||||
|
||||
export default {
|
||||
torpedo: Torpedo,
|
||||
@ -14,4 +15,5 @@ export default {
|
||||
pds: PDS,
|
||||
scattergun: Scattergun,
|
||||
needle: Needlebeam,
|
||||
heavyMissile: HeavyMissile,
|
||||
};
|
||||
|
@ -5,6 +5,8 @@
|
||||
<div class="print-output">
|
||||
<Identification {...identification} />
|
||||
|
||||
<HeavyMissiles {heavyMissiles} />
|
||||
|
||||
<Beams {beams} />
|
||||
|
||||
<Weapons {weapons} />
|
||||
@ -49,6 +51,7 @@
|
||||
import Cargo from "./Cargo.svelte";
|
||||
import PDS from "./Weapons/PDS.svelte";
|
||||
import Beams from "./Weapons/Beams.svelte";
|
||||
import HeavyMissiles from "./Weapons/HeavyMissiles.svelte";
|
||||
|
||||
export let identification = {};
|
||||
export let propulsion = {};
|
||||
@ -62,7 +65,9 @@
|
||||
$: weapons = weaponry?.weapons ?? [];
|
||||
$: weapons = u.reject(
|
||||
weapons,
|
||||
u.matches({ specs: { type: (t) => ["pds", "beam"].includes(t) } })
|
||||
u.matches({
|
||||
specs: { type: (t) => ["pds", "beam", "heavyMissiles"].includes(t) },
|
||||
})
|
||||
);
|
||||
|
||||
$: pds = (weaponry?.weapons ?? []).filter(
|
||||
@ -71,6 +76,9 @@
|
||||
$: beams = (weaponry?.weapons ?? []).filter(
|
||||
u.matches({ specs: { type: "beam" } })
|
||||
);
|
||||
$: heavyMissiles = (weaponry?.weapons ?? []).filter(
|
||||
u.matches({ specs: { type: "heavyMissiles" } })
|
||||
);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
67
static/icons/heavy-missile.svg
Normal file
67
static/icons/heavy-missile.svg
Normal file
@ -0,0 +1,67 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="140"
|
||||
height="360"
|
||||
viewBox="0 0 37.041667 95.250002"
|
||||
version="1.1"
|
||||
id="svg833"
|
||||
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
|
||||
sodipodi:docname="heavy-missile.svg">
|
||||
<defs
|
||||
id="defs827" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="1.4"
|
||||
inkscape:cx="86.021962"
|
||||
inkscape:cy="138.16276"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
units="px"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="957"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="34"
|
||||
inkscape:window-maximized="1" />
|
||||
<metadata
|
||||
id="metadata830">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-73.195326,-47.896679)">
|
||||
<polygon
|
||||
transform="matrix(0.26458333,0,0,0.26458333,-35.151785,9.9516529)"
|
||||
points="480,156.4 449.7,204.3 449.7,399.2 419.4,454.1 463.8,454.1 463.8,497.7 496.2,497.7 496.2,454.1 540.6,454.1 510.3,399.2 510.3,204.3 "
|
||||
id="polygon4"
|
||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 2.1 KiB |
Loading…
Reference in New Issue
Block a user