aotds/aotds-docks
1
0
Fork 0
Code Issues 28 Pull Requests Projects 2 Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Yanick Champoux 2020-07-27 16:19:08 -04:00
parent 13df19ccfa
commit aa6ea8b5dd
3 changed files with 137 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.svelte
View File

@ -84,8 +84,7 @@
<input type="button" value="add weapon" on:click={add_weapon}/>
{#each weapons as weapon (weapon.id)}
<Weapon {...weapon} on:change_weapon={change_weapon}
/>
<Weapon {weapon} id={weapon.id} cost={weapon.cost} mass={weapon.mass} />
{/each}

122
src/components/Weapon/Beam/index.svelte Normal file
View File

@ -0,0 +1,122 @@
<Field label="weapon class">
<select bind:value={weapon_class}>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</Field>
<Field label="arcs">
<select bind:value={nbr_arcs}>
{#each arc_options[weapon_class]||[] as nbr_arcs (nbr_arcs)}
<option>{nbr_arcs}</option>
{/each}
</select>
</Field>
<svg width="60px" height="60px">
{#each all_arcs as arc (arc)}
<Arc {arc} radius={30}
active={arcs.includes(arc)}
on:click={()=>click_arc(arc)}
/>
{/each}
<circle cx="30" cy="30" r="15" />
</svg>
<script>
import {getContext } from 'svelte';
import Arc from '../../Weapons/Arc.svelte';
import { weapon_cost_mass } from '~/dux/weapons/rules';
import fp from 'lodash/fp';
import _ from 'lodash';
import ShipItem from '~C/ShipItem';
import Field from '~C/Field';
import dux from '~/dux';
import { createEventDispatcher } from 'svelte';
const all_arcs = [ 'FS', 'F', 'FP', 'AP', 'A', 'AS' ];
export let weapon_type;
export let id;
export let weapon_class = 1;
export let arcs = ['F'];
export let ship_change = getContext('ship_change') || ( () => {} );
let arc_options = {
1: [ 6],
2: [ 3, 6 ],
3: [ 1, 2, 3, 4, 5, 6, 'broadside' ],
4: [ 1, 2, 3, 4, 5, 6, 'broadside' ]
};
let nbr_arcs = 6;
$: nbr_arcs = arc_options[weapon_class][0];
$: console.log({arcs,nbr_arcs})
$: if ( arcs.length !== nbr_arcs ) {
if( nbr_arcs === 'broadside' ) {
arcs = all_arcs.filter( arc => arc.length === 1 )
}
else{
let first_index = all_arcs.findIndex( arc => arcs[0] );
if( first_index === -1 ) first_index = 0;
const new_arcs = [];
_.range(nbr_arcs).forEach( i => {
new_arcs.push( all_arcs[first_index] )
first_index = ( first_index + 1 ) % all_arcs.length;
});
arcs = new_arcs;
}
}
const click_arc = (first_arc) => {
if( nbr_arcs === 'broadside' ) return;
let first_index = all_arcs.findIndex( arc => arc === first_arc );
const new_arcs = [];
_.range(nbr_arcs).forEach( i => {
new_arcs.push( all_arcs[first_index] );
first_index = ( first_index + 1 ) % all_arcs.length;
});
arcs = new_arcs;
}
let i = 1;
$: if(weapon_class) i = 1;
let cache = '';
$: cache = arcs.join(":");
const dispatch = createEventDispatcher();
$: dispatch( 'change', {
weapon_class,
arcs: cache.split(":"),
})
</script>
<style>
.arc {
display: flex;
flex-direction: column;
margin-right: 1em;
}
circle {
fill: white;
}
</style>

115
src/components/Weapon/index.svelte
View File

@ -8,36 +8,8 @@
</select>
</Field>
<Field label="weapon class">
<select bind:value={weapon_class}>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</Field>
<Field label="arcs">
<select bind:value={nbr_arcs}>
{#each arc_options[weapon_class]||[] as nbr_arcs (nbr_arcs)}
<option>{nbr_arcs}</option>
{/each}
</select>
</Field>
<svg width="60px" height="60px">
{#each all_arcs as arc (arc)}
<Arc {arc} radius={30}
active={arcs.includes(arc)}
on:click={()=>click_arc(arc)}
/>
{/each}
<circle cx="30" cy="30" r="15" />
</svg>
<svelte:component this={weapon_component[weapon_type]} {...weapon}
on:change={update}/>
</ShipItem>
<script>
@ -50,80 +22,29 @@
import { createEventDispatcher } from 'svelte';
import ShipItem from '~C/ShipItem';
import Field from '~C/Field';
import Beam from './Beam';
import dux from '~/dux';
const weapon_component = {
beam: Beam,
};
const all_arcs = [ 'FS', 'F', 'FP', 'AP', 'A', 'AS' ];
export let weapon_type;
export let weapon_class;
export let weapon = {};
export let id;
export let arcs = [];
export let cost;
export let mass;
export let ship_change = getContext('ship_change') || ( () => {} );
let arc_options = {
1: [ 6],
2: [ 3, 6 ],
3: [ 1, 2, 3, 4, 5, 6, 'broadside' ],
4: [ 1, 2, 3, 4, 5, 6, 'broadside' ]
};
let nbr_arcs = 6;
$: console.log(weapon_class);
$: nbr_arcs = arc_options[weapon_class][0];
$: console.log({arcs,nbr_arcs})
$: if ( arcs.length !== nbr_arcs ) {
if( nbr_arcs === 'broadside' ) {
arcs = all_arcs.filter( arc => arc.length === 1 )
}
else{
let first_index = all_arcs.findIndex( arc => arcs[0] );
if( first_index === -1 ) first_index = 0;
const new_arcs = [];
_.range(nbr_arcs).forEach( i => {
new_arcs.push( all_arcs[first_index] )
first_index = ( first_index + 1 ) % all_arcs.length;
});
arcs = new_arcs;
}
}
const click_arc = (first_arc) => {
if( nbr_arcs === 'broadside' ) return;
let first_index = all_arcs.findIndex( arc => arc === first_arc );
const new_arcs = [];
_.range(nbr_arcs).forEach( i => {
new_arcs.push( all_arcs[first_index] );
first_index = ( first_index + 1 ) % all_arcs.length;
});
arcs = new_arcs;
}
let i = 1;
$: if(weapon_class) i = 1;
let cache = '';
$: cache = arcs.join(":");
let weapon_type;
$: weapon_type = weapon.weapon_type;
const remove = () => ship_change( dux.actions.remove_weapon(id) );
$: ship_change( dux.actions.set_weapon({
id, weapon_class, weapon_type, arcs: cache.split(":")
const update = ({detail}) => {
ship_change( dux.actions.set_weapon({
id, weapon_type, ...detail
}) );
}
</script>
<style>
@ -182,20 +103,10 @@
grid-row: 4;
}
.arc {
display: flex;
flex-direction: column;
margin-right: 1em;
}
.add-weapon {
display: block;
}
circle {
fill: white;
}
.remove {
width: 1em;
flex: 0;