poi-plugin-lbas-bis 0.1.0

package/src/ui/OptimizerPanel.js

@@ -0,0 +1,149 @@
+'use strict';
+
+const React = require('react');
+
+const h = React.createElement;
+
+function OptimizerPanel(props) {
+  const {
+    candidateMode,
+    equipmentCount,
+    theoreticalCount,
+    messages,
+    results,
+    onCandidateModeChange,
+    onOptimize,
+    onImportPlan,
+    t,
+    styles,
+  } = props;
+
+  return h(
+    'section',
+    { style: styles.optimizerPanel },
+    h('h3', { style: styles.sectionTitle }, t('optimizerTitle')),
+    h(
+      'div',
+      { style: styles.optimizerControls },
+      h(
+        'label',
+        { style: styles.radioLabel },
+        h('input', {
+          type: 'radio',
+          name: 'candidateMode',
+          value: 'owned',
+          checked: candidateMode !== 'theoretical',
+          onChange: () => onCandidateModeChange('owned'),
+        }),
+        t('ownedOnly'),
+      ),
+      h(
+        'label',
+        { style: styles.radioLabel },
+        h('input', {
+          type: 'radio',
+          name: 'candidateMode',
+          value: 'theoretical',
+          checked: candidateMode === 'theoretical',
+          onChange: () => onCandidateModeChange('theoretical'),
+        }),
+        t('includeMissing'),
+      ),
+      h('button', { type: 'button', onClick: onOptimize, style: styles.primaryButton }, t('optimize')),
+      h('span', { style: styles.meta }, `${t('availablePlanes')}: ${equipmentCount} / ${t('candidatePlanes')}: ${theoreticalCount}`),
+    ),
+    renderMessages(messages, styles),
+    renderResults({ results, onImportPlan, t, styles }),
+  );
+}
+
+function renderMessages(messages, styles) {
+  if (!messages.length) {
+    return null;
+  }
+  return h(
+    'ul',
+    { style: styles.messages },
+    messages.map((message) => h('li', { key: message }, message)),
+  );
+}
+
+function renderResults({ results, onImportPlan, t, styles }) {
+  if (!results.length) {
+    return h(
+      'table',
+      { style: styles.table },
+      h(
+        'thead',
+        null,
+        h(
+          'tr',
+          null,
+          h('th', { style: styles.th }, t('plan')),
+          h('th', { style: styles.th }, t('sixWaveState')),
+          h('th', { style: styles.th }, t('damagePower')),
+          h('th', { style: styles.th }, t('missingEquipment')),
+          h('th', { style: styles.th }, t('importToSimulator')),
+        ),
+      ),
+      h('tbody', null, h('tr', null, h('td', { colSpan: 5, style: styles.emptyCell }, t('noResult')))),
+    );
+  }
+
+  return h(
+    'div',
+    { style: styles.results },
+    results.map((plan, planIndex) =>
+      h(
+        'section',
+        { key: `plan-${planIndex}`, style: styles.plan },
+        h(
+          'div',
+          { style: styles.planHeader },
+          h('strong', null, `${t('plan')} ${planIndex + 1}`),
+          h('span', null, `${t('damagePower')} ${plan.totalDamagePower}`),
+          h('span', null, `${t('worstMargin')} ${plan.worstMargin}`),
+          h('button', { type: 'button', onClick: () => onImportPlan(plan), style: styles.button }, t('importToSimulator')),
+        ),
+        h('div', { style: styles.planSummary }, formatMissing(plan.missingEquipment, t)),
+        h(
+          'div',
+          { style: styles.waves },
+          plan.waves.map((wave) =>
+            h(
+              'span',
+              { key: wave.waveIndex, style: styles.wave },
+              `${format(t('wave'), { index: wave.waveIndex + 1 })}: ${t(wave.state.key)} / ${t('targetState')} ${t(wave.targetState)} / ${t('airPower')} ${wave.airPower}`,
+            ),
+          ),
+        ),
+        ...plan.bases.map((base, baseIndex) =>
+          h(
+            'ol',
+            { key: `base-${baseIndex}`, style: styles.loadout },
+            base.loadout.map((item) =>
+              h(
+                'li',
+                { key: item.instanceId, style: item.available === false ? styles.missingItem : null },
+                `${item.name} #${item.instanceId} · ${t('airPower')} ${item.antiAir} · ${t('radius')} ${item.radius}`,
+              ),
+            ),
+          ),
+        ),
+      ),
+    ),
+  );
+}
+
+function formatMissing(missingEquipment, t) {
+  if (!missingEquipment || !missingEquipment.length) {
+    return `${t('missingEquipment')}: -`;
+  }
+  return `${t('missingEquipment')}: ${missingEquipment.map((item) => `${item.name} x${item.count}`).join(', ')}`;
+}
+
+function format(template, values) {
+  return String(template).replace(/\{\{(\w+)\}\}/g, (_, key) => values[key] ?? '');
+}
+
+module.exports = OptimizerPanel;

