Update livesplit-core (#716)

This updates `livesplit-core` to the latest version. This mostly adds custom variable columns and allows for the timer to visualize the delta for the background. There's some performance improvements as well. Also we now build `livesplit-core` in debug mode by default when building locally. So compilation is a little bit faster and additional debug checks are active, such as integer overflows.
2026-08-26 19:23:40 +00:00 · 2022-09-28 20:27:36 +02:00
parent ecc2ab89a2
commit df51936aea
9 changed files with 252 additions and 91 deletions
@@ -54,7 +54,7 @@ jobs:
      run: |
        set -e
        cd $HOME
-        git -C binaryen pull || git clone https://github.com/WebAssembly/binaryen binaryen
+        git -C binaryen pull || git clone --recursive https://github.com/WebAssembly/binaryen binaryen
        cd binaryen
        cmake .
        make -j2 wasm-opt
@@ -63,7 +63,7 @@ jobs:
    - name: Install wasm-bindgen
      run: |
        set -e
-        cargo install wasm-bindgen-cli
+        cargo install wasm-bindgen-cli --debug

    - name: Install npm packages
      run: |
@@ -75,7 +75,7 @@ jobs:
    - name: Build Core
      run: |
        set -e
-        npm run build:core
+        npm run build:core:production

    - name: Set up tslint matcher
      run: echo "::add-matcher::.github/workflows/tslint.json"
@@ -1,6 +1,13 @@
 const { execSync } = require("child_process");
 const fs = require("fs");

+let buildFlags = "";
+let targetFolder = "debug";
+if (process.argv.some((v) => v === "--production")) {
+    buildFlags = "--release";
+    targetFolder = "release";
+}
+
 execSync(
    "cargo run",
    {
@@ -10,7 +17,7 @@ execSync(
 );

 execSync(
-    "cargo build -p cdylib --features wasm-web --target wasm32-unknown-unknown --release",
+    `cargo rustc -p livesplit-core-capi --crate-type cdylib --features wasm-web --target wasm32-unknown-unknown ${buildFlags}`,
    {
        cwd: "livesplit-core",
        stdio: "inherit",
@@ -22,7 +29,7 @@ execSync(
 );

 execSync(
-    "wasm-bindgen livesplit-core/target/wasm32-unknown-unknown/release/livesplit_core.wasm --out-dir src/livesplit-core",
+    `wasm-bindgen livesplit-core/target/wasm32-unknown-unknown/${targetFolder}/livesplit_core.wasm --out-dir src/livesplit-core`,
    {
        stdio: "inherit",
    },
@@ -10,21 +10,21 @@
      "license": "ISC",
      "dependencies": {
        "@types/commonmark": "^0.27.5",
-        "@types/react": "^17.0.37",
+        "@types/react": "^16.0.0",
        "@types/react-color": "^3.0.5",
-        "@types/react-dom": "^17.0.11",
+        "@types/react-dom": "^16.0.0",
        "@types/react-resizable": "^1.7.4",
        "@types/react-sidebar": "^3.0.2",
        "@types/react-toastify": "^4.1.0",
        "@types/react-toggle": "^4.0.3",
-        "commonmark": "^0.30.0",
+        "commonmark": "^0.27.0",
        "commonmark-react-renderer": "^4.3.5",
        "fast-deep-equal": "^3.1.3",
        "idb": "^7.0.0",
-        "react": "^17.0.2",
+        "react": "^16.0.0",
        "react-color": "^2.19.3",
        "react-contextmenu": "^2.14.0",
-        "react-dom": "^17.0.2",
+        "react-dom": "^16.0.0",
        "react-linkifier": "^4.0.0",
        "react-resizable": "^3.0.4",
        "react-sidebar": "^3.0.2",
@@ -2673,9 +2673,9 @@
      "dev": true
    },
    "node_modules/@types/react": {
-      "version": "17.0.37",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.37.tgz",
-      "integrity": "sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==",
+      "version": "16.14.32",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.32.tgz",
+      "integrity": "sha512-hvEy4vGVADbtj/U6+CA5SRC5QFIjdxD7JslAie8EuAYZwhYY9bgforpXNyF1VFzhnkEOesDy1278t1wdjN74cw==",
      "dependencies": {
        "@types/prop-types": "*",
        "@types/scheduler": "*",
@@ -2692,11 +2692,11 @@
      }
    },
    "node_modules/@types/react-dom": {
-      "version": "17.0.11",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
-      "integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==",
+      "version": "16.9.16",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.16.tgz",
+      "integrity": "sha512-Oqc0RY4fggGA3ltEgyPLc3IV9T73IGoWjkONbsyJ3ZBn+UPPCYpU2ec0i3cEbJuEdZtkqcCF2l1zf2pBdgUGSg==",
      "dependencies": {
-        "@types/react": "*"
+        "@types/react": "^16"
      }
    },
    "node_modules/@types/react-resizable": {
@@ -4217,13 +4217,13 @@
      }
    },
    "node_modules/commonmark": {
-      "version": "0.30.0",
-      "resolved": "https://registry.npmjs.org/commonmark/-/commonmark-0.30.0.tgz",
-      "integrity": "sha512-j1yoUo4gxPND1JWV9xj5ELih0yMv1iCWDG6eEQIPLSWLxzCXiFoyS7kvB+WwU+tZMf4snwJMMtaubV0laFpiBA==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/commonmark/-/commonmark-0.27.0.tgz",
+      "integrity": "sha512-nHdZE2hDhygZgTuuIAD4+Q5cAa2zRzhZyG3e1Jt8I1RSRVarZhJosLMW+tzyCg2frndTKOgQlmjH/iRe4Giqhw==",
      "dependencies": {
-        "entities": "~2.0",
-        "mdurl": "~1.0.1",
-        "minimist": ">=1.2.2",
+        "entities": "~ 1.1.1",
+        "mdurl": "~ 1.0.1",
+        "minimist": "~ 1.2.0",
        "string.prototype.repeat": "^0.2.0"
      },
      "bin": {
@@ -4249,9 +4249,9 @@
      }
    },
    "node_modules/commonmark/node_modules/entities": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
-      "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
    },
    "node_modules/compressible": {
      "version": "2.0.18",
@@ -8810,12 +8810,13 @@
      }
    },
    "node_modules/react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
      "dependencies": {
        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
      },
      "engines": {
        "node": ">=0.10.0"
@@ -8853,16 +8854,17 @@
      }
    },
    "node_modules/react-dom": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
+      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
      "dependencies": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.19.1"
      },
      "peerDependencies": {
-        "react": "17.0.2"
+        "react": "^16.14.0"
      }
    },
    "node_modules/react-draggable": {
@@ -9544,9 +9546,9 @@
      "dev": true
    },
    "node_modules/scheduler": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
      "dependencies": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1"
