send notification instead of error on pixel protection

src/actions/index.js

@@ -306,8 +306,7 @@ export function receivePixelReturn(
           msg = 'You can not access this canvas yet. You need to place more pixels';
           break;
         case 8:
-          errorTitle = 'nope';
+          dispatch(notify('Pixel protected!'));
-          msg = 'This pixel is protected.';
           break;
         case 9:
           // pixestack used up

src/store/audio.js

@@ -40,6 +40,35 @@ export default (store) => (next) => (action) => {
       break;
     }
 
+    case 'SET_NOTIFICATION': {
+      if (mute) break;
+      const { notification } = action;
+      if (typeof notification !== 'string') {
+        break;
+      }
+      const oscillatorNode = context.createOscillator();
+      const gainNode = context.createGain();
+
+      oscillatorNode.type = 'sine';
+      oscillatorNode.detune.value = -1200;
+
+      oscillatorNode.frequency.setValueAtTime(500, context.currentTime);
+      oscillatorNode.frequency.setValueAtTime(600, context.currentTime + 0.1);
+
+      gainNode.gain.setValueAtTime(0.3, context.currentTime);
+      gainNode.gain.exponentialRampToValueAtTime(
+        0.2,
+        context.currentTime + 0.1,
+      );
+
+      oscillatorNode.connect(gainNode);
+      gainNode.connect(context.destination);
+
+      oscillatorNode.start();
+      oscillatorNode.stop(context.currentTime + 0.2);
+      break;
+    }
+
     case 'PIXEL_WAIT': {
       if (mute) break;
       const oscillatorNode = context.createOscillator();

src/styles/dark-round.css

@@ -35,7 +35,7 @@ tr:nth-child(even) {
   border-radius: 8px;
 }
 
-.actionbuttons, .coorbox, .onlinebox, .cooldownbox, #historyselect, .notifybox {
+.actionbuttons, .coorbox, .onlinebox, .cooldownbox, #historyselect {
   background-color: rgba(59, 59, 59, 0.8);
   color: #f4f4f4;
   border-radius: 21px;
@@ -110,10 +110,6 @@ tr:nth-child(even) {
   color: #ecc9ff;
 }
 
-.notifybox.green, .notifybox.red {
-  color: black;
-}
-
 .actionbuttons:hover, .coorbox:hover, .menu > div:hover {
   background-color: #363637;
 }

src/styles/dark.css

@@ -34,7 +34,7 @@ tr:nth-child(even) {
   background-color: rgba(59, 59, 59, 0.8);
 }
 
-.actionbuttons, .coorbox, .onlinebox, .cooldownbox, .palettebox, #historyselect, .notifybox {
+.actionbuttons, .coorbox, .onlinebox, .cooldownbox, .palettebox, #historyselect {
   background-color: rgba(59, 59, 59, 0.8);
   color: #f4f4f4;
 }
@@ -107,10 +107,6 @@ tr:nth-child(even) {
   color: #ecc9ff;
 }
 
-.notifybox.green, .notifybox.red {
-  color: black;
-}
-
 .actionbuttons:hover, .coorbox:hover, .menu > div:hover {
   background-color: #363637;
 }

src/styles/default.css

@@ -456,13 +456,13 @@ tr:nth-child(even) {
 }
 
 .notifybox {
-  background-color: rgba(226, 226, 226, 0.80);
+  background-color: rgba(199, 206, 36, 0.8);
   position: fixed;
   top: 57px;
   left: 0px;
   right: 0px;
-  height: 30px;
+  min-height: 30px;
-  width: 50px;
+  width: 98px;
   color: black;
   font-size: 14px;
   line-height: 30px;
@@ -470,7 +470,6 @@ tr:nth-child(even) {
   vertical-align: middle;
   border: solid black;
   border-width: thin;
-  padding: 0 24px;
   margin-left: auto;
   margin-right: auto;
   z-index: 2;
@@ -485,7 +484,7 @@ tr:nth-child(even) {
 }
 
 .notifybox.green, .notifybox.red {
-  width: 20px;
+  width: 68px;
 }
 
 .notifybox.green {