Adding color resources file

.vs/VSWorkspaceState.json

@@ -11,6 +11,6 @@
     "\\redux\\reducers",
     "\\redux\\thunks"
   ],
-  "SelectedNode": "\\components\\DrawingCanva.tsx",
+  "SelectedNode": "\\assets",
   "PreviewInSolutionExplorer": false
 }

.vs/tasks.vs.json

@@ -0,0 +1,10 @@
+{
+  "version": "0.2.1",
+  "tasks": [
+    {
+      "taskLabel": "tâche-LEARNIHON",
+      "appliesTo": "/",
+      "type": "launch"
+    }
+  ]
+}

App.tsx

@@ -9,6 +9,7 @@ import { Keyboard, StyleSheet, TouchableWithoutFeedback} from 'react-native';
 import { InitStack } from './navigation/Startup';
 
 import {SafeAreaView} from 'react-native-safe-area-context';
+import { learnihonColors } from './assets/colors';
 
 
 export default function App() {
@@ -29,6 +30,6 @@ export default function App() {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: '#FF5C5C',
+        backgroundColor: learnihonColors.main,
     },
 });

assets/colors.ts

@@ -0,0 +1,11 @@
+export const learnihonColors = {
+    "main": "#FF5C5C",
+    "light": "#F5F5F5",
+    "light_2": "#E4E4E4",
+    "light_3": "#D5D5D5",
+    "dark": "#2B2B2B",
+    "dark_2": "#1C1C1C",
+    "dark_3": "#0D0D0D",
+    "wrong": "#AA3D3D",
+    "correct": "#3DAA3D"
+}

components/DetailRadical.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, Text, useColorScheme, View } from 'react-native';
 import { SvgXml } from 'react-native-svg';
-import { useDispatch, useSelector } from 'react-redux';
+import { learnihonColors } from '../assets/colors';
 
 
 