@@ -14161,9 +14163,9 @@
      "dev": true
    },
    "@types/react": {
-      "version": "17.0.37",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.37.tgz",
-      "integrity": "sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==",
+      "version": "16.14.32",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.32.tgz",
+      "integrity": "sha512-hvEy4vGVADbtj/U6+CA5SRC5QFIjdxD7JslAie8EuAYZwhYY9bgforpXNyF1VFzhnkEOesDy1278t1wdjN74cw==",
      "requires": {
        "@types/prop-types": "*",
        "@types/scheduler": "*",
@@ -14180,11 +14182,11 @@
      }
    },
    "@types/react-dom": {
-      "version": "17.0.11",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
-      "integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==",
+      "version": "16.9.16",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.16.tgz",
+      "integrity": "sha512-Oqc0RY4fggGA3ltEgyPLc3IV9T73IGoWjkONbsyJ3ZBn+UPPCYpU2ec0i3cEbJuEdZtkqcCF2l1zf2pBdgUGSg==",
      "requires": {
-        "@types/react": "*"
+        "@types/react": "^16"
      }
    },
    "@types/react-resizable": {
@@ -15447,20 +15449,20 @@
      "dev": true
    },
    "commonmark": {
-      "version": "0.30.0",
-      "resolved": "https://registry.npmjs.org/commonmark/-/commonmark-0.30.0.tgz",
-      "integrity": "sha512-j1yoUo4gxPND1JWV9xj5ELih0yMv1iCWDG6eEQIPLSWLxzCXiFoyS7kvB+WwU+tZMf4snwJMMtaubV0laFpiBA==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/commonmark/-/commonmark-0.27.0.tgz",
+      "integrity": "sha512-nHdZE2hDhygZgTuuIAD4+Q5cAa2zRzhZyG3e1Jt8I1RSRVarZhJosLMW+tzyCg2frndTKOgQlmjH/iRe4Giqhw==",
      "requires": {
-        "entities": "~2.0",
-        "mdurl": "~1.0.1",
-        "minimist": ">=1.2.2",
+        "entities": "~ 1.1.1",
+        "mdurl": "~ 1.0.1",
+        "minimist": "~ 1.2.0",
        "string.prototype.repeat": "^0.2.0"
      },
      "dependencies": {
        "entities": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
-          "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ=="
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
        }
      }
    },
