Merge pull request #19 from mogproject/dev

v0.0.3
mogproject · Dec 27, 2024 · d210655 · d210655
2 parents 3aab3aa + 1c6ccf1
commit d210655
Show file tree

Hide file tree

Showing 27 changed files with 552 additions and 156 deletions.
diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json
@@ -1,13 +1,13 @@
 {
   "files": {
     "main.css": "/static/css/main.69d6860b.css",
-    "main.js": "/static/js/main.f953ce67.js",
+    "main.js": "/static/js/main.bfe727a4.js",
     "index.html": "/index.html",
     "main.69d6860b.css.map": "/static/css/main.69d6860b.css.map",
-    "main.f953ce67.js.map": "/static/js/main.f953ce67.js.map"
+    "main.bfe727a4.js.map": "/static/js/main.bfe727a4.js.map"
   },
   "entrypoints": [
     "static/css/main.69d6860b.css",
-    "static/js/main.f953ce67.js"
+    "static/js/main.bfe727a4.js"
   ]
 }
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="description" content="Feign-Discord CSS Generator"/><meta name="author" content="mogproject"/><link rel="shortcut icon" href="assets/ico/favicon.ico" type="image/x-icon"/><link rel="apple-touch-icon" sizes="57x57" href="assets/ico/apple-touch-icon-57x57.png"/><link rel="apple-touch-icon" sizes="60x60" href="assets/ico/apple-touch-icon-60x60.png"/><link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png"/><link rel="apple-touch-icon" sizes="76x76" href="assets/ico/apple-touch-icon-76x76.png"/><link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png"/><link rel="apple-touch-icon" sizes="120x120" href="assets/ico/apple-touch-icon-120x120.png"/><link rel="apple-touch-icon" sizes="144x144" href="assets/ico/apple-touch-icon-144x144.png"/><link rel="apple-touch-icon" sizes="152x152" href="assets/ico/apple-touch-icon-152x152.png"/><link rel="apple-touch-icon" sizes="180x180" href="assets/ico/apple-touch-icon-180x180.png"/><link rel="icon" type="image/png" href="assets/ico/favicon-16x16.png" sizes="16x16"/><link rel="icon" type="image/png" href="assets/ico/favicon-32x32.png" sizes="32x32"/><link rel="icon" type="image/png" href="assets/ico/favicon-96x96.png" sizes="96x96"/><link rel="icon" type="image/png" href="assets/ico/android-chrome-192x192.png" sizes="192x192"/><meta name="msapplication-config" content="/browserconfig.xml"/><meta property="og:site_name" content="Feign-Discord CSS Generator"/><meta property="og:title" content="Feign-Discord CSS Generator"/><meta property="og:image" content="https://feign.mogproject.com/assets/img/snapshot.png"/><meta property="og:description" content="Generate CSS for Feign + Discord Streamkit Overlay with no hassle. This website's customizability, efficient user management, and simplistic UI are must-haves for all Feign streamers."/><meta property="og:url" content="https://feign.mogproject.com"/><meta property="og:type" content="website"/><link rel="manifest" href="manifest.json"/><title>Feign-Discord CSS Generator</title><script defer="defer" src="/static/js/main.f953ce67.js"></script><link href="/static/css/main.69d6860b.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="description" content="Feign-Discord CSS Generator"/><meta name="author" content="mogproject"/><link rel="shortcut icon" href="assets/ico/favicon.ico" type="image/x-icon"/><link rel="apple-touch-icon" sizes="57x57" href="assets/ico/apple-touch-icon-57x57.png"/><link rel="apple-touch-icon" sizes="60x60" href="assets/ico/apple-touch-icon-60x60.png"/><link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png"/><link rel="apple-touch-icon" sizes="76x76" href="assets/ico/apple-touch-icon-76x76.png"/><link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png"/><link rel="apple-touch-icon" sizes="120x120" href="assets/ico/apple-touch-icon-120x120.png"/><link rel="apple-touch-icon" sizes="144x144" href="assets/ico/apple-touch-icon-144x144.png"/><link rel="apple-touch-icon" sizes="152x152" href="assets/ico/apple-touch-icon-152x152.png"/><link rel="apple-touch-icon" sizes="180x180" href="assets/ico/apple-touch-icon-180x180.png"/><link rel="icon" type="image/png" href="assets/ico/favicon-16x16.png" sizes="16x16"/><link rel="icon" type="image/png" href="assets/ico/favicon-32x32.png" sizes="32x32"/><link rel="icon" type="image/png" href="assets/ico/favicon-96x96.png" sizes="96x96"/><link rel="icon" type="image/png" href="assets/ico/android-chrome-192x192.png" sizes="192x192"/><meta name="msapplication-config" content="/browserconfig.xml"/><meta property="og:site_name" content="Feign-Discord CSS Generator"/><meta property="og:title" content="Feign-Discord CSS Generator"/><meta property="og:image" content="https://feign.mogproject.com/assets/img/snapshot.png"/><meta property="og:description" content="Generate CSS for Feign + Discord Streamkit Overlay with no hassle. This website's customizability, efficient user management, and simplistic UI are must-haves for all Feign streamers."/><meta property="og:url" content="https://feign.mogproject.com"/><meta property="og:type" content="website"/><link rel="manifest" href="manifest.json"/><title>Feign-Discord CSS Generator</title><script defer="defer" src="/static/js/main.bfe727a4.js"></script><link href="/static/css/main.69d6860b.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/docs/static/js/main.bfe727a4.js b/docs/static/js/main.bfe727a4.js
diff --git a/docs/static/js/main.f953ce67.js.LICENSE.txt → docs/static/js/main.bfe727a4.js.LICENSE.txt b/docs/static/js/main.f953ce67.js.LICENSE.txt → docs/static/js/main.bfe727a4.js.LICENSE.txt
diff --git a/docs/static/js/main.bfe727a4.js.map b/docs/static/js/main.bfe727a4.js.map
diff --git a/docs/static/js/main.f953ce67.js b/docs/static/js/main.f953ce67.js
diff --git a/docs/static/js/main.f953ce67.js.map b/docs/static/js/main.f953ce67.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "feign-discord",
-  "version": "0.1.0",
+  "version": "0.0.3",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
@@ -9,12 +9,16 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "bootstrap": "^5.3.3",
     "cra-template-typescript": "1.2.0",
