diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..ef58ff9d1
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 4,
+  "semi": false,
+  "singleQuote": true
+}
diff --git a/UI/Input/Checkboxes.ts b/UI/Input/Checkboxes.ts
index 18fccbea8..7d3a32ea6 100644
--- a/UI/Input/Checkboxes.ts
+++ b/UI/Input/Checkboxes.ts
@@ -1,110 +1,116 @@
-import { InputElement } from "./InputElement";
-import { UIEventSource } from "../../Logic/UIEventSource";
-import { Utils } from "../../Utils";
-import BaseUIElement from "../BaseUIElement";
+import { InputElement } from './InputElement'
+import { UIEventSource } from '../../Logic/UIEventSource'
+import { Utils } from '../../Utils'
+import BaseUIElement from '../BaseUIElement'
 
 /**
  * Supports multi-input
  */
 export default class CheckBoxes extends InputElement<number[]> {
-  private static _nextId = 0;
-  IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
-  private readonly value: UIEventSource<number[]>;
-  private readonly _elements: BaseUIElement[];
-  private styleWrapperOverride = "";
-  private styleInputOverride = "";
-  private styleLabelOverride = "";
+    private static _nextId = 0
+    IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false)
+    private readonly value: UIEventSource<number[]>
+    private readonly _elements: BaseUIElement[]
+    private styleWrapperOverride = ''
+    private styleInputOverride = ''
+    private styleLabelOverride = ''
 
-  constructor(
-    elements: BaseUIElement[],
-    value = new UIEventSource<number[]>([]),
-    styleFormOverride = "",
-    styleWrapperOverride = "",
-    styleInputOverride = "",
-    styleLabelOverride = ""
-  ) {
-    super();
-    this.value = value;
-    this._elements = Utils.NoNull(elements);
-    this.SetClass("flex flex-col");
-    this.SetStyle(styleFormOverride);
-    this.styleWrapperOverride = styleWrapperOverride;
-    this.styleInputOverride = styleInputOverride;
-    this.styleLabelOverride = styleLabelOverride;
-  }
-
-  IsValid(ts: number[]): boolean {
-    return ts !== undefined;
-  }
-
-  GetValue(): UIEventSource<number[]> {
-    return this.value;
-  }
-
-  protected InnerConstructElement(): HTMLElement {
-    const el = document.createElement("form");
-
-    const value = this.value;
-    const elements = this._elements;
-
-    for (let i = 0; i < elements.length; i++) {
-      let inputI = elements[i];
-      const input = document.createElement("input");
-      const id = CheckBoxes._nextId;
-      CheckBoxes._nextId++;
-      input.id = "checkbox" + id;
-
-      input.type = "checkbox";
-      input.classList.add("p-1", "cursor-pointer", "m-3", "pl-3", "mr-0");
-      input.style.cssText = this.styleInputOverride;
-
-      const label = document.createElement("label");
-      label.htmlFor = input.id;
-      label.appendChild(inputI.ConstructElement());
-      label.classList.add("block", "w-full", "p-2", "cursor-pointer", "bg-red");
-      label.style.cssText = this.styleLabelOverride;
-
-      const wrapper = document.createElement("span");
-      wrapper.classList.add(
-        "wrapper",
-        "flex",
-        "w-full",
-        "border",
-        "border-gray-400",
-        "m-1"
-      );
-      wrapper.style.cssText = this.styleWrapperOverride;
-      wrapper.appendChild(input);
-      wrapper.appendChild(label);
-      el.appendChild(wrapper);
-
-      value.addCallbackAndRunD((selectedValues) => {
-        if (selectedValues.indexOf(i) >= 0) {
-          input.checked = true;
-        }
-
-        if (input.checked) {
-          wrapper.classList.remove("border-gray-400");
-          wrapper.classList.add("border-black");
-        } else {
-          wrapper.classList.add("border-gray-400");
-          wrapper.classList.remove("border-black");
-        }
-      });
-
-      input.onchange = () => {
-        // Index = index in the list of already checked items
-        const index = value.data.indexOf(i);
-        if (input.checked && index < 0) {
-          value.data.push(i);
-          value.ping();
-        } else if (index >= 0) {
-          value.data.splice(index, 1);
-          value.ping();
-        }
-      };
+    constructor(
+        elements: BaseUIElement[],
+        value = new UIEventSource<number[]>([]),
+        styleFormOverride = '',
+        styleWrapperOverride = '',
+        styleInputOverride = '',
+        styleLabelOverride = ''
+    ) {
+        super()
+        this.value = value
+        this._elements = Utils.NoNull(elements)
+        this.SetClass('flex flex-col')
+        this.SetStyle(styleFormOverride)
+        this.styleWrapperOverride = styleWrapperOverride
+        this.styleInputOverride = styleInputOverride
+        this.styleLabelOverride = styleLabelOverride
     }
 
-    return el;
-  }
+    IsValid(ts: number[]): boolean {
+        return ts !== undefined
+    }
+
+    GetValue(): UIEventSource<number[]> {
+        return this.value
+    }
+
+    protected InnerConstructElement(): HTMLElement {
+        const el = document.createElement('form')
+
+        const value = this.value
+        const elements = this._elements
+
+        for (let i = 0; i < elements.length; i++) {
+            let inputI = elements[i]
+            const input = document.createElement('input')
+            const id = CheckBoxes._nextId
+            CheckBoxes._nextId++
+            input.id = 'checkbox' + id
+
+            input.type = 'checkbox'
+            input.classList.add('p-1', 'cursor-pointer', 'm-3', 'pl-3', 'mr-0')
+            input.style.cssText = this.styleInputOverride
+
+            const label = document.createElement('label')
+            label.htmlFor = input.id
+            label.appendChild(inputI.ConstructElement())
+            label.classList.add(
+                'block',
+                'w-full',
+                'p-2',
+                'cursor-pointer',
+                'bg-red'
+            )
+            label.style.cssText = this.styleLabelOverride
+
+            const wrapper = document.createElement('span')
+            wrapper.classList.add(
+                'wrapper',
+                'flex',
+                'w-full',
+                'border',
+                'border-gray-400',
+                'm-1'
+            )
+            wrapper.style.cssText = this.styleWrapperOverride
+            wrapper.appendChild(input)
+            wrapper.appendChild(label)
+            el.appendChild(wrapper)
+
+            value.addCallbackAndRunD((selectedValues) => {
+                if (selectedValues.indexOf(i) >= 0) {
+                    input.checked = true
+                }
+
+                if (input.checked) {
+                    wrapper.classList.remove('border-gray-400')
+                    wrapper.classList.add('border-black')
+                } else {
+                    wrapper.classList.add('border-gray-400')
+                    wrapper.classList.remove('border-black')
+                }
+            })
+
+            input.onchange = () => {
+                // Index = index in the list of already checked items
+                const index = value.data.indexOf(i)
+                if (input.checked && index < 0) {
+                    value.data.push(i)
+                    value.ping()
+                } else if (index >= 0) {
+                    value.data.splice(index, 1)
+                    value.ping()
+                }
+            }
+        }
+
+        return el
+    }
 }