[v1.2.0] Add settings preview

GriefMoDz · Jan 27, 2023 · 51eb82b · 51eb82b
1 parent 0602f93
commit 51eb82b
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 48 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -33,5 +33,5 @@ jobs:
 
       - uses: ncipollo/release-action@v1
         with:
-          artifacts: "bundle/"
+          artifacts: "bundle/*"
           makeLatest: true
diff --git a/README.md b/README.md
@@ -8,11 +8,11 @@ Formally known as "Online Friends Count", this is a Replugged plug-in that has b
 
 ## Planned Features
 - [x] Add a settings page
-- [ ] Display a real-time preview under the settings page
+- [x] Display a real-time preview under the settings page
 - [ ] Implement a context menu to quickly change settings
 
 ## Settings
-To customize the counter, you will need to manually set your preferences by entering the following method under your DevTools console (`Ctrl` + `Shift` + `I` and click on the "Console" tab):
+To customize the counter, you can use the settings page or manually set your preferences by entering the following method under your DevTools console (`Ctrl` + `Shift` + `I` and click on the "Console" tab):
 
 ```js
 // Replace the `key` and `value` respectively - you can use the table below as a reference

diff --git a/manifest.json b/manifest.json
@@ -7,7 +7,7 @@
     "discordID": "350227339784880130",
     "github": "griefmodz"
   },
-  "version": "1.1.0",
+  "version": "1.2.0",
   "updater": {
     "type": "github",
     "id": "griefmodz/statistic-counter"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "statistic-counter",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A Replugged plug-in that has been ported from Powercord which introduces an interchangeable statistic counter in-between the home button and servers list.",
   "engines": {
     "node": ">=14.0.0"

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
@@ -1,11 +1,13 @@
-import { components, util, webpack } from 'replugged';
+import { common, components, util, webpack } from 'replugged';
 import { ReactComponent } from 'replugged/dist/types';
 
-import { Counters } from '@lib/constants';
+import { ActionTypes, Counters } from '@lib/constants';
 import { CounterType } from '@types';
 import { prefs } from '../';
 
 import CounterStore from '@lib/store';
+import Counter from './Counter';
+
 const { Divider, SwitchItem, Text } = components;
 
 const SliderModule = await webpack.waitForModule<any>(webpack.filters.bySource('moveStaggered'));
@@ -16,60 +18,101 @@ function CounterSettings(): React.ReactElement[] {
   // @ts-expect-error Yeah... whatever.
   return Object.keys(Counters).map((counter: CounterType) => {
     const counterName = Messages[Counters[counter].translationKey] as string;
+    const useCounterEnabled = util.useSetting(prefs, counter);
+
+    return (
+      <SwitchItem
+        {...useCounterEnabled}
+        disabled={CounterStore.filteredCounters.length === 1 && CounterStore.filteredCounters.includes(counter)}
+        onChange={(newValue) => {
+          useCounterEnabled.onChange(newValue);
+
+          if (newValue === false) {
+            const { activeCounter, nextCounter } = CounterStore.state;
 
-    return <SwitchItem
-      {...util.useSetting(prefs, counter)}
-      disabled={CounterStore.filteredCounters.length === 1 && CounterStore.filteredCounters.includes(counter)}
-    >
-      Show {counterName}
-    </SwitchItem>;
+            activeCounter === counter &&
+              common.fluxDispatcher.dispatch({
+                type: ActionTypes.STATISTICS_COUNTER_SET_ACTIVE,
+                counter: nextCounter
+              });
+          }
+        }}>
+        Show {counterName}
+      </SwitchItem>
+    );
   });
 }
 
+function Preview(): React.ReactElement {
+  return (
+    <div className='statistic-counter-preview'>
+      <div className='home-button'>
+        <svg className='home-icon' width={28} height={20} viewBox='0 0 28 20'>
+          <path
+            fill='currentColor'
+            d='M23.0212 1.67671C21.3107 0.879656 19.5079 0.318797 17.6584 0C17.4062 0.461742 17.1749 0.934541 16.9708 1.4184C15.003 1.12145 12.9974 1.12145 11.0283 1.4184C10.819 0.934541 10.589 0.461744 10.3368 0.00546311C8.48074 0.324393 6.67795 0.885118 4.96746 1.68231C1.56727 6.77853 0.649666 11.7538 1.11108 16.652C3.10102 18.1418 5.3262 19.2743 7.69177 20C8.22338 19.2743 8.69519 18.4993 9.09812 17.691C8.32996 17.3997 7.58522 17.0424 6.87684 16.6135C7.06531 16.4762 7.24726 16.3387 7.42403 16.1847C11.5911 18.1749 16.408 18.1749 20.5763 16.1847C20.7531 16.3332 20.9351 16.4762 21.1171 16.6135C20.41 17.0369 19.6639 17.3997 18.897 17.691C19.3052 18.4993 19.7718 19.2689 20.3021 19.9945C22.6677 19.2689 24.8929 18.1364 26.8828 16.6466H26.8893C27.43 10.9731 25.9665 6.04728 23.0212 1.67671ZM9.68041 13.6383C8.39754 13.6383 7.34085 12.4453 7.34085 10.994C7.34085 9.54272 8.37155 8.34973 9.68041 8.34973C10.9893 8.34973 12.0395 9.54272 12.0187 10.994C12.0187 12.4453 10.9828 13.6383 9.68041 13.6383ZM18.3161 13.6383C17.0332 13.6383 15.9765 12.4453 15.9765 10.994C15.9765 9.54272 17.0124 8.34973 18.3161 8.34973C19.6184 8.34973 20.6751 9.54272 20.6543 10.994C20.6543 12.4453 19.6184 13.6383 18.3161 13.6383Z'
+          />
+        </svg>
+      </div>
+      <Counter />
+    </div>
+  );
+}
+
 function Settings(): React.ReactElement {
   const useAutoRotation = util.useSetting(prefs, 'autoRotation');
   const useAutoRotationHoverPause = util.useSetting(prefs, 'autoRotationHoverPause');
   const useAutoRotationDelay = util.useSetting(prefs, 'autoRotationDelay');
 
+  const handleRotationDelay = (delay: number) => {
+    useAutoRotationDelay.onChange(Math.round(delay));
+  };
+
   return (
     <div>
-      <Text.Eyebrow style={{ marginBottom: 15 }} color='header-secondary'>Visibility</Text.Eyebrow>
+      <Text.Eyebrow style={{ marginBottom: 15 }} color='header-secondary'>
+        Preview
+      </Text.Eyebrow>
+      {Preview()}
+      <Text.Eyebrow style={{ marginBottom: 15 }} color='header-secondary'>
+        Visibility
+      </Text.Eyebrow>
       {CounterSettings()}
-      <SwitchItem {...util.useSetting(prefs, 'preserveLastCounter')}>
-        Preserve Last Counter
-      </SwitchItem>
-      <Text.Eyebrow style={{ marginBottom: 15 }} color='header-secondary'>Auto Rotation</Text.Eyebrow>
-      <SwitchItem {...useAutoRotation}>
-        Enabled
-      </SwitchItem>
+      <SwitchItem {...util.useSetting(prefs, 'preserveLastCounter')}>Preserve Last Counter</SwitchItem>
+      <Text.Eyebrow style={{ marginBottom: 15 }} color='header-secondary'>
+        Auto Rotation
+      </Text.Eyebrow>
+      <SwitchItem {...useAutoRotation}>Enabled</SwitchItem>
 
-      {useAutoRotation.value && <>
-        <Text.Eyebrow style={{ marginBottom: 15 }} color='header-secondary'>Rotate Interval</Text.Eyebrow>
-        <Slider
-          className='statistic-counter-settings-slider'
-          value={useAutoRotationDelay.value}
-          initialValue={useAutoRotationDelay.value}
-          defaultValue={5e3}
-          markers={[ 5e3, 9e5, 18e5, 27e5, 36e5 ]}
-          minValue={5e3}
-          maxValue={36e5}
-          onMarkerRender={(value: number) => {
-            const seconds = (value / 1000);
-            const minutes = ((value / 1000) / 60);
-            return value < 6e4 ? `${seconds.toFixed(0)} secs` : `${minutes.toFixed(0)} mins`;
-          }}
-          onValueRender={(value: number) => {
-            const seconds = (value / 1000);
-            const minutes = ((value / 1000) / 60);
-            return value < 6e4 ? `${seconds.toFixed(0)} secs` : `${minutes.toFixed(0)} mins`;
-          }}
-          onValueChange={useAutoRotationDelay.onChange}
-        />
-        <Divider style={{ marginBottom: 15 }} />
-        <SwitchItem {...useAutoRotationHoverPause}>
-         Pause on Hover
-        </SwitchItem>
-      </>}
+      {useAutoRotation.value && (
+        <>
+          <Text.Eyebrow style={{ marginBottom: 15 }} color='header-secondary'>
+            Rotate Interval
+          </Text.Eyebrow>
+          <Slider
+            className='statistic-counter-settings-slider'
+            value={useAutoRotationDelay.value}
+            initialValue={useAutoRotationDelay.value}
+            defaultValue={5e3}
+            markers={[5e3, 9e5, 18e5, 27e5, 36e5]}
+            minValue={5e3}
+            maxValue={36e5}
+            onMarkerRender={(value: number) => {
+              const seconds = value / 1000;
+              const minutes = value / 1000 / 60;
+              return value < 6e4 ? `${seconds.toFixed(0)} secs` : `${minutes.toFixed(0)} min${Math.round(minutes) > 1 ? 's' : ''}`;
+            }}
+            onValueRender={(value: number) => {
+              const seconds = value / 1000;
+              const minutes = value / 1000 / 60;
+              return value < 6e4 ? `${seconds.toFixed(0)} secs` : `${minutes.toFixed(0)} min${Math.round(minutes) > 1 ? 's' : ''}`;
+            }}
+            onValueChange={handleRotationDelay}
+          />
+          <Divider style={{ marginBottom: 15 }} />
+          <SwitchItem {...useAutoRotationHoverPause}>Pause on Hover</SwitchItem>
+        </>
+      )}
     </div>
   );
 }

diff --git a/src/main.css b/src/main.css
@@ -30,6 +30,40 @@
   width: 72px;
 }
 
+.statistic-counter-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 15px;
+  border-radius: 10px;
+  background-color: rgba(255, 255, 255, 2%);
+}
+
+.statistic-counter-preview .home-button {
+  display: flex;
+  width: 48px;
+  height: 48px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: var(--background-secondary);
+  transition: border-radius 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out;
+  margin: 8px 0;
+}
+
+.statistic-counter-preview .home-button:hover {
+  border-radius: 15%;
+  background-color: var(--brand-experiment);
+}
+
+.statistic-counter-preview .home-button:hover .home-icon {
+  color: var(--white-500);
+}
+
+.statistic-counter-preview .home-icon {
+  color: var(--text-normal);
+}
+
 .statistic-counter-settings-slider {
   width: 97%;
   margin: auto;