From c0382eb1d58af606feabd7bf8a6c72d7e3e6379f Mon Sep 17 00:00:00 2001 From: Waterball Date: Wed, 17 Mar 2021 12:26:03 +0000 Subject: [PATCH] Add music page --- frontend/App.js | 5 +++++ frontend/package.json | 2 +- frontend/screens/Home.tsx | 2 +- frontend/screens/Music.tsx | 36 ++++++++++++++++++++++++++++++++++++ frontend/screens/Quizzer.tsx | 2 +- 5 files changed, 44 insertions(+), 3 deletions(-) create mode 100644 frontend/screens/Music.tsx diff --git a/frontend/App.js b/frontend/App.js index 513586d..7a717e1 100644 --- a/frontend/App.js +++ b/frontend/App.js @@ -4,6 +4,7 @@ import {NavigationContainer} from '@react-navigation/native'; import Home from "./screens/Home"; import Quizzer from "./screens/Quizzer"; import Ionicons from 'react-native-vector-icons/Ionicons'; +import Music from "./screens/Music"; const Tab = createBottomTabNavigator(); @@ -28,6 +29,10 @@ export default function App() { name="Quizzer" component={Quizzer} /> + ); diff --git a/frontend/package.json b/frontend/package.json index 3119b1a..c791af1 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -32,7 +32,7 @@ "typescript": "^4.1.3" }, "scripts": { - "start": "expo start --web --https", + "start": "expo start --web", "android": "expo start --android", "ios": "expo start --ios", "web": "expo web --https", diff --git a/frontend/screens/Home.tsx b/frontend/screens/Home.tsx index f28617b..ed700c4 100644 --- a/frontend/screens/Home.tsx +++ b/frontend/screens/Home.tsx @@ -11,7 +11,7 @@ const Home = () => { const navigation = useNavigation(); const handleClick = () => { - axios.get('https://45.55.107.39/test') + axios.get('http://45.55.107.39/test') .then((response) => { navigation.navigate('Quizzer', { roomId: response.data.id diff --git a/frontend/screens/Music.tsx b/frontend/screens/Music.tsx new file mode 100644 index 0000000..d00c6c0 --- /dev/null +++ b/frontend/screens/Music.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import {Card, Paragraph} from 'react-native-paper'; +import {ScrollView} from "react-native"; + +const Music = () => { + return ( + + + + + + There are seven musical notes that are used in music theory and they are A, B, C, D, E, F and G, these are the only notes that in music notation. + They are used for two different areas and they are for determining the tone, pitch and duration of the notes indicated on the stave. + Each note has its own sound of tone that is completely different from any other notes and its pitch is based on where it is positioned on the stave. + Musical Notes and Stave go hand in hand with each other because that’s where the notes are written on for the individual to read so they can understand what + their playing. For example, the Musical Stave consists of five lines where the beginning note is Middle C, and it is positioned underneath the Musical Stave + + + + However, the principle of the concept stays the same. is used for indicating what note is written and the pitch of it. The notes move up the Stave then the pitch + is raised and if it moves down then it’s lowered. For example, the note Middle C is positioned underneath the stave with a leger line within the note indicating + its position in relation to the Musical Stave. + + + Leger Lines are additional stave lines for when the notes pitch is higher or lower that’s what can be notated on the Musical Stave, so the leger lines are drawn either within, + above or below relative to the notes name itself. + + + + + ); +}; + +export default Music; diff --git a/frontend/screens/Quizzer.tsx b/frontend/screens/Quizzer.tsx index db18fd8..67ffbd9 100644 --- a/frontend/screens/Quizzer.tsx +++ b/frontend/screens/Quizzer.tsx @@ -30,7 +30,7 @@ const Quizzer = () => { useEffect(() => { setLoading(true); const connection = new HubConnectionBuilder() - .withUrl("https://165.227.254.227/gateway?roomId=" + roomId, { + .withUrl("http://165.227.254.227/gateway?roomId=" + roomId, { skipNegotiation: true, transport: HttpTransportType.WebSockets })