diff --git a/index.html b/index.html
index 0a9cd71..329fe6d 100644
--- a/index.html
+++ b/index.html
@@ -4,64 +4,89 @@
 <meta charset="UTF-8">
 <title>Strategy Grid</title>
 <style>
-    body {
-        font-family: sans-serif;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-top: 30px;
+body {
+font-family: sans-serif;
+display: flex;
+flex-direction: column;
+align-items: center;
+margin-top: 30px;
     }
 
-    #controls {
-        margin-bottom: 15px;
+#controls {
+margin-bottom: 15px;
     }
 
-    #stepBtn {
-        font-size: 14px;
-        padding: 6px 16px;
-        cursor: pointer;
+#stepBtn, #resetBtn {
+font-size: 14px;
+padding: 6px 16px;
+cursor: pointer;
+margin-right: 8px;
     }
 
-    #container {
-        display: flex;
-        flex-direction: row;
-        align-items: flex-start;
-        gap: 30px;
+#container {
+display: flex;
+flex-direction: row;
+align-items: flex-start;
+gap: 30px;
     }
 
-    #grid {
-        display: grid;
-        gap: 1px;
-        background-color: #333;
-        border: 1px solid #333;
+#grid {
+display: grid;
+gap: 1px;
+background-color: #333;
+border: 1px solid #333;
     }
 
-    .cell {
-        width: 12px;
-        height: 12px;
+.cell {
+width: 12px;
+height: 12px;
     }
 
-    #legend {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        padding-top: 4px;
+#legend {
+display: flex;
+flex-direction: column;
+gap: 10px;
+padding-top: 4px;
     }
 
-    .legend-item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 14px;
-        white-space: nowrap;
+.legend-item {
+display: flex;
+align-items: center;
+gap: 8px;
+font-size: 14px;
+white-space: nowrap;
     }
 
-    .legend-color {
-        width: 14px;
-        height: 14px;
-        display: inline-block;
-        border: 1px solid #333;
-        flex-shrink: 0;
+.legend-item input[type="checkbox"] {
+cursor: pointer;
+    }
+
+.legend-color {
+width: 14px;
+height: 14px;
+display: inline-block;
+border: 1px solid #333;
+flex-shrink: 0;
+    }
+
+#payoffs {
+margin-top: 20px;
+display: flex;
+flex-direction: column;
+gap: 8px;
+    }
+
+.payoff-item {
+display: flex;
+align-items: center;
+justify-content: space-between;
+gap: 10px;
+font-size: 14px;
+    }
+
+.payoff-item input {
+width: 50px;
+font-size: 14px;
     }
 </style>
 </head>
@@ -69,87 +94,177 @@
 
 <h1>Strategy Grid</h1>
 <div id="controls">
-    <button id="stepBtn">Step</button>
+<button id="stepBtn">Step</button>
+<button id="resetBtn">Reset</button>
 </div>
 <div id="container">
-    <div id="grid"></div>
-    <div id="legend"></div>
+<div id="grid"></div>
+<div id="legend">
+    <div id="legendItems"></div>
+    <div id="payoffs">
+        <div class="payoff-item">
+            <label for="inputT">T (temptation)</label>
+            <input id="inputT" type="number" value="5">
+        </div>
+        <div class="payoff-item">
+            <label for="inputR">R (reward)</label>
+            <input id="inputR" type="number" value="3">
+        </div>
+        <div class="payoff-item">
+            <label for="inputP">P (punishment)</label>
+            <input id="inputP" type="number" value="1">
+        </div>
+        <div class="payoff-item">
+            <label for="inputS">S (sucker)</label>
+            <input id="inputS" type="number" value="0">
+        </div>
+    </div>
+</div>
 </div>
 
 <script src="main.js"></script>
 <script>
