test

Next-Panel · Dec 25, 2023 · d6c4293 · d6c4293
1 parent a10f681
commit d6c4293
Show file tree

Hide file tree

Showing 10 changed files with 310 additions and 102 deletions.
diff --git a/app/Http/Controllers/Admin/Jexactyl/StoreController.php b/app/Http/Controllers/Admin/Jexactyl/StoreController.php
@@ -41,6 +41,9 @@ public function index(): View
             'mpago_enabled' => $this->settings->get($prefix . 'mpago:enabled', false),
             'mpago_discord_webhook' => $this->settings->get($prefix . 'mpago:discord:webhook', 0),
             'mpago_discord_enabled' => $this->settings->get($prefix . 'mpago:discord:enabled', false),
+            'store_images_one' => $this->settings->get($prefix . 'images:one', 0),
+            'store_images_two' => $this->settings->get($prefix . 'images:two', 0),
+            'store_images_three' => $this->settings->get($prefix . 'images:three', 0),
 
             'selected_currency' => $this->settings->get($prefix . 'currency', 'BRL'),
             'currencies' => $currencies,

diff --git a/app/Http/Requests/Admin/Jexactyl/StoreFormRequest.php b/app/Http/Requests/Admin/Jexactyl/StoreFormRequest.php
@@ -35,6 +35,10 @@ public function rules(): array
             'store:limit:port' => 'required|int|min:1',
             'store:limit:backup' => 'required|int|min:1',
             'store:limit:database' => 'required|int|min:1',
+
+            'store:images:one' => 'string|nullable',
+            'store:images:two' => 'string|nullable',
+            'store:images:three' => 'string|nullable',
         ];
     }
 }
diff --git a/app/Http/ViewComposers/StoreComposer.php b/app/Http/ViewComposers/StoreComposer.php
@@ -48,6 +48,11 @@ public function compose(View $view)
                 'enabled' => $this->setting('earn:enabled', Composer::TYPE_BOOL),
                 'amount' => $this->setting('earn:amount', Composer::TYPE_INT),
             ],
+            'images' => [
+                'one' => $this->setting('store:images:one', Composer::TYPE_STR),
+                'two' => $this->setting('store:images:two', Composer::TYPE_STR),
+                'three' => $this->setting('store:images:three', Composer::TYPE_STR),
+            ]
         ]);
     }
 }
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
         "reaptcha": "^1.7.2",
         "sockette": "^2.0.6",
         "strip-ansi": "^7.0.1",
-        "styled-components": "^5.2.1",
+        "styled-components": "^6.1.0",
         "styled-components-breakpoint": "^3.0.0-preview.20",
         "swr": "^0.2.3",
         "tailwindcss": "^3.0.24",

diff --git a/resources/scripts/assets/css/GlobalStylesheet.ts b/resources/scripts/assets/css/GlobalStylesheet.ts
@@ -1,11 +1,17 @@
 import tw from 'twin.macro';
