From 19aee67a4fa277898966753b6df80b70673dff7e Mon Sep 17 00:00:00 2001
From: HF <pixelplanetdev@gmail.com>
Date: Thu, 5 Nov 2020 23:50:01 +0100
Subject: [PATCH 1/2] limit to node 10+

---
 .github/workflows/nodejs.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
index a869506..ed1ed96 100644
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@@ -9,7 +9,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [8.x, 10.x, 12.x, 13.x]
+        node-version: [10.x, 12.x, 13.x, 14.x]
 
     steps:
     - uses: actions/checkout@v1

From bf9ab513508e8fb1084dd0a5c6c550cc5406f45d Mon Sep 17 00:00:00 2001
From: HF <pixelplanetdev@gmail.com>
Date: Fri, 6 Nov 2020 00:32:47 +0100
Subject: [PATCH 2/2] send notification instead of error on pixel protection

---
 src/actions/index.js      |  3 +--
 src/store/audio.js        | 29 +++++++++++++++++++++++++++++
 src/styles/dark-round.css |  6 +-----
 src/styles/dark.css       |  6 +-----
 src/styles/default.css    |  9 ++++-----
 5 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/actions/index.js b/src/actions/index.js
index 786f554..44a7657 100644
--- a/src/actions/index.js
+++ b/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';
-          msg = 'This pixel is protected.';
+          dispatch(notify('Pixel protected!'));
           break;
         case 9:
           // pixestack used up
diff --git a/src/store/audio.js b/src/store/audio.js
index 9c66fdc..c9f91e9 100644
--- a/src/store/audio.js
+++ b/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();
diff --git a/src/styles/dark-round.css b/src/styles/dark-round.css
index 42de4d6..faa24e9 100644
--- a/src/styles/dark-round.css
+++ b/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;
 }
diff --git a/src/styles/dark.css b/src/styles/dark.css
index 5a5e799..0a3bb41 100644
--- a/src/styles/dark.css
+++ b/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;
 }
diff --git a/src/styles/default.css b/src/styles/default.css
index ecaf3d6..1e9f4cb 100644
--- a/src/styles/default.css
+++ b/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;
-  width: 50px;
+  min-height: 30px;
+  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 {