Merge pull request #23 from nea-c/dev

v0.3.3

README.md

@@ -3,7 +3,11 @@ Minecraftの`/playsound`コマンドを容易にするためのデスクトッ
 
 A desktop app that lets you easily create Minecraft `/playsound` commands
 
-![SampleImage](image.png)
+<div style="display: flex;">
+<img src="image.png" width="45%" />
+<img src="image-1.png" width="45%" />
+</div>
+
 
 # Supported
 ### 大感謝　　　Thank you so so so so so much

package.json

@@ -1,6 +1,6 @@
 {
   "name": "knead",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Playsound generator for Minecraft",
   "main": "dist/main.js",
   "scripts": {

src/ipc-main-handler.ts

@@ -93,7 +93,10 @@ export const initIpcMain = (): void => {
       result.push(sound)
     }
 
-    return result
+    return result.sort((a, b) => {
+      if (a.id > b.id) return 1
+      else return -1
+    })
   })
 
   ipcMain.handle('get_mcSoundHash', async (event, hash: string): Promise<string> => {

src/web/App.tsx

@@ -1,16 +1,23 @@
 import './App.css'
-import React from 'react'
+import React, { useState } from 'react'
 import { VersionSelector } from './VersionSelector'
 import { SoundSelector } from './SoundSelector'
-import { ThemeChange } from './ThemeChange'
 import { Footer } from './Footer'
-// import { Configuration } from './Configuration'
+import { Configuration } from './Configuration'
 import { VolumeChange } from './VolumeChange'
-import { LanguageChange } from './LanguageChange'
 import { Separator, Flex, Spacer, useColorMode, Box, VStack } from '@yamada-ui/react'
+import { useTranslation } from 'react-i18next'
 
 export const App = () => {
   const { colorMode } = useColorMode()
+  const { i18n } = useTranslation()
+
+  const [lang, setLang] = useState('')
+  if (lang === '') {
+    const get_lang = localStorage.getItem('lang') ?? 'en'
+    setLang(get_lang)
+    i18n.changeLanguage(get_lang)
+  }
 
   const style = document.createElement('style')
   style.textContent += '::-webkit-scrollbar { width: 7px; height: 7px; }'
@@ -28,15 +35,13 @@ export const App = () => {
     <>
       <VStack h="100vh">
         <Box padding={2}>
-          <Flex w="full" gap="md" paddingBottom={0}>
+          <Flex w="full" gap={2} paddingBottom={0}>
             <VersionSelector />
 
             <Spacer />
 
             <VolumeChange />
-            <LanguageChange />
-            <ThemeChange />
-            {/* <Configuration /> */}
+            <Configuration />
           </Flex>
           <Separator marginY={2} size="xs" />
           <SoundSelector />

src/web/Configuration.tsx

@@ -1,28 +1,75 @@
-import React from 'react'
-import { SettingsIcon } from '@yamada-ui/lucide'
-import { Drawer, DrawerHeader, DrawerBody, useDisclosure, IconButton } from '@yamada-ui/react'
+import React, { useState } from 'react'
+import { SettingsIcon, ArrowDownAZIcon, FilterIcon } from '@yamada-ui/lucide'
+import { Drawer, DrawerHeader, DrawerBody, useDisclosure, IconButton, Switch, Text, HStack, Card, CardHeader, CardBody, VStack } from '@yamada-ui/react'
 import { ThemeChange } from './ThemeChange'
+import { useTranslation } from 'react-i18next'
+import { LanguageChange } from './LanguageChange'
 
 export const Configuration = () => {
   const { isOpen, onOpen, onClose } = useDisclosure()
 
+  const { t } = useTranslation()
+
+  const [holdSoundsSort, setHoldSoundsSort] = useState<boolean | undefined>(undefined)
+  if (holdSoundsSort === undefined) setHoldSoundsSort(JSON.parse(localStorage.getItem('holdSoundsSort') ?? 'false'))
+  const changesetHoldSoundsSort = (v: boolean) => {
+    setHoldSoundsSort(v)
+    localStorage.setItem('holdSoundsSort', v.toString())
+  }
+
+  const [holdRatingFilter, setHoldRatingFilter] = useState<boolean | undefined>(undefined)
+  if (holdRatingFilter === undefined) setHoldRatingFilter(JSON.parse(localStorage.getItem('holdRatingFilter') ?? 'false'))
+  const changeHoldRatingFilter = (v: boolean) => {
+    setHoldRatingFilter(v)
+    localStorage.setItem('holdRatingFilter', v.toString())
+  }
+
   return (
     <>
-      <IconButton onClick={onOpen} icon={<SettingsIcon />} />
+      <IconButton onClick={onOpen} icon={<SettingsIcon fontSize="xl" />} />
 
-      <Drawer isOpen={isOpen} onClose={onClose}>
-        <DrawerHeader>設定</DrawerHeader>
+      <Drawer isOpen={isOpen} onClose={onClose} size="lg" placement="right" style={{ userSelect: 'none' }}>
+        <DrawerHeader>{t('settings')}</DrawerHeader>
 
         <DrawerBody>
-          <ThemeChange />
+
+          <VStack gap={2}>
+            <Card w="full" variant="outline">
+              <LanguageChange />
+            </Card>
+
+            <Card w="full" variant="outline">
+              <ThemeChange />
+            </Card>
+
+            <Card w="full" variant="outline">
+              <CardHeader>
+                <HStack>
+                  <ArrowDownAZIcon fontSize="xl" />
+                  <Text>{t('sort')}</Text>
+                </HStack>
+              </CardHeader>
+              <CardBody>
+                <Switch checked={holdSoundsSort} onChange={() => changesetHoldSoundsSort(!holdSoundsSort)}>{t('hold_sounds_sort')}</Switch>
+              </CardBody>
+            </Card>
+
+            <Card w="full" variant="outline">
+              <CardHeader>
+                <HStack>
+                  <FilterIcon fontSize="xl" />
+                  <Text>{t('rating_filter')}</Text>
+                </HStack>
+              </CardHeader>
+              <CardBody>
+                <Switch checked={holdRatingFilter} onChange={() => changeHoldRatingFilter(!holdRatingFilter)}>{t('hold_rating_filter')}</Switch>
+              </CardBody>
+            </Card>
+
+          </VStack>
+
         </DrawerBody>
 
-        {/* <DrawerFooter>
-          <Button variant="ghost" onClick={onClose}>
-            とじる
-          </Button>
-          <Button colorScheme="primary">あ</Button>
-        </DrawerFooter> */}
       </Drawer>
     </>
   )

src/web/Footer.tsx

@@ -28,7 +28,7 @@ export const Footer = () => {
   if (!sessionStorage.getItem('appVolume')) sessionStorage.setItem('appVolume', `${volume}`)
   useEffect(() => {
     if (selectedSound && AudioController.context.isSomePlaying) AudioController.commands.setVolume(selectedSound, appVolume - 1)
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [appVolume])
 
   // 1.20.5(24w09a)以降は<source>と<selector>を省略できるようになった
@@ -233,7 +233,7 @@ export const Footer = () => {
         }
       }
     })()
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [soundSelectDetector])
 
   return (
@@ -286,7 +286,7 @@ export const Footer = () => {
 
           <Flex w="full" marginTop={1}>
             <Tooltip label={t('add_slash')} placement="bottom" animation="top">
-              <Toggle variant="outline" colorScheme="primary" icon={<SlashIcon fontSize="lg" />} onClick={toggleSlash} />
+              <Toggle variant="outline" colorScheme="primary" icon={<SlashIcon fontSize="xl" />} onClick={toggleSlash} />
             </Tooltip>
             <Spacer maxW={1} />
             <Tooltip label={t('play_source')} placement="bottom" animation="top">
@@ -298,7 +298,7 @@ export const Footer = () => {
             </Tooltip>
             <Spacer maxW={1} />
             <Tooltip label={t('min_volume')} placement="bottom" animation="top">
-              <NumberInput onChange={onChangeMinVolumeInput} w={32} defaultValue={0.0} precision={2} min={0.0} max={1.0} step={0.1} />
+              <NumberInput onChange={onChangeMinVolumeInput} w={20} defaultValue={0.0} precision={2} min={0.0} max={1.0} step={0.1} />
             </Tooltip>
           </Flex>
 
@@ -308,21 +308,15 @@ export const Footer = () => {
             </Tooltip>
             <Spacer maxW={10} />
             <Tooltip label={t('tilde_symbol')} placement="bottom" animation="top">
-              <Box border="1px solid" borderColor="inherit" borderRadius={5}>
-                <IconButton onClick={onClickTilde} icon={<PiTildeBold size={20} />} variant="ghost" />
-              </Box>
+              <IconButton onClick={onClickTilde} icon={<PiTildeBold size={20} />} variant="outline" borderColor="inherit" />
             </Tooltip>
             <Spacer maxW={1} />
             <Tooltip label={t('caret_symbol')} placement="bottom" animation="top">
-              <Box border="1px solid" borderColor="inherit" borderRadius={5}>
-                <IconButton onClick={onClickCaret} icon={<PiCaretUpBold size={20} />} variant="ghost" />
-              </Box>
+              <IconButton onClick={onClickCaret} icon={<PiCaretUpBold size={20} />} variant="outline" borderColor="inherit" />
             </Tooltip>
             <Spacer maxW={1} />
             <Tooltip label={t('symbol_clear')} placement="bottom" animation="top">
-              <Box border="1px solid" borderColor="inherit" borderRadius={5}>
-                <IconButton onClick={onClickRemoveSymbol} icon={<PiSelectionBold size={20} />} variant="ghost" />
-              </Box>
+              <IconButton onClick={onClickRemoveSymbol} icon={<PiSelectionBold size={20} />} variant="outline" borderColor="inherit" />
             </Tooltip>
           </Flex>
 
@@ -332,7 +326,7 @@ export const Footer = () => {
             </Tooltip>
             <Spacer maxW={10} />
             <Tooltip label={t('this_dimension_only')} placement="bottom" animation="top" maxW="full">
-              <Toggle onClick={toggleSelectorX0} variant="outline" colorScheme="primary" defaultSelected icon={<MegaphoneOffIcon fontSize="lg" />} />
+              <Toggle onClick={toggleSelectorX0} variant="outline" colorScheme="primary" defaultSelected icon={<MegaphoneOffIcon fontSize="xl" />} />
             </Tooltip>
           </Flex>
 
@@ -341,7 +335,7 @@ export const Footer = () => {
               <Box alignContent="center" paddingX={3} style={{ userSelect: 'none' }}>{command}</Box>
               <Spacer />
               <Box><Separator orientation="vertical" borderColor="bg" /></Box>
-              <Tooltip label={hasCopied ? 'Copied!' : 'Copy'} placement="bottom" animation="top">
+              <Tooltip label={hasCopied ? 'Copied!' : 'Copy'} placement="bottom" animation="bottom">
                 <IconButton icon={hasCopied ? <CheckIcon color="success" marginX={6} /> : <CopyIcon marginX={6} />} onClick={() => onCopy(command)} variant="ghost" borderLeftRadius={0} borderRightRadius={2} />
               </Tooltip>
             </Flex>

src/web/LanguageChange.tsx

@@ -1,42 +1,34 @@
 import React, { useState } from 'react'
-import { Menu, MenuButton, MenuList, MenuItem, IconButton, Box } from '@yamada-ui/react'
+import { SegmentedControl, SegmentedControlButton, HStack, Text, CardHeader, CardBody } from '@yamada-ui/react'
 
-import { CheckIcon, GlobeIcon } from '@yamada-ui/lucide'
+import { GlobeIcon } from '@yamada-ui/lucide'
 import { useTranslation } from 'react-i18next'
 
 export const LanguageChange = () => {
   const { i18n } = useTranslation()
 
   const [lang, setLang] = useState('')
-  if (lang === '') {
-    const get_lang = localStorage.getItem('lang') ?? 'ja'
-    setLang(get_lang)
-    i18n.changeLanguage(get_lang)
-  }
+  if (lang === '') setLang(localStorage.getItem('lang') ?? 'en')
 
   const onClickLang = (lang: string) => {
     i18n.changeLanguage(lang)
     localStorage.setItem('lang', lang)
   }
 
   return (
-    <Menu animation="top" gutter={0}>
-      <MenuButton as={IconButton} icon={<GlobeIcon fontSize="lg" />} variant="outline" />
-
-      <MenuList style={{ padding: 0, margin: 0 }}>
-        <MenuItem
-          icon={<CheckIcon opacity={i18n.language === 'en' ? 1 : 0} fontSize="lg" />}
-          onClick={() => onClickLang('en')}
-        >
-          <Box paddingBottom={0.5}>English</Box>
-        </MenuItem>
-        <MenuItem
-          icon={<CheckIcon opacity={i18n.language === 'ja' ? 1 : 0} fontSize="lg" />}
-          onClick={() => onClickLang('ja')}
-        >
-          <Box paddingBottom={0.5}>日本語</Box>
-        </MenuItem>
-      </MenuList>
-    </Menu>
+    <>
+      <CardHeader>
+        <HStack>
+          <GlobeIcon fontSize="xl" />
+          <Text>Language / 言語</Text>
+        </HStack>
+      </CardHeader>
+      <CardBody>
+        <SegmentedControl value={i18n.language} onChange={onClickLang}>
+          <SegmentedControlButton value="en">English</SegmentedControlButton>
+          <SegmentedControlButton value="ja">日本語</SegmentedControlButton>
+        </SegmentedControl>
+      </CardBody>
+    </>
   )
 }