-import { createGlobalStyle } from 'styled-components/macro';
+import { createGlobalStyle } from 'styled-components';
 
 export default createGlobalStyle`
     body {
         ${tw`bg-neutral-900 font-sans font-medium text-gray-200`};
     }
 
+    *{
+        --jexactyl_image_store_one: ${(props) => `url(${props.theme.one})`}
+        --jexactyl_image_store_two: ${(props) => `url(${props.theme.two})`}
+        --jexactyl_image_store_three: ${(props) => `url(${props.theme.three})`}
+    }
+
     h1, h2, h3, h4, h5, h6 {
         ${tw`tracking-normal`};
     }

diff --git a/resources/scripts/components/App.tsx b/resources/scripts/components/App.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import tw from 'twin.macro';
 import '@/assets/tailwind.css';
 import { store } from '@/state';
@@ -7,10 +7,12 @@ import { hot } from 'react-hot-loader/root';
 import { history } from '@/components/history';
 import { SiteSettings } from '@/state/settings';
 import IndexRouter from '@/routers/IndexRouter';
+import { ThemeProvider } from "styled-components";
 import earnCredits from '@/api/account/earnCredits';
 import { setupInterceptors } from '@/api/interceptors';
 import { StorefrontSettings } from '@/state/storefront';
 import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
+import { Theme } from '@/theme';
 
 interface ExtendedWindow extends Window {
     SiteConfiguration?: SiteSettings;
@@ -37,7 +39,7 @@ setupInterceptors(history);
 
 const App = () => {
     const { JexactylUser, SiteConfiguration, StoreConfiguration } = window as ExtendedWindow;
-
+    const [theme, setTheme] = useState<StorefrontSettings["images"]>()
     if (JexactylUser && !store.getState().user.data) {
         store.getActions().user.setUserData({
             uuid: JexactylUser.uuid,
@@ -70,15 +72,19 @@ const App = () => {
         }
     }
     earn();
-
+    if (!theme) {
+        setTheme(Theme(store.getState().storefront.data!))
+    }
     return (
         <>
-            <GlobalStylesheet />
-            <StoreProvider store={store}>
-                <div css={tw`mx-auto w-auto`}>
-                    <IndexRouter />
-                </div>
-            </StoreProvider>
+            <ThemeProvider theme={theme}>
+                <GlobalStylesheet />
+                <StoreProvider store={store}>
+                    <div css={tw`mx-auto w-auto`}>
+                        <IndexRouter />
+                    </div>
+                </StoreProvider>
+            </ThemeProvider>
         </>
     );
 };

diff --git a/resources/scripts/state/storefront.ts b/resources/scripts/state/storefront.ts
@@ -33,6 +33,11 @@ export interface StorefrontSettings {
         enabled: boolean;
         amount: number;
     };
+    images: {
+        one: string;
+        two: string;
+        three: string;
+    }
 }
 
 export interface StorefrontStore {

diff --git a/resources/scripts/theme.ts b/resources/scripts/theme.ts
@@ -1,4 +1,5 @@
 import { BreakpointFunction, createBreakpoint } from 'styled-components-breakpoint';
+import { StorefrontSettings } from './state/storefront';
 
 type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
@@ -9,3 +10,11 @@ export const breakpoint: BreakpointFunction<Breakpoints> = createBreakpoint<Brea
     lg: 1024,
     xl: 1280,
 });
+
+export function Theme(data: StorefrontSettings ) {
+    return {
+        one: data?.images.one ?? 'https://www.minecraft.net/content/dam/games/minecraft/key-art/MC-Vanilla_Block-Column-Image_Boat-Trip_800x800.jpg',
+        two: data?.images.two ?? 'https://www.minecraft.net/content/dam/games/minecraft/key-art/MC-Vanilla_Block-Column-Image_Beach-Cabin_800x800.jpg',
+        three: data?.images.three ?? 'https://www.minecraft.net/content/dam/games/minecraft/key-art/MC-Vanilla_Block-Column-Image_Mining_800x800.jpg'
+    }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,9 +7,9 @@ module.exports = {
     theme: {
         extend: {
             backgroundImage: {
-               'storeone': "url('https://www.minecraft.net/content/dam/games/minecraft/key-art/MC-Vanilla_Block-Column-Image_Boat-Trip_800x800.jpg')",
-                'storetwo': "url('https://www.minecraft.net/content/dam/games/minecraft/key-art/MC-Vanilla_Block-Column-Image_Beach-Cabin_800x800.jpg')",
-                'storethree': "url('https://www.minecraft.net/content/dam/games/minecraft/key-art/MC-Vanilla_Block-Column-Image_Mining_800x800.jpg')",
+                'storeone': "var(--jexactyl_image_store_one)",
+                'storetwo': "var(--jexactyl_image_store_two)",
+                'storethree': "var(--jexactyl_image_store_three)",
             },
             colors: {
                 black: '#000',