SCED/xml/Global/OptionPanel.xml

<!-- Default formatting -->
<Defaults>
  <Text color="#FFFFFF"
    alignment="MiddleLeft"/>

  <Dropdown rectAlignment="MiddleCenter"/>

  <Cell dontUseTableCellBackground="true"
    outlineSize="0 1"
    outline="grey"/>

  <!-- main window -->
  <TableLayout class="window"
    width="500"
    height="800"
    active="false"
    color="#000000"
    outlineSize="2 2"
    outline="grey"
    showAnimation="SlideIn_Right"
    hideAnimation="SlideOut_Right"
    animationDuration="0.2"/>

  <!-- group headers -->
  <Row class="group-header"
    preferredHeight="44"/>
  <Cell class="group-header"
    padding="10 10 0 0"
    columnSpan="3"
    color="#222222"/>
  <Panel class="group-header"
    padding="5 0 0 0"/>
  <Text class="group-header"
    fontSize="28"
    font="font_teutonic-arkham"/>

  <!-- options -->
  <Row class="option-text"
    preferredHeight="50"
    tooltipPosition="Left"
    tooltipBackgroundColor="rgba(0,0,0,1)"/>
  <Cell class="option-text"
    padding="10 10 5 5"
    color="#333333"
    columnSpan="2"/>
  <Cell class="option-button"
    padding="10 10 5 5"
    color="#333333"/>
  <Cell class="option-singleColumn"
    padding="10 10 5 5"
    color="#333333"
    columnSpan="1"/>
  <Cell class="option-doubleColumn"
    padding="10 10 5 5"
    color="#333333"
    columnSpan="2"/>
  <Panel class="singleColumn-wrapper"
    padding="10 0 0 0"/>
  <Text class="option-header"
    fontSize="22"
    font="font_teutonic-arkham"/>
  <Panel class="doubleColumn-wrapper"
    padding="0 17 3 3"/>
  <Button class="optionToggle"
    image="option-off"
    rectAlignment="MiddleRight"
    offsetXY="-30 0"
    colors="#FFFFFF|#dfdfdf"
    height="36"
    width="65"
    ignoreLayout="True"/>

  <!-- buttons at the bottom -->
  <Button class="bottomButtons"
    hoverClass="hover"
    pressClass="press"
    selectClass="select"
    color="#888888"
    minHeight="35"
    fontSize="24"
    font="font_teutonic-arkham"/>
  <Button class="hover"
    color="grey"/>
  <Button class="press"
    color="white"/>
  <Button class="select"
    color="white"/>
</Defaults>

