🔵 Circles mode

cqb13 · Feb 15, 2023 · 944e45e · 944e45e
1 parent 8c2bd0d
commit 944e45e
Show file tree

Hide file tree

Showing 8 changed files with 285 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -30,4 +30,4 @@ _This only works in chrome_
 - click the icon in the top right corner of the screen
 - select the image you want as your background
 
-_Make sure the file you try and upload is under 5MB_
+_[Original Project](https://github.com/Subash/chrome-custom-new-tab-background)_
diff --git a/js/popup.js b/js/popup.js
@@ -1,6 +1,11 @@
 const backgroundPicker = document.querySelector(".picker-background");
+const backgroundColorPicker = document.getElementById("background-color");
+const circleColorPicker = document.getElementById("circle-color");
 const iconPicker = document.querySelector(".picker-icon");
-const toggle = document.getElementById("toggle-switch");
+const modeSwitch = document.getElementById("mode-switch");
+const circleMode = document.getElementById("circle-mode");
+const modeLabel = document.getElementById("mode-label");
+const imageMode = document.getElementById("image-mode");
 const newTitle = document.getElementById("new-title");
 const update = document.getElementById("update");
 
@@ -18,20 +23,35 @@ backgroundPicker.addEventListener("change", (e) => {
   onFileSelect(e, "background");
 });
 
-toggle.addEventListener("change", function () {
-  chrome.storage.sync.get(["stateCCT"], function (data) {
-    var stateCCT = data.stateCCT;
+modeSwitch.addEventListener("change", function () {
+  showType(modeSwitch.value, true);
+});
 
-    if (stateCCT == false) {
-      stateCCT = true;
-    } else {
-      stateCCT = false;
+const setColors = () => {
+  chrome.storage.sync.get(
+    ["backgroundColorCCT", "circleColorCCT"],
+    function (data) {
+      backgroundColorPicker.value = data.backgroundColorCCT;
+      circleColorPicker.value = data.circleColorCCT;
     }
+  );
+};
 
+const switchBackgroundType = (mode, reloads) => {
+  chrome.storage.sync.set({ backgroundTypeCCT: mode });
+  if (reloads) {
     reload();
+  }
+};
 
-    chrome.storage.sync.set({ stateCCT: stateCCT });
-  });
+backgroundColorPicker.addEventListener("change", function () {
+  chrome.storage.sync.set({ backgroundColorCCT: backgroundColorPicker.value });
+  reload();
+});
+
+circleColorPicker.addEventListener("change", function () {
+  chrome.storage.sync.set({ circleColorCCT: circleColorPicker.value });
+  reload();
 });
 
 function onFileSelect(e, type) {
@@ -53,21 +73,48 @@ function onFileSelect(e, type) {
   reload();
 }
 
+function showType(mode, reloads) {
+  if (mode == 0) {
+    modeLabel.innerHTML = "Circle Mode";
+    circleMode.style.display = "block";
+    imageMode.style.display = "none";
+    switchBackgroundType("C", reloads);
+    setColors();
+  } else if (mode == 1) {
+    modeLabel.innerHTML = "Image Mode";
+    circleMode.style.display = "none";
+    imageMode.style.display = "block";
+    switchBackgroundType("I", reloads);
+  }
+}
+
 function startUp() {
-  chrome.storage.sync.get(["stateCCT", "firstCCT"], function (data) {
+  chrome.storage.sync.get(["firstCCT", "backgroundTypeCCT"], function (data) {
+    if (data.backgroundTypeCCT == "C") {
+      modeSwitch.value = 0;
+      showType(0, false);
+    } else if (data.backgroundTypeCCT == "I") {
+      modeSwitch.value = 1;
+      showType(1, true);
+    } else {
+      modeSwitch.value = 1;
+      showType(1, true);
+    }
+
     if (data.firstCCT != true) {
       var run = true;
-      toggle.checked = run;
       chrome.storage.sync.set({ firstCCT: run });
-    } else {
-      toggle.checked = data.stateCCT;
+      chrome.storage.sync.set({ backgroundColorCCT: "#444444" });
+      chrome.storage.sync.set({ circleColorCCT: "#496bbe" });
     }
   });
 }
 
 function reload() {
   chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-    chrome.tabs.reload(tabs[0].id);
+    if (tabs[0].url === "chrome://newtab/") {
+      chrome.tabs.reload();
+    }
   });
 }
 

diff --git a/js/tab.js b/js/tab.js
@@ -1,5 +1,8 @@
+const circleContainer = document.getElementsByTagName("body")[0];
 const head = document.getElementsByTagName("head")[0];
 const tabName = document.getElementById("tab-name");
+const circlesList = [];
+let color = ""
 
 function setBackground(url) {
   const backgroundEl = document.querySelector(".background");
@@ -15,33 +18,128 @@ function setIcon(icon) {
   );
 }
 
-function init() {
-  if (localStorage.backgroundData) {
-    setBackground(localStorage.backgroundData);
-  } else {
-    setBackground("../images/default.png");
+const circles = async () => {
+  await chrome.storage.sync.get(["backgroundColorCCT", "circleColorCCT"], function (data) {
+    document.body.style.backgroundColor = data.backgroundColorCCT;
+    startCircleCreation(data.circleColorCCT);
+  });
+};
+
+const startCircleCreation = (color) => {
+  const mainWidth = circleContainer.offsetWidth;
+  const mainHeight = circleContainer.offsetHeight;
+  const maxSize = Math.floor(Math.random() * 500);
+
+  const x = Math.floor(Math.random() * mainWidth);
+  const y = Math.floor(Math.random() * mainHeight);
+
+  //stop creating circles inside other circles
+  for (let i = 0; i < circlesList.length; i++) {
+    if (
+      x > circlesList[i].offsetLeft &&
+      x < circlesList[i].offsetLeft + circlesList[i].offsetWidth &&
+      y > circlesList[i].offsetTop &&
+      y < circlesList[i].offsetTop + circlesList[i].offsetHeight
+    ) {
+      circles()
+      return;
+    }
   }
-  if (localStorage.iconData) {
-    setIcon(localStorage.iconData);
-  } else {
-    setIcon("../images/icon128.png");
+
+  const circle = document.createElement("div");
+  circle.classList.add("circle");
+  circle.style.border = `2px solid ${color}`;
+  circle.style.left = `${x}px`;
+  circle.style.top = `${y}px`;
+
+  circlesList.push(circle);
+
+  grow(circle, mainHeight, mainWidth, maxSize);
+};
+
+async function grow(circle, mainHeight, mainWidth, maxSize) {
+  let currentSize = 0;
+
+  while (currentSize < maxSize) {
+    currentSize += 1;
+
+    circle.style.width = `${currentSize}px`;
+    circle.style.height = `${currentSize}px`;
+    circle.style.opacity = `${currentSize / maxSize}`;
+
+    await new Promise((resolve) => setTimeout(resolve, 3));
+
+    if (circle.offsetLeft + circle.offsetWidth >= mainWidth) {
+      break;
+    }
+
+    if (circle.offsetTop + circle.offsetHeight >= mainHeight) {
+      break;
+    }
+
+    // Check if circle touches another circle's border
+    for (let i = 0; i < circlesList.length; i++) {
+      if (
+        circle !== circlesList[i] &&
+        doCirclesCollide(circle, circlesList[i])
+      ) {
+        circle.style.width = `${currentSize - 1}px`;
+        circle.style.height = `${currentSize - 1}px`;
+        circles();
+        return;
+      }
+    }
+
+    circleContainer.appendChild(circle);
   }
+  circles();
+}
+
+// check if two circles collide
+function doCirclesCollide(c1, c2) {
+  const distance = getDistance(c1, c2);
+  const minDistance = c1.offsetWidth / 2 + c2.offsetWidth / 2;
+  return distance < minDistance;
+}
+
+// get distance between two circles
+function getDistance(c1, c2) {
+  const x1 = c1.offsetLeft + c1.offsetWidth / 2;
+  const y1 = c1.offsetTop + c1.offsetHeight / 2;
+  const x2 = c2.offsetLeft + c2.offsetWidth / 2;
+  const y2 = c2.offsetTop + c2.offsetHeight / 2;
+  return Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);
 }
 
-chrome.storage.sync.get(["stateCCT", "newTitle", "firstCCT"], function (data) {
-  var newTabTitle = data.newTitle;
+// else if to account for more types in the future
+const init = async () => {
+  let backgroundType = await chrome.storage.sync.get(["backgroundTypeCCT"]);
+  let tabTitle = await chrome.storage.sync.get(["newTitle"]);
 
-  if (!data.stateCCT && data.firstCCT == true) {
-    document.getElementById("display").style.display = "none";
-  }
+  let mode = backgroundType.backgroundTypeCCT;
+  let title = tabTitle.newTitle;
 
-  if (newTabTitle == "" || newTabTitle == null) {
-    newTabTitle = "New Tab";
+  if (title == "" || title == null) {
+    tabName.innerHTML = "New Tab"
   } else {
-    newTabTitle = String(newTabTitle);
+    tabName.innerHTML = title
   }
 
-  tabName.innerHTML = newTabTitle;
-});
+  if (mode == "I") {
+    if (localStorage.backgroundData) {
+      setBackground(localStorage.backgroundData);
+    } else {
+      setBackground("../images/default.png");
+    }
+  } else if (mode == "C") {
+    circles();
+  }
+
+  if (localStorage.iconData) {
+    setIcon(localStorage.iconData);
+  } else {
+    setIcon("../images/icon128.png");
+  }
+};
 
 init();
diff --git a/layout/popup.html b/layout/popup.html
@@ -13,14 +13,27 @@ <h1>Custom Chrome Tab</h1>
   <main>
     <input id="new-title" type="entry" placeholder="Enter a tab name" />
     <input id="update" type="button" value="Update Name" class="button" />
+
     <label class="picker-label">
       <p class="button">Pick Icon</p>
       <input type="file" class="picker-icon" />
     </label>
-    <label class="picker-label">
-      <p class="button">Pick Background</p>
-      <input type="file" class="picker-background" />
-    </label>
+
+    <div id="image-mode">
+      <label class="picker-label">
+        <p class="button">Pick Background</p>
+        <input type="file" class="picker-background" />
+      </label>
+    </div>
+
+    <div id="circle-mode" class="hidden">
+      <p>Circle Color</p>
+      <input type="color" id="circle-color" value="#496bbe" class="picker-color">
+      <p>Background Color</p>
+      <input type="color" id="background-color" value="#444444" class="picker-color">
+    </div>
+    <input id="mode-switch" type="range" min="0" max="1">
+    <p id="mode-label">Image Mode</p>
   </main>
   <hr>
   <footer>
@@ -31,6 +44,7 @@ <h1>Custom Chrome Tab</h1>
         </path>
     </svg></a>
   </footer>
-  <script src="../js/popup.js" async defer></script>
+  <script src="../js/popup.js"></script>
+  <script src="../js/circle.js"></script>
 </body>
 </html>
diff --git a/layout/tab.html b/layout/tab.html
@@ -9,8 +9,6 @@
 
 <body>
   <div class="background"></div>
-  <input type="file" class="picker-icon" />
-  <input type="file" class="picker-background" />
   <script src="../js/tab.js"></script>
 </body>
 

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Custom Chrome Tab",
   "description": "Allows you to customize the chrome new tab!",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "manifest_version": 3,
 
   "permissions": ["storage", "activeTab", "scripting", "notifications"],