BitBurner settings.react.common.js

import { HostElement, ClientElementBase, html } from "react.common.js"

export class SettingsDomElement extends ClientElementBase {
  static create(settings, labelOverride = undefined) {
    return HostElement.create(SettingsDomElement, { settings, labelOverride });
  };

  static tmpl = html`
  <style>
    :host {
      display: flex;
      flex-direction: column;
      padding-left: 0.5em;
      padding-right: 0.5em;

      font-family: "Lucida Console", "Lucida Sans Unicode", "Fira Mono", Consolas, "Courier New", Courier, monospace, "Times New Roman";
      font-weight: 400;
      font-size: 1rem;

      --terminal-green: rgb(0, 204, 0);
      --terminal-light-dark-green: rgb(0, 180, 0);
      --terminal-dark-green: rgb(0, 120, 0);
      --terminal-very-dark-green: rgb(0, 60, 0);
      --terminal-very-very-dark-green: rgb(0, 30, 0);
      --terminal-light-green: rgb(0, 255, 0);
    }

    .container {
      display: grid;
      grid-template-columns: auto 1fr;
      overflow: hidden;
    }

    .container > .control:not(.object) {
      display: grid;
      grid-column: 1 / 3;
      grid-template-columns: subgrid;
      border-bottom: 1px solid var(--terminal-very-very-dark-green);
    }

    .container > .control:not(.object):has(> *:nth-child(1):empty) > *:nth-child(2) {
      grid-column: span 2;
    }
    .container > .control.button > *:nth-child(1) {
      grid-column: span 2 !important;
    }
    .container > .control:not(.object) > *:nth-child(1):not(:empty) {
      grid-column: span 1;
    }
    .container > .control:not(.object) > *:nth-child(2) {
      grid-column: span 1;
    }

    .valueContainer {
      display: flex;
      justify-content: center;
    }
    .valueContainer > *:nth-child(1) {
      flex: 1;
    }
    .valueContainer > .description {
      text-align: center;
    }

    input[type="range"] + .description {
      min-width: 4em;
      margin-left: 0.5em;
    }

    div.control[disabled], details.control[disabled] > .control.value {
      pointer-events: none;
      opacity: 0.5;
    }

    .control {
      align-items: center;
    }

    details[open].control {
      padding: 0.5em;
    }

    .control > label {
      margin-right: 0.5em;
    }
    
    .control > *:not(input, select):empty {
      display: none;
    }

    .control > span:not(:nth-child(2n)) {
      margin-left: 0.5em;
    }

    summary {
      cursor: pointer;
    }

    details.control {
      border: 1px solid rgb(0, 204, 0);
      padding: 0.5em 0.5em 0;
      margin: 0.25em 0;
    }

    details.control summary {
      font-weight: bold;
      margin: -0.5em -0.5em 0;
      padding: 0.5em;
    }

    details[open].control summary {
      border-bottom: 1px solid var(--terminal-dark-green);
      margin-bottom: 0.5em;
    }

    button, select {
      cursor: pointer;
      appearance: none;
      border: 2px solid var(--terminal-dark-green);
      background: black;
      color: var(--terminal-green);
      line-height: 1.5;
      padding: 0.25em;
      margin: 0.25em 0;
    }

    .control.select > .valueContainer {
      position: relative;
      display: flex;
      overflow: hidden;
    }

    .control.select > .valueContainer select {
      flex: 1;
      cursor: pointer;
      outline: 0;
      background: black;
    }

    .control.select > .valueContainer::after {
      content: "▼";
      position: relative;
      right: 1.5rem;
      top: 0.4em;
      pointer-events: none;
    }

    input {
      margin: 0;
    }

    input[type="checkbox"] {
      cursor: pointer;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      width: 1.5em;
      height: 1.5em;
      border: 2px solid var(--terminal-dark-green);
      border-radius: 3px;
      outline: none;
      background-color: black;
      color: var(--terminal-green);
      flex: unset !important;
    }

    input[type="checkbox"]:checked {
      background-color: var(--terminal-very-dark-green);
    }
    
    input[type="checkbox"]:checked::after {
      content: '✓';
      position: relative;
      display: block;
      text-align: center;
      font-size: 1em;
      line-height: 1em;
      top: 10%;
    }

    input[type="number"] {
      appearance: none;
      border: 2px solid var(--terminal-dark-green);
      border-radius: 3px;
      outline: none;
      height: 2em;
      background-color: black;
      color: var(--terminal-green);
      padding-left: 0.5em;
      padding-right: 0.5em;
    }

    input[type="number"]:hover::-webkit-inner-spin-button,
    input[type="number"]:hover::-webkit-outer-spin-button,
    input[type="number"]:focus::-webkit-inner-spin-button,
    input[type="number"]:focus::-webkit-outer-spin-button {
      -webkit-appearance: inner-spin-button !important;
      opacity: 1 !important;
      width: 50px;
      position: absolute;
      top: 0;
      right: 0;
      height: calc(100% - 3px);
      border: 2px solid var(--terminal-green) !important;
    }

    input[type="range"] {
      accent-color: var(--terminal-light-dark-green);
    }
    
    /*input[type="range"]:focus,
    //input[type="range"]:active,*/
    input[type="range"]:hover {
      accent-color: var(--terminal-green);
    }

    /*select:focus, button:focus, input:focus, */
    select:hover, button:hover, input:hover
    {
      background: var(--terminal-very-dark-green) !important;
      border-color: var(--terminal-light-green) !important;
    }
   
  </style>`;

  constructor(host, props) {
    super(host, props, SettingsDomElement.tmpl);
  }

  onTemplateApplied(domContent) {
    super.onTemplateApplied(domContent);

    this._settings = this.props.settings;
    this._settingsDom = this._settings.createDom(this.props.labelOverride);
  }

  connectedCallback() {
    super.connectedCallback();
    this.host.shadowRoot.appendChild(this._settingsDom);
  }

  disconnectedCallback() {
    this.host.shadowRoot.removeChild(this._settingsDom);
    super.disconnectedCallback();
  }
}