refactor(generator): rename theme to style

mxgic1337 · Jan 27, 2025 · 7844e39 · 7844e39
1 parent 0bd107f
commit 7844e39
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 48 deletions.
diff --git a/src/generator/Generator.tsx b/src/generator/Generator.tsx
@@ -7,7 +7,11 @@ import {
   useState,
 } from 'react';
 import { Widget } from '../../widget/src/widget/Widget.tsx';
-import { Language, languages, tl } from '../translations/translations.ts';
+import {
+  Language,
+  languages,
+  tl as translate,
+} from '../translations/translations.ts';
 import { getPlayerProfile } from '../../widget/src/utils/faceit_util.ts';
 import { MainTab } from './tabs/MainTab.tsx';
 import { StyleTab } from './tabs/StyleTab.tsx';
@@ -41,7 +45,7 @@ interface Settings {
   backgroundOpacity: number;
   refreshInterval: number;
   colorScheme: string;
-  theme: string;
+  style: string;
   customBorderColor1: string;
   customBorderColor2: string;
   customTextColor: string;
@@ -86,7 +90,7 @@ export const Generator = () => {
   const [backgroundOpacity, setBackgroundOpacity] = useState<number>(0.15);
   const [refreshInterval, setRefreshInterval] = useState<number>(30);
   const [colorScheme, setColorScheme] = useState<string>('dark');
-  const [theme, setTheme] = useState<string>('normal');
+  const [style, setStyle] = useState<string>('normal');
   const [searchParams] = useSearchParams();
   const [language, setLanguage] = useState<Language>(
     languages.find((language) => language.id === searchParams.get('lang')) ||
@@ -119,16 +123,16 @@ export const Generator = () => {
 
   const [selectedTabIndex, setSelectedTabIndex] = useState(0);
 
-  const translate = useCallback(
+  const tl = useCallback(
     (text: string, args?: string[]) => {
-      return tl(language, text, args);
+      return translate(language, text, args);
     },
     [language]
   );
 
   useLayoutEffect(() => {
     const description = document.getElementsByName('description');
-    (description[0] as HTMLMetaElement).content = translate('meta.description');
+    (description[0] as HTMLMetaElement).content = tl('meta.description');
   }, [language]);
 
   useEffect(() => {
@@ -175,7 +179,7 @@ export const Generator = () => {
       suffix: showEloSuffix,
       diff: showEloDiff,
       scheme: colorScheme,
-      theme: theme,
+      style,
       ranking: showRanking ? (showRankingOnlyWhenChallenger ? 2 : 1) : 0,
       banner: useBannerAsBackground,
       refresh: refreshInterval,
@@ -193,7 +197,7 @@ export const Generator = () => {
       };
     }
 
-    if (theme === 'custom') {
+    if (style === 'custom') {
       params = {
         ...params,
         css: customCSS,
@@ -227,7 +231,7 @@ export const Generator = () => {
     showEloSuffix,
     showRanking,
     showRankingOnlyWhenChallenger,
-    theme,
+    style,
     username,
     playerId,
     playerBanner,
@@ -266,7 +270,7 @@ export const Generator = () => {
 
   const tabs = [
     {
-      name: tl(language, 'generator.settings.title'),
+      name: tl('generator.settings.title'),
       component: (
         <MainTab
           key={'main'}
@@ -292,7 +296,7 @@ export const Generator = () => {
       ),
     },
     {
-      name: tl(language, 'generator.theme.title'),
+      name: tl('generator.theme.title'),
       component: (
         <StyleTab
           key={'style'}
@@ -301,7 +305,7 @@ export const Generator = () => {
           setCustomBackgroundColor={setCustomBackgroundColor}
           setCustomTextColor={setCustomTextColor}
           setCustomCSS={setCustomCSS}
-          setTheme={setTheme}
+          setStyle={setStyle}
           setUseBannerAsBackground={setUseBannerAsBackground}
           setAdjustBackgroundOpacity={setAdjustBackgroundOpacity}
           setBackgroundOpacity={setBackgroundOpacity}
@@ -310,7 +314,7 @@ export const Generator = () => {
       ),
     },
     {
-      name: tl(language, 'generator.stats.title'),
+      name: tl('generator.stats.title'),
       component: (
         <StatisticsTab
           key={'stats'}
@@ -328,7 +332,7 @@ export const Generator = () => {
   }, []);
 
   return (
-    <LanguageContext.Provider value={translate}>
+    <LanguageContext.Provider value={tl}>
       <SettingsContext.Provider
         value={{
           customCSS,
@@ -351,7 +355,7 @@ export const Generator = () => {
           backgroundOpacity,
           refreshInterval,
           colorScheme,
-          theme,
+          style: style,
           language,
           widgetLanguage,
           statSlot1,
@@ -375,9 +379,9 @@ export const Generator = () => {
             <InfoBox
               content={
                 <p>
-                  {translate('generator.testing')}{' '}
+                  {tl('generator.testing')}{' '}
                   <a href="https://widget.mxgic1337.xyz">
-                    {translate('generator.testing.stable')}
+                    {tl('generator.testing.stable')}
                   </a>
                 </p>
               }
@@ -409,17 +413,21 @@ export const Generator = () => {
           <section className={'preview'}>
             <div className={'settings'}>
               <h4 style={{ marginBottom: '6px' }}>
-                {tl(language, 'generator.preview.title')}
+                {translate(language, 'generator.preview.title')}
               </h4>
               <style>{`
 		      div.preview.nuke {--preview-background: url(${nukePreview})}
 		      div.preview.mirage {--preview-background: url(${miragePreview})}
 		      div.preview.ancient {--preview-background: url(${ancientPreview})}
 		      `}</style>
               <div
-                className={`${theme}-theme ${colorScheme}-scheme preview ${previewBackground}`}
+                className={`${style}-theme ${colorScheme}-scheme preview ${previewBackground}`}
               >
-                <Widget preview={true} />
+                {(style !== 'custom' ||
+                  (style === 'custom' &&
+                    customCSS !== 'https://example.com')) && (
+                  <Widget preview={true} />
+                )}
               </div>
               <select
                 value={previewBackground}
@@ -430,7 +438,7 @@ export const Generator = () => {
                 {previews.map((preview) => {
                   return (
                     <option key={preview} value={preview}>
-                      {translate(`generator.preview.${preview}`)}
+                      {tl(`generator.preview.${preview}`)}
                     </option>
                   );
                 })}
@@ -441,7 +449,7 @@ export const Generator = () => {
                     generateWidgetURL();
                   }}
                 >
-                  {tl(language, 'generator.generate.button')}
+                  {tl('generator.generate.button')}
                 </button>
               </div>
             </div>

diff --git a/src/generator/tabs/StyleTab.tsx b/src/generator/tabs/StyleTab.tsx
@@ -6,7 +6,7 @@ import { InfoBox } from '../../components/InfoBox.tsx';
 import { LanguageContext, SettingsContext } from '../Generator.tsx';
 
 type Props = {
-  setTheme: Dispatch<string>;
+  setStyle: Dispatch<string>;
   setCustomBorderColor1: Dispatch<string>;
   setCustomBorderColor2: Dispatch<string>;
   setCustomTextColor: Dispatch<string>;
@@ -19,7 +19,7 @@ type Props = {
 };
 
 export const StyleTab = ({
-  setTheme,
+  setStyle,
   setColorScheme,
   setCustomBorderColor1,
   setCustomBorderColor2,
@@ -60,14 +60,17 @@ export const StyleTab = ({
             <div>
               <p>{tl('generator.theme.style')}</p>
               <select
-                value={settings.theme}
-                onChange={(e) => setTheme(e.target.value)}
+                value={settings.style}
+                onChange={(e) => setStyle(e.target.value)}
               >
-                {styles.map((theme) => {
-                  if (theme.hidden) return;
+                {styles.map((style) => {
+                  if (style.hidden) return;
                   return (
-                    <option key={theme.id} value={theme.id}>
-                      {tl(`theme.${theme.id}`)}
+                    <option key={style.id} value={style.id}>
+                      {tl(`style.${style.id}`)}{' '}
+                      {style.experimental
+                        ? `(${tl('generator.experimental')})`
+                        : ''}
                     </option>
                   );
                 })}
@@ -143,7 +146,7 @@ export const StyleTab = ({
           </div>
         )}
 
-        {settings.theme === 'custom' && (
+        {settings.style === 'custom' && (
           <div className={'setting'}>
             <p>
               {tl('generator.theme.custom_css.title')}{' '}

diff --git a/src/translations/english.json b/src/translations/english.json
@@ -83,8 +83,8 @@
   "scheme.ctp-macchiato": "Catppuccin Macchiato",
   "scheme.ctp-mocha": "Catppuccin Mocha",
   "scheme.custom": "Custom theme",
-  "theme.normal": "Normal",
-  "theme.compact": "Compact",
-  "theme.classic": "Classic",
-  "theme.custom": "Custom CSS"
+  "style.normal": "Normal",
+  "style.compact": "Compact",
+  "style.classic": "Classic",
+  "style.custom": "Custom CSS"
 }
diff --git a/src/translations/german.json b/src/translations/german.json
@@ -75,8 +75,8 @@
   "scheme.dark": "Dunkel",
   "scheme.faceit": "Dunkel FACEIT",
   "scheme.custom": "Brauch Thema",
-  "theme.normal": "Normale",
-  "theme.compact": "Kompakt",
-  "theme.classic": "Klassisch",
-  "theme.custom": "Brauch CSS"
+  "style.normal": "Normale",
+  "style.compact": "Kompakt",
+  "style.classic": "Klassisch",
+  "style.custom": "Brauch CSS"
 }
diff --git a/src/translations/polish.json b/src/translations/polish.json
@@ -75,8 +75,8 @@
   "scheme.dark": "Ciemny",
   "scheme.faceit": "Ciemny FACEIT",
   "scheme.custom": "Własny motyw",
-  "theme.normal": "Normalny",
-  "theme.compact": "Kompaktowy",
-  "theme.classic": "Klasyczny",
-  "theme.custom": "Własny CSS"
+  "style.normal": "Normalny",
+  "style.compact": "Kompaktowy",
+  "style.classic": "Klasyczny",
+  "style.custom": "Własny CSS"
 }
diff --git a/widget/src/widget/Widget.tsx b/widget/src/widget/Widget.tsx
@@ -42,11 +42,15 @@ import '../styles/themes/classic.less';
 import '../styles/color_schemes.less';
 import { SettingsContext } from '../../../src/generator/Generator.tsx';
 
-export const styles: { id: string; hidden?: boolean }[] = [
+export const styles: {
+  id: string;
+  hidden?: boolean;
+  experimental?: boolean;
+}[] = [
   { id: 'normal' },
   { id: 'compact' },
   { id: 'classic' },
-  { id: 'custom' },
+  { id: 'custom', experimental: true },
 ];
 
 export const colorSchemes: string[] = [
@@ -173,7 +177,7 @@ export const Widget = ({ preview }: { preview: boolean }) => {
     const showEloProgressBarOldParam = searchParams.get('eloBar');
     const customCSSParam = searchParams.get('css');
 
-    /* Redirect old theme format to new theme & style format */
+    /* Redirect old theme format to new style & color scheme format */
     if (styleParam === 'dark' || styleParam === 'normal-custom') {
       styleParam = 'normal';
       colorSchemeParam = 'dark';
@@ -231,7 +235,7 @@ export const Widget = ({ preview }: { preview: boolean }) => {
     let style = styleParam;
     let scheme = colorSchemeParam;
 
-    if (!style || !styles.find((theme1) => theme1.id === style)) {
+    if (!style || !styles.find((style1) => style1.id === style)) {
       style = 'normal';
     }
     if (!colorSchemes.find((scheme1) => scheme1 === scheme)) {
@@ -300,7 +304,7 @@ export const Widget = ({ preview }: { preview: boolean }) => {
     setCustomBorderColor2(overrides.customBorderColor2);
     setShowEloProgressBar(overrides.showEloProgressBar);
     setCustomCSS(overrides.customCSS);
-    setStyle(overrides.theme);
+    setStyle(overrides.style);
   }, [overrides]);
 
   const [searchParams] = useSearchParams();