From daafda6104fb6cfd82e97fc5db0826bc384cd95d Mon Sep 17 00:00:00 2001
From: Timberpoes <silent_insomnia_pp@hotmail.co.uk>
Date: Sun, 19 Apr 2020 09:08:47 +0100
Subject: [PATCH] Octet separators in DNA Console genome sequencer. (#50516)

* Octet separators for the octet separator god.

* Code review changes
---
 code/game/machinery/computer/dna_console.dm |  2 +-
 tgui/packages/tgui/interfaces/DnaConsole.js | 22 +++++++++++++++++----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/code/game/machinery/computer/dna_console.dm b/code/game/machinery/computer/dna_console.dm
index da5e9f887ad..e1b071b9b8c 100644
--- a/code/game/machinery/computer/dna_console.dm
+++ b/code/game/machinery/computer/dna_console.dm
@@ -257,7 +257,7 @@
 	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
 
 	if(!ui)
-		ui = new(user, src, ui_key, "scan_consolenew", name, 515, 710, master_ui, state)
+		ui = new(user, src, ui_key, "scan_consolenew", name, 539, 710, master_ui, state)
 		ui.open()
 
 /obj/machinery/computer/scan_consolenew/ui_data(mob/user)
diff --git a/tgui/packages/tgui/interfaces/DnaConsole.js b/tgui/packages/tgui/interfaces/DnaConsole.js
index fc2024f55db..ca94bbdd8bd 100644
--- a/tgui/packages/tgui/interfaces/DnaConsole.js
+++ b/tgui/packages/tgui/interfaces/DnaConsole.js
@@ -7,10 +7,8 @@ import { useBackend } from '../backend';
 import { Box, Button, Collapsible, Dimmer, Divider, Dropdown, Flex, Icon, LabeledList, NumberInput, ProgressBar, Section } from '../components';
 import { createLogger } from '../logging';
 
-// TODO: Combining mutations (E.g. Radioactive + Strength = Hulk)
-// https://tgstation13.org/wiki/Guide_to_genetics#List_of_Mutations
-
-const logger = createLogger('DnaConsole');
+// IN CASE OF DEBUGGING, BREAK GLASS.
+// const logger = createLogger('DnaConsole');
 
 const SUBJECT_CONCIOUS = 0;
 const SUBJECT_SOFT_CRIT = 1;
@@ -1005,7 +1003,23 @@ const GenomeSequencer = props => {
         {buttons[i + 1]}
       </Box>
     );
+
+    if ((i % 8 === 0) && (i !== 0)) {
+      pairs.push(
+        <Box
+          key={`${i}_divider`}
+          inline
+          position="relative"
+          top="-17px"
+          left="-1px"
+          width="8px"
+          height="2px"
+          backgroundColor="label" />,
+      );
+    }
+
     pairs.push(pair);
+
   }
   return (
     <Fragment>