Skip to content

P
pianoApp
Commit fc3d8b2a authored by norhalimah's avatar norhalimah
Browse files
Options

updating

parent b7d7b291
Show whitespace changes
Inline Side-by-side
Showing with 630 additions and 140 deletions
.vscode/settings.json
View file @ fc3d8b2a
{
"java.configuration.updateBuildConfiguration": "automatic"
"java.configuration.updateBuildConfiguration": "automatic",
"xd.globalEditor": true,
"xd.lastPackage": "d:\\RNFolder\\Test\\PianoApp\\style\\Design-app"
}
\ No newline at end of file
package.json
View file @ fc3d8b2a
......@@ -10,6 +10,9 @@
"lint": "eslint ."
},
"dependencies": {
"@emotion/react": "^11.1.5",
"@emotion/styled": "^11.1.5",
"@miblanchard/react-native-slider": "^1.5.0",
"@react-native-async-storage/async-storage": "^1.13.2",
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/bottom-tabs": "^5.11.7",
......@@ -17,6 +20,7 @@
"@react-navigation/material-bottom-tabs": "^5.3.13",
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
"adobe-spectrum-dsp": "^0.2.0",
"moment": "^2.29.1",
"react": "16.13.1",
"react-native": "0.63.4",
......@@ -35,6 +39,8 @@
"react-native-stopwatch-timer": "^0.0.21",
"react-native-super-grid": "^4.0.3",
"react-native-vector-icons": "^7.1.0",
"react-native-web-swiper": "^2.2.1",
"styled-components": "^5.2.1",
"swipeable-modal-react-native": "^1.0.8"
},
"devDependencies": {
......@@ -49,5 +55,8 @@
},
"jest": {
"preset": "react-native"
}
},
"rnpm": {
"assets": ["./assets/fonts"]
}
}
screens/home.js
View file @ fc3d8b2a
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React from 'react';
import {
SafeAreaView,
......@@ -6,13 +11,19 @@ import {
Text,
View,
TouchableOpacity,
ScrollView,
Image,
BackHandler,
Dimensions,
StatusBar,
} from 'react-native';
//import {Icon} from 'react-native-elements';
import Orientation from 'react-native-orientation';
import styles from '../style/styleHome';
import styled from 'styled-components';
const config = {
deviceWidth: Dimensions.get('window').width,
deviceHeight: Dimensions.get('window').height,
};
const exitApp = () => BackHandler.exitApp();
......@@ -31,72 +42,127 @@ class Home extends React.PureComponent {
render() {
return (
<View style={styles.container}>
<ImageBackground
source={require('../media/img/background.jpg')}
style={styles.imagebackground}>
<SafeAreaView>
<ScrollView>
<View style={styles.viewmenu}>
<TouchableOpacity
style={styles.menu}
onPress={() => {
this.props.navigation.navigate('2', {
c: 0,
w: 0,
t: 0,
cc: 1,
});
}}>
<Image
style={styles.image1}
source={require('../media/img/1piano.png')}
/>
<Text style={styles.textmenu}>{'\n'}Scale</Text>
<View style={{backgroundColor: '#81C9C9', height: '100%',width: '100%'}}>
<StatusBar animated={true} backgroundColor="#81C9C9"/>
<View style={{flex:1}}>
<Image source={require('../media/img/bg_overlay.png')} style={{width:'100%', height:'100%', resizeMode:'cover', position: 'absolute', marginTop:'40%'}}/>
<View style={{height: 44, flexDirection: 'row', paddingHorizontal:8}}>
<TouchableOpacity style={{ height: 44,flex:4}} onPress={() => this.props.navigation.navigate('6')} >
<Image source={require('../media/img/btn_settings.png')} style={{width:'100%', height:'100%'}}/>
</TouchableOpacity>
<TouchableOpacity
style={styles.menu}
onPress={() => this.props.navigation.navigate('3')}>
<Image
style={styles.image2}
source={require('../media/img/listening.png')}
/>
<Text style={styles.textmenu}>{'\n'}Listen Skill</Text>
<View style={{flex:9,justifyContent: 'center', paddingHorizontal:config.deviceWidth * 0.21}}>
<Text style={{color: '#3B3A39',fontSize: 20,lineHeight:25,fontFamily: 'Gilroy-Bold',textAlign: 'center'}}>Lessons</Text>
</View>
<TouchableOpacity style={{ height: 44,flex:4}} onPress={() => this.props.navigation.navigate('5')}>
<Image source={require('../media/img/btn_history.png')} style={{width:'100%', height:'100%'}}/>
</TouchableOpacity>
<TouchableOpacity
style={styles.menu}
onPress={() => this.props.navigation.navigate('4')}>
<Image
style={styles.image2}
source={require('../media/img/metronome.png')}
/>
<Text style={styles.textmenu}>{'\n'}Metronome</Text>
</View>
<Image source={require('../media/img/bg_piano.png')} style={{marginTop:config.deviceHeight * 0.13, marginHorizontal:config.deviceWidth * 0.2, width: 220, height:220, position: 'absolute'}}/>
<View style={{flexDirection: 'column', paddingHorizontal:config.deviceWidth * 0.05, marginTop: config.deviceHeight * 0.36}}>
<TouchableOpacity style={{backgroundColor:'#FFFBF0', borderRadius:24, marginBottom: config.deviceHeight * 0.03, height:'26%'}} onPress={() => {this.props.navigation.navigate('2', {c: 0,w: 0,t: 0,cc: 1});}}>
<Image source={require('../media/img/icon_scale.png')} style={{width:'15%', height:'40%', position: 'absolute', marginHorizontal: config.deviceWidth * 0.1, marginVertical: config.deviceHeight * 0.045}}/>
<Text style={{marginVertical: config.deviceHeight * 0.055, marginHorizontal: config.deviceWidth * 0.3,color: '#3B3A39',width: 135,height: 28,fontSize: 22,lineHeight:28,fontFamily: 'Gilroy-Bold',textAlign: 'left'}}>Scale</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.menu}
onPress={() => this.props.navigation.navigate('5')}>
<Image
style={styles.image2}
source={require('../media/img/records.png')}
/>
<Text style={styles.textmenu}>{'\n'}Records</Text>
<TouchableOpacity style={{backgroundColor:'#FFFBF0', borderRadius:24, marginBottom: config.deviceHeight * 0.03, height:'26%'}} onPress={() => this.props.navigation.navigate('3')}>
<Image source={require('../media/img/icon_listenscale.png')} style={{width:'15%', height:'40%', position: 'absolute', marginHorizontal: config.deviceWidth * 0.1, marginVertical: config.deviceHeight * 0.045}}/>
<Text style={{marginVertical: config.deviceHeight * 0.055, marginHorizontal: config.deviceWidth * 0.3,color: '#3B3A39',width: 135,height: 28,fontSize: 22,lineHeight:28,fontFamily: 'Gilroy-Bold',textAlign: 'left'}}>Listen Skill</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.menu}
onPress={() => this.props.navigation.navigate('6')}>
<Image
style={styles.image3}
source={require('../media/img/settings.png')}
/>
<Text style={styles.textmenu}>{'\n'}Settings</Text>
<TouchableOpacity style={{backgroundColor:'#FFFBF0', borderRadius:24,marginBottom: config.deviceHeight * 0.03, height:'26%'}} onPress={() => this.props.navigation.navigate('4')}>
<Image source={require('../media/img/icon_metronome.png')} style={{width:'15%', height:'40%', position: 'absolute', marginHorizontal: config.deviceWidth * 0.1, marginVertical: config.deviceHeight * 0.045}}/>
<Text style={{marginVertical: config.deviceHeight * 0.055, marginHorizontal: config.deviceWidth * 0.3,color: '#3B3A39',width: 135,height: 28,fontSize: 22,lineHeight:28,fontFamily: 'Gilroy-Bold',textAlign: 'left'}}>Metronome</Text>
</TouchableOpacity>
</View>
</ScrollView>
</SafeAreaView>
</ImageBackground>
</View>
</View>
);
}
}
export default Home;
const Rectangle3 = styled.TouchableOpacity`
height: 100px;
width: 100%;
border-radius: 24px;
background: #FFFBF0;
margin: 0px 0px 16px 0px;
`;
const Rectangle4 = styled.TouchableOpacity`
height: 100px;
width: 100%;
border-radius: 24px;
background: #FFFBF0;
margin: 0px 0px 16px 0px;
`;
const Rectangle5 = styled.TouchableOpacity`
height: 100px;
width: 100%;
border-radius: 24px;
background: #FFFBF0;
`;
const Scale = styled.Text`
color: #3B3A39;
width: 70px;
height: 28px;
font-size: 22px;
line-height:28px;
font-family: 'Gilroy-Bold';
margin: 36px 156px 36px 122px;
text-align: left;
`;
const Listen = styled.Text`
color: #3B3A39;
width: 130px;
height: 28px;
font-size: 22px;
line-height:28px;
font-family: 'Gilroy-Bold';
margin: 36px 122px;
text-align: left;
`;
const Metronome = styled.Text`
color: #3B3A39;
width: 135px;
height: 28px;
font-size: 22px;
line-height:28px;
font-family: 'Gilroy-Bold';
margin: 36px 96px 36px 122px;
text-align: left;
`;
const IconScale = styled.Image`
width: 50px;
height: 50px;
margin: 28px 12px 14.44px 36px;
position: absolute;
`;
const IconListen = styled.Image`
width: 50px;
height: 50px;
margin: 28px 12px 14.44px 36px;
position: absolute;
`;
const IconMetro = styled.Image`
width: 50px;
height: 50px;
margin: 28px 12px 14.44px 36px;
position: absolute;
`;
screens/listening.js
View file @ fc3d8b2a
......@@ -520,7 +520,7 @@ class Listen extends React.Component {
style={{
flexDirection: 'row',
}}
showsHorizontalScrollIndicator={false}>
showsHorizontalScrollIndicator={true}>
{NOTESWHITE.map((item,id) => (
<TouchableHighlight
style={
......
screens/metronome.js
View file @ fc3d8b2a
......@@ -55,10 +55,10 @@ const sound5 = require('../media/sound/sound5.wav');
const nosound = require('../media/sound/nosound.mp3');
const barTempo = [
{name :1,active:true, color: '#4885ED', play:sound1},
{name :2,active:true, color: '#4885ED', play:sound1},
{name :3,active:true, color: '#4885ED',play:sound1},
{name :4,active:true, color: '#4885ED',play:sound1},
{name :1,active:true, color: '#406ec1', play:sound1, s:[{id:1}]},
{name :2,active:true, color: '#406ec1', play:sound1, s:[{id:1}]},
{name :3,active:true, color: '#406ec1',play:sound1, s:[{id:1}]},
{name :4,active:true, color: '#406ec1',play:sound1, s:[{id:1}]},
];
......@@ -87,59 +87,32 @@ class MetronomeSkill extends React.Component {
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {
// The gesture has started. Show visual feedback so the user knows
// what is happening!
// gestureState.d{x,y} will be set to zero now
this.setState({dragging: true});
},
onPanResponderMove: (evt, gestureState) => {
// The most recent move distance is gestureState.move{X,Y}
// The accumulated gesture distance since becoming responder is
// gestureState.d{x,y}
/* this._gestureValue.setValue({
x: this._gestureOffset.x + gestureState.dx,
y: this._gestureOffset.y + gestureState.dy,
}); */
let Moved = Math.sqrt(Math.pow(gestureState.dx,2) + Math.pow(gestureState.dy,2));
if (Math.sign(gestureState.dx) === -1 && Math.abs(gestureState.dx) > Math.abs(gestureState.dy) || Math.sign(gestureState.dy) === -1 && Math.abs(gestureState.dy) > Math.abs(gestureState.dx)) {
Moved = -1 * Moved;
}
if (Moved > 10 ){
//if (Moved > 10 ) {
var Tm = Moved / 360;
this._rotationAnimation.setValue(Tm);
//console.log('move');
// this.setState({tempo: this.state.tempo + 1});
// this.rightUp();
this.leftDown();
// }
} else if (Moved < 0) {
// if (Moved > -80 && Moved < -10) {
var Tm = Moved / 360;
this._rotationAnimation.setValue(Tm);
// console.log('move anti');
//this.setState({tempo: this.state.tempo - 1});
// this.leftDown();
this.rightUp();
//}
}
},
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {
// The user has released all touches while this view is the
// responder. This typically means a gesture has succeeded
this._gestureOffset.x += gestureState.dx;
this._gestureOffset.y += gestureState.dy;
},
onPanResponderTerminate: (evt, gestureState) => {
// Another component has become the responder, so this gesture
// should be cancelled
},
onShouldBlockNativeResponder: (evt, gestureState) => {
// Returns whether this component should block native components from becoming the JS
// responder. Returns true by default. Is currently only supported on android.
return true;
},
});
......@@ -169,6 +142,7 @@ class MetronomeSkill extends React.Component {
isEnabled: true,
showPendulum:true,
barTempoH : config.deviceHeight * 0.09,
miniBar : config.deviceHeight * 0.075,
showkeypad:false,
tempoText: 0,
num : 1,
......@@ -179,11 +153,13 @@ class MetronomeSkill extends React.Component {
homeExit = async () => {
this.props.navigation.navigate('1');
this.stopPlay();
};
backAction = () => {
this.props.navigation.navigate('1');
Orientation.lockToPortrait();
this.stopPlay();
};
componentDidMount() {
......@@ -202,7 +178,7 @@ class MetronomeSkill extends React.Component {
let index = -1;
if (this.state.tempoBar.length < 4) {
for (var j = this.state.tempoBar.length; j < 4; j++) {
this.state.tempoBar.push({name :this.state.tempoBar.length + 1, active:true, color: '#4885ED', play:sound1});
this.state.tempoBar.push({name :this.state.tempoBar.length + 1, active:true, color: '#365797', play:sound1, s:[{id:1}]});
miniBar.push({image:this.state.image});
}
this.setState({beat: this.state.tempoBar.length});
......@@ -247,7 +223,7 @@ class MetronomeSkill extends React.Component {
}
else {
this.setState({beat: this.state.beat + 1});
this.state.tempoBar.push({name :this.state.beat + 1,active:true, color: '#4885ED', play:sound1});
this.state.tempoBar.push({name :this.state.beat + 1,active:true, color: '#365797', play:sound1, s:[{id:1}]});
miniBar.push({image:this.state.image});
}
};
......@@ -574,26 +550,26 @@ class MetronomeSkill extends React.Component {
toneDown = () => {
if (this.state.toneSound <= 0) {
this.setState({toneSound: 0, soundName: nosound});
this.state.tempoBar.map((item,id) => {item.play = nosound; item.color = '#BDBDBD';});
this.state.tempoBar.map((item,id) => {item.play = nosound;});
}
else {
if (this.state.toneSound === 1) {
this.setState({toneSound: 1, soundName: sound1});
this.state.tempoBar.map((item,id) => {item.play = sound1; item.color = '#4885ED';});
this.state.tempoBar.map((item,id) => {item.play = sound1;});
}
else {
this.setState({toneSound: parseInt(this.state.toneSound, 10) - 1});
if ( parseInt(this.state.toneSound, 10) - 1 === 4) {
this.setState({soundName: sound4});
this.state.tempoBar.map((item,id) => {item.play = sound4; item.color = '#8A93B6';});
this.state.tempoBar.map((item,id) => {item.play = sound4;});
}
if ( parseInt(this.state.toneSound, 10) - 1 === 3) {
this.setState({soundName: sound3});
this.state.tempoBar.map((item,id) => {item.play = sound3; item.color = '#728CD2';});
this.state.tempoBar.map((item,id) => {item.play = sound3;});
}
if ( parseInt(this.state.toneSound, 10) - 1 === 2) {
this.setState({soundName: sound2});
this.state.tempoBar.map((item,id) => {item.play = sound2; item.color = '#6188df';});
this.state.tempoBar.map((item,id) => {item.play = sound2;});
}
}
}
......@@ -602,52 +578,47 @@ class MetronomeSkill extends React.Component {
toneUp = () => {
if (this.state.toneSound >= 5) {
this.setState({toneSound: 5, soundName: sound5});
this.state.tempoBar.map((item,id) => {item.play = sound5; item.color = '#9B9B9B';});
this.state.tempoBar.map((item,id) => {item.play = sound5;});
}
else {
this.setState({toneSound: parseInt(this.state.toneSound, 10) + 1});
if ( parseInt(this.state.toneSound, 10) + 1 === 4) {
this.setState({soundName: sound4});
this.state.tempoBar.map((item,id) => {item.play = sound4; item.color = '#8A93B6';});
this.state.tempoBar.map((item,id) => {item.play = sound4;});
}
if ( parseInt(this.state.toneSound, 10) + 1 === 3) {
this.setState({soundName: sound3});
this.state.tempoBar.map((item,id) => {item.play = sound3; item.color = '#728CD2';});
this.state.tempoBar.map((item,id) => {item.play = sound3;});
}
if ( parseInt(this.state.toneSound, 10) + 1 === 2) {
this.setState({soundName: sound2});
this.state.tempoBar.map((item,id) => {item.play = sound2; item.color = '#6188df';});
this.state.tempoBar.map((item,id) => {item.play = sound2;});
}
}
};
changeSound(name){
let list = barTempo;
let index = list.indexOf(name);
if (list[index].play === sound1) {
list[index] = {name :index + 1,active:true, color: '#6188df', play:sound2};
list[index] = {name :index + 1,active:true, color: '#406ec1', play:sound2, s:[{id:1},{id:2},{id:3}]};
console.log('sound2');
}
else if (list[index].play === sound2) {
list[index] = {name :index + 1,active:true, color: '#728CD2', play:sound3};
list[index] = {name :index + 1,active:true, color: '#406ec1', play:sound3,s:[{id:1}, {id:2}]};
console.log('sound3');
}
else if (list[index].play === sound3) {
list[index] = {name :index + 1,active:true, color: '#8A93B6', play:sound4};
console.log('sound4');
list[index] = {name :index + 1,active:true, color: '#406ec1', play:sound4, s:[{id:1}]};
console.log('no sound');
}
else if (list[index].play === sound4) {
list[index] = {name :index + 1,active:true, color: '#9B9B9B', play:sound5};
console.log('sound5');
}
else if (list[index].play === sound5) {
list[index] = {name :index + 1,active:true,color: '#BDBDBD', play: nosound};
list[index] = {name :index + 1,active:true, color: '#4885ED', play:nosound, s:[{id:1}]};
console.log('no sound');
}
else {
list[index] = {name :index + 1,active:true, color: '#4885ED', play:sound1};
list[index] = {name :index + 1,active:true, color: '#406ec1', play:sound1, s:[{id:1},{id:2},{id:3}]};
console.log('sound1');
}
this.setState({tempoBar: list});
......@@ -684,7 +655,7 @@ getRotationAnimation = () => {
miniBar.map((item, id) => (item.image = note3 ));
if (this.state.tempoBar.length < 7) {
for (var j = this.state.tempoBar.length; j < 7; j++) {
this.state.tempoBar.push({name :this.state.tempoBar.length + 1, active:true, color: '#4885ED',play:sound1});
this.state.tempoBar.push({name :this.state.tempoBar.length + 1, active:true, color: '#406ec1',play:sound1, s:[{id:1}]});
miniBar.push({image:this.state.image});
}
}
......@@ -708,7 +679,7 @@ getRotationAnimation = () => {
let index = -1;
if (this.state.tempoBar.length < 4) {
for (var j = this.state.tempoBar.length; j < 4; j++) {
this.state.tempoBar.push({name :this.state.tempoBar.length + 1, active:true, color: '#4885ED',play:sound1});
this.state.tempoBar.push({name :this.state.tempoBar.length + 1, active:true, color: '#406ec1',play:sound1, s:[{id:1}]});
miniBar.push({image:this.state.image});
}
}
......@@ -732,7 +703,7 @@ getRotationAnimation = () => {
let index = -1;
if (this.state.tempoBar.length < 8) {
for (var j = this.state.tempoBar.length; j < 8; j++) {
this.state.tempoBar.push({name :this.state.tempoBar.length + 1, active :true,color: '#4885ED',play:sound1});
this.state.tempoBar.push({name :this.state.tempoBar.length + 1, active :true,color: '#406ec1',play:sound1, s:[{id:1}]});
miniBar.push({image:this.state.image});
}
}
......@@ -837,9 +808,9 @@ getRotationAnimation = () => {
}
toggleSwitch = () => {
if (this.state.isEnabled === false)
{this.setState({isEnabled: true, showPendulum: true, barTempoH:config.deviceHeight * 0.09});}
{this.setState({isEnabled: true, showPendulum: true, barTempoH:config.deviceHeight * 0.09, miniBar:config.deviceHeight * 0.075});}
else
{this.setState({isEnabled: false, showPendulum: false, barTempoH: config.deviceHeight * 0.13});}
{this.setState({isEnabled: false, showPendulum: false, barTempoH: config.deviceHeight * 0.13, miniBar:config.deviceHeight * 0.11});}
};
pendulum (){
......@@ -1114,10 +1085,13 @@ getRotationAnimation = () => {
<View style={{flexDirection: 'row', marginLeft:10, marginRight:10, marginTop:5, justifyContent: 'space-between'}}>
{this.state.tempoBar.map((item, id) => (
<TouchableOpacity key={id} style={
{backgroundColor:item.active ? item.color : this.state.color,borderColor:'#DBDBDB', borderWidth:1,width: config.deviceWidth * 0.5 / this.state.tempoBar.length, height:this.state.barTempoH, marginLeft:3, marginRight:5}
{backgroundColor: '#4885ED',borderColor:'#DBDBDB', borderWidth:1,width: config.deviceWidth * 0.5 / this.state.tempoBar.length, height:this.state.barTempoH, marginLeft:3, marginRight:5}
}
onPress={() => this.changeSound(item)}>
<Text/></TouchableOpacity>
{item.s.map((it, i) => (
<View key={i} style={{marginTop:1, marginBottom:1.5, marginLeft:1, marginRight:1,flexDirection: 'row', backgroundColor:item.active ? item.color : this.state.color,width: config.deviceWidth * 0.45 / this.state.tempoBar.length, height:this.state.miniBar / 3}}/>
))}
</TouchableOpacity>
))}
</View>
{this.pendulum()}
......
screens/quiz.js
View file @ fc3d8b2a
......@@ -15,6 +15,7 @@ import {
Modal,
TouchableOpacity,
BackHandler,
Dimensions,
} from 'react-native';
import {Stopwatch} from 'react-native-stopwatch-timer';
import Orientation from 'react-native-orientation';
......@@ -26,6 +27,10 @@ import Sound from 'react-native-sound';
import moment from 'moment';
import AsyncStorage from '@react-native-async-storage/async-storage';
const con = {
deviceWidth: Dimensions.get('window').width,
deviceHeight: Dimensions.get('window').height,
};
const date = moment().utcOffset('+08:00').format('D MMM');
const time = moment().utcOffset('+08:00').format('h:mm a');
const day = moment().utcOffset('+08:00').format('ddd');
......@@ -47,16 +52,16 @@ const NOTESWHITE = [
{name: 'B2', url: require('../media/sound/bb.mp3')},
];
const NOTESBLACK = [
{name: 'C#1', url: require('../media/sound/c_c.mp3'), left:0.048},
{name: 'D#1', url: require('../media/sound/d_d.mp3'),left:0.123},
{name: 'F#1', url: require('../media/sound/d_d.mp3'),left:0.275},
{name: 'G#1', url: require('../media/sound/f_f.mp3'),left:0.348},
{name: 'A#1', url: require('../media/sound/g_g.mp3'), left:0.423},
{name: 'C#2', url: require('../media/sound/a_a.mp3'), left:0.575},
{name: 'D#2', url: require('../media/sound/c_cc.mp3'), left:0.65},
{name: 'F#2', url: require('../media/sound/d_dd.mp3'), left:0.798},
{name: 'G#2', url: require('../media/sound/f_ff.mp3'), left:0.872},
{name: 'A#2', url: require('../media/sound/g_gg.mp3'), left:0.95},
{name: 'C#1', url: require('../media/sound/c_c.mp3'), left:0.047},
{name: 'D#1', url: require('../media/sound/d_d.mp3'),left:0.118},
{name: 'F#1', url: require('../media/sound/d_d.mp3'),left:0.26},
{name: 'G#1', url: require('../media/sound/f_f.mp3'),left:0.333},
{name: 'A#1', url: require('../media/sound/g_g.mp3'), left:0.405},
{name: 'C#2', url: require('../media/sound/a_a.mp3'), left:0.546},
{name: 'D#2', url: require('../media/sound/c_cc.mp3'), left:0.619},
{name: 'F#2', url: require('../media/sound/d_dd.mp3'), left:0.76},
{name: 'G#2', url: require('../media/sound/f_ff.mp3'), left:0.833},
{name: 'A#2', url: require('../media/sound/g_gg.mp3'), left:0.905},
];
const keywordsList = [];
const corSound = require('../media/sound/correct.mp3');
......@@ -939,8 +944,18 @@ class Quiz extends React.Component {
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? styles.selectedKeywordStyle
: styles.buttonStyle
? { width: Dimensions.get('window').width / NOTESWHITE.length,
alignItems: 'center',
backgroundColor: '#EEA1E1',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1}
: { width: Dimensions.get('window').width / NOTESWHITE.length,
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1}
}
onPress={() => this.toggleKeyword(item)}
key={id}>
......
screens/settingListen.js
View file @ fc3d8b2a
......@@ -35,7 +35,7 @@ export default class SettingsListen extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 0,
value: 1,
listN : [],
};
}
......@@ -137,6 +137,12 @@ export default class SettingsListen extends React.Component {
console.log(number);
this.displayData1();
}
if (counter >= 100) {
counter = 100;
this.saveData1(counter);
console.log(number);
this.displayData1();
}
}
homeExit = async () => {
......@@ -155,7 +161,7 @@ export default class SettingsListen extends React.Component {
<Text style={styles.textques}>No. of Questions : </Text>
<NumericInput
value={this.state.value}
minValue={0}
minValue={1}
maxValue={100}
onChange={this.onChange.bind(this)}
onLimitReached={(isMax,msg) => console.log(isMax,msg)}
......
screens/settingScale.js
View file @ fc3d8b2a
......@@ -28,7 +28,7 @@ export default class SettingsScale extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 0,
value: 1,
listN : [],
};
}
......@@ -130,6 +130,12 @@ export default class SettingsScale extends React.Component {
console.log(number);
this.displayData1();
}
if (counter >= 100) {
counter = 100;
this.saveData1(counter);
console.log(number);
this.displayData1();
}
}
homeExit = async () => {
......@@ -148,7 +154,7 @@ export default class SettingsScale extends React.Component {
<Text style={styles.textques}>No. of Questions : </Text>
<NumericInput
value={this.state.value}
minValue={0}
minValue={1}
maxValue={100}
onChange={this.onChange.bind(this)}
onLimitReached={(isMax,msg) => console.log(isMax,msg)}
......
screens/sidemenu.js 0 → 100644
View file @ fc3d8b2a
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
// Custom Navigation Drawer / Sidebar with Image and Icon in Menu Options
// https://aboutreact.com/custom-navigation-drawer-sidebar-with-image-and-icon-in-menu-options/
import React from 'react';
import {
SafeAreaView,
View,
StyleSheet,
Image,
Text,
Linking,
} from 'react-native';
import {
DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from '@react-navigation/drawer';
const SidebarMenu = (props) => {
return (
<SafeAreaView style={{flex: 1}}>
{/*Top Large Image */}
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
</DrawerContentScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
sideMenuProfileIcon: {
resizeMode: 'center',
width: 100,
height: 100,
borderRadius: 100 / 2,
alignSelf: 'center',
},
iconStyle: {
width: 15,
height: 15,
marginHorizontal: 5,
},
customItem: {
padding: 16,
flexDirection: 'row',
alignItems: 'center',
},
});
export default SidebarMenu;
style/Design-app/data/components.json 0 → 100644
View file @ fc3d8b2a
{
"dsp_spec_version": "0.0.1",
"last_updated_by": "",
"last_updated": "2021-03-28T14:49:06.486Z",
"entities": []
}
\ No newline at end of file
style/Design-app/data/docs.json 0 → 100644
View file @ fc3d8b2a
{
"dsp_spec_version": "0.0.1",
"last_updated_by": "",
"last_updated": "2021-03-28T14:49:06.486Z",
"entities": [
{
"class": "doc",
"type": "page",
"id": "D5BB331A-2483-4CC5-BCB7-82FFDC412B36",
"name": "Introduction",
"description": "# Success! Welcome to your new Design System Package (DSP)\nThis page is the introduction to your Design System Package. Use this page to welcome people to your system, [Markdown](https://commonmark.org/help/) is fully supported to help you create whatever you need.\n\n# Start editing\nAs a DSP creator, you can enter **Edit mode** by clicking on the **Start editing** button at the bottom left. When you finish editing your docs, tokens, or components, please click on **Finish editing**. Adobe XD for Visual Studio Code will then compile your tokens to platform-specific code, and then you will be able to share the DSP package with your team.\n\nYou can edit the settings of your package on the \"DSP settings\" button, and to load a new DSP please click on the package icon at the top left.",
"tags": []
},
{
"class": "doc",
"type": "page",
"id": "59f0b913-5e55-404d-bb02-5d89f80919bf",
"name": "Principles",
"description": "Edit this with the pencil icon. \n\n[Markdown](https://commonmark.org/help/) is supported to help you create great documentation for your design system.",
"tags": []
}
]
}
\ No newline at end of file
style/Design-app/data/fonts.json 0 → 100644
View file @ fc3d8b2a
{
"dsp_spec_version": "0.0.1",
"last_updated_by": "",
"last_updated": "2021-03-28T14:49:06.486Z",
"entities": []
}
\ No newline at end of file
style/Design-app/data/tokens.json 0 → 100644
View file @ fc3d8b2a
{
"dsp_spec_version": "0.0.1",
"last_updated_by": "",
"last_updated": "2021-03-28T14:49:06.486Z",
"entities": [
{
"id": "ce3e7baa-fe06-4b4f-b82a-4864fc229252",
"class": "token",
"type": "color",
"name": "half baked",
"description": "",
"value": "#81C9C9ff",
"tags": [
"xd",
"adobe"
],
"last_updated": "2021-03-28T14:54:01.851Z",
"last_updated_by": ""
},
{
"id": "db5e7206-34b6-4c6b-8a58-95425ea13c1c",
"class": "token",
"type": "color",
"name": "white",
"description": "",
"value": "#FFFFFFff",
"tags": [
"xd",
"adobe"
],
"last_updated": "2021-03-28T14:54:34.462Z",
"last_updated_by": ""
},
{
"id": "3de5732a-b7b3-4b77-b8cd-f4eed4b1a29b",
"class": "token",
"type": "color",
"name": "cutty sark",
"description": "",
"value": "#546E7Aff",
"tags": [
"xd",
"adobe"
],
"last_updated": "2021-03-28T14:55:07.040Z",
"last_updated_by": ""
},
{
"id": "bf186a93-3583-4625-9a88-18aece837ee8",
"class": "token",
"type": "color",
"name": "amber",
"description": "",
"value": "#FFC107ff",
"tags": [
"xd",
"adobe"
],
"last_updated": "2021-03-28T14:55:45.746Z",
"last_updated_by": ""
},
{
"id": "12678a82-52bd-46cd-9ca3-c3c46244f2b2",
"class": "token",
"type": "color",
"name": "fiord",
"description": "",
"value": "#455A64ff",
"tags": [
"xd",
"adobe"
],
"last_updated": "2021-03-28T14:56:17.546Z",
"last_updated_by": ""
},
{
"id": "7017f855-65ce-44de-835e-309b8605a9fd",
"class": "token",
"type": "color",
"name": "island spice",
"description": "",
"value": "#FFFBF0ff",
"tags": [
"xd",
"adobe"
],
"last_updated": "2021-03-28T14:56:51.728Z",
"last_updated_by": ""
},
{
"id": "b35f6f19-2637-46ad-adb0-2d8b7932e8af",
"class": "token",
"type": "color",
"name": "tuatara",
"description": "",
"value": "#3B3A39ff",
"tags": [
"xd",
"adobe"
],
"last_updated": "2021-03-28T14:57:24.827Z",
"last_updated_by": ""
}
]
}
\ No newline at end of file
style/Design-app/dsp.json 0 → 100644
View file @ fc3d8b2a
{
"dsp_spec_version": "0.0.1",
"last_updated_by": "",
"last_updated": "2021-03-28T14:49:06.486Z",
"settings": {
"name": "Design-app",
"package_version": "0.0.1",
"build_tool": "StyleDictionary",
"snippet_trigger_prefix": "xd_",
"build_status_label": "dev",
"build_params": "./config.js",
"languages": [
{
"label": "Coffeescript",
"export_tokens": false,
"snippet_id": "coffeescript",
"syntax": "text/x-coffeescript"
},
{
"label": "C",
"export_tokens": false,
"snippet_id": "c",
"syntax": "text/x-csrc"
},
{
"label": "C#",
"export_tokens": false,
"snippet_id": "csharp",
"syntax": "text/x-csharp"
},
{
"label": "CSS",
"export_tokens": true,
"snippet_id": "css",
"syntax": "text/css",
"ext-com_adobe_xd-styledictionary_id": "css"
},
{
"label": "Flutter (Dart)",
"export_tokens": false,
"snippet_id": "dart",
"syntax": "application/vnd.dart",
"ext-com_adobe_xd-styledictionary_id": "flutter"
},
{
"label": "F#",
"export_tokens": false,
"snippet_id": "fsharp",
"syntax": "text/x-csharp"
},
{
"label": "Go",
"export_tokens": false,
"snippet_id": "go",
"syntax": "text/x-go"
},
{
"label": "Groovy",
"export_tokens": false,
"snippet_id": "groovy",
"syntax": "text/x-groovy"
},
{
"label": "Handlebars",
"export_tokens": false,
"snippet_id": "handlebars",
"syntax": "text/x-handlebars-template"
},
{
"label": "HTML",
"export_tokens": false,
"snippet_id": "html",
"syntax": "text/html"
},
{
"label": "Android (Java)",
"export_tokens": false,
"snippet_id": "java",
"syntax": "text/x-java",
"ext-com_adobe_xd-styledictionary_id": "android"
},
{
"label": "JavaScript",
"export_tokens": true,
"snippet_id": "javascript",
"syntax": "text/javascript",
"ext-com_adobe_xd-styledictionary_id": "js"
},
{
"label": "JavaScript React",
"export_tokens": false,
"snippet_id": "javascriptreact",
"syntax": "text/jsx"
},
{
"label": "Less",
"export_tokens": false,
"snippet_id": "less",
"syntax": "text/x-less"
},
{
"label": "Lua",
"export_tokens": false,
"snippet_id": "lua",
"syntax": "text/x-lua"
},
{
"label": "iOS (Objective-C)",
"export_tokens": false,
"snippet_id": "objective-c",
"syntax": "text/x-objectivec",
"ext-com_adobe_xd-styledictionary_id": "ios"
},
{
"label": "Objective-C++",
"export_tokens": false,
"snippet_id": "objective-cpp",
"syntax": "text/x-c++src"
},
{
"label": "Pug",
"export_tokens": false,
"snippet_id": "jade",
"syntax": "text/html"
},
{
"label": "Python",
"export_tokens": false,
"snippet_id": "python",
"syntax": "text/x-python"
},
{
"label": "Razor (cshtml)",
"export_tokens": false,
"snippet_id": "razor",
"syntax": "text/x-csharp"
},
{
"label": "Ruby",
"export_tokens": false,
"snippet_id": "ruby",
"syntax": "text/x-ruby"
},
{
"label": "Rust",
"export_tokens": false,
"snippet_id": "rust",
"syntax": "text/x-rustsrc"
},
{
"label": "SCSS",
"export_tokens": false,
"snippet_id": "scss",
"syntax": "text/x-sass",
"ext-com_adobe_xd-styledictionary_id": "scss"
},
{
"label": "SASS",
"export_tokens": false,
"snippet_id": "sass",
"syntax": "text/x-sass"
},
{
"label": "ShaderLab",
"export_tokens": false,
"snippet_id": "shaderlab",
"syntax": "text/x-vertex"
},
{
"label": "iOS (Swift)",
"export_tokens": false,
"snippet_id": "swift",
"syntax": "text/x-swift",
"ext-com_adobe_xd-styledictionary_id": "ios-swift"
},
{
"label": "TypeScript",
"export_tokens": false,
"snippet_id": "typescript",
"syntax": "text/typescript"
},
{
"label": "TypeScript React",
"export_tokens": false,
"snippet_id": "typescriptreact",
"syntax": "text/typescript-jsx"
},
{
"label": "Markdown",
"export_tokens": false,
"snippet_id": "markdown",
"syntax": "text/x-markdown"
}
]
},
"import": [
{
"src": "data/tokens.json"
},
{
"src": "data/fonts.json"
},
{
"src": "data/components.json"
},
{
"src": "data/docs.json"
}
]
}
\ No newline at end of file
style/styleListen.js
View file @ fc3d8b2a
......@@ -132,7 +132,7 @@ export default StyleSheet.create({
color: 'red',
},
c1: {
height: '55%',
height: '45%',
alignItems: 'center',
borderColor: 'black',
marginTop:5,
......@@ -270,6 +270,7 @@ export default StyleSheet.create({
},
buttonStyle: {
width: config.deviceWidth * 0.075,
height:'70%',
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
......@@ -278,6 +279,7 @@ export default StyleSheet.create({
},
selectedKeywordStyle: {
width: config.deviceWidth * 0.075,
height:'70%',
alignItems: 'center',
backgroundColor: '#EEA1E1',
borderRightWidth: 1,
......@@ -287,14 +289,14 @@ export default StyleSheet.create({
buttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
height: '50%',
width: '1.5%',
position: 'absolute',
},
SbuttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
height: '50%',
marginLeft: config.deviceWidth * 0.048,
width: '1.5%',
position: 'absolute',
......
yarn.lock
View file @ fc3d8b2a
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment