@jjlmoya/utils-games-development 1.63.0 → 1.64.0

package/src/tool/damageFormulaLab/damage-formula-lab.css

@@ -0,0 +1,644 @@
+:root {
+  --n-dl-ink: #282731;
+  --n-dl-muted: #6f6b76;
+  --n-dl-paper: #f7f4ee;
+  --n-dl-paper-soft: #eeebe4;
+  --n-dl-white: #fff;
+  --n-dl-line: #d9d4ca;
+  --n-dl-a: #f06449;
+  --n-dl-a-soft: #ffd8cb;
+  --n-dl-b: #5368d9;
+  --n-dl-b-soft: #dce2ff;
+  --n-dl-ok: #43836d;
+  --n-dl-warn: #b86435;
+  --n-dl-error: #b43e52;
+  --n-dl-shadow: rgba(52, 45, 64, 0.1);
+  --n-dl-wash: rgba(240, 100, 73, 0.1);
+  --n-dl-grid: rgba(40, 39, 49, 0.1);
+}
+
+.theme-dark {
+  --n-dl-ink: #f5f0e7;
+  --n-dl-muted: #b6b0bd;
+  --n-dl-paper: #1b1b22;
+  --n-dl-paper-soft: #25252e;
+  --n-dl-white: #111117;
+  --n-dl-line: #3f3d48;
+  --n-dl-a: #ff8065;
+  --n-dl-a-soft: #5b2e29;
+  --n-dl-b: #92a0ff;
+  --n-dl-b-soft: #303966;
+  --n-dl-ok: #76bca3;
+  --n-dl-warn: #eca071;
+  --n-dl-error: #ef8291;
+  --n-dl-shadow: rgba(0, 0, 0, 0.24);
+  --n-dl-wash: rgba(240, 100, 73, 0.14);
+  --n-dl-grid: rgba(255, 255, 255, 0.1);
+}
+
+.damage-lab {
+  overflow: hidden;
+  color: var(--n-dl-ink);
+  background: var(--n-dl-paper);
+  border: 1px solid var(--n-dl-line);
+  border-radius: 1.75rem;
+  box-shadow: 0 1.5rem 5rem var(--n-dl-shadow);
+}
+
+.damage-lab button,
+.damage-lab input {
+  font: inherit;
+}
+
+.damage-lab button {
+  color: inherit;
+  cursor: pointer;
+}
+
+.damage-lab-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+  color: var(--n-dl-ink);
+  background: var(--n-dl-paper-soft);
+  border-bottom: 1px solid var(--n-dl-line);
+}
+
+.damage-lab-header p {
+  margin: 0;
+  max-width: 62ch;
+  font-weight: 700;
+}
+
+.damage-lab-header span {
+  font-size: 0.8rem;
+  color: var(--n-dl-muted);
+}
+
+.damage-lab-composer,
+.damage-lab-tuning,
+.damage-lab-result,
+.damage-lab-pressure,
+.damage-lab-diagnostics,
+.damage-lab-exports {
+  padding: clamp(1.15rem, 3vw, 2.25rem);
+}
+
+.damage-lab-heading,
+.damage-lab-result-heading,
+.damage-lab-curve-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.damage-lab h2,
+.damage-lab h3,
+.damage-lab p {
+  margin-top: 0;
+}
+
+.damage-lab h2 {
+  margin-bottom: 0;
+  font-size: clamp(1.05rem, 2vw, 1.4rem);
+  font-weight: 650;
+  letter-spacing: -0.025em;
+}
+
+.damage-lab-presets,
+.damage-lab-scenarios,
+.damage-lab-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.damage-lab-presets button,
+.damage-lab-scenarios button {
+  min-height: 2.3rem;
+  padding: 0.45rem 0.75rem;
+  color: var(--n-dl-muted);
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid transparent;
+}
+
+.damage-lab-presets button:hover,
+.damage-lab-scenarios button:hover {
+  color: var(--n-dl-ink);
+  border-color: var(--n-dl-ink);
+}
+
+.damage-lab-formulas {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: clamp(1rem, 3vw, 2rem);
+  margin-top: 1.25rem;
+}
+
+.damage-lab-formula {
+  display: grid;
+  gap: 0.6rem;
+}
+
+.damage-lab-formula > span {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+
+.damage-lab-formula i {
+  width: 0.55rem;
+  height: 0.55rem;
+  background: var(--n-dl-a);
+  border-radius: 50%;
+}
+
+.damage-lab-formula-b i {
+  background: var(--n-dl-b);
+}
+
+.damage-lab-formula input {
+  width: 100%;
+  min-height: 3.5rem;
+  box-sizing: border-box;
+  padding: 0.75rem 0;
+  color: var(--n-dl-ink);
+  background: transparent;
+  border: 0;
+  border-bottom: 2px solid var(--n-dl-line);
+  border-radius: 0;
+  outline: 0;
+}
+
+.damage-lab-formula-a input:focus {
+  border-color: var(--n-dl-a);
+}
+
+.damage-lab-formula-b input:focus {
+  border-color: var(--n-dl-b);
+}
+
+.damage-lab-language,
+.damage-lab-advanced {
+  margin-top: 1.2rem;
+}
+
+.damage-lab-language summary,
+.damage-lab-advanced summary {
+  width: fit-content;
+  color: var(--n-dl-muted);
+  cursor: pointer;
+  font-size: 0.78rem;
+}
+
+.damage-lab-language p {
+  margin: 0.75rem 0 0;
+  color: var(--n-dl-muted);
+  font-size: 0.75rem;
+  line-height: 1.6;
+}
+
+.damage-lab-tuning {
+  background: var(--n-dl-paper-soft);
+}
+
+.damage-lab-core-inputs,
+.damage-lab-advanced-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+.damage-lab-core-inputs label,
+.damage-lab-advanced-grid label {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.damage-lab-core-inputs span,
+.damage-lab-advanced-grid span {
+  color: var(--n-dl-muted);
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+
+.damage-lab-core-inputs input,
+.damage-lab-advanced-grid input {
+  width: 100%;
+  min-height: 3rem;
+  box-sizing: border-box;
+  padding: 0.65rem 0.75rem;
+  color: var(--n-dl-ink);
+  font-size: 1.05rem;
+  font-variant-numeric: tabular-nums;
+  background: var(--n-dl-white);
+  border: 1px solid var(--n-dl-line);
+  border-radius: 0.65rem;
+}
+
+.damage-lab-core-inputs input:focus,
+.damage-lab-advanced-grid input:focus {
+  border-color: var(--n-dl-b);
+  outline: 0.2rem solid var(--n-dl-b-soft);
+}
+
+.damage-lab-advanced {
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--n-dl-line);
+}
+
+.damage-lab-advanced-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.damage-lab-choice {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin: 1rem 0 0;
+  padding: 0;
+  border: 0;
+}
+
+.damage-lab-choice legend {
+  width: 100%;
+  margin-bottom: 0.25rem;
+  color: var(--n-dl-muted);
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+
+.damage-lab-choice button {
+  min-height: 2.4rem;
+  padding: 0.45rem 0.75rem;
+  background: transparent;
+  border: 1px solid var(--n-dl-line);
+  border-radius: 0.45rem;
+}
+
+.damage-lab-choice button[data-active="true"] {
+  color: var(--n-dl-white);
+  background: var(--n-dl-ink);
+  border-color: var(--n-dl-ink);
+}
+
+.damage-lab-result {
+  position: relative;
+  overflow: hidden;
+  background: var(--n-dl-white);
+}
+
+.damage-lab-result::before {
+  position: absolute;
+  top: -10rem;
+  left: 50%;
+  width: 32rem;
+  height: 24rem;
+  background: radial-gradient(ellipse, var(--n-dl-wash), transparent 68%);
+  transform: translateX(-50%);
+  content: "";
+  pointer-events: none;
+}
+
+.damage-lab-result > * {
+  position: relative;
+}
+
+.damage-lab-result-heading span {
+  color: var(--n-dl-muted);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.damage-lab-gap {
+  display: grid;
+  text-align: right;
+}
+
+.damage-lab-gap small {
+  color: var(--n-dl-muted);
+}
+
+.damage-lab-gap strong {
+  font-size: 1.6rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.damage-lab-totals {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: clamp(2rem, 8vw, 7rem);
+  max-width: 46rem;
+  margin: 0.5rem auto 0;
+}
+
+.damage-lab-totals article:last-child {
+  text-align: right;
+}
+
+.damage-lab-totals article > span,
+.damage-lab-totals article > small {
+  display: block;
+  color: var(--n-dl-muted);
+}
+
+.damage-lab-totals article > strong {
+  display: block;
+  min-height: 1.15em;
+  color: var(--n-dl-a);
+  font-size: clamp(3.5rem, 10vw, 7rem);
+  font-weight: 520;
+  line-height: 1;
+  letter-spacing: -0.08em;
+  font-variant-numeric: tabular-nums;
+}
+
+.damage-lab-totals article:last-child > strong {
+  color: var(--n-dl-b);
+}
+
+.damage-lab-totals dl {
+  display: flex;
+  gap: 1.2rem;
+  margin: 1rem 0 0;
+}
+
+.damage-lab-totals article:last-child dl {
+  justify-content: flex-end;
+}
+
+.damage-lab-totals dl div {
+  display: grid;
+  gap: 0.15rem;
+}
+
+.damage-lab-totals dt {
+  color: var(--n-dl-muted);
+  font-size: 0.75rem;
+}
+
+.damage-lab-totals dd {
+  margin: 0;
+  font-weight: 750;
+  white-space: nowrap;
+}
+
+.damage-lab-curve-heading {
+  margin-top: 2rem;
+}
+
+.damage-lab-curve-heading h3 {
+  margin-bottom: 0.25rem;
+}
+
+.damage-lab-curve-heading p {
+  max-width: 36rem;
+  margin-bottom: 0;
+  color: var(--n-dl-muted);
+  font-size: 0.75rem;
+}
+
+.damage-lab-curve-heading > span {
+  color: var(--n-dl-muted);
+  white-space: nowrap;
+}
+
+.damage-lab-chart {
+  width: 100%;
+  height: 9rem;
+  margin-top: 0.5rem;
+  overflow: visible;
+}
+
+.damage-lab-guide {
+  fill: none;
+  stroke: var(--n-dl-grid);
+  stroke-width: 0.4;
+  vector-effect: non-scaling-stroke;
+}
+
+.damage-lab-curve {
+  fill: none;
+  stroke-width: 2.5;
+  vector-effect: non-scaling-stroke;
+}
+
+.damage-lab-curve-a {
+  stroke: var(--n-dl-a);
+}
+
+.damage-lab-curve-b {
+  stroke: var(--n-dl-b);
+  stroke-dasharray: 6 5;
+}
+
+.damage-lab-legend {
+  display: flex;
+  gap: 1.25rem;
+  color: var(--n-dl-muted);
+  font-size: 0.78rem;
+}
+
+.damage-lab-legend span::before {
+  display: inline-block;
+  width: 1.5rem;
+  height: 0.15rem;
+  margin-right: 0.4rem;
+  background: var(--n-dl-a);
+  vertical-align: middle;
+  content: "";
+}
+
+.damage-lab-legend span:last-child::before {
+  background: var(--n-dl-b);
+}
+
+.damage-lab-notes {
+  display: grid;
+  grid-template-columns: 1.2fr 0.8fr;
+  border-top: 1px solid var(--n-dl-line);
+}
+
+.damage-lab-secondary,
+.damage-lab-export-panel {
+  border-top: 1px solid var(--n-dl-line);
+}
+
+.damage-lab-secondary > summary,
+.damage-lab-export-panel > summary {
+  padding: 1rem clamp(1.15rem, 3vw, 2.25rem);
+  color: var(--n-dl-muted);
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+
+.damage-lab-secondary[open] > summary,
+.damage-lab-export-panel[open] > summary {
+  color: var(--n-dl-ink);
+  border-bottom: 1px solid var(--n-dl-line);
+}
+
+.damage-lab-pressure {
+  border-right: 1px solid var(--n-dl-line);
+}
+
+.damage-lab-pressure > p,
+.damage-lab-diagnostics > p,
+.damage-lab-exports p {
+  color: var(--n-dl-muted);
+  line-height: 1.5;
+}
+
+.damage-lab-axis,
+.damage-lab-pressure > small {
+  display: block;
+  margin-block: 0.6rem;
+  color: var(--n-dl-muted);
+  font-size: 0.75rem;
+  text-align: right;
+}
+
+.damage-lab-heatmap {
+  display: grid;
+  grid-template-columns: repeat(9, minmax(1.8rem, 1fr));
+  gap: 0.3rem;
+}
+
+.damage-lab-heat-cell {
+  display: grid;
+  place-items: center;
+  min-height: 2.7rem;
+  color: var(--n-dl-ink);
+  font-size: 0.75rem;
+  font-weight: 750;
+  background: color-mix(
+    in srgb,
+    var(--n-dl-a) calc(var(--damage-intensity) * 72%),
+    var(--n-dl-paper-soft)
+  );
+  border-radius: 0.4rem;
+}
+
+.damage-lab-diagnostics ul {
+  display: grid;
+  gap: 0.7rem;
+  padding: 0;
+  list-style: none;
+}
+
+.damage-lab-diagnostics li {
+  padding-left: 0.85rem;
+  line-height: 1.45;
+  border-left: 2px solid var(--n-dl-ok);
+}
+
+.damage-lab-diagnostics ul[data-state="warning"] li {
+  border-color: var(--n-dl-warn);
+}
+
+.damage-lab-diagnostics ul[data-state="error"] li {
+  border-color: var(--n-dl-error);
+}
+
+.damage-lab-exports {
+  display: grid;
+  grid-template-columns: minmax(14rem, 1fr) 2fr;
+  gap: 2rem;
+  background: var(--n-dl-paper-soft);
+}
+
+.damage-lab-actions {
+  align-content: start;
+  justify-content: flex-end;
+}
+
+.damage-lab-actions button,
+.damage-lab-actions label {
+  position: relative;
+  min-height: 2.5rem;
+  padding: 0.5rem 0.75rem;
+  color: var(--n-dl-muted);
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--n-dl-line);
+  cursor: pointer;
+}
+
+.damage-lab-actions button:hover,
+.damage-lab-actions label:hover {
+  color: var(--n-dl-ink);
+  border-color: var(--n-dl-ink);
+}
+
+.damage-lab-actions input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
+
+.damage-lab-status {
+  grid-column: 1 / -1;
+  min-height: 1.4rem;
+  margin: 0;
+  font-weight: 700;
+}
+
+@media (max-width: 800px) {
+  .damage-lab-formulas,
+  .damage-lab-notes,
+  .damage-lab-exports {
+    grid-template-columns: 1fr;
+  }
+
+  .damage-lab-pressure {
+    border-right: 0;
+    border-bottom: 1px solid var(--n-dl-line);
+  }
+
+  .damage-lab-core-inputs,
+  .damage-lab-advanced-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .damage-lab-actions {
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 540px) {
+  .damage-lab {
+    border-radius: 1rem;
+  }
+
+  .damage-lab-heading {
+    display: grid;
+  }
+
+  .damage-lab-core-inputs {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .damage-lab-totals {
+    gap: 1.5rem;
+  }
+
+  .damage-lab-totals dl {
+    display: grid;
+    gap: 0.5rem;
+  }
+
+  .damage-lab-heatmap {
+    overflow-x: auto;
+    grid-template-columns: repeat(9, 2.25rem);
+  }
+}