-// This file only handles rendering.
-// ALLC, ALLD, RAND, TFT, GRIM, MAJ and the Party class
-// are already defined in script.js and are not redefined here.
 
 // ---- Color / function mapping ----
 
 const COLORS = {
-    allwaysCooperate: "#2ecc71", // green
-    allwaysDefect:     "#e74c3c", // red
-    randomChoice:      "#95a5a6", // gray
-    titForThat:        "#3498db", // blue
-    grimTrigger:       "#8e44ad", // purple
-    majority:          "#f39c12"  // orange
+allwaysCooperate: "#2ecc71", // green
+allwaysDefect:     "#e74c3c", // red
+randomChoice:      "#95a5a6", // gray
+titForThat:        "#5dade2", // light blue
+suspiciousTitForTat: "#2874a6", // dark blue
+grimTrigger:       "#8e44ad", // purple
+majority:          "#f39c12"  // orange
 };
 
 const LABELS = {
-    allwaysCooperate: "Always Cooperate",
-    allwaysDefect:     "Always Defect",
-    randomChoice:      "Random",
-    titForThat:        "Tit-for-Tat",
-    grimTrigger:       "Grim Trigger",
-    majority:          "Majority"
+allwaysCooperate: "Always Cooperate",
+allwaysDefect:     "Always Defect",
+randomChoice:      "Random",
+titForThat:        "Tit-for-Tat",
+suspiciousTitForTat: "Suspicious Tit-for-Tat",
+grimTrigger:       "Grim Trigger",
+majority:          "Majority"
+};
+
+// maps each legend key to the actual strategy function defined in main.js
+const STRATEGY_FUNCTIONS = {
+allwaysCooperate: ALLC,
+allwaysDefect:     ALLD,
+randomChoice:      RAND,
+titForThat:        TFT,
+suspiciousTitForTat: STFT,
+grimTrigger:       GRIM,
+majority:          MAJ
 };
 
 // ---- Rendering ----
 
 function renderGrid(party) {
-    const gridEl = document.getElementById("grid");
-    gridEl.innerHTML = "";
-    gridEl.style.gridTemplateColumns = `repeat(${party.length}, 12px)`;
+const gridEl = document.getElementById("grid");
+gridEl.innerHTML = "";
+gridEl.style.gridTemplateColumns = `repeat(${party.length}, 12px)`;
 
-    for (let i = 0; i < party.length; i++) {
-        for (let j = 0; j < party.length; j++) {
-            const fn = party.grid[i][j];
-            const cell = document.createElement("div");
-            cell.className = "cell";
-            cell.style.backgroundColor = COLORS[fn.name] || "#000";
-            cell.title = LABELS[fn.name] || fn.name;
-            gridEl.appendChild(cell);
+for (let i = 0; i < party.length; i++) {
+for (let j = 0; j < party.length; j++) {
+const fn = party.grid[i][j];
+const cell = document.createElement("div");
+cell.className = "cell";
+cell.style.backgroundColor = COLORS[fn.name] || "#000";
+cell.title = LABELS[fn.name] || fn.name;
+gridEl.appendChild(cell);
         }
     }
 }
 
 function renderLegend() {
-    const legendEl = document.getElementById("legend");
-    for (const key in COLORS) {
-        const item = document.createElement("div");
-        item.className = "legend-item";
+const legendEl = document.getElementById("legendItems");
+for (const key in COLORS) {
+const item = document.createElement("div");
+item.className = "legend-item";
 
-        const colorBox = document.createElement("span");
-        colorBox.className = "legend-color";
-        colorBox.style.backgroundColor = COLORS[key];
+const checkbox = document.createElement("input");
+checkbox.type = "checkbox";
+checkbox.id = `checkbox-${key}`;
+checkbox.checked = true;
 
-        const label = document.createElement("span");
-        label.textContent = LABELS[key];
+const colorBox = document.createElement("span");
+colorBox.className = "legend-color";
+colorBox.style.backgroundColor = COLORS[key];
 
-        item.appendChild(colorBox);
-        item.appendChild(label);
-        legendEl.appendChild(item);
+const label = document.createElement("span");
+label.textContent = LABELS[key];
+
+item.appendChild(checkbox);
+item.appendChild(colorBox);
+item.appendChild(label);
+legendEl.appendChild(item);
     }
 }
 
+// returns the list of strategy functions whose checkbox is currently checked
+function getSelectedFunctions() {
+const selected = [];
+for (const key in STRATEGY_FUNCTIONS) {
+const checkbox = document.getElementById(`checkbox-${key}`);
+if (checkbox && checkbox.checked) {
+selected.push(STRATEGY_FUNCTIONS[key]);
+    }
+}
+return selected;
+}
+
 // ---- Execution ----
 
-const party = new Party(60);
+let party = new Party(60);
 renderGrid(party);
 renderLegend();
 
-document.getElementById("stepBtn").addEventListener("click", () => {
-    party.step();
+function doStep() {
+    const T = Number(document.getElementById("inputT").value);
+    const R = Number(document.getElementById("inputR").value);
+    const P = Number(document.getElementById("inputP").value);
+    const S = Number(document.getElementById("inputS").value);
+
+    party.step(T, R, P, S);
     renderGrid(party);
-});
+}
+
+function doReset() {
+    const selected = getSelectedFunctions();
+    party.reset(selected); // if selected is empty, Party keeps the previous selection
+    renderGrid(party);
+}
+
+// single click: one step
+document.getElementById("stepBtn").addEventListener("click", doStep);
+
+// held click: repeat steps automatically, as if the button were being spammed
+const stepBtn = document.getElementById("stepBtn");
+let holdInterval = null;
+const HOLD_DELAY = 300;   // ms before auto-repeat kicks in
+const HOLD_INTERVAL = 10; // ms between repeated steps while held
+
+function startHold() {
+    stopHold(); // safety, avoid stacking intervals
+    holdInterval = setTimeout(() => {
+        holdInterval = setInterval(doStep, HOLD_INTERVAL);
+    }, HOLD_DELAY);
+}
+
+function stopHold() {
+    clearTimeout(holdInterval);
+    clearInterval(holdInterval);
+    holdInterval = null;
+}
+
+stepBtn.addEventListener("mousedown", startHold);
+stepBtn.addEventListener("mouseup", stopHold);
+stepBtn.addEventListener("mouseleave", stopHold);
+stepBtn.addEventListener("touchstart", (e) => { e.preventDefault(); startHold(); });
+stepBtn.addEventListener("touchend", stopHold);
+
+document.getElementById("resetBtn").addEventListener("click", doReset);
 </script>
 
 </body>
diff --git a/main.js b/main.js
index c61fc4c..5c0d061 100644
--- a/main.js
+++ b/main.js
@@ -20,6 +20,13 @@ const TFT = function titForThat(foeHistory) {
     return foeHistory[foeHistory.length - 1];
 }
 
+const STFT = function suspiciousTitForTat(foeHistory) {
+    if (foeHistory.length === 0) {
+        return false;
+    }
+    return foeHistory[foeHistory.length - 1];
+}
+
 const GRIM = function grimTrigger(foeHistory) {
     if (foeHistory.some(e => e === false)) {
         return false;
@@ -45,29 +52,46 @@ const MAJ = function majority(foeHistory) {
 }
 
 class Party {
-    constructor(length) {
+    constructor(length, functions) {
         this.length = length;
 
-        this.functions = [ALLC, ALLD, RAND, TFT, GRIM, MAJ];
+        // if a list of active strategies is provided, use it,
+        // otherwise fall back to all seven by default
+        this.functions = (functions && functions.length > 0)
+            ? functions
+            : [ALLC, ALLD, RAND, TFT, STFT, GRIM, MAJ];
 
         this.grid = [];
 
-        for (let i = 0; i < length; i++) {
+        for (let i = 0; i < this.length; i++) {
             this.grid[i] = [];
 
-            for (let j = 0; j < length; j++) {
+            for (let j = 0; j < this.length; j++) {
                 const index = Math.floor(Math.random() * this.functions.length);
                 this.grid[i][j] = this.functions[index];
             }
         }
     }
 
-    step() {
-        const T = 5;
-        const R = 3;
-        const P = 1;
-        const S = 0;
+    reset(functions) {
+        // if a new list of active strategies is passed, update it;
+        // otherwise keep the current selection
+        if (functions && functions.length > 0) {
+            this.functions = functions;
+        }
 
+        this.grid = [];
+        for (let i = 0; i < this.length; i++) {
+            this.grid[i] = [];
+
+            for (let j = 0; j < this.length; j++) {
+                const index = Math.floor(Math.random() * this.functions.length);
+                this.grid[i][j] = this.functions[index];
+            }
+        }
+    }
+
+    step(T = 5, R = 3, P = 1, S = 0) {
         const nbRound = 50;
 
         let scores = [];
@@ -130,7 +154,7 @@ class Party {
             }
         }
 
-        // changing strarts
+        // changing strats
         for (let i = 0; i < this.length; i++) {
             for (let j = 0; j < this.length; j++) {
                 let bestScore = scores[i][j];