fix: マスの選択を設置済みのタートルと誤解されないようにする (#128)

exKAZUu-Research · Sep 20, 2024 · 07d1ca4 · 07d1ca4
1 parent beeab40
commit 07d1ca4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/BoardEditor.tsx b/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/BoardEditor.tsx
@@ -267,7 +267,7 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
                   <div>y = {selectedPosition.y}</div>
                 </>
               ) : (
-                <div>なし</div>
+                <Box color="gray.600">なし</Box>
               )}
             </HStack>
           </VStack>
@@ -331,12 +331,13 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
                   </Button>
                 </HStack>
               </>
-            ) : selectedPosition ? (
+            ) : (
+              <Box color="gray.600">なし</Box>
+            )}
+            {!selectedCharacter && selectedPosition && (
               <Button colorScheme="brand" size="sm" variant="outline" onClick={() => void handleAddCharacterButton()}>
                 タートルを追加
               </Button>
-            ) : (
-              <div>なし</div>
             )}
           </VStack>
 

diff --git a/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/BoardViewer.tsx b/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/BoardViewer.tsx
@@ -10,7 +10,7 @@ import {
   TURTLE_GRAPHICS_BOARD_GAP_PX as GAP_PX,
   TURTLE_GRAPHICS_BOARD_PADDING_PX as PADDING_PX,
 } from '../../../../../../constants';
-import { Box, Grid, GridItem, Img } from '../../../../../../infrastructures/useClient/chakra';
+import { Box, Grid, GridItem, Img, keyframes } from '../../../../../../infrastructures/useClient/chakra';
 import { charToColor } from '../../../../../../problems/traceProgram';
 import type { CharacterTrace, TraceItemVar } from '../../../../../../problems/traceProgram';
 
@@ -41,6 +41,15 @@ const DIR_TO_TRANSFORM_FUNCTION = {
   E: 'rotate(270deg)',
 } as const;
 
+const focusRingKeyframes = keyframes({
+  '0%': {
+    borderColor: '#d69e2e' /* yellow.500 */,
+  },
+  '100%': {
+    borderColor: '#f6e05e' /* yellow.300 */,
+  },
+});
+
 type Props = BoxProps & {
   board: string | undefined;
   vars: TraceItemVar | undefined;
@@ -147,8 +156,8 @@ export const BoardViewer: React.FC<Props> = ({
 
       {focusedCell && (
         <Box
-          borderColor="yellow.500"
           borderWidth="4px"
+          css={{ animation: `${focusRingKeyframes} 0.5s linear infinite alternate both` }}
           h={`${CELL_SIZE_PX + 12}px`}
           left={`${PADDING_PX}px`}
           pointerEvents="none"

diff --git a/src/infrastructures/useClient/chakra.ts b/src/infrastructures/useClient/chakra.ts
@@ -62,6 +62,7 @@ export {
   InputGroup,
   InputLeftElement,
   InputRightElement,
+  keyframes,
   Link,
   LinkBox,
   LinkOverlay,