addition: changed numbers overview to left alignment

src/Addition.js

@@ -129,19 +129,20 @@ function Addition() {
     let numbersCopy = [...numbers];
 
     if(pressedKey === 37){ // left arrow
-      if(numbersCopy[noId].includes(".")){
-        numbersCopy[noId].push("0");
-      }else{
-        numbersCopy[noId].push(".");
+      // add one space before all numbers to shift this one
+      if(numbersCopy[noId][0] !== " "){
+        for(let idx in numbersCopy){
+          numbersCopy[idx].unshift(" ")
+        }
       }
+      numbersCopy[noId].shift();
       setNumbers(numbersCopy);
       setTimeout(() => {
         document.getElementById(tdId).focus();
       }, 100);
 
-    }else if(pressedKey === 39 && // right arrow
-             [".", "0"].includes(numbersCopy[noId][numbersCopy[noId].length-1])){
-      numbersCopy[noId].pop();
+    }else if(pressedKey === 39){ // right arrow
+      numbersCopy[noId].unshift(" ");
       setNumbers(numbersCopy);
       setTimeout(() => {
         document.getElementById(tdId).focus();
@@ -430,20 +431,23 @@ function Addition() {
     let numbersCopy = [...numbers];
     let commaPositions = [];
 
-    // reset numbers to calculate new length after error
-    for(let noIdx in numbersCopy){
-      while(numbersCopy[noIdx][0] === " "){
-        numbersCopy[noIdx].shift();
-      }
-    }
-
     // get all numbers up to the same length
     let numbersLen = Math.max(...numbers.map(n => n.length));
     for(let noIdx in numbersCopy){
-      while(numbersCopy[noIdx].length <= numbersLen){
-        numbersCopy[noIdx].unshift("&nbsp;");
+      while(numbersCopy[noIdx].length < numbersLen){
+        numbersCopy[noIdx].push("&nbsp;");
       }
-      commaPositions.push(numbersCopy[noIdx].indexOf("."));
+      let commaPos = numbersCopy[noIdx].indexOf(".");
+      if(commaPos < 0){
+        for(let idx=numbersCopy[noIdx].length-1; idx>0; idx--){
+          if(numbersCopy[noIdx][idx-1] !== "&nbsp;" &&
+             numbersCopy[noIdx][idx] === "&nbsp;"){
+            commaPos = idx;
+            break;
+          }
+        }
+      }
+      commaPositions.push(commaPos);
     }
     setNumbers(numbersCopy);
 
@@ -452,11 +456,22 @@ function Addition() {
 
     // if no commas in numbers
     if(commaPositions.length === 1 && commaPositions[0] !== numbersLen){
-      setCommaIdx(commaPositions[0]);
+      setCommaIdx(commaPositions[0] + 1);
       commaCorrect = true;
     }
 
     if(commaCorrect){
+      for(let idx=numbersLen-1; idx>=0; idx--){
+        let nos = numbersCopy.map(n => n[idx])
+        if(nos.every(n => n === "&nbsp;")){
+          for(let noIdx in numbersCopy){
+            numbersCopy[noIdx].splice(idx, 1);
+          }
+        }
+      }
+      for(let noIdx in numbersCopy){
+        numbersCopy[noIdx].unshift("&nbsp;");
+      }
       document.getElementById("commaSubmit").style.display = "none";
       commaIsSet = true;
     }else{

src/App.css

@@ -20,7 +20,6 @@ main ul li a{
 }
 
 td{
-  text-align: right !important;
   white-space: pre-wrap;
 }
 
@@ -32,7 +31,7 @@ hr{
   font-family: monospace;
   background-color: #ccc;
   min-width: 200px;
-  text-align: right;
+  text-align: left;
   margin: auto;
   font-size: 2em;
   display: inline-block;
@@ -40,7 +39,7 @@ hr{
 }
 
 #overview table{
-  width: 100%;
+  margin: 0 auto;
 }
 
 #overview p{