Masked bit styles

2 files changed, 8 insertions, 7 deletions

diff --git a/index.js b/index.js
index fcb42e3..43f477a 100644
--- a/index.js
+++ b/index.js
@@ -8,8 +8,8 @@ class IPAddress extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      octets: [10, 88, 135, 24],
-      cidr: 32,
+      octets: [10, 88, 135, 144],
+      cidr: 28,
     }
   }
 
@@ -54,7 +54,7 @@ class IPAddress extends React.Component {
             <li className="octet">
               <ol>
                 {[...Array(8)].map((x, bit) =>
-                  <li className="bit">{(this.state.octets[octet] & (1 << (7-bit))) >> (7-bit)}</li>
+                  <li className={((octet*8)+bit) > this.state.cidr-1 ? 'bit masked' : 'bit unmasked'}>{(this.state.octets[octet] & (1 << (7-bit))) >> (7-bit)}</li>
                 )}
               </ol>
             </li>
diff --git a/style.scss b/style.scss
index 477809c..1db93d8 100644
--- a/style.scss
+++ b/style.scss
@@ -59,10 +59,11 @@ body {
               border: 1px black solid;
             }
           }
-          &:nth-child(1) ol li.bit { background-color: lighten($color_a, $octet_lighten); }
-          &:nth-child(2) ol li.bit { background-color: lighten($color_b, $octet_lighten); }
-          &:nth-child(3) ol li.bit { background-color: lighten($color_c, $octet_lighten); }
-          &:nth-child(4) ol li.bit { background-color: lighten($color_d, $octet_lighten); }
+          &:nth-child(1) ol li.bit.unmasked { background-color: lighten($color_a, $octet_lighten); }
+          &:nth-child(2) ol li.bit.unmasked { background-color: lighten($color_b, $octet_lighten); }
+          &:nth-child(3) ol li.bit.unmasked { background-color: lighten($color_c, $octet_lighten); }
+          &:nth-child(4) ol li.bit.unmasked { background-color: lighten($color_d, $octet_lighten); }
+          ol li.bit.masked { background-color: lighten($color_e, $octet_lighten); }
         }
       }
     }