shaders

2026-04-06 00:32:09 +02:00 · 2023-11-11 17:08:00 +00:00
parent 56a17fed33
commit cc787c289b
20 changed files with 471 additions and 93 deletions
--- a/38
+++ b/38
@@ -1,19 +1,19 @@
-0: #181716
-8: #93918b
-1: #b57e72
-9: #b57e72
-2: #8cb97a
-10: #8cb97a
-3: #c9c384
-11: #c9c384
-4: #9c96bc
-12: #9c96bc
-5: #dba3c7
-13: #dba3c7
-6: #afddce
-14: #afddce
-7: #edeae1
-15: #edeae1
-background: #1e1d1c
-foreground: #e8e5da
-cursor: #e8e5da
+0: #3a3831
+8: #4b4942
+1: #6d3831
+9: #6d3831
+2: #3a6b31
+10: #3a6b31
+3: #6d6b31
+11: #6d6b31
+4: #3a3864
+12: #3a3864
+5: #6d3864
+13: #6d3864
+6: #3a6b64
+14: #3a6b64
+7: #6d6b64
+15: #6d6b64
+background: #c2bda6
+foreground: #48463d
+cursor: #f4f0e1
--- a/components/ags/assets/yorha-light.png
+++ b/components/ags/assets/yorha-light.png
--- a/components/ags/assets/yorha.png
+++ b/components/ags/assets/yorha.png
--- a/components/ags/assets/yorha_logo.jpg
+++ b/components/ags/assets/yorha_logo.jpg
--- a/components/ags/config.js
+++ b/components/ags/config.js
@@ -24,7 +24,7 @@ import { NowPlaying } from "./widgets/nowplaying.js";
 // import { NierDropDownButton } from "./nier/dropdown.js";

 const { exec, subprocess, execAsync } = Utils;
-const { Box, Window, Label, Revealer } = Widget;
+const { Box, Window, Label, Button, Revealer, Icon } = Widget;

 exec(`sassc ${scss} ${css}`);

