arthur.valin
/
LEARNIHON
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding color resources file

Browse Source
master
Arthur VALIN 2 years ago
parent 275f265fbb
commit d634e53980
29 changed files with 103 additions and 91 deletions
Show Stats Download Patch File Download Diff File

BIN
.vs/LEARNIHON/FileContentIndex/86a5d04e-dea0-42e2-8ec2-438527b31680.vsidx
View File

Binary file not shown.

BIN
.vs/LEARNIHON/FileContentIndex/aed33ea0-d65a-43ed-94ce-3fb5bf77a360.vsidx
View File

Binary file not shown.

0
.vs/LEARNIHON/FileContentIndex/640efaf0-3efe-4d21-931a-62e19b7d329d.vsidx → .vs/LEARNIHON/FileContentIndex/d19c12f8-0243-4b00-868f-72f597eb5b04.vsidx
Unescape View File

BIN
.vs/LEARNIHON/v17/.wsuo
View File

Binary file not shown.

2
.vs/VSWorkspaceState.json
Unescape View File

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

BIN
.vs/slnx.sqlite
View File

Binary file not shown.

10
.vs/tasks.vs.json
Unescape View File

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

3
App.tsx
Unescape View File

@ -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,
},
});

11
assets/colors.ts
Unescape View File

@ -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"
}

6
components/DetailRadical.tsx
Unescape View File

@ -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"

15
components/DrawingCanva.tsx
Unescape View File

@ -1,14 +1,15 @@
import React, {useEffect, useRef, useState } from 'react';
import { SketchCanvas, SketchCanvasRef } from 'rn-perfect-sketch-canvas';
import { StyleSheet, Button, View, Text, useColorScheme, Touchable, TouchableOpacity } from 'react-native';
import Slider from '@react-native-community/slider';
import React, { useEffect, useRef, useState } from 'react';
import { Button, StyleSheet, TouchableOpacity, useColorScheme, View } 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);

8
components/GradeChip.tsx
Unescape View File

@ -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",

4
components/GradeChipList.tsx
Unescape View File

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

9
components/Header.tsx
Unescape View File

@ -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',

12
components/KanjiCard.tsx
Unescape View File

@ -1,10 +1,10 @@
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Button, useColorScheme, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
import { SvgUri, SvgXml } from 'react-native-svg';
import { Button, KeyboardAvoidingView, Platform, ScrollView, StyleSheet, Text, useColorScheme } from 'react-native';
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>

11
components/KanjiList.tsx
Unescape View File

@ -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",

7
components/KanjiListCell.tsx
Unescape View File

@ -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",

10
components/KanjiPlaygroundList.tsx
Unescape View File

@ -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",

1
navigation/Stack.tsx
Unescape View File

@ -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";

5
navigation/Startup.tsx
Unescape View File

@ -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',

20
navigation/TabBar.tsx
Unescape View File

@ -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 { Edit2 as PlaygroundIcon } from "react-native-feather";
import { BookOpen as LearnIcon } from "react-native-feather";
import { BookOpen as LearnIcon, Edit2 as PlaygroundIcon, List as ListIcon } 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",

14
pages/Detail.tsx
Unescape View File

@ -1,10 +1,12 @@
import React, { useEffect, useState } from 'react';
import { Text, View, StyleSheet, useColorScheme, FlatList, ScrollView } from 'react-native';
import Svg, { Defs, LinearGradient, Mask, Path, Rect, SvgUri, SvgXml, Text as SvgText } from 'react-native-svg';
import { StyleSheet, Text, useColorScheme, View } from 'react-native';
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"

10
pages/Learn.tsx
Unescape View File

@ -1,9 +1,7 @@
import React from 'react';
import { View, StyleSheet, useColorScheme } from 'react-native';
import { useSelector } from 'react-redux';
import { StyleSheet, useColorScheme, View } from 'react-native';
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,
},
});

10
pages/List.tsx
Unescape View File

@ -1,7 +1,7 @@
import React from 'react';
import { View, StyleSheet, useColorScheme } from 'react-native';
import React from 'react';
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,
},
});

16
pages/Playground.tsx
Unescape View File

@ -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={[
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)
]} />
<KanjiPlaygroundList/>
<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,
},
});

2
redux/actions/setKanjis.ts
Unescape View File

@ -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 {

4
redux/store.ts
Unescape View File

@ -1,6 +1,6 @@
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';
import kanjiReducer from './reducers/kanjiReducer';
// Reference here all your application reducers
const reducer = {

1
redux/thunks/fetchKanjis.ts
Unescape View File

@ -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';

3
redux/thunks/searchKanjis.ts
Unescape View File

@ -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';

Write Preview
Loading…
Cancel
Save