+    "i18next": "^24.2.0",
+    "i18next-browser-languagedetector": "^8.0.2",
     "react": "^19.0.0",
     "react-bootstrap": "^2.10.7",
     "react-bootstrap-validation": "^0.1.11",
     "react-dom": "^19.0.0",
+    "react-i18next": "^15.2.0",
     "react-scripts": "^5.0.1",
-    "reactstrap": "^9.2.3"
+    "reactstrap": "^9.2.3",
+    "typescript": "^5.7.2"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",

diff --git a/src/App.tsx b/src/App.tsx
@@ -13,8 +13,13 @@ import { DiscordVoiceChannel } from "./components/sections/DiscordVoiceChannel";
 import { ViewSettingsPane } from "./components/sections/ViewSettingsPane";
 import Footer from "./components/Footer";
 import SaveLoad from "./components/sections/SaveLoad";
+import { useTranslation } from "react-i18next";
 
 export default function App() {
+  // Translations.
+  const { t: translate } = useTranslation();
+  const t = translate as ((s: string) => string);
+
   // Voice channel.
   const initialVoiceChannelURL: string = localStorage.getItem("voice_channel_url") || "";
   const [voiceChannelURL, setVoiceChannelURL] = React.useState(initialVoiceChannelURL);
@@ -112,49 +117,49 @@ export default function App() {
       >
         <Container style={{ marginTop: "60px", paddingTop: "5px" }}>
           <p>
-            <small>全ての設定は、お使いのブラウザにのみ保存されます。設定内容が外部に送信されることはありません。</small>
+            <small>{t('features.part1')}</small>
           </p>
-          <h2 id='features'>特徴</h2>
+          <h2 id='features'>{t('features.features')}</h2>
           <ul>
-            <li>単一の CSS で Discord アイコンと Feign のキャラクターを同時に表示します。</li>
-            <li>CSS 内部に画像情報を保存しているため、外部依存を減らすことができます。</li>
-            <li>簡易的なユーザー管理により、過去の情報を再利用できます。</li>
+            <li>{t('features.part2')}</li>
+            <li>{t('features.part3')}</li>
+            <li>{t('features.part4')}</li>
           </ul>
-          <h2 id='settings'>設定</h2>
+          <h2 id='settings'>{t('settings.settings')}</h2>
           <SaveLoad />
 
           <Accordion defaultActiveKey={["0", "1", "2", "3"]} alwaysOpen className="mb-4">
             <Accordion.Item eventKey="0">
-              <Accordion.Header>Discord ボイスチャンネル</Accordion.Header>
+              <Accordion.Header>{t('settings.discord_voice_channel')}</Accordion.Header>
               <Accordion.Body>
                 <DiscordVoiceChannel />
               </Accordion.Body>
             </Accordion.Item>
 
             <Accordion.Item eventKey="1">
-              <Accordion.Header>Discord ユーザー管理</Accordion.Header>
+              <Accordion.Header>{t('settings.discord_user_management')}</Accordion.Header>
               <Accordion.Body>
                 <DiscordUsers />
               </Accordion.Body>
             </Accordion.Item>
 
             <Accordion.Item eventKey="2">
-              <Accordion.Header>Feign プレイヤー設定</Accordion.Header>
+              <Accordion.Header>{t('settings.feign_player_settings')}</Accordion.Header>
               <Accordion.Body>
                 <FeignPlayers />
               </Accordion.Body>
             </Accordion.Item>
 
             <Accordion.Item eventKey="3">
-              <Accordion.Header>オーバーレイ詳細設定</Accordion.Header>
+              <Accordion.Header>{t('settings.overlay_settings')}</Accordion.Header>
               <Accordion.Body>
                 <ViewSettingsPane />
               </Accordion.Body>
             </Accordion.Item>
           </Accordion>
-          <h2 id='preview'>プレビュー</h2>
+          <h2 id='preview'>{t('preview.preview')}</h2>
           <Preview />
-          <h2 id='obs'>OBS 設定</h2>
+          <h2 id='obs'>{t('obs.obs_settings')}</h2>
           <OBSSettings />
         </Container>
       </ConfContext.Provider>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -4,24 +4,41 @@ import { Container, Form, Nav, Navbar } from "react-bootstrap";
 import { APP_VERSION } from "../models/Context";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faYoutube, faGithub } from "@fortawesome/free-brands-svg-icons";
+import { useTranslation } from "react-i18next";
 
 function Header() {
+  const { t: translate, i18n } = useTranslation();
+  const t = translate as ((s: string) => string);
+  const languages = [
+    { key: 'ja', nativeName: '日本語' },
+    { key: 'en', nativeName: 'English' },
+  ];
+
   return (
     <header>
       <Navbar fixed="top" bg="light" data-bs-theme="light" className="border-bottom">
         <Container>
           <Navbar.Brand href='#'>Feign-Discord CSS Generator</Navbar.Brand>
 
           <Nav className="me-auto">
-            <Nav.Link href="#features">特徴</Nav.Link>
-            <Nav.Link href="#settings">設定</Nav.Link>
-            <Nav.Link href="#preview">プレビュー</Nav.Link>
-            <Nav.Link href="#obs">OBS 設定</Nav.Link>
+            <Nav.Link href="#features">{t('features.features')}</Nav.Link>
+            <Nav.Link href="#settings">{t('settings.settings')}</Nav.Link>
+            <Nav.Link href="#preview">{t('preview.preview')}</Nav.Link>
+            <Nav.Link href="#obs">{t('obs.obs_settings')}</Nav.Link>
           </Nav>
 
           <Form className="form-inline">
             <Container className="d-flex">
               <small className="text-muted mt-2 me-3">v{APP_VERSION}</small>
+              <Form.Select
+                size="sm"
+                onChange={(e) => i18n.changeLanguage(e.target.value)}
+                value={i18n.resolvedLanguage}
+                className="me-3"
+              >
+                {languages.map(({ key, nativeName }) => (<option key={key} value={key}>{nativeName}</option>))}
+
+              </Form.Select>
               <a className="nav-link me-3" href="https://www.youtube.com/@mogproject" target="_blank" rel="noreferrer">
                 <FontAwesomeIcon icon={faYoutube} size="2x" />
               </a>

diff --git a/src/components/buttons/AnimationSettingButtonGroup.tsx b/src/components/buttons/AnimationSettingButtonGroup.tsx
@@ -2,13 +2,18 @@ import React from "react";
 import { ButtonGroup, Form, InputGroup } from "react-bootstrap";
 import { AnimationSettings } from "../../models/ViewSettings";
 import { ColorPicker } from "./ColorPicker";
+import { useTranslation } from "react-i18next";
 
 export function AnimationSettingButtonGroup(
   prefix: string,
   setting: AnimationSettings,
   showOutline: boolean,
   handleChange: (setting: AnimationSettings) => void
 ) {
+  const { t: translate } = useTranslation('translation', { keyPrefix: 'settings.overlay' });
+  const t = translate as ((s: string, o?: Record<string, string | boolean>) => string);
+  const tt = (k: string) => { return t(k, { keyPrefix: '' }) };
+
   const jsxJump = (
     <ButtonGroup className="me-5">
       <Form.Control
@@ -20,7 +25,7 @@ export function AnimationSettingButtonGroup(
         onChange={() => handleChange({ ...setting, jump: !setting.jump })}
       />
       <label className="btn btn-outline-primary" htmlFor={`${prefix}-jump`} style={{ minWidth: "96px" }}>
-        ぴょこぴょこ
+        {t('jump')}
       </label>
     </ButtonGroup>
   );
@@ -38,13 +43,13 @@ export function AnimationSettingButtonGroup(
           onChange={() => handleChange({ ...setting, flash: !setting.flash })}
         />
         <label className="btn btn-outline-primary" htmlFor={`${prefix}-flash`} style={{ minWidth: "96px" }}>
-          発光
+          {t('flash')}
         </label>
       </ButtonGroup>
 
       <InputGroup className="me-5">
-        <InputGroup.Text>色</InputGroup.Text>
-        {ColorPicker("発光色", setting.flashColor, (color) => handleChange({ ...setting, flashColor: color }))}
+        <InputGroup.Text>{tt('color')}</InputGroup.Text>
+        {ColorPicker(t('flash_color'), setting.flashColor, (color) => handleChange({ ...setting, flashColor: color }))}
       </InputGroup>
     </div>
   );
@@ -61,12 +66,12 @@ export function AnimationSettingButtonGroup(
           onChange={() => handleChange({ ...setting, outline: !setting.outline })}
         />
         <label className="btn btn-outline-primary" htmlFor={`${prefix}-outline`} style={{ minWidth: "96px" }}>
-          縁取り
+          {t('outline')}
         </label>
       </ButtonGroup>
       <InputGroup>
-        <InputGroup.Text className="">色</InputGroup.Text>
-        {ColorPicker("縁取り色", setting.outlineColor, (color) => handleChange({ ...setting, outlineColor: color }))}
+        <InputGroup.Text className="">{tt('color')}</InputGroup.Text>
+        {ColorPicker(t('outline_color'), setting.outlineColor, (color) => handleChange({ ...setting, outlineColor: color }))}
       </InputGroup>
     </div>
   );
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="description" content="Feign-Discord CSS Generator"/><meta name="author" content="mogproject"/><link rel="shortcut icon" href="assets/ico/favicon.ico" type="image/x-icon"/><link rel="apple-touch-icon" sizes="57x57" href="assets/ico/apple-touch-icon-57x57.png"/><link rel="apple-touch-icon" sizes="60x60" href="assets/ico/apple-touch-icon-60x60.png"/><link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png"/><link rel="apple-touch-icon" sizes="76x76" href="assets/ico/apple-touch-icon-76x76.png"/><link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png"/><link rel="apple-touch-icon" sizes="120x120" href="assets/ico/apple-touch-icon-120x120.png"/><link rel="apple-touch-icon" sizes="144x144" href="assets/ico/apple-touch-icon-144x144.png"/><link rel="apple-touch-icon" sizes="152x152" href="assets/ico/apple-touch-icon-152x152.png"/><link rel="apple-touch-icon" sizes="180x180" href="assets/ico/apple-touch-icon-180x180.png"/><link rel="icon" type="image/png" href="assets/ico/favicon-16x16.png" sizes="16x16"/><link rel="icon" type="image/png" href="assets/ico/favicon-32x32.png" sizes="32x32"/><link rel="icon" type="image/png" href="assets/ico/favicon-96x96.png" sizes="96x96"/><link rel="icon" type="image/png" href="assets/ico/android-chrome-192x192.png" sizes="192x192"/><meta name="msapplication-config" content="/browserconfig.xml"/><meta property="og:site_name" content="Feign-Discord CSS Generator"/><meta property="og:title" content="Feign-Discord CSS Generator"/><meta property="og:image" content="https://feign.mogproject.com/assets/img/snapshot.png"/><meta property="og:description" content="Generate CSS for Feign + Discord Streamkit Overlay with no hassle. This website's customizability, efficient user management, and simplistic UI are must-haves for all Feign streamers."/><meta property="og:url" content="https://feign.mogproject.com"/><meta property="og:type" content="website"/><link rel="manifest" href="manifest.json"/><title>Feign-Discord CSS Generator</title><script defer="defer" src="/static/js/main.f953ce67.js"></script><link href="/static/css/main.69d6860b.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
		<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="description" content="Feign-Discord CSS Generator"/><meta name="author" content="mogproject"/><link rel="shortcut icon" href="assets/ico/favicon.ico" type="image/x-icon"/><link rel="apple-touch-icon" sizes="57x57" href="assets/ico/apple-touch-icon-57x57.png"/><link rel="apple-touch-icon" sizes="60x60" href="assets/ico/apple-touch-icon-60x60.png"/><link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png"/><link rel="apple-touch-icon" sizes="76x76" href="assets/ico/apple-touch-icon-76x76.png"/><link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png"/><link rel="apple-touch-icon" sizes="120x120" href="assets/ico/apple-touch-icon-120x120.png"/><link rel="apple-touch-icon" sizes="144x144" href="assets/ico/apple-touch-icon-144x144.png"/><link rel="apple-touch-icon" sizes="152x152" href="assets/ico/apple-touch-icon-152x152.png"/><link rel="apple-touch-icon" sizes="180x180" href="assets/ico/apple-touch-icon-180x180.png"/><link rel="icon" type="image/png" href="assets/ico/favicon-16x16.png" sizes="16x16"/><link rel="icon" type="image/png" href="assets/ico/favicon-32x32.png" sizes="32x32"/><link rel="icon" type="image/png" href="assets/ico/favicon-96x96.png" sizes="96x96"/><link rel="icon" type="image/png" href="assets/ico/android-chrome-192x192.png" sizes="192x192"/><meta name="msapplication-config" content="/browserconfig.xml"/><meta property="og:site_name" content="Feign-Discord CSS Generator"/><meta property="og:title" content="Feign-Discord CSS Generator"/><meta property="og:image" content="https://feign.mogproject.com/assets/img/snapshot.png"/><meta property="og:description" content="Generate CSS for Feign + Discord Streamkit Overlay with no hassle. This website's customizability, efficient user management, and simplistic UI are must-haves for all Feign streamers."/><meta property="og:url" content="https://feign.mogproject.com"/><meta property="og:type" content="website"/><link rel="manifest" href="manifest.json"/><title>Feign-Discord CSS Generator</title><script defer="defer" src="/static/js/main.bfe727a4.js"></script><link href="/static/css/main.69d6860b.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>