<!-- Option Panel -->
<TableLayout id="optionPanel"
  class="window"
  rectAlignment="LowerRight"
  offsetXY="-50 80"
  raycastTarget="true">
  <!-- Header: Options -->
  <Row preferredHeight="60">
    <Cell>
      <Panel padding="10 0 0 0">
        <Text font="font_teutonic-arkham"
          fontSize="35">Options</Text>
      </Panel>
    </Cell>
  </Row>

  <!-- Scrollable part with options -->
  <Row>
    <Cell>
      <VerticalScrollView horizontalScrollbarVisibility="AutohideAndExpandViewport"
        scrollSensitivity="30"
        raycastTarget="true">
        <TableLayout columnWidths="0 100 75"
          autoCalculateHeight="1"
          useGlobalCellPadding="false">

          <!-- Group: general settings -->
          <Row class="group-header">
            <Cell class="group-header">
              <Panel class="group-header"
                image="header_acolyte">
                <Text class="group-header">GENERAL SETTINGS</Text>
              </Panel>
            </Cell>
          </Row>

          <!-- Option: card language -->
          <!-- disabled until we have the backend in place
          <Row class="option-text" tooltip="Downloading a campaign or importing a deck will use&#xA;this language for cards (NOT FUNCTIONAL YET!).">
            <Cell class="option-singleColumn">
              <Panel class="singleColumn-wrapper">
                <Text class="option-header">Card language</Text>
              </Panel>
            </Cell>
            <Cell class="option-doubleColumn">
              <Panel class="doubleColumn-wrapper">
                <Dropdown id="cardLanguage" onValueChanged="languageSelected(selectedIndex)">
                  <Option>简体中文</Option>
                  <Option>繁體中文</Option>
                  <Option>Deutsch</Option>
                  <Option>English</Option>
                  <Option>Español</Option>
                  <Option>Français</Option>
                  <Option>Italiano</Option>
                </Dropdown>
              </Panel>
            </Cell>
          </Row> -->

          <!-- Option: splash scenario name on setup -->
          <Row class="option-text"
            tooltip="Fade in the name of the scenario for 2 seconds&#xA;when placing down a scenario.">
            <Cell class="option-text">
              <Panel class="singleColumn-wrapper">
                <Text class="option-header">Show scenario title on setup</Text>
              </Panel>
            </Cell>
            <Cell class="option-button">
              <Button class="optionToggle"
                id="showTitleSplash"
                onClick="onClick_toggleOption"/>
            </Cell>
          </Row>

          <!-- Option: Enable all card helpers -->
          <Row class="option-text"
            tooltip="Enable all card helpers (usually enabled via context menu entries).&#xA;Examples: False Covenant and Book of Living Myths">
            <Cell class="option-text">
              <Panel class="singleColumn-wrapper">
                <Text class="option-header">Enable all card helpers</Text>
              </Panel>
            </Cell>
            <Cell class="option-button">
              <Button class="optionToggle"
                id="enableCardHelpers"
                onClick="onClick_toggleOption"/>
            </Cell>
          </Row>

          <!-- Group: play area settings -->
          <Row class="group-header">
            <Cell class="group-header">
              <Panel class="group-header"
                image="header_compass">
                <Text class="group-header">PLAY AREA SETTINGS</Text>
              </Panel>
            </Cell>
          </Row>

          <!-- Option: play area snap tags -->
          <Row class="option-text"
            tooltip="Only cards with the tag 'Location' will snap (official cards are supported by default).&#xA;Disable this if you are having issues with custom content.">
            <Cell class="option-text">
              <Panel class="singleColumn-wrapper">
                <Text class="option-header">Enable snap tags</Text>
              </Panel>
            </Cell>
            <Cell class="option-button">
              <Button class="optionToggle"
                id="playAreaSnapTags"
                onClick="onClick_toggleOption"/>
            </Cell>
          </Row>

          <!-- Option: location connections -->
          <Row class="option-text"
            tooltip="Automatically draw location connections based on card metadata.">
            <Cell class="option-text">
              <Panel class="singleColumn-wrapper">
                <Text class="option-header">Draw location connections</Text>
              </Panel>
            </Cell>
            <Cell class="option-button">
              <Button class="optionToggle"
                id="playAreaConnections"
                onClick="onClick_toggleOption"/>
            </Cell>
          </Row>

          <!-- Option: play area connection color -->
          <Row class="option-text"
            tooltip="This color will be used to draw lines&#xA;for location connections.">
            <Cell class="option-singleColumn">
              <Panel class="singleColumn-wrapper">
                <Text class="option-header">Choose color for location connections</Text>
              </Panel>
            </Cell>
            <Cell class="option-doubleColumn">
              <Panel class="doubleColumn-wrapper">
                <Button id="playAreaConnectionColor"
                  onClick="onClick_playAreaConnectionColor">
                </Button>
              </Panel>
            </Cell>
          </Row>

          <!-- Option: change custom playarea image on setup -->
          <Row class="option-text"
            tooltip="Attempts to set the play area to a fitting image&#xA;from the play area image gallery.">
            <Cell class="option-text">
              <Panel class="singleColumn-wrapper">
                <Text class="option-header">Change background on setup</Text>
              </Panel>
            </Cell>
            <Cell class="option-button">
              <Button class="optionToggle"
                id="changePlayAreaImage"
                onClick="onClick_toggleOption"/>
            </Cell>
          </Row>

          <!-- Group: playermat settings -->
          <Row class="group-header">
            <Cell class="group-header">
              <Panel class="group-header"
                image="header_cover">
                <Text class="group-header">PLAYERMAT SETTINGS</Text>
              </Panel>
            </Cell>
          </Row>

          <!-- Option: enable snap tags -->
          <Row class="option-text"
            tooltip="Only cards with the tag 'Asset' will snap (official cards are supported by default).&#xA;Disable this if you are having issues with custom content.">
            <Cell class="option-text">
              <Panel class="singleColumn-wrapper">
                <Text class="option-header">Enable snap tags</Text>
              </Panel>
            </Cell>
            <Cell class="option-button">
              <Button class="optionToggle"
                id="useSnapTags"
                onClick="onClick_toggleOption"/>
            </Cell>
          </Row>

          <!-- Option: show draw 1 button -->
          <Row class="option-text"
            tooltip="Displays a button below the 'Upkeep' button that draws a card from your deck.&#xA;Useful for multi-handed solo play.">
            <Cell class="option-text">
              <Panel class="singleColumn-wrapper">
                <Text class="option-header">Show "Draw 1" button</Text>
              </Panel>
            </Cell>
            <Cell class="option-button">
              <Button class="optionToggle"
                id="showDrawButton"
                onClick="onClick_toggleOption"/>
            </Cell>
          </Row>

          <!-- Option: use clickable clue-counters -->
          <Row class="option-text"
            tooltip="Instead of automatically counting clues in the respective area on your playermat,&#xA;this displays a clickable counter for clues.">
            <Cell class="option-text">
              <Panel class="singleColumn-wrapper">
                <Text class="option-header">Use clickable clue counters</Text>
              </Panel>
            </Cell>
            <Cell class="option-button">
              <Button class="optionToggle"
                id="useClueClickers"
                onClick="onClick_toggleOption"/>
            </Cell>
          </Row>

          <!-- Option: use clickable resource counters -->
          <Row class="option-text"
            tooltip="This enables spawning of clickable resource tokens for player cards.&#xA;(Chef's Selection = assets with 0 uses)">
            <Cell class="option-singleColumn">
              <Panel class="singleColumn-wrapper">
                <Text class="option-header">Use clickable resource tokens</Text>
              </Panel>
            </Cell>
            <Cell class="option-doubleColumn">
              <Panel class="doubleColumn-wrapper">
                <Dropdown id="useResourceCounters"
                  onValueChanged="resourceCounterSelected(selectedIndex)">
                  <Option>Enabled</Option>
                  <Option>Chef's Selection</Option>
                  <Option>Disabled</Option>
                </Dropdown>
              </Panel>
            </Cell>
          </Row>

          <!-- Option: remove a player mat -->
          <Row class="option-text"
            tooltip="Remove an unused playermat for more table space.&#xA;Displayed are the default colors.">
            <Cell class="option-singleColumn">
              <Panel class="singleColumn-wrapper">
                <Text class="option-header">Remove a playermat</Text>
              </Panel>
            </Cell>
            <Cell class="option-doubleColumn">
              <Panel class="doubleColumn-wrapper">
                <Dropdown id="removePlayermat"
                  onValueChanged="playermatRemovalSelected(selectedIndex)">
                  <Option>Click to select</Option>
                  <Option>1: White</Option>
                  <Option>2: Orange</Option>
                  <Option>3: Green</Option>
                  <Option>4: Red</Option>
                </Dropdown>
              </Panel>
            </Cell>
          </Row>

          <!-- Group: fan-made accessories -->
          <Row class="group-header">
            <Cell class="group-header">
              <Panel class="group-header"
                image="header_olive">
                <Text class="group-header">FAN-MADE ACCESSORIES</Text>
              </Panel>
            </Cell>
          </Row>

          <!-- Option: show attachment helper -->
          <Row class="option-text"
            tooltip="Provides a card-sized bag for cards that are attached to other cards&#xA;(e.g. Backpack).">
            <Cell class="option-text">
              <Panel class="singleColumn-wrapper">
                <Text class="option-header">Attachment Helper</Text>
              </Panel>
            </Cell>
            <Cell class="option-button">
              <Button class="optionToggle"
                id="showAttachmentHelper"
                onClick="onClick_toggleOption"/>
            </Cell>
          </Row>

          <!-- Option: show clean up helper -->
          <Row class="option-text"
            tooltip="Useful for campaign-play:&#xA;It resets play areas to allow continuous gameplay in the same savegame.">
            <Cell class="option-text">
              <Panel class="singleColumn-wrapper">
                <Text class="option-header">Clean Up Helper</Text>
              </Panel>
            </Cell>
            <Cell class="option-button">
              <Button class="optionToggle"
                id="showCleanUpHelper"
                onClick="onClick_toggleOption"/>
            </Cell>
          </Row>

          <!-- Option: show CYOA campaign guides -->
          <Row class="option-text"
            tooltip="Displays in a 'Choose Your Own Adventure'&#xA;style redesigned campaign guides.">
            <Cell class="option-text">
              <Panel class="singleColumn-wrapper">
                <Text class="option-header">CYOA Campaign Guides</Text>
              </Panel>
            </Cell>
            <Cell class="option-button">
              <Button class="optionToggle"
                id="showCYOA"
                onClick="onClick_toggleOption"/>
            </Cell>
          </Row>

          <!-- Option: show displacement tool -->
          <Row class="option-text"
            tooltip="This allows moving all objects on the main play area&#xA;in a chosen direction.">
            <Cell class="option-text">
              <Panel class="singleColumn-wrapper">
                <Text class="option-header">Displacement Tool</Text>
              </Panel>
            </Cell>
            <Cell class="option-button">
              <Button class="optionToggle"
                id="showDisplacementTool"
                onClick="onClick_toggleOption"/>
            </Cell>
          </Row>

          <!-- Option: show hand helper -->
          <Row class="option-text"
            tooltip="Never count your hand cards again! This tool does that for you&#xA;and additionally enables easy discarding of random cards.">
            <Cell class="option-text">
              <Panel class="singleColumn-wrapper">
                <Text class="option-header">Hand Helper</Text>
              </Panel>
            </Cell>
            <Cell class="option-button">
              <Button class="optionToggle"
                id="showHandHelper"
                onClick="onClick_toggleOption"/>
            </Cell>
          </Row>

          <!-- Option: show search assistant -->
          <Row class="option-text"
            tooltip="Quickly search 3, 6, 9 or the top X&#xA;cards of your deck!">
            <Cell class="option-text">
              <Panel class="singleColumn-wrapper">
                <Text class="option-header">Search Assistant</Text>
              </Panel>
            </Cell>
            <Cell class="option-button">
              <Button class="optionToggle"
                id="showSearchAssistant"
                onClick="onClick_toggleOption"/>
            </Cell>
          </Row>
        </TableLayout>
      </VerticalScrollView>
    </Cell>
  </Row>

  <!-- Buttons: Defaults and Close -->
  <Row preferredHeight="50">
    <Cell>
      <HorizontalLayout minHeight="55"
        flexibleHeight="0"
        padding="10 10 5 10"
        spacing="225">
        <Button class="bottomButtons"
          onClick="onClick_defaultSettings">Load defaults</Button>
        <Button class="bottomButtons"
          onClick="onClick_toggleUi(optionPanel)">Close</Button>
      </HorizontalLayout>
    </Cell>
  </Row>
</TableLayout>