@@ -51,14 +51,19 @@ const top = () =>
    children: [
      Box({
        spacing: 20,
+        halign: "fill",
+        style: `min-width: ${SCREEN_WIDTH}px;`,
        children: [
-          NierDropDownButton({
-            label: "test",
-            current: Variable("YES", {}),
-            options: Variable(["hello", "no"], {}),
-          }),
-          NierButton({
-            handleClick: async (self, event) => {
+          Workspaces({}),
+          Button({
+            halign: "end",
+            hexpand: true,
+            className: ["settings-button"],
+            child: Icon({
+              size: 40,
+              icon: App.configDir + "/assets/yorha-light.png",
+            }),
+            onClicked: () => {
              App.toggleWindow("settings");
            },
          }),
@@ -68,7 +73,7 @@ const top = () =>
        className: ["under-workspaces"],
        style: `background: url("${
          App.configDir + "/assets/nier-border.svg"
-        }") repeat-x;min-width: ${SCREEN_WIDTH}px;background-size: 80px 20px;min-height: 80px;`,
+        }") repeat-x;min-width: ${SCREEN_WIDTH}px;background-size: 100px 25px;min-height: 100px;`,
        child: Label(""),
      }),
      // NowPlaying({}),
@@ -77,7 +82,7 @@ const top = () =>

 const Bar = ({ monitor } = {}) => {
  return Window({
-    name: `bar-${monitor}`, // name has to be unique
+    name: `bar`, // name has to be unique
    className: "bar",
    monitor,
    margin: [0, 0],
@@ -104,6 +109,23 @@ const Side = () =>
      child: NowPlaying({}),
    }),
  });
+
+const BottomBar = () =>
+  Window({
+    name: "bottombar",
+    margin: [0, 0],
+    anchor: ["bottom", "left", "right"],
+    exclusive: false,
+    layer: "bottom",
+    child: Box({
+      className: ["under-workspaces"],
+      style: `background: url("${
+        App.configDir + "/assets/nier-border.svg"
+      }") repeat-x;min-width: ${SCREEN_WIDTH}px;background-size: 100px 25px;min-height: 100px;`,
+      child: Label(""),
+    }),
+  });
+
 export default {
  closeWindowDelay: {
    settings: 500, // milliseconds
@@ -114,6 +136,7 @@ export default {
    Bar(),
    NierSettingPane(),
    Side(),
+    BottomBar(),
    // you can call it, for each monitor
    // Bar({ monitor: 0 }),
    // Bar({ monitor: 1 })
--- a/components/ags/style/nier.scss
+++ b/components/ags/style/nier.scss
@@ -4,3 +4,11 @@
@import "nier/button";
@import "nier/dropdown";
@import "nier/others";
+
+.settings-button {
+  background: #cd664d;
+  margin-right: 20px;
+  margin-bottom: 10px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
--- a/components/ags/style/nier/longbutton.scss
+++ b/components/ags/style/nier/longbutton.scss
@@ -15,6 +15,7 @@ $button_spacing_horizontal: 5px;
    padding-top: calc(8px - #{$accent_border_dist});
    padding-bottom: calc(7px - #{$accent_border_dist});
    background-position: -100%;
+    font-family: FOT-Rodin Pro B, sans-serif;
    color: $tan;
  }
 }
@@ -23,7 +24,7 @@ $button_spacing_horizontal: 5px;
  border: none;
  border-top: transparent $accent_border solid;
  border-bottom: transparent $accent_border solid;
-  min-width: 150px;
+  min-width: 190px;
 }

 .nier-toggle-on {
@@ -38,7 +39,8 @@ $button_spacing_horizontal: 5px;

 // the actual button looking thing ( is actuaally a label :0 )
 .nier-long-button label {
-  font-size: 1.5rem;
+  font-size: 2rem;
+  font-family: FOT-Rodin Pro M, sans-serif;
  background: linear-gradient(
    90deg,
    rgba($brown, 0.25) 0%,
--- a/components/ags/style/style.css
+++ b/components/ags/style/style.css
@@ -13,7 +13,8 @@
  transition: opacity 0.3s ease-in-out; }

 .nier-long-button label {
-  font-size: 1.5rem;
+  font-size: 2rem;
+  font-family: FOT-Rodin Pro M, sans-serif;
  background: linear-gradient(90deg, rgba(72, 70, 61, 0.25) 0%, rgba(72, 70, 61, 0.25) 50%, #48463d 50%, #48463d 100%);
  background-size: 200%;
  color: #48463d;
@@ -34,7 +35,7 @@
  border: none;
  border-top: transparent 3px solid;
  border-bottom: transparent 3px solid;
-  min-width: 150px;
+  min-width: 190px;
  transition: border 0.3s ease-in-out; }

 .nier-long-button-hover {
@@ -46,6 +47,7 @@
    padding-top: calc(8px - 4px);
    padding-bottom: calc(7px - 4px);
    background-position: -100%;
+    font-family: FOT-Rodin Pro B, sans-serif;
    color: #c2bda6; }
  .nier-long-button-hover label {
    transition: background 1s cubic-bezier(0.15, 0.79, 0, 1); }
@@ -481,6 +483,13 @@
  text-shadow: 10px 10px 1px rgba(72, 70, 61, 0.25);
  color: #48463d; }

+.settings-button {
+  background: #cd664d;
+  margin-right: 20px;
+  margin-bottom: 10px;
+  padding-left: 12px;
+  padding-right: 12px; }
+
 .nier-toggle-on {
  opacity: 1;
  transition: opacity 0.3s ease-in-out; }
@@ -490,7 +499,8 @@
  transition: opacity 0.3s ease-in-out; }

 .nier-long-button label {
-  font-size: 1.5rem;
+  font-size: 2rem;
+  font-family: FOT-Rodin Pro M, sans-serif;
  background: linear-gradient(90deg, rgba(72, 70, 61, 0.25) 0%, rgba(72, 70, 61, 0.25) 50%, #48463d 50%, #48463d 100%);
  background-size: 200%;
  color: #48463d;
@@ -511,7 +521,7 @@
  border: none;
  border-top: transparent 3px solid;
  border-bottom: transparent 3px solid;
-  min-width: 150px;
+  min-width: 190px;
  transition: border 0.3s ease-in-out; }

 .nier-long-button-hover {
@@ -523,6 +533,7 @@
    padding-top: calc(8px - 4px);
    padding-bottom: calc(7px - 4px);
    background-position: -100%;
+    font-family: FOT-Rodin Pro B, sans-serif;
    color: #c2bda6; }
  .nier-long-button-hover label {
    transition: background 1s cubic-bezier(0.15, 0.79, 0, 1); }
@@ -555,6 +566,7 @@
    padding-top: calc(8px - 4px);
    padding-bottom: calc(7px - 4px);
    background-position: -100%;
+    font-family: FOT-Rodin Pro B, sans-serif;
    color: #c2bda6; }
  .workspace-button-container.active-no-hover .nier-long-button label {
    transition: background 0.3s cubic-bezier(0.15, 0.79, 0, 1);
@@ -609,6 +621,32 @@
 .under-workspaces {
  margin-top: -1px; }

+.player-buttons.pressed:hover .heading {
+  text-shadow: 5px 5px 1px rgba(72, 70, 61, 0.25);
+  padding-bottom: 0px;
+  padding-right: 0px;
+  margin-right: 5px;
+  margin-top: 5px;
+  transition: padding 0.3s cubic-bezier(0, 1, 0, 1), margin 0.3s cubic-bezier(0, 1, 0, 1), text-shadow 0.3s cubic-bezier(0, 1, 0, 1); }
+
+.player-buttons:hover .heading {
+  text-shadow: 10px 10px 1px rgba(72, 70, 61, 0.25);
+  padding-bottom: 5px;
+  padding-right: 5px;
+  margin-right: 0px;
+  margin-top: 0px;
+  transition: padding 0.3s cubic-bezier(0, 1, 0, 1), margin 0.3s cubic-bezier(0, 1, 0, 1), text-shadow 0.3s cubic-bezier(0, 1, 0, 1); }
+
+.player-buttons .heading {
+  margin-right: 5px;
+  margin-bottom: -10px;
+  margin-top: 5px;
+  text-shadow: 5px 5px 1px rgba(72, 70, 61, 0.25);
+  transition: padding 0.3s cubic-bezier(0, 1, 0, 1), margin 0.3s cubic-bezier(0, 1, 0, 1), text-shadow 0.3s cubic-bezier(0, 1, 0, 1); }
+
+.image-matrix-container {
+  margin-right: 20px; }
+
 .image-matrix-row.nohover {
  margin: 0px;
  transition: margin 0.1s cubic-bezier(1, -0.01, 1, 0.1); }
@@ -617,8 +655,8 @@
  margin-left: -15px; }

 .image-matrix-col {
-  border: #48463d 20px solid;
-  padding: 10px; }
+  border: #48463d 10px solid;
+  padding: 5px; }

 .image-matrix-cell {
  transition: opacity 1s ease; }
@@ -627,7 +665,7 @@
  background: rgba(72, 70, 61, 0);
  transition: background 0s ease;
  transition-delay: calc(0s * 0.5);
-  animation: glow-0 0.5s cubic-bezier(0, 1.02, 1, 0.02) forwards;
+  animation: glow-0 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
  animation-delay: calc(0s * 0.5); }

@keyframes glow-0 {
@@ -640,7 +678,7 @@
  background: rgba(72, 70, 61, 0.1);
  transition: background 0s ease;
  transition-delay: calc(1s * 0.5);
-  animation: glow-1 0.5s cubic-bezier(0, 1.02, 1, 0.02) forwards;
+  animation: glow-1 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
  animation-delay: calc(1s * 0.5); }

@keyframes glow-1 {
@@ -653,7 +691,7 @@
  background: rgba(72, 70, 61, 0.2);
  transition: background 0s ease;
  transition-delay: calc(2s * 0.5);
-  animation: glow-2 0.5s cubic-bezier(0, 1.02, 1, 0.02) forwards;
+  animation: glow-2 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
  animation-delay: calc(2s * 0.5); }

@keyframes glow-2 {
@@ -666,7 +704,7 @@
  background: rgba(72, 70, 61, 0.3);
  transition: background 0s ease;
  transition-delay: calc(3s * 0.5);
-  animation: glow-3 0.5s cubic-bezier(0, 1.02, 1, 0.02) forwards;
+  animation: glow-3 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
  animation-delay: calc(3s * 0.5); }

@keyframes glow-3 {
@@ -679,7 +717,7 @@
  background: rgba(72, 70, 61, 0.4);
  transition: background 0s ease;
  transition-delay: calc(4s * 0.5);
-  animation: glow-4 0.5s cubic-bezier(0, 1.02, 1, 0.02) forwards;
+  animation: glow-4 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
  animation-delay: calc(4s * 0.5); }

@keyframes glow-4 {
@@ -692,7 +730,7 @@
  background: rgba(72, 70, 61, 0.5);
  transition: background 0s ease;
  transition-delay: calc(5s * 0.5);
-  animation: glow-5 0.5s cubic-bezier(0, 1.02, 1, 0.02) forwards;
+  animation: glow-5 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
  animation-delay: calc(5s * 0.5); }

@keyframes glow-5 {
@@ -705,7 +743,7 @@
  background: rgba(72, 70, 61, 0.6);
  transition: background 0s ease;
  transition-delay: calc(6s * 0.5);
-  animation: glow-6 0.5s cubic-bezier(0, 1.02, 1, 0.02) forwards;
+  animation: glow-6 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
  animation-delay: calc(6s * 0.5); }

@keyframes glow-6 {
@@ -718,7 +756,7 @@
  background: rgba(72, 70, 61, 0.7);
  transition: background 0s ease;
  transition-delay: calc(7s * 0.5);
-  animation: glow-7 0.5s cubic-bezier(0, 1.02, 1, 0.02) forwards;
+  animation: glow-7 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
  animation-delay: calc(7s * 0.5); }

@keyframes glow-7 {
@@ -731,7 +769,7 @@
  background: rgba(72, 70, 61, 0.8);
  transition: background 0s ease;
  transition-delay: calc(8s * 0.5);
-  animation: glow-8 0.5s cubic-bezier(0, 1.02, 1, 0.02) forwards;
+  animation: glow-8 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
  animation-delay: calc(8s * 0.5); }

@keyframes glow-8 {
@@ -744,7 +782,7 @@
  background: rgba(72, 70, 61, 0.9);
  transition: background 0s ease;
  transition-delay: calc(9s * 0.5);
-  animation: glow-9 0.5s cubic-bezier(0, 1.02, 1, 0.02) forwards;
+  animation: glow-9 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
  animation-delay: calc(9s * 0.5); }

@keyframes glow-9 {
@@ -757,7 +795,7 @@
  background: #48463d;
  transition: background 0s ease;
  transition-delay: calc(10s * 0.5);
-  animation: glow-10 0.5s cubic-bezier(0, 1.02, 1, 0.02) forwards;
+  animation: glow-10 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
  animation-delay: calc(10s * 0.5); }

@keyframes glow-10 {
@@ -766,6 +804,34 @@
  100% {
    background: #48463d; } }

+.nowplaying-info-container .heading {
+  font-size: 2rem;
+  margin-top: 5px;
+  font-family: FOT-Rodin Pro B, sans-serif;
+  text-shadow: 5px 5px 1px rgba(72, 70, 61, 0.25); }
+
+.nowplaying-info-cursor.hidden {
+  animation: cursor-exit 1s cubic-bezier(0, 0.86, 0, 1) forwards; }
+
+.nowplaying-info-cursor {
+  background: linear-gradient(180deg, #48463d 80%, transparent 80%, transparent 90%, #48463d 100%);
+  min-width: 20px;
+  animation: cursor-enter 1s cubic-bezier(0, 0.86, 0, 1) forwards; }
+
+@keyframes cursor-enter {
+  0% {
+    margin-bottom: calc(2rem + 7px); }
+  100% {
+    margin-top: 0px;
+    margin-bottom: 0px; } }
+
+@keyframes cursor-exit {
+  0% {
+    margin-top: 0px;
+    margin-bottom: 0px; }
+  100% {
+    margin-bottom: calc(2rem + 7px); } }
+
@keyframes selected {
  0% {
    margin-right: 35px; }
@@ -781,7 +847,7 @@
  transition: margin 0.5s cubic-bezier(0.15, 0.79, 0, 1); }

 .nier-settings-container {
-  background: rgba(72, 70, 61, 0.3); }
+  background: rgba(72, 70, 61, 0.3), url("../assets/yorha-light.png") no-repeat bottom right; }
  .nier-settings-container .nier-button-box {
    margin-right: 60px; }
  .nier-settings-container .nier-button-box-selected {
--- a/components/ags/style/widgets/imagematrix.scss
+++ b/components/ags/style/widgets/imagematrix.scss
@@ -1,5 +1,49 @@
@import "../color";

+.player-buttons.pressed:hover {
+  .heading {
+    text-shadow: 5px 5px 1px rgba($brown, 0.25);
+    padding-bottom: 0px;
+    padding-right: 0px;
+    margin-right: 5px;
+    margin-top: 5px;
+    transition: padding 0.3s cubic-bezier(0, 1, 0, 1),
+      margin 0.3s cubic-bezier(0, 1, 0, 1),
+      text-shadow 0.3s cubic-bezier(0, 1, 0, 1);
+  }
+}
+
+.player-buttons:hover {
+  .heading {
+    text-shadow: 10px 10px 1px rgba($brown, 0.25);
+    padding-bottom: 5px;
+    padding-right: 5px;
+    margin-right: 0px;
+    margin-top: 0px;
+    transition: padding 0.3s cubic-bezier(0, 1, 0, 1),
+      margin 0.3s cubic-bezier(0, 1, 0, 1),
+      text-shadow 0.3s cubic-bezier(0, 1, 0, 1);
+  }
+}
+
+.player-buttons {
+  .heading {
+    margin-right: 5px;
+    margin-bottom: -10px;
+    margin-top: 5px;
+    text-shadow: 5px 5px 1px rgba($brown, 0.25);
+    transition: padding 0.3s cubic-bezier(0, 1, 0, 1),
+      margin 0.3s cubic-bezier(0, 1, 0, 1),
+      text-shadow 0.3s cubic-bezier(0, 1, 0, 1);
+
+    // text-shadow: 5px 5px 1px rgba($brown, 0.25);
+  }
+}
+
+.image-matrix-container {
+  margin-right: 20px;
+}
+
 .image-matrix-row.nohover {
  margin: 0px;
  transition: margin 0.1s cubic-bezier(1, -0.01, 1, 0.1);
@@ -14,8 +58,8 @@
 }

 .image-matrix-col {
-  border: $brown 20px solid;
-  padding: 10px;
+  border: $brown 10px solid;
+  padding: 5px;
 }

 .image-matrix-cell {
@@ -29,7 +73,7 @@
    transition: background 0s ease;
    transition-delay: calc(#{$i}s * 0.5);

-    animation: glow-#{$i} 0.5s cubic-bezier(0, 1.02, 1, 0.02) forwards;
+    animation: glow-#{$i} 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
    animation-delay: calc(#{$i}s * 0.5);
  }

@@ -46,3 +90,47 @@
@mixin glow($time) {
  animation: glow $time ease;
 }
+
+.nowplaying-info-container .heading {
+  font-size: 2rem;
+  margin-top: 5px;
+  font-family: FOT-Rodin Pro B, sans-serif;
+  text-shadow: 5px 5px 1px rgba($brown, 0.25);
+}
+
+.nowplaying-info-cursor.hidden {
+  animation: cursor-exit 1s cubic-bezier(0, 0.86, 0, 1) forwards;
+}
+
+.nowplaying-info-cursor {
+  background: linear-gradient(
+    180deg,
+    $brown 80%,
+    transparent 80%,
+    transparent 90%,
+    $brown 100%
+  );
+  min-width: 20px;
+  animation: cursor-enter 1s cubic-bezier(0, 0.86, 0, 1) forwards;
+}
+
+@keyframes cursor-enter {
+  0% {
+    // margin-top: 7px;
+    margin-bottom: calc(2rem + 7px);
+  }
+  100% {
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+}
+@keyframes cursor-exit {
+  0% {
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+  100% {
+    // margin-top: -2rem;
+    margin-bottom: calc(2rem + 7px);
+  }
+}
--- a/components/ags/style/windows/settings.scss
+++ b/components/ags/style/windows/settings.scss
@@ -15,6 +15,14 @@
 //   // animation: selected 0.5s ease forwards;
 // }

+// `..      `..          `.......    `..     `..
+//  `..    `..           `..    `..  `..     `..
+//   `.. `..      `..    `..    `..  `..     `..   `..
+//     `..      `..  `.. `. `..      `...... `.. `..  `..
+//     `..     `..    `..`..  `..    `..     `..`..   `..
+//     `..      `..  `.. `..    `..  `..     `..`..   `..
+//     `..        `..    `..      `..`..     `..  `.. `...
+
@keyframes selected {
  0% {
    margin-right: 35px;
@@ -37,7 +45,8 @@
 }

 .nier-settings-container {
-  background: rgba($brown, 0.3);
+  background: rgba($brown, 0.3),
+    url("../assets/yorha-light.png") no-repeat bottom right;
  .nier-button-box {
    margin-right: 60px;
    // transition: margin 0.1s ease-out;
--- a/components/ags/widgets/nowplaying.js
+++ b/components/ags/widgets/nowplaying.js
@@ -21,13 +21,13 @@ import {
  themedir,
 } from "../util.js";

-const { Box, Label, Button, EventBox } = Widget;
+const { Box, Label, Button, EventBox, Revealer } = Widget;
 const { execAsync } = Utils;
-const { GdkPixbuf } = imports.gi;
+const { GdkPixbuf, Pango } = imports.gi;

 const opacity_map = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];

-const image_to_matrix = (inputPath, imagedat, threshold = 128) => {
+const image_to_matrix = async (inputPath, imagedat, threshold = 128) => {
  // Load the image from file
  const resizedPixbuf = GdkPixbuf.Pixbuf.new_from_file(inputPath);

@@ -68,7 +68,7 @@ const image_to_matrix = (inputPath, imagedat, threshold = 128) => {
 };

 export const NowPlaying = ({
-  rows = 32,
+  rows = 64,
  imagedat = Variable(
    Array.from({ length: rows }, (_, i) =>
      Array.from({ length: rows }, (_, i) => 1)
@@ -83,6 +83,64 @@ export const NowPlaying = ({
    vertical: true,
    className: ["nowplaying-container"],
    children: [
+      Box({
+        style: `min-width: ${rows * cell_width + 30 + 30 - 20}px;`,
+        halign: "end",
+        children: [
+          Button({
+            halign: "end",
+            className: ["player-buttons"],
+            hexpand: true,
+            child: Label({
+              label: "⏮",
+              className: ["heading"],
+            }),
+            onClicked: async (self) => {
+              const player = Mpris.players[0];
+              player.previous();
+              self.className = arradd(self.className, "pressed");
+              await new Promise((r) => setTimeout(r, 100));
+              self.className = arrremove(self.className, "pressed");
+            },
+          }),
+          Button({
+            halign: "end",
+            className: ["player-buttons"],
+            // hexpand: true,
+            child: Label({
+              label: "⏸",
+              className: ["heading"],
+            }),
+            onClicked: async (self) => {
+              const player = Mpris.players[0];
+              player.playPause();
+
+              self.className = arradd(self.className, "pressed");
+              console.log(self.className);
+              await new Promise((r) => setTimeout(r, 100));
+              self.className = arrremove(self.className, "pressed");
+              console.log(self.className);
+            },
+          }),
+          Button({
+            halign: "end",
+            className: ["player-buttons"],
+            style: "margin-right: 15px;",
+            // hexpand: true,
+            child: Label({
+              label: "⏭",
+              className: ["heading"],
+            }),
+            onClicked: async (self) => {
+              const player = Mpris.players[0];
+              player.next();
+              self.className = arradd(self.className, "pressed");
+              await new Promise((r) => setTimeout(r, 100));
+              self.className = arrremove(self.className, "pressed");
+            },
+          }),
+        ],
+      }),
      Box({
        className: ["image-matrix-container"],
        halign: "center",
@@ -190,9 +248,12 @@ export const NowPlaying = ({
                      ])
                        .then((out) => {
                          console.log("cover prepared");
-                          image_to_matrix("/tmp/bg.png", imagedat, rows);
-                          preparing_cover = false;
-                          imagedat.emit("changed");
+                          Promise.resolve(
+                            image_to_matrix("/tmp/bg.png", imagedat, rows)
+                          ).then(() => {
+                            preparing_cover = false;
+                            imagedat.emit("changed");
+                          });
                        })
                        .catch((e) => {
                          preparing_cover = false;
@@ -210,7 +271,50 @@ export const NowPlaying = ({
        ],
      }),
      Box({
-        children: [Label("<"), Label("||"), Label(">")],
+        className: ["nowplaying-info-container"],
+        children: [
+          Revealer({
+            revealChild: false,
+            transitionDuration: 1000,
+            child: Label({
+              label: "woa",
+              className: "heading",
+              style: `min-width: ${rows * cell_width + 15 + 15 - 20}px;`,
+              halign: "start",
+              xalign: 0,
+              wrap: true,
+              max_width_chars: 20,
+              setup: (self) => {
+                self.set_line_wrap_mode(Pango.WrapMode.WORD_CHAR);
+                self.set_ellipsize(Pango.EllipsizeMode.END);
+              },
+            }),
+            transition: "slide_left",
+            connections: [
+              [
+                Mpris,
+                async (self) => {
+                  const player = Mpris.players[0];
+                  if (player.track_title !== self.child.label) {
+                    let cursor = self.parent.children[1];
+                    await new Promise((r) => setTimeout(r, 1500));
+                    cursor.className = arrremove(cursor.className, "hidden");
+                    await new Promise((r) => setTimeout(r, 1500));
+                    self.revealChild = false;
+                    await new Promise((r) => setTimeout(r, 1500));
+                    self.child.label = player.track_title;
+                    self.revealChild = true;
+                    await new Promise((r) => setTimeout(r, 1500));
+                    cursor.className = arradd(cursor.className, "hidden");
+                  }
+                },
+              ],
+            ],
+          }),
+          Box({
+            className: ["nowplaying-info-cursor"],
+          }),
+        ],
      }),
    ],
    connections: [],
--- a/components/ags/widgets/workspace.js
+++ b/components/ags/widgets/workspace.js
@@ -21,25 +21,25 @@ const { execAsync } = Utils;
 const int_to_string = (i) => {
  switch (i) {
    case 1:
-      return "one";
+      return "いち";
    case 2:
-      return "two";
+      return "に";
    case 3:
-      return "three";
+      return "さん";
    case 4:
-      return "four";
+      return "し";
    case 5:
-      return "five";
+      return "ご";
    case 6:
-      return "six";
+      return "ろく";
    case 7:
-      return "seven";
+      return "しち";
    case 8:
-      return "eight";
+      return "はちt";
    case 9:
-      return "nine";
+      return "きゅう";
    case 10:
-      return "ten";
+      return "じゅう";
  }
 };

--- a/5
+++ b/5
@@ -1,5 +0,0 @@
-aylurs-gtk-shell
-cava
-python
-python-colorz
-pywal
--- a/nierbars.patch
+++ b/nierbars.patch
@@ -0,0 +1,31 @@
+diff --git a/hyprbars/barDeco.cpp b/hyprbars/barDeco.cpp
+index 85ab308..367c2dd 100644
+--- a/hyprbars/barDeco.cpp
+++ b/hyprbars/barDeco.cpp
+@@ -216,7 +216,7 @@ void CHyprBar::renderBarTitle(const Vector2D& bufferSize, const float scale) {
+ 
+     int layoutWidth, layoutHeight;
+     pango_layout_get_size(layout, &layoutWidth, &layoutHeight);
+-    const int xOffset = std::round(((bufferSize.x - scaledBorderSize) / 2.0 - layoutWidth / PANGO_SCALE / 2.0));
+    const int xOffset = leftPadding;
+     const int yOffset = std::round((bufferSize.y / 2.0 - layoutHeight / PANGO_SCALE / 2.0));
+ 
+     cairo_move_to(CAIRO, xOffset, yOffset);
+@@ -312,7 +312,7 @@ void CHyprBar::renderBarButtonsText(CBox* barBox, const float scale, const float
+ 
+             const bool     LIGHT = button.col.r + button.col.g + button.col.b < 1;
+ 
+-            renderText(button.iconTex, button.icon, LIGHT ? CColor(0xFFFFFFFF) : CColor(0xFF000000), BUFSIZE, scale, button.size * 0.62);
+            renderText(button.iconTex, button.icon, LIGHT ? CColor(0xFFC2BDA6) : CColor(0xFF48463A), BUFSIZE, scale, button.size * 0.62);
+         }
+ 
+         if (button.iconTex.m_iTexID == 0)
+@@ -359,7 +359,7 @@ void CHyprBar::draw(CMonitor* pMonitor, float a, const Vector2D& offset) {
+     const auto BARBUF = Vector2D{m_vLastWindowSize.x + 2 * BORDERSIZE, *PHEIGHT} * pMonitor->scale;
+ 
+     CBox       titleBarBox = {m_vLastWindowPos.x - pMonitor->vecPosition.x, m_vLastWindowPos.y - pMonitor->vecPosition.y, m_vLastWindowSize.x,
+-                        *PHEIGHT + ROUNDING * 3 /* to fill the bottom cuz we can't disable rounding there */};
+                              *PHEIGHT + ROUNDING * 3 /* to fill the bottom cuz we can't disable rounding there */};
+ 
+     titleBarBox.translate(offset).scale(pMonitor->scale).round();
+ 
--- a/scripts/autostart
+++ b/scripts/autostart
@@ -1,3 +0,0 @@
-#!/usr/bin/bash
-sleep 1
-swww clear c2bda6 &
--- a/scripts/prepare_cover.sh
+++ b/scripts/prepare_cover.sh
@@ -27,11 +27,11 @@ if [ -z "$size" ]; then
 fi

 # grayscale
-# convert /tmp/bg.png -colorspace Gray /tmp/bg.png
+convert /tmp/bg.png -colorspace Gray /tmp/bg.png
 #remove bars
 magick mogrify -fuzz 4% -trim +repage -shave 7x7 -format png /tmp/bg.png
-#resize
-convert /tmp/bg.png -resize ${size}x${size}^ -gravity center -extent ${size}x${size} /tmp/bg.png
+
+magick mogrify -resize "$size"x"$size"^ -gravity center -extent "$size"x"$size" -format png /tmp/bg.png



--- a/starship.toml
+++ b/starship.toml
@@ -3,14 +3,14 @@ format="$directory$git_branch$character"

 # Prompt symbols 
 [character]
-success_symbol = "[🞈](bright-green bold)"
-error_symbol = "[🞈](bright-red)"
-vicmd_symbol = "[🞈](bright-yellow)"
+success_symbol = "[ ᐉ](bright-green bold)"
+error_symbol = "[ ᐉ](bright-red)"
+vicmd_symbol = "[ ᐉ](bright-yellow)"

 [directory]
-format = "[]($style)[(bg:white fg:black)$path](bg:white fg:black)[ ]($style)"
-style = "bg:background fg:white"
+format = "[▉]($style)[(bg:background fg:#48463d) $path ](bg:#48463d fg:#c2bda6)[▕]($style)"
+style = "bg:background fg:#48463d"

 [git_branch]
-format = "[]($style)[[ ](bg:white fg:black bold)$branch](bg:white fg:black)[ ]($style)"
-style = "bg:background fg:white"
+format = "[▉]($style)[(bg:background fg:#48463d) \ue725 $branch ](bg:#48463d fg:#c2bda6)[▕]($style)"
+style = "bg:background fg:#48463d"
--- a/test.frag
+++ b/test.frag
@@ -0,0 +1,25 @@
+//
+// Example blue light filter shader.
+// 
+
+precision mediump float;
+varying vec2 v_texcoord;
+uniform sampler2D tex;
+vec4 color = vec4(1);
+
+void main() {
+
+    vec4 pixColor = texture2D(tex, v_texcoord);
+
+
+
+if (int(mod(gl_FragCoord.x, 10.0)) == 0 ||
+        int(mod(gl_FragCoord.y, 10.0)) == 0) {
+			pixColor[0] *= 0.9;
+			pixColor[1] *= 0.9;
+			pixColor[2] *= 0.9;
+
+		// pixColor = vec4(0.10980392156,0.10588235294 ,0.09411764705 ,1);
+    }
+	gl_FragColor = pixColor;
+}
--- a/theme.conf
+++ b/theme.conf
@@ -2,10 +2,14 @@ exec=cp $THEME/colors $HOME/.config/hypr/themes/colors
 exec=$THEME/scripts/apply.sh $THEME
 exec=$THEME/scripts/autostart

-monitor=eDP-1,addreserved,120,0,0,0
+monitor=eDP-1,addreserved,100,100,0,0

 layerrule = ignorealpha, settings
+layerrule = ignorealpha, side
+layerrule = ignorealpha, bar
 layerrule = blur,settings
+layerrule = blur,side 
+layerrule = blur,bar
 # layerrule = blur,address:0x55c8253b0c40
 decoration {
    rounding=0
@@ -16,12 +20,38 @@ decoration {
        noise=0.05
        # contrast=2
    }
+    shadow_range = 1
+    shadow_render_power = 1
+    col.shadow = rgba(48463d55)
+    shadow_offset =5 5
+    screen_shader = ~/.config/hypr/themes/nier/test.frag
+}
+
+plugin=/home/flicko/hyprbars.so
+
+plugin {
+    hyprbars {
+        # example config
+        bar_height = 40
+        bar_color = rgb(48463d)
+        col.text = rgb(c2bda6)
+        bar_text_size = 17
+        bar_text_font = FOT-Rodin Pro M
+        # example buttons (R -> L)
+        # hyprbars-button = color, size, on-clic
+        hyprbars-button = rgb(48463d), 30, ◬, hyprctl dispatch killactive
+        hyprbars-button = rgb(48463d), 30,▽, hyprctl dispatch fullscreen 1
+    }
 }

 general {
-    col.active_border=0xff48463d
-    col.inactive_border=0x5548463d
-    border_size=5
+    # col.active_border=0xff48463d
+    # col.inactive_border=0x5548463d
+    col.active_border=0x00000000
+    col.inactive_border=0x00000000
+    border_size=0
+    gaps_in = 20
+    gaps_out = 20
 }

 animations {
--- a/wallpapers/nier.png
+++ b/wallpapers/nier.png