Liuuner · Liuuner · May 13, 2024 · May 7, 2024 · May 13, 2024 · May 13, 2024
diff --git a/index.html b/index.html
@@ -6,6 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="manifest" href="/manifest.json" />
     <title>Webuntu</title>
+    <link href="https://fonts.googleapis.com" rel="preconnect">
+    <link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
+      rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/battery-icon.svg b/public/battery-icon.svg
diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx
@@ -3,6 +3,7 @@ import IMAGES from "./Images.ts";
 import { AppModel } from "src/model/AppModel.ts";
 import { useAppDispatch, useAppSelector } from "src/hooks/storeHooks.ts";
 import { appsSliceActions } from "src/store/apps/AppsSlice.ts";
+import AppIcon from "src/components/AppBar/AppIcon.tsx";
 
 const AppBar = () => {
   const dispatch = useAppDispatch();
@@ -16,9 +17,7 @@ const AppBar = () => {
     <aside id={"appBar"}>
       <div id={"apps"}>
         {taskbarApps.map((app, index) => (
-          <div onClick={() => handleOpenApp(app)} key={index} className={"icon"}>
-            <img src={app.icon} alt={app.name} />
-          </div>
+          <AppIcon app={app} handleOpenApp={handleOpenApp} key={index} />
         ))}
       </div>
       <div className={"icon"}>

diff --git a/src/components/AppBar/AppIcon.tsx b/src/components/AppBar/AppIcon.tsx
@@ -0,0 +1,33 @@
+import { AppModel } from "src/model/AppModel.ts";
+import { Tooltip } from "@mui/material";
+
+type AppIconProps = {
+  app: AppModel;
+  handleOpenApp: (_app: AppModel) => void;
+}
+
+const AppIcon = ({ app, handleOpenApp }: AppIconProps) => {
+  return (
+    <Tooltip
+      title={app.name}
+      placement={"right"}
+      /*slotProps={{
+        popper: {
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [0, -10]
+              }
+            }
+          ]
+        }
+      }}*/>
+      <div onClick={() => handleOpenApp(app)} className={"icon"}>
+        <img src={app.icon} alt={app.name} />
+      </div>
+    </Tooltip>
+  );
+};
+
+export default AppIcon;
diff --git a/src/components/BatteryInfo/Battery.tsx b/src/components/BatteryInfo/Battery.tsx
@@ -0,0 +1,50 @@
+const Battery = ({ level, isCharging }: { level: number, isCharging: boolean }) => {
+  const maxBatteryLevelWidth = 49;
+  const minBatteryLevelWidth = 3;
+  const batteryLevelWidth = level / 100 * (maxBatteryLevelWidth - minBatteryLevelWidth) + minBatteryLevelWidth;
+
+  const batteryColor = () => {
+    if (isCharging) {
+      return "green";
+    } else if (level < 10) {
+      return "red";
+    } else if (level < 25) {
+      return "orange";
+    }
+    return "white";
+  };
+
+  return (
+    <svg
+      fill="#FFF"
+      style={{ aspectRatio: 800 / 426.6 }}
+      height="100%"
+      // width="100%"
+      viewBox="0 0 60 31.999999"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g transform="rotate(90,37,23)">
+        <path
+          d="M 42.536,4 H 36 V 0 H 24 V 4 H 17.464 C 15.554,4 14,5.554 14,7.464 V 56.536 C 14,58.446 15.554,60 17.464,60 H 42.535 C 44.446,60 46,58.446 46,56.536 V 7.464 C 46,5.554 44.446,4 42.536,4 Z M 44,56.536 C 44,57.344 43.343,58 42.536,58 H 17.464 C 16.657,58 16,57.344 16,56.536 V 7.464 C 16,6.656 16.657,6 17.464,6 H 24 36 42.536 C 43.343,6 44,6.656 44,7.464 Z" />
+        <rect
+          fill={batteryColor()}
+          id="batteryLevel"
+          rx="1"
+          width={batteryLevelWidth}
+          height="25.506134"
+          x="-56.605736"
+          y="17.251272"
+          transform="rotate(-90)"
+        />
+        <path
+          style={{ display: isCharging ? "inline" : "none" }}
+          fill="white"
+          id="chargingIcon"
+          d="M 37,29 H 34 V 17.108 c 0.013,-0.26 -0.069,-0.515 -0.236,-0.72 -0.381,-0.467 -1.264,-0.463 -1.642,0.004 -0.026,0.032 -0.05,0.066 -0.072,0.103 l -9.9,15.979 c -0.191,0.309 -0.2,0.696 -0.023,1.013 C 22.303,33.804 22.637,34 23,34 h 4 l 0.002,12.929 h 0.001 c 0.001,0.235 0.077,0.479 0.215,0.657 0.189,0.247 0.529,0.414 0.84,0.414 0.305,0 0.636,-0.16 0.825,-0.398 0.04,-0.05 0.074,-0.103 0.104,-0.159 l 8.899,-16.979 c 0.163,-0.31 0.151,-0.682 -0.03,-0.981 C 37.675,29.184 37.35,29 37,29 Z"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default Battery;
diff --git a/src/components/BatteryInfo/BatteryInfo.tsx b/src/components/BatteryInfo/BatteryInfo.tsx
@@ -0,0 +1,60 @@
+import { styled, Tooltip } from "@mui/material";
+import useBattery from "src/hooks/useBattery.ts";
+import Battery from "src/components/BatteryInfo/Battery.tsx";
+
+function BatteryInfo() {
+  const batteryInfo = useBattery();
+
+  /*const [level, setLevel] = useState(0);
+  const [direction, setDirection] = useState(1); // 1 for increasing, -1 for decreasing
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (level === 100 && direction === 1) {
+        // If count reaches 100 and direction is increasing, switch direction
+        setDirection(-1);
+      } else if (level === 0 && direction === -1) {
+        // If count reaches 0 and direction is decreasing, switch direction
+        setDirection(1);
+      } else {
+        // Otherwise, increment or decrement count based on direction
+        setLevel(prevCount => prevCount + direction);
+      }
+    }, 100); // Update every 100 milliseconds (increase speed by reducing this value)
+
+    return () => clearInterval(interval); // Clean up the interval on component unmount
+  }, [level, direction]);*/
+
+
+  if (!batteryInfo.supported) return;
+
+  return (
+    <Tooltip
+      title={`Battery Status: ${batteryInfo.level}% remaining`}
+      slotProps={{
+        popper: {
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [0, -10]
+              }
+            }
+          ]
+        }
+      }}>
+      <StyledBatteryInfoDiv>
+        <Battery level={batteryInfo.level} isCharging={batteryInfo.charging} />
+      </StyledBatteryInfoDiv>
+    </Tooltip>
+  );
+}
+
+
+const StyledBatteryInfoDiv = styled("div")(() => ({
+  backgroundColor: "black",
+  height: "70%",
+  display: "flex"
+}));
+
+export default BatteryInfo;
diff --git a/src/components/InfoBar/InfoBar.css b/src/components/InfoBar/InfoBar.css
@@ -1,36 +1,32 @@
 #infoBar {
     grid-area: infoBar;
     background-color: #000;
-    display: flex;
-    /*justify-content: space-between;*/
-    justify-content: center;
-    align-items: center;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
 
     -webkit-user-select: none; /* Safari */
     -ms-user-select: none; /* IE 10 and IE 11 */
     user-select: none; /* Standard syntax */
-}
-
-#leftButtonGroup {
-    display: flex;
-}
-
-.infoBarButton {
-    display: flex;
-}
-
-.infoBarButton img {
-    height: 80%;
-}
-
-#rightButtonGroup {
-    display: flex;
-}
-
-#rightButtonGroup img {
-    height: 80%;
-}
-
-#time {
-    display: flex;
+
+    .buttonGroup {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        align-items: center;
+
+        &.left {
+            /*background-color: #521338;*/
+            justify-content: left;
+        }
+
+        &.center {
+            /*background-color: #e95420;*/
+            justify-content: center;
+        }
+
+        &.right {
+            /*background-color: #130610;*/
+            justify-content: right;
+        }
+    }
 }