@@ -18973,12 +18975,13 @@
      }
    },
    "react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
      "requires": {
        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
      }
    },
    "react-color": {
@@ -19005,13 +19008,14 @@
      }
    },
    "react-dom": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
+      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.19.1"
      }
    },
    "react-draggable": {
@@ -19535,9 +19539,9 @@
      "dev": true
    },
    "scheduler": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1"
@@ -6,6 +6,7 @@
  "scripts": {
    "build": "webpack",
    "build:core": "node buildCore.js",
+    "build:core:production": "node buildCore.js --production",
    "lint": "tslint --project tsconfig.json",
    "publish": "webpack --mode production",
    "serve": "webpack serve",
@@ -17,21 +18,21 @@
  "license": "ISC",
  "dependencies": {
    "@types/commonmark": "^0.27.5",
-    "@types/react": "^17.0.37",
+    "@types/react": "^16.0.0",
    "@types/react-color": "^3.0.5",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-dom": "^16.0.0",
    "@types/react-resizable": "^1.7.4",
    "@types/react-sidebar": "^3.0.2",
    "@types/react-toastify": "^4.1.0",
    "@types/react-toggle": "^4.0.3",
-    "commonmark": "^0.30.0",
+    "commonmark": "^0.27.0",
    "commonmark-react-renderer": "^4.3.5",
    "fast-deep-equal": "^3.1.3",
    "idb": "^7.0.0",
-    "react": "^17.0.2",
+    "react": "^16.0.0",
    "react-color": "^2.19.3",
    "react-contextmenu": "^2.14.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^16.0.0",
    "react-linkifier": "^4.0.0",
    "react-resizable": "^3.0.4",
    "react-sidebar": "^3.0.2",
@@ -12,23 +12,23 @@

    .table-row-even {
      display: table-row;
-      background: $dark-row-color !important;
+      background: $dark-row-color  !important;
    }

    .table-row-odd {
      display: table-row;
-      background: $light-row-color !important;
+      background: $light-row-color  !important;
    }
  }

  .table-body {
    display: table-row-group;

-    > tr {
+    >tr {
      display: table-row;
      background: $dark-row-color;

-      > td {
+      >td {
        padding: math.div($ui-margin, 2) math.div($ui-margin, 2);
        display: table-cell;

@@ -54,10 +54,10 @@
  }

  .selected {
-    background: $selected-row-color !important;
+    background: $selected-row-color  !important;
  }

-  .tab-bar > button {
+  .tab-bar>button {
    font-size: 15px;
    height: 30px;
    border-bottom-right-radius: 0px;
@@ -66,7 +66,7 @@
    border-bottom: 0px;
  }

-  tr > td > input {
+  tr>td>input {
    margin-right: -40px;

    &:focus {
@@ -125,6 +125,7 @@

        select {
          height: $settings-row-height;
+          min-width: 80px;
        }

        &.optional-value {
@@ -56,15 +56,17 @@ export interface SettingValueFactory<T> {
        r2: number, g2: number, b2: number, a2: number,
    ): T;
    fromAlignment(value: string): T | null;
+    fromColumnKind(value: string): T | null;
    fromColumnStartWith(value: string): T | null;
    fromColumnUpdateWith(value: string): T | null;
    fromColumnUpdateTrigger(value: string): T | null;
    fromLayoutDirection(value: string): T | null;
    fromFont(name: string, style: string, weight: string, stretch: string): T | null;
    fromEmptyFont(): T;
+    fromDeltaGradient(value: string): T | null;
 }

-export class JsonSettingValueFactory {
+export class JsonSettingValueFactory implements SettingValueFactory<ExtendedSettingsDescriptionValueJson> {
    public fromBool(v: boolean): ExtendedSettingsDescriptionValueJson {
        return { Bool: v };
    }
@@ -125,6 +127,9 @@ export class JsonSettingValueFactory {
    public fromAlignment(_: string): ExtendedSettingsDescriptionValueJson | null {
        throw new Error("Not implemented");
    }
+    public fromColumnKind(_: string): ExtendedSettingsDescriptionValueJson | null {
+        throw new Error("Not implemented");
+    }
    public fromColumnStartWith(_: string): ExtendedSettingsDescriptionValueJson | null {
        throw new Error("Not implemented");
    }
@@ -148,6 +153,9 @@ export class JsonSettingValueFactory {
    public fromEmptyFont(): ExtendedSettingsDescriptionValueJson {
        throw new Error("Not implemented");
    }
+    public fromDeltaGradient(_: string): ExtendedSettingsDescriptionValueJson | null {
+        throw new Error("Not implemented");
+    }
 }

 export class SettingsComponent<T> extends React.Component<Props<T>> {
@@ -707,6 +715,26 @@ export class SettingsComponent<T> extends React.Component<Props<T>> {
                        </select>
                    </div>
                );
+            } else if ("ColumnKind" in value) {
+                component = (
+                    <div className="settings-value-box">
+                        <select
+                            value={value.ColumnKind}
+                            onChange={(e) => {
+                                this.props.setValue(
+                                    valueIndex,
+                                    expect(
+                                        factory.fromColumnKind(e.target.value),
+                                        "Unexpected Column Kind value",
+                                    ),
+                                );
+                            }}
+                        >
+                            <option value="Time">Time</option>
+                            <option value="Variable">Variable</option>
+                        </select>
+                    </div>
+                );
            } else if ("ColumnStartWith" in value) {
                component = (
                    <div className="settings-value-box">
@@ -950,6 +978,126 @@ export class SettingsComponent<T> extends React.Component<Props<T>> {
                        {children}
                    </div>
                );
+            } else if ("DeltaGradient" in value) {
+                let type: string;
+                let color1: Option<Color> = null;
+                let color2: Option<Color> = null;
+                const gradient = value.DeltaGradient;
+
+                if (typeof gradient !== "string") {
+                    [type] = Object.keys(gradient);
+                    if ("Plain" in gradient) {
+                        color1 = gradient.Plain;
+                    } else if ("Vertical" in gradient) {
+                        [color1, color2] = gradient.Vertical;
+                    } else if ("Horizontal" in gradient) {
+                        [color1, color2] = gradient.Horizontal;
+                    } else {
+                        assertNever(gradient);
+                    }
+                } else {
+                    type = gradient;
+                }
+
+                const colorsToValue = (
+                    type: string,
+                    color1: Option<Color>,
+                    color2: Option<Color>,
+                ) => {
+                    color1 = color1 ? color1 : [0.0, 0.0, 0.0, 0.0];
+                    color2 = color2 ? color2 : color1;
+                    switch (type) {
+                        case "Transparent":
+                            return factory.fromTransparentGradient();
+                        case "Plain":
+                            return factory.fromColor(
+                                color1[0], color1[1], color1[2], color1[3],
+                            );
+                        case "Vertical":
+                            return factory.fromVerticalGradient(
+                                color1[0], color1[1], color1[2], color1[3],
+                                color2[0], color2[1], color2[2], color2[3],
+                            );
+                        case "Horizontal":
+                            return factory.fromHorizontalGradient(
+                                color1[0], color1[1], color1[2], color1[3],
+                                color2[0], color2[1], color2[2], color2[3],
+                            );
+                        default:
+                            return expect(
+                                factory.fromDeltaGradient(type),
+                                "Unexpected Gradient Type",
+                            );
+                    }
+                };
+
+                const children: JSX.Element[] = [
+                    <select
+                        value={type}
+                        onChange={(e) => {
+                            this.props.setValue(
+                                valueIndex,
+                                colorsToValue(e.target.value, color1, color2),
+                            );
+                        }}
+                    >
+                        <option value="Transparent">Transparent</option>
+                        <option value="Plain">Plain</option>
+                        <option value="Vertical">Vertical</option>
+                        <option value="Horizontal">Horizontal</option>
+                        <option value="DeltaPlain">Plain Delta</option>
+                        <option value="DeltaVertical">Vertical Delta</option>
+                        <option value="DeltaHorizontal">Horizontal Delta</option>
+                    </select>,
+                ];
+
+                if (color1) {
+                    children.push(
+                        <ColorPicker
+                            color={color1}
+                            setColor={(color) => {
+                                this.props.setValue(
+                                    valueIndex,
+                                    colorsToValue(type, color, color2),
+                                );
+                            }}
+                        />,
+                    );
+                }
+
+                if (color2) {
+                    children.push(
+                        <ColorPicker
+                            color={color2}
+                            setColor={(color) => {
+                                this.props.setValue(
+                                    valueIndex,
+                                    colorsToValue(type, color1, color),
+                                );
+                            }}
+                        />,
+                    );
+                }
+
+                if (color2) {
+                    component = (
+                        <div className="settings-value-box two-colors">
+                            {children}
+                        </div>
+                    );
+                } else if (color1) {
+                    component = (
+                        <div className="settings-value-box one-color">
+                            {children}
+                        </div>
+                    );
+                } else {
+                    component = (
+                        <div className="settings-value-box">
+                            {children}
+                        </div>
+                    );
+                }
            } else {
                assertNever(value);
            }
@@ -154,9 +154,9 @@ describe("Layout Rendering Tests", function () {
    testRendering("all_components", "default", "f4G-QgAAAAAeAAAO____________________AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA__wCAAAAAABv______4Hb4AG");
    testRendering("all_components", "pmw3", "f4G-QgAAAAAeAAAO________fmAOf6AAX4AG3_gH3_AOX_APVkgOX-AOVvAPX_AeX_AeWrAeb_gfAAAAAABv__x-____JABO");
    testRendering("default", "default", "____________AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgAAD_________");
-    testRendering("default", "pmw3", "__wA___GX2AGX-gGWNgGSkAOXnAOW9gOX-APVtwOH_APX8AOX_APRnAOXVAOXJAeHvAeX_wf__AfAAAAAABgAAD_AAB_____");
+    testRendering("default", "pmw3", "__wA___GX2AG3-gGUNgGSkAOXnAOW9gOX-APVtwOH_APX8AOX_APRnAOXVAOXJAeHvAeX_wf__AfAAAAAABgAAD_AAB_____");
    testRendering("splits_two_rows", "celeste", "f8AAcAAHf8AA____d4AAcAAHf_gAcAAPd_AAYAAHf4AA____f4AAYAAH__AA____Z_gAYAAHf_8A9VVfb_wAcAAPf_AAYAAP");
-    testRendering("splits_with_labels", "celeste", "AABEAADPAADPAADPAADA_____AAH_wAP_wAP_wAPwgAA____wgAH34AP_4AH34APQYAA____0EAP_8AP38AP38APwAAAAAAA");
+    testRendering("splits_with_labels", "celeste", "AABEAADPAADPAADPAADA____fAAH_wAP_wAP_wAPxgAA____QgAH34AP_4AH34APQYAA____0EAP_8AP38AP38APwAAAAAAA");
    testRendering("title_centered_no_game_icon", "celeste", "________AAAAADQAAHQAAH4A______3_____AAAAAAAAAAAA____AAkAAL8DAP8DAP8DAP8D_________-n9AAAAAAAAAAAA");
    testRendering("title_centered_with_game_icon", "celeste", "________AAAAQBoAQBoAYB8A________4B8A4AAA4AAA4AAA4AAA4ASA4H_D4H_D4H_D4H_D_________9T94AAAAAAAAAAA");
    testRendering("title_left_no_attempt_count", "celeste", "________AAAA-AAA-AAA-AAA____________AAAAAAAAAAAA____CQAA_wAA_4AA_4AA_4AA________qf__AAAAAAAAAAAA");
@@ -22,7 +22,7 @@ module.exports = async (env, argv) => {

    const coreContributorsMap = {};
    for (const coreContributor of coreContributorsList) {
-        if (coreContributor.type === "User") {
+        if (coreContributor.type === "User" && !coreContributor.login.includes("dependabot")) {
            coreContributorsMap[coreContributor.login] = coreContributor;
        }
    }
@@ -31,7 +31,7 @@ module.exports = async (env, argv) => {
        const existingContributor = coreContributorsMap[lsoContributor.login];
        if (existingContributor) {
            existingContributor.contributions += lsoContributor.contributions;
-        } else if (lsoContributor.type === "User") {
+        } else if (lsoContributor.type === "User" && !lsoContributor.login.includes("dependabot")) {
            coreContributorsMap[lsoContributor.login] = lsoContributor;
        }
    }
@@ -125,15 +125,15 @@ module.exports = async (env, argv) => {
                    test: /\.tsx?$/,
                    use: [
                        {
-                          loader: "ts-loader",
-                          options: {
-                            getCustomTransformers: () => ({
-                              before: [!isProduction && ReactRefreshTypeScript()].filter(Boolean),
-                            }),
-                            transpileOnly: !isProduction,
-                          },
+                            loader: "ts-loader",
+                            options: {
+                                getCustomTransformers: () => ({
+                                    before: [!isProduction && ReactRefreshTypeScript()].filter(Boolean),
+                                }),
+                                transpileOnly: !isProduction,
+                            },
                        },
-                      ],
+                    ],
                    exclude: "/node_modules",
                },
                {