feat: icon creator

packages/WebGAL-electron/main.js

@@ -1,5 +1,6 @@
-const {app, BrowserWindow, globalShortcut, Menu} = require('electron');
+const { app, BrowserWindow, globalShortcut, Menu } = require('electron');
 const log = require('electron-log');
+const path = require('path');
 
 /**
  * 关闭默认菜单栏
@@ -23,7 +24,9 @@ app.whenReady().then(() => {
 const createWindow = () => {
     const win = new BrowserWindow({
         width: 1600,
-        height: 900
+        height: 900,
+        icon: path.join(__dirname, '../../icon.ico'),
+        useContentSize: true,
     })
 
     win.loadFile('./public/index.html').then(r => {

packages/origine2/package.json

@@ -25,7 +25,8 @@
     "@codingame/monaco-vscode-localization-service-override": "~4.3.2",
     "@codingame/monaco-vscode-rollup-vsix-plugin": "~4.3.2",
     "@fluentui/react": "^8.77.3",
-    "@fluentui/react-components": "^9.44.1",
+    "@fluentui/react-color-picker-preview": "^0.1.2",
+    "@fluentui/react-components": "^9.56.8",
     "@fluentui/react-icons": "^2.0.224",
     "@fluentui/react-icons-mdl2": "^1.3.41",
     "@fluentui/react-list-preview": "^0.4.0",

packages/origine2/src/api/Api.ts

@@ -133,6 +133,11 @@ export interface RenameDto {
   newName: string;
 }
 
+export interface IconsDto {
+  /** The icons of the game */
+  platforms: string[];
+}
+
 export interface TemplateInfoDto {
   /** The name of the template */
   name: string;
@@ -788,6 +793,22 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
         ...params,
       }),
 
+    /**
+     * No description
+     *
+     * @tags Manage Game
+     * @name ManageGameControllerGetIcons
+     * @summary Get Game Icons
+     * @request GET:/api/manageGame/getIcons/{gameDir}
+     */
+    manageGameControllerGetIcons: (gameDir: string, params: RequestParams = {}) =>
+      this.request<IconsDto, void>({
+        path: `/api/manageGame/getIcons/${gameDir}`,
+        method: 'GET',
+        format: 'json',
+        ...params,
+      }),
+
     /**
      * No description
      *

packages/origine2/src/components/ColorPickerPopup/ColorPickerPopup.tsx

@@ -0,0 +1,130 @@
+import { ColorFormats, TinyColor, tinycolor } from '@ctrl/tinycolor';
+import {
+  Button,
+  Input,
+  Popover,
+  PopoverSurface,
+  PopoverTrigger,
+} from '@fluentui/react-components';
+import {
+  ColorPicker,
+  ColorSlider,
+  AlphaSlider,
+  ColorPickerProps,
+  ColorArea,
+} from '@fluentui/react-color-picker-preview';
+import { t } from '@lingui/macro';
+
+import styles from './colorPickerPopup.module.scss';
+import { useEffect, useMemo, useState } from 'react';
+import { ArrowSwapFilled, ArrowSwapRegular, bundleIcon } from '@fluentui/react-icons';
+
+const ArrowSwapIcon = bundleIcon(ArrowSwapFilled, ArrowSwapRegular);
+
+export interface ColorPickerPopupProps {
+  color: string;
+  onChange: (color: string) => void;
+}
+
+export const formatMap = new Map<ColorFormats, (color: string | TinyColor) => string>([
+  ['hex', (color) => tinycolor(color).a < 1 ? tinycolor(color).toHex8String() : tinycolor(color).toHexString()],
+  ['rgb', (color) => tinycolor(color).toRgbString()],
+  ['hsl', (color) => tinycolor(color).toHslString()],
+  ['hsv', (color) => tinycolor(color).toHsvString()],
+]);
+
+export const ColorPickerPopup = ({
+  color,
+  onChange,
+}: ColorPickerPopupProps) => {
+  const formats = ['hex', 'rgb', 'hsl', 'hsv'];
+  const [format, setFormat] = useState(!tinycolor(color).format.startsWith('hex') || formats.includes(tinycolor(color).format) ? tinycolor(color).format : 'hex');
+  const forMater = useMemo(() => formatMap.get(format) ?? formatMap.get('hex')!, [format]);
+  const [previewColor, setPreviewColor] = useState(tinycolor(color));
+  const [inputColor, setInputColor] = useState(tinycolor(color).toString());
+
+  useEffect(() => {
+    if (tinycolor(inputColor).isValid) {
+      setPreviewColor(tinycolor(inputColor));
+    }
+  }, [inputColor]);
+
+  useEffect(() => {
+    if (tinycolor(color).isValid) {
+      setInputColor(forMater(inputColor));
+    }
+  }, [format]);
+
+  const handleChangeFormat = () => {
+    const index = formats.indexOf(format);
+    const newFormat = formats[(index + 1) % formats.length] as ColorFormats;
+    setFormat(newFormat);
+  };
+
+  const handleChange: ColorPickerProps['onColorChange'] = (_, data) => {
+    setInputColor(forMater(tinycolor({ ...data.color, a: data.color.a ?? 1 })));
+  };
+
+  const [popoverOpen, setPopoverOpen] = useState(false);
+
+  return (
+    <Popover
+      open={popoverOpen}
+      trapFocus
+      onOpenChange={(_, data) => setPopoverOpen(data.open)}
+    >
+      <PopoverTrigger disableButtonEnhancement>
+        <Button style={{ paddingLeft: 0, height: '2rem' }}>
+          <div style={{ backgroundColor: tinycolor(color).toRgbString(), height: '2rem', aspectRatio: '1/1' }} />
+          <span style={{ marginLeft: '10px', textWrap: 'nowrap' }}>{t`选择颜色`}</span>
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverSurface>
+        <ColorPicker color={previewColor.toHsv()} onColorChange={handleChange}>
+          <ColorArea />
+          <div className={styles.row}>
+            <div className={styles.sliders}>
+              <ColorSlider />
+              <AlphaSlider />
+            </div>
+            <div
+              className={styles.previewColor}
+              style={{
+                backgroundColor: tinycolor(previewColor).toRgbString(),
+              }}
+            />
+          </div>
+          <div style={{ marginBottom: '0.5rem', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', gap: '0.5rem' }}>
+            <Input
+              style={{ flexGrow: 1 }}
+              value={inputColor}
+              contentAfter={<span>{format}</span>}
+              onChange={(_, data) => setInputColor(data.value)}
+            />
+            <Button icon={<ArrowSwapIcon />} onClick={handleChangeFormat} />
+          </div>
+
+        </ColorPicker>
+        <div className={styles.actions}>
+          <Button
+            onClick={() => {
+              setPopoverOpen(false);
+            }}
+          >
+            {t`取消`}
+          </Button>
+          <Button
+            appearance='primary'
+            onClick={() => {
+              onChange(forMater(previewColor));
+              setPopoverOpen(false);
+            }}
+          >
+            {t`确定`}
+          </Button>
+        </div>
+      </PopoverSurface>
+    </Popover>
+  );
+};

packages/origine2/src/components/ColorPickerPopup/colorPickerPopup.module.scss

@@ -0,0 +1,34 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.previewColor {
+  margin: 10px 0;
+  width: 50px;
+  height: 50px;
+  border-radius: 4px;
+  border: var(--border-md);
+  color: #000000;
+}
+
+.row {
+  display: flex;
+  gap: 10px;
+}
+
+.sliders {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  gap: 0.5rem;
+}