Merge pull request #7 from cis3296f23/bigham-dev

Titlebar
cis3296f23 · Nov 10, 2023 · 9e4c62d · 9e4c62d
2 parents b0877e7 + 8d0513d
commit 9e4c62d
Show file tree

Hide file tree

Showing 9 changed files with 176 additions and 20 deletions.
diff --git a/OpenOverlay.js b/OpenOverlay.js
@@ -1,3 +1,8 @@
 var root = document.getElementById("root");
 var summonerInfo = getSummoner({});
+var titlebar = titlebar({ title: "Open Overlay" });
+root.appendChild(titlebar);
+var summonerNameDiv = document.createElement("p");
+summonerNameDiv.innerHTML = "Summoner Name: ";
+root.appendChild(summonerNameDiv);
 root.appendChild(summonerInfo);
diff --git a/getSummoner.js → components/summoner/getSummoner.js b/getSummoner.js → components/summoner/getSummoner.js
diff --git a/summoner.css → components/summoner/summoner.css b/summoner.css → components/summoner/summoner.css
diff --git a/components/titlebar/titlebar.css b/components/titlebar/titlebar.css
@@ -0,0 +1,47 @@
+body {
+  margin: 0;
+  overflow: hidden;
+}
+
+.title-bar {
+  background-color: #3498db;
+  color: #fff;
+  height: 30px;
+  display: flex;
+  justify-content: space-between;
+  padding: 5px;
+}
+
+.title {
+  flex: 1;
+  padding-left: 10px;
+}
+
+.controls {
+  display: flex;
+  padding-right: 10px;
+}
+
+.controls div {
+  width: 12px;
+  height: 12px;
+  margin-left: 5px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.minimize {
+  background-color: #2ecc71;
+}
+
+.maximize {
+  background-color: #f39c12;
+}
+
+.close {
+  background-color: #e74c3c;
+}
+
+.content {
+  padding: 10px;
+}
diff --git a/components/titlebar/titlebar.js b/components/titlebar/titlebar.js
@@ -0,0 +1,38 @@
+const { ipcRenderer } = require("electron");
+
+// Function to create a div element with a specified class
+function createDivWithClass(className) {
+  const div = document.createElement("div");
+  div.className = className;
+  return div;
+}
+
+// Add minimize and maximize buttons if needed (similar to closeButton)
+// ...
+
+// Add event listeners for each button
+
+function titlebar({ title = "Open Overlay" }) {
+  var titleBarDiv = createDivWithClass("title-bar");
+  var title = createDivWithClass("title");
+  title.innerHTML = "Open Overlay";
+  titleBarDiv.appendChild(title);
+
+  var controls = createDivWithClass("controls");
+  titleBarDiv.appendChild(controls);
+  // Function to add a button to the controls container
+  function addButtonToControls(className, clickHandler) {
+    const button = createDivWithClass(className);
+    button.addEventListener("click", clickHandler);
+    controls.appendChild(button);
+  }
+  // Event listener for the close button
+  function handleCloseButtonClick() {
+    ipcRenderer.send("close-app");
+    console.log("close button clicked!");
+  }
+  addButtonToControls("minimize" /* minimize click handler */);
+  addButtonToControls("maximize" /* maximize click handler */);
+  addButtonToControls("close", handleCloseButtonClick);
+  return titleBarDiv;
+}
diff --git a/index.html b/index.html
@@ -4,34 +4,33 @@
     <meta charset="UTF-8" />
     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
 
-    <!--
-
-        <meta
-      http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self' https://unpkg.com"
-    />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self';" />
     <meta
       http-equiv="X-Content-Security-Policy"
-      content="default-src 'self'; script-src 'self' https://unpkg.com"
+      content="default-src 'self';"
     />
-    -->
-
-    <script src="getSummoner.js"></script>
-    <!-- React dependencies via CDNs -->
-    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
-    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
 
-    <!-- Babel for JSX compilation -->
-    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
+    <script src="components/summoner/getSummoner.js"></script>
+    <script src="components/titlebar/titlebar.js"></script>
+    <script src="utils.js"></script>
 
     <!-- Styling-->
-    <link rel="stylesheet" type="text/css" href="summoner.css" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="components/summoner/summoner.css"
+    />
+    <link rel="stylesheet" type="text/css" href="main.css" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="components/titlebar/titlebar.css"
+    />
 
     <title>OpenOverlay</title>
   </head>
   <body>
     <div id="root">
-      <p>Summoner Name</p>
       <script src="OpenOverlay.js"></script>
     </div>
   </body>

diff --git a/main.css b/main.css
@@ -0,0 +1,55 @@
+/* Define the primary color */
+:root {
+  --primary-color: #3498db;
+}
+
+body {
+  font-family: "Helvetica", sans-serif;
+  background-color: #404b6c; /* Light gray background */
+  color: #acb9c6; /* Dark text color */
+  margin: 0;
+}
+
+header {
+  background-color: var(--primary-color);
+  color: #ffffff; /* White text color on the header */
+  padding: 1em;
+  text-align: center;
+}
+
+h1,
+h2,
+h3 {
+  color: var(--primary-color); /* Use the primary color for headings */
+}
+
+a {
+  color: var(--primary-color); /* Use the primary color for links */
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.button {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: var(--primary-color);
+  color: #ffffff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: #2980b9; /* Darken the color on hover */
+}
+
+/* You can add more styles and customize as needed */
diff --git a/main.js b/main.js
@@ -1,20 +1,27 @@
-const { app, BrowserWindow } = require("electron");
-
+const { app, BrowserWindow, ipcMain } = require("electron");
+let win;
 const createWindow = () => {
-  const win = new BrowserWindow({
+  win = new BrowserWindow({
     webPreferences: {
       nodeIntegration: true,
       contextIsolation: false,
     },
     width: 1600,
     height: 1200,
+    frame: false,
   });
 
   win.loadFile("index.html");
+  win.on("closed", function () {
+    win = null;
+  });
 };
 
 app.whenReady().then(() => {
   createWindow();
+  ipcMain.on("close-app", () => {
+    app.quit();
+  });
 });
 
 app.on("window-all-closed", () => {

diff --git a/utils.js b/utils.js
@@ -0,0 +1,5 @@
+function createDivWithClass(className) {
+  const div = document.createElement("div");
+  div.className = className;
+  return div;
+}