package/src/ui/SimulatorPanel.js

@@ -0,0 +1,95 @@
+'use strict';
+
+const React = require('react');
+const BaseTable = require('./BaseTable');
+const EnemyPanel = require('./EnemyPanel');
+const WaveStatusTable = require('./WaveStatusTable');
+
+const h = React.createElement;
+
+function SimulatorPanel(props) {
+  const {
+    simulator,
+    summary,
+    equipment,
+    onBaseCountChange,
+    onTargetRadiusChange,
+    onEnemyAirChange,
+    onSlotPlaneChange,
+    onSlotLockChange,
+    onWaveTargetChange,
+    onClear,
+    t,
+    styles,
+  } = props;
+
+  return h(
+    'section',
+    { style: styles.simulatorPanel },
+    h('h2', { style: styles.title }, t('simulatorTitle')),
+    h(
+      'div',
+      { style: styles.simulatorGrid },
+      h(
+        'div',
+        null,
+        h(
+          'div',
+          { style: styles.toolbar },
+          h(
+            'label',
+            { style: styles.fieldInline },
+            h('span', null, t('targetRadius')),
+            h('input', {
+              type: 'number',
+              min: 1,
+              value: simulator.targetRadius,
+              onChange: (event) => onTargetRadiusChange(Number(event.target.value)),
+              style: styles.numberInput,
+            }),
+          ),
+          h(
+            'label',
+            { style: styles.fieldInline },
+            h('span', null, t('baseCount')),
+            h(
+              'select',
+              {
+                value: simulator.baseCount,
+                onChange: (event) => onBaseCountChange(Number(event.target.value)),
+                style: styles.smallSelect,
+              },
+              [1, 2, 3].map((count) => h('option', { key: count, value: count }, count)),
+            ),
+          ),
+          h('span', { style: styles.meta }, `${t('displayWaves')}: ${simulator.baseCount * 2}`),
+          h('button', { type: 'button', onClick: onClear, style: styles.button }, t('clearComposition')),
+        ),
+        h(BaseTable, {
+          bases: simulator.bases,
+          equipment,
+          summaries: summary.bases,
+          onSlotPlaneChange,
+          onSlotLockChange,
+          t,
+          styles,
+        }),
+        h(WaveStatusTable, {
+          waves: summary.waves,
+          onWaveTargetChange,
+          t,
+          styles,
+        }),
+      ),
+      h(EnemyPanel, {
+        enemy: simulator.enemy,
+        lines: summary.enemyAirLines,
+        onEnemyAirChange,
+        t,
+        styles,
+      }),
+    ),
+  );
+}
+
+module.exports = SimulatorPanel;

package/src/ui/WaveStatusTable.js

@@ -0,0 +1,41 @@
+'use strict';
+
+const React = require('react');
+
+const h = React.createElement;
+const STATE_OPTIONS = ['denial', 'parity', 'superiority', 'supremacy'];
+
+function WaveStatusTable(props) {
+  const { waves, onWaveTargetChange, t, styles } = props;
+  return h(
+    'div',
+    { style: styles.wavePanel },
+    h(
+      'div',
+      { style: styles.waveList },
+      waves.map((wave) =>
+        h(
+          'label',
+          { key: `wave-${wave.waveIndex}`, style: styles.waveField },
+          h('span', null, format(t('wave'), { index: wave.waveIndex + 1 })),
+          h(
+            'select',
+            {
+              value: wave.targetState,
+              onChange: (event) => onWaveTargetChange(wave.waveIndex, event.target.value),
+              style: styles.smallSelect,
+            },
+            STATE_OPTIONS.map((option) => h('option', { key: option, value: option }, t(option))),
+          ),
+          h('strong', { style: wave.fulfilled ? styles.goodState : styles.badState }, t(wave.state.key)),
+        ),
+      ),
+    ),
+  );
+}
+
+function format(template, values) {
+  return String(template).replace(/\{\{(\w+)\}\}/g, (_, key) => values[key] ?? '');
+}
+
+module.exports = WaveStatusTable;