diff --git a/src/components/InfoBar/InfoBar.tsx b/src/components/InfoBar/InfoBar.tsx
@@ -2,6 +2,7 @@ import "./InfoBar.css";
 import { useEffect, useRef, useState } from "react";
 import dayjs from "dayjs";
 import { useAppSelector } from "src/hooks/storeHooks.ts";
+import BatteryInfo from "src/components/BatteryInfo/BatteryInfo.tsx";
 
 function InfoBar() {
   const timeFormat = useAppSelector(
@@ -20,28 +21,30 @@ function InfoBar() {
 
   return (
     <header id={"infoBar"}>
-      <div id={"time"}>
+      <div className="left buttonGroup">
+        {/*<div className={"infoBarButton"}>
+          <p>Activities</p>
+        </div>
+        <div className={"infoBarButton"}>
+          <img src="/app-icons/settings-icon.png" alt="Settings"/>
+          <p>Settings</p>*/}
+        {/*</div>*/}
+      </div>
+
+      <div className="center buttonGroup">
         <p>{time}</p>
       </div>
-      {/*<div id={"leftButtonGroup"}>
-                <div className={"infoBarButton"}>
-                    <p>Activities</p>
-                </div>
-                <div className={"infoBarButton"}>
-                    <img src="/app-icons/settings-icon.png" alt="Settings"/>
-                    <p>Settings</p>
-                </div>
-            </div>
-            <div id={"time"}>
-                <p>{time}</p>
-            </div>
-            <div id={"rightButtonGroup"}>
-                <img style={{filter: "invert(100%)"}} src="/info-bar-icons/network-icon.png" alt="Network"/>
-                <img src="/info-bar-icons/volume_icon.png" alt="Volume"/>
-                <img style={{filter: "invert(100%)"}} src="/info-bar-icons/power-icon.png" alt="Power"/>
-            </div>*/}
+
+      <div className="right buttonGroup">
+        <BatteryInfo />
+        {/*<img style={{filter: "invert(100%)"}} src="/info-bar-icons/network-icon.png" alt="Network"/>
+        <img src="/info-bar-icons/volume_icon.png" alt="Volume"/>
+        <img style={{filter: "invert(100%)"}} src="/info-bar-icons/power-icon.png" alt="Power"/>*/}
+      </div>
+
     </header>
   );
 }
 
+
 export default InfoBar;
diff --git a/src/components/InfoBar/InfoBarButton.tsx b/src/components/InfoBar/InfoBarButton.tsx
@@ -0,0 +1,20 @@
+import { Button } from "@mui/material";
+
+type InfoBarButtonProps = {
+  label?: string;
+  startIconUrl?: string;
+  endIconUrl?: string;
+  onClick?: () => void
+}
+
+function InfoBarButton({ label, startIconUrl, endIconUrl, onClick }: InfoBarButtonProps) {
+
+
+  if (label && (startIconUrl || endIconUrl)) {
+    return (
+      <Button>
+        {label}
+      </Button>
+    );
+  }
+}