@@ -35,7 +35,7 @@ const detailRadicalStyle_light = StyleSheet.create({
         width: 30,
     },
     svg: {
-        color: "#FF5C5C"
+        color: learnihonColors.main
     },
     radicalIcon: {
         position: "absolute"
@@ -55,7 +55,7 @@ const detailRadicalStyle_dark = StyleSheet.create({
         width: 30,
     },
     svg: {
-        color: "#FF5C5C"
+        color: learnihonColors.main
     },
     radicalIcon: {
         position: "absolute"

components/DrawingCanva.tsx

@@ -1,14 +1,15 @@
+import Slider from '@react-native-community/slider';
 import React, { useEffect, useRef, useState } from 'react';
-import { SketchCanvas, SketchCanvasRef } from 'rn-perfect-sketch-canvas';
+import { Button, StyleSheet, TouchableOpacity, useColorScheme, View } from 'react-native';
-import { StyleSheet, Button, View, Text, useColorScheme, Touchable, TouchableOpacity } from 'react-native';
 import { SvgXml } from 'react-native-svg';
-import Slider  from '@react-native-community/slider'
+import { SketchCanvas, SketchCanvasRef } from 'rn-perfect-sketch-canvas';
 
 import { useSelector } from 'react-redux';
 import { Kanji } from '../model/kanji';
 import { KanjiMapper } from '../model/kanjiMapper';
 
 import { Eye, EyeOff } from "react-native-feather";
+import { learnihonColors } from '../assets/colors';
 
 type DrawingCanvaProps = {
     backgroundImage: string;
@@ -74,14 +75,14 @@ const DrawingCanva = (props: DrawingCanvaProps) => {
                 onValueChange={(val) => setStroke(val)}
                 minimumValue={5}
                 maximumValue={15}
-                minimumTrackTintColor={"#FF5C5C"}
+                minimumTrackTintColor={learnihonColors.main}
             />
             {isCanvasReady && (<View style={style.menu}>
-                <Button color="#FF5C5C" onPress={() => {
+                <Button color={learnihonColors.main} onPress={() => {
                     canvasRef.current?.reset();
                     setStroke(strokeWidth);
                 }} title="Reset" />
-                <Button color="#FF5C5C"
+                <Button color={learnihonColors.main}
                     onPress={() => {
                     canvasRef.current?.undo();
                     setStroke(strokeWidth);

components/GradeChip.tsx

@@ -1,7 +1,7 @@
-import { useNavigation } from '@react-navigation/native';
 import React, { useEffect, useState } from 'react';
-import { Text, View, StyleSheet, TouchableOpacity, useColorScheme, Animated  } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity } from 'react-native';
 import { Check } from "react-native-feather";
+import { learnihonColors } from '../assets/colors';
 
 interface gradeChipProps {
     grade: number;
@@ -34,7 +34,7 @@ const GradeChip = (props: gradeChipProps) => {
 
 const style = StyleSheet.create({
     chip: {
-        backgroundColor: "#FF5C5C",
+        backgroundColor: learnihonColors.main,
         borderRadius: 10,
         margin: 5,
         justifyContent: "center",
@@ -54,7 +54,7 @@ const style = StyleSheet.create({
 
 const styleSELECTED = StyleSheet.create({
     chip: {
-        backgroundColor: "#FF5C5C",
+        backgroundColor: learnihonColors.main,
         borderRadius: 10,
         margin: 5,
         justifyContent: "center",

components/GradeChipList.tsx

@@ -1,6 +1,6 @@
 import { useNavigation } from "@react-navigation/native";
-import React, { useState } from "react";
+import React from "react";
-import { FlatList, TextInput, StyleSheet, View } from "react-native";
+import { FlatList, StyleSheet, View } from "react-native";
 import GradeChip from './GradeChip';
 
 interface kanjiListSeachPanelProps {

components/Header.tsx

@@ -1,21 +1,22 @@
 import React from 'react';
 import { Text, View, StyleSheet } from 'react-native';
+import { learnihonColors } from '../assets/colors';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 
 const Header = () => {
 
     return (
-        <View style={headerStyle.container}>
+        <SafeAreaView style={headerStyle.container}>
             <Text style={headerStyle.title}>LEARNIHON</Text>
-        </View>
+        </SafeAreaView>
     );
 };
 
 const headerStyle = StyleSheet.create({
     container: {
-        backgroundColor: '#FF5C5C',
+        backgroundColor: learnihonColors.main,
         width: '100%',
-        padding: 10
     },
     title: {
         color: 'white',

components/KanjiCard.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, Text, View, Button, useColorScheme, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
+import { Button, KeyboardAvoidingView, Platform, ScrollView, StyleSheet, Text, useColorScheme } from 'react-native';
-import { SvgUri, SvgXml } from 'react-native-svg';
+import { SvgXml } from 'react-native-svg';
 import { useSelector } from 'react-redux';
+import { learnihonColors } from '../assets/colors';
 import { Kanji } from '../model/kanji';
 import { KanjiListByGrade } from '../model/kanjiListByGrades';
-import { KanjiMapper } from '../model/kanjiMapper';
 import KanjiAnswerField from './KanjiAnswerField';
 
 type KanjiProps = {
@@ -52,7 +52,7 @@ const KanjiCard = (props: KanjiProps) => {
     }, [kanji]);
 
     const computeAnswer = () => {
-        setAnswerTextColor(isAnswerRight() ? "green" : "red");
+        setAnswerTextColor(isAnswerRight() ? learnihonColors.correct : learnihonColors.wrong);
         setHasAnswered(true);
     }
     const computeNext = () => {
@@ -87,13 +87,13 @@ const KanjiCard = (props: KanjiProps) => {
             {!hasAnswered && (
                 <>
                     <KanjiAnswerField answer={answer} setAnswer={setAnswer} />
-                    <Button title="OK" color="#FF5C5C" onPress={computeAnswer} />
+                        <Button title="OK" color={learnihonColors.main} onPress={computeAnswer} />
                 </>
             ) || (
                 <>
                     <Text style={textAnswerStyle.text}>{kanji?.meaning}</Text>
                     <Text style={kanjiCardStyle.text}>{answer}</Text>
-                    <Button title="NEXT" color="#FF5C5C" onPress={computeNext}/>
+                        <Button title="NEXT" color={learnihonColors.main} onPress={computeNext}/>
                 </>
                     )}
             </ScrollView>

components/KanjiList.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { Text, SectionList, View, StyleSheet, useColorScheme } from 'react-native';
+import { SectionList, StyleSheet, Text, useColorScheme, View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
+import { learnihonColors } from '../assets/colors';
 import { Kanji } from '../model/kanji';
 import { KanjiListByGrade } from '../model/kanjiListByGrades';
-import KanjiListCell from './KanjiListCell';
 import GradeChipList from './GradeChipList';
+import KanjiListCell from './KanjiListCell';
 
 
 const KanjiList = () => {
@@ -43,7 +44,7 @@ const KanjiList = () => {
             {selectedItems.length ?
             (<SectionList
                 sections={selectedItems}
-                windowSize={100}
+                windowSize={50}
                 renderItem={
                     ({ item }) => <KanjiListCell kanji={item} />
                 }
@@ -69,7 +70,7 @@ const kanjiListStyle_light = StyleSheet.create({
         fontSize: 20,
         fontWeight: 'bold',
         color: "black",
-        backgroundColor: '#d5d5d5',
+        backgroundColor: learnihonColors.light_3,
     },
     text: {
         textAlign: "center",
@@ -93,7 +94,7 @@ const kanjiListStyle_dark = StyleSheet.create({
         fontSize: 20,
         fontWeight: 'bold',
         color: "white",
-        backgroundColor: '#0d0d0d',
+        backgroundColor: learnihonColors.dark_3,
     },
     text: {
         textAlign: "center",

components/KanjiListCell.tsx

@@ -1,6 +1,7 @@
 import { useNavigation } from '@react-navigation/native';
 import React from 'react';
-import { Text, View, StyleSheet, TouchableOpacity, useColorScheme } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, useColorScheme } from 'react-native';
+import { learnihonColors } from '../assets/colors';
 import { Kanji } from '../model/kanji';
 
 interface kanjiListCellProps {
@@ -29,7 +30,7 @@ const cellStyle_light = StyleSheet.create({
         flex: 1,
         flexDirection: "row",
         alignItems: "center",
-        backgroundColor: '#e6e6e6',
+        backgroundColor: learnihonColors.light_2,
     },
     text: {
         color: "black",
@@ -51,7 +52,7 @@ const cellStyle_dark = StyleSheet.create({
         flex: 1,
         flexDirection: "row",
         alignItems: "center",
-        backgroundColor: '#1c1c1c',
+        backgroundColor: learnihonColors.dark_2,
     },
     text: {
         color: "white",

components/KanjiPlaygroundList.tsx

@@ -1,17 +1,15 @@
 import React, { useEffect } from 'react';
 import { FlatList, StyleSheet, Text, TextInput, TouchableOpacity, useColorScheme, View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
+import { learnihonColors } from '../assets/colors';
 import { Kanji } from '../model/kanji';
 import { setSelectedKanji } from '../redux/actions/setSelectedKanji';
 import { searchKanjis } from '../redux/thunks/searchKanjis';
 
 
 
-interface kanjiPlaygroundListProps {
-    data: Kanji[]
-}
 
-const KanjiPlaygroundList = (props: kanjiPlaygroundListProps) => {
+const KanjiPlaygroundList = () => {
 
     const kanjiPlaygroundListStyle = useColorScheme() == 'light' ? kanjiPlaygroundListStyle_light : kanjiPlaygroundListStyle_dark;
     const [search, setSearch] = React.useState("");
@@ -60,7 +58,7 @@ const kanjiPlaygroundListStyle_light = StyleSheet.create({
         margin: 1,
         justifyContent: 'center',
         flex: 1,
-        backgroundColor: '#e6e6e6',
+        backgroundColor: learnihonColors.light_2,
     },
     entryText: {
         fontWeight: "bold",
@@ -90,7 +88,7 @@ const kanjiPlaygroundListStyle_dark = StyleSheet.create({
         margin: 1,
         justifyContent: 'center',
         flex: 1,
-        backgroundColor: '#1c1c1c',
+        backgroundColor: learnihonColors.dark_2,
     },
     entryText: {
         fontWeight: "bold",

navigation/Stack.tsx

@@ -1,4 +1,3 @@
-import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator, StackNavigationOptions } from "@react-navigation/stack";
 import React from "react";
 import Detail from "../pages/Detail";

navigation/Startup.tsx

@@ -1,8 +1,9 @@
 import { NavigationContainer, useNavigation } from "@react-navigation/native";
 import { createStackNavigator, StackNavigationOptions } from "@react-navigation/stack";
 import React, { useEffect } from "react";
-import { View, StyleSheet, Text } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 import { useDispatch } from "react-redux";
+import { learnihonColors } from "../assets/colors";
 import { fetchKanjis } from "../redux/thunks/fetchKanjis";
 import TabBar from "./TabBar";
 
@@ -65,7 +66,7 @@ const splashscreenStyle = StyleSheet.create({
         width: "100%",
         height: "100%",
         position: "absolute",
-        backgroundColor: '#FF5C5C',
+        backgroundColor: learnihonColors.main,
     },
     title: {
         color: 'white',

navigation/TabBar.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
 
-import { StyleSheet, TouchableNativeFeedback, useColorScheme, View } from 'react-native'
-import { NavigationContainer } from '@react-navigation/native';
 import { BottomTabBarButtonProps, BottomTabNavigationOptions, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { StyleSheet, TouchableNativeFeedback, useColorScheme, View } from 'react-native';
 
-import { List as ListIcon } from "react-native-feather";
+import { BookOpen as LearnIcon, Edit2 as PlaygroundIcon, List as ListIcon } from "react-native-feather";
-import { Edit2 as PlaygroundIcon } from "react-native-feather";
-import { BookOpen as LearnIcon } from "react-native-feather";
 
+import { learnihonColors } from '../assets/colors';
+import Header from '../components/Header';
 import Learn from '../pages/Learn';
 import Playground from '../pages/Playground';
 import KanjiStackNavigator from './Stack';
-import Header from '../components/Header';
 
 
 
@@ -44,13 +42,13 @@ const LearnButton = (props: BottomTabBarButtonProps) => {
 
 const learnButtonStyle_light = StyleSheet.create({
     button: {
-        backgroundColor: "#FF5C5C",
+        backgroundColor: learnihonColors.main,
         width: 80,
         height: 80,
         borderRadius: 40,
     },
     button2: {
-        backgroundColor: "#f5f5f4",
+        backgroundColor: learnihonColors.light,
         width: 90,
         height: 90,
         borderRadius: 45,
@@ -60,13 +58,13 @@ const learnButtonStyle_light = StyleSheet.create({
 
 const learnButtonStyle_dark = StyleSheet.create({
     button: {
-        backgroundColor: "#FF5C5C",
+        backgroundColor: learnihonColors.main,
         width: 80,
         height: 80,
         borderRadius: 40,
     },
     button2: {
-        backgroundColor: "#2b2b2b",
+        backgroundColor: learnihonColors.dark,
         width: 90,
         height: 90,
         borderRadius: 45,
@@ -126,7 +124,7 @@ const tabOptions: BottomTabNavigationOptions = {
     tabBarShowLabel: false,
     headerShown: false,
     tabBarStyle: {
-        backgroundColor: "#FF5C5C",
+        backgroundColor: learnihonColors.main,
     },
     tabBarActiveTintColor: "white",
     tabBarInactiveTintColor: "black",

pages/Detail.tsx

@@ -1,10 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { Text, View, StyleSheet, useColorScheme, FlatList, ScrollView } from 'react-native';
+import { StyleSheet, Text, useColorScheme, View } from 'react-native';
-import Svg, { Defs, LinearGradient, Mask, Path, Rect, SvgUri, SvgXml, Text as SvgText } from 'react-native-svg';
+import { SvgXml } from 'react-native-svg';
+import { learnihonColors } from '../assets/colors';
 import DetailExamples from '../components/DetailExamples';
 import DetailRadical from '../components/DetailRadical';
 import { Kanji } from '../model/kanji';
 
+
 const Detail = ({route}) => {
     const kanji:Kanji = route.params.kanji;
     const detailStyle = useColorScheme() == 'light' ? detailStyle_light : detailStyle_dark;
@@ -64,7 +66,7 @@ const detailStyle_light = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: "#e4e4e4",
+        backgroundColor: learnihonColors.light_2,
         height: "100%",
         width: "100%"
     },
@@ -87,7 +89,7 @@ const detailStyle_light = StyleSheet.create({
     },
     meaningText: {
         fontSize: 20,
-        color: "#FF5C5C",
+        color: learnihonColors.main,
         fontWeight: "900",
         textAlign: "center"
     }
@@ -99,7 +101,7 @@ const detailStyle_dark = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: "#1c1c1c",
+        backgroundColor: learnihonColors.dark_2,
     },
     pronounciation: {
         alignItems: "center"
@@ -121,7 +123,7 @@ const detailStyle_dark = StyleSheet.create({
     },
     meaningText: {
         fontSize: 20,
-        color: "#FF5C5C",
+        color: learnihonColors.main,
         fontWeight: "900",
         textAlign: "center"
 

pages/Learn.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
-import { View, StyleSheet, useColorScheme } from 'react-native';
+import { StyleSheet, useColorScheme, View } from 'react-native';
-import { useSelector } from 'react-redux';
+import { learnihonColors } from '../assets/colors';
 import KanjiCard from '../components/KanjiCard';
-import { Kanji } from '../model/kanji';
-import { KanjiListByGrade } from '../model/kanjiListByGrades';
 
 
 const Learn = () => {
@@ -23,7 +21,7 @@ const learnStyle_light = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: "#f5f5f5"
+        backgroundColor: learnihonColors.light
     }
 })
 
@@ -33,7 +31,7 @@ const learnStyle_dark = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: '#2B2B2B',
+        backgroundColor: learnihonColors.dark,
     },
 });
 

pages/List.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { View, StyleSheet, useColorScheme } from 'react-native';
+import { StyleSheet, useColorScheme, View } from 'react-native';
+import { learnihonColors } from '../assets/colors';
 import KanjiList from '../components/KanjiList';
-import { Kanji } from '../model/kanji';
 
 
 const List = () => {
@@ -21,7 +21,7 @@ const listStyle_light = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: "#f5f5f5",
+        backgroundColor: learnihonColors.light,
     }
 })
 
@@ -31,7 +31,7 @@ const listStyle_dark = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: '#2B2B2B',
+        backgroundColor: learnihonColors.dark,
     },
 });
 

pages/Playground.tsx

@@ -1,22 +1,16 @@
 import React from 'react';
-import { View, StyleSheet, useColorScheme } from 'react-native';
+import { StyleSheet, useColorScheme, View } from 'react-native';
+import { learnihonColors } from '../assets/colors';
 import DrawingCanva from '../components/DrawingCanva';
 import KanjiPlaygroundList from '../components/KanjiPlaygroundList';
-import { Kanji } from '../model/kanji';
 
 
 const Playground = () => {
-    // 親 雨 序 余 貴 郷
-
     const playgroundStyle = useColorScheme() == 'light' ? playgroundStyle_light : playgroundStyle_dark;
 
     return (
         <View style={playgroundStyle.container}>
-            <KanjiPlaygroundList data={[
+            <KanjiPlaygroundList/>
-                new Kanji("親", "parent", "https://media.kanjialive.com/kanji_strokes/shita(shii)_16.svg", "aaa", 16),
-                new Kanji("雨", "rain", "https://media.kanjialive.com/kanji_strokes/u-ame_8.svg", "aaa", 8),
-                new Kanji("貴", "noble", "https://media.kanjialive.com/kanji_strokes/ki-touto(i)_12.svg", "aaa", 12)
-            ]} />
             <DrawingCanva backgroundImage="https://media.kanjialive.com/kanji_strokes/otozu(reru)_11.svg"/>
         </View>
     );
@@ -27,7 +21,7 @@ const playgroundStyle_light = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: "#f5f5f5"
+        backgroundColor: learnihonColors.light
 
     }
 })
@@ -38,7 +32,7 @@ const playgroundStyle_dark = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: '#2B2B2B',
+        backgroundColor: learnihonColors.dark,
     },
 });
 

redux/actions/setKanjis.ts

@@ -1,5 +1,5 @@
-import { SET_KANJIS } from '../constants';
 import { KanjiListByGrade } from '../../model/kanjiListByGrades';
+import { SET_KANJIS } from '../constants';
 
 export const setKanjis = (kanjis: KanjiListByGrade) => {
     return {

redux/store.ts

@@ -1,4 +1,4 @@
-import { configureStore, createSerializableStateInvariantMiddleware, getDefaultMiddleware } from '@reduxjs/toolkit'
+import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
 import { SET_KANJIS, SET_PLAYGROUND_LIST, SET_SELECTED_KANJI } from './constants';
 import kanjiReducer from './reducers/kanjiReducer';
 

redux/thunks/fetchKanjis.ts

@@ -1,4 +1,3 @@
-import { useDispatch } from 'react-redux';
 import { initKanjiListByGrade, KanjiListByGrade } from '../../model/kanjiListByGrades';
 import { KanjiMapper } from '../../model/kanjiMapper';
 import { setKanjis } from '../actions/setKanjis';

redux/thunks/searchKanjis.ts

@@ -1,6 +1,3 @@
-import { useDispatch } from 'react-redux';
-import { Kanji } from '../../model/kanji';
-import { initKanjiListByGrade, KanjiListByGrade } from '../../model/kanjiListByGrades';
 import { KanjiMapper } from '../../model/kanjiMapper';
 import { setPlaygroundList } from '../actions/setPlaygroundList';