diff --git a/src/App.jsx b/src/App.jsx
index d40979e..c080983 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -9,6 +9,9 @@ import "./footer.css";
import "./passphrase.css";
import "./landingpage.css";
import {Toaster} from "react-hot-toast";
+import FingerspellComponent from "./components/Fingerspell.jsx";
+import SentencesComponent from "./components/SentencesSession.jsx";
+import NumbersSession from "./components/NumbersComponent.jsx";
function App() {
const [view, setView] = useState(() => sessionStorage.getItem("asl-unlocked") ? "input" : "gate");
@@ -24,7 +27,17 @@ function App() {
setCardColors(colors);
setCategoryTitle(title);
setCategoryDescription(description);
- setView("session");
+
+ // Route UI Element based on category title.
+ if(title === "Finger Spelling") {
+ setView("fingerspell");
+ } else if(title === "Numbers") {
+ setView("numbers");
+ } else if(title === "Sentences") {
+ setView("sentences");
+ } else {
+ setView("session");
+ }
}
function handleBack() {
@@ -42,12 +55,24 @@ function App() {
return (
- {view === "input" ? (
-
- ) : (
-
- )}
+ {view === "input" && }
+ {view === "session" && }
+ {view === "fingerspell" && }
+ {view === "numbers" && }
+ {view === "sentences" && }
diff --git a/src/assets/fonts/GALLAUDET.ttf b/src/assets/fonts/GALLAUDET.ttf
new file mode 100644
index 0000000..dba6a28
Binary files /dev/null and b/src/assets/fonts/GALLAUDET.ttf differ
diff --git a/src/components/Fingerspell.jsx b/src/components/Fingerspell.jsx
new file mode 100644
index 0000000..d8eadc3
--- /dev/null
+++ b/src/components/Fingerspell.jsx
@@ -0,0 +1,466 @@
+import styled from "styled-components";
+import {useEffect, useRef, useState} from "react";
+import toast from "react-hot-toast";
+import axios from "axios";
+import Tippy from "@tippyjs/react";
+
+// Structure ─────────────────────────────────────────────────────────────
+/*
+
+
+
+
+
Fingerspell
+
+ Learn how to fingerspell
+
+
+
+
+
+
+ {word[step]}
+
+ {showHint &&
+ {word[step]}
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+ */
+
+
+// Styling ─────────────────────────────────────────────────────────────
+
+const FingerspellContainer = styled.div`
+ width: 100%;
+`;
+
+const FingerspellHeader = styled.div`
+ display: flex;
+ flex-direction: row;
+
+ .btn-back {
+ width: 100px;
+
+ flex-shrink: 0;
+ align-self: flex-start;
+ background: none;
+ border: none;
+ padding: 0;
+ color: var(--text);
+ font-size: 15px;
+ cursor: pointer;
+ transition: color 0.2s;
+ z-index: 100;
+
+ &:hover {
+ color: var(--text-h);
+ }
+ }
+
+ h1 {
+ //border: 1px solid pink;
+ width: 100%;
+ margin-top: 10px;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .text-header {
+ width: 100%;
+ margin-left: -100px;
+ }
+`;
+
+const FingerspellTitle = styled.h2`
+ margin-top: -20px;
+`;
+
+const Fingerspell = styled.div`
+ //border: 1px solid blue;
+ display: flex;
+ justify-content: space-between;
+`;
+
+const FingerspellNav = styled.nav`
+ //border: 1px solid yellow;
+ flex: 1;
+ width: 300px;
+ display: flex;
+ flex-direction: column;
+
+ button {
+ width: 150px;
+ }
+`;
+
+const FingerspellTermsList = styled.div`
+ flex: none;
+ width: 200px;
+ border: 1px solid pink;
+ max-height: 330px;
+ overflow-y: auto;
+
+ ul {
+ list-style: none;
+ text-align: left;
+ }
+`;
+
+/*
+ CSS calc()
+ Spaces around operators: You must include a space on both sides of the subtraction (-) operator. If you write calc(100px-2rem), it will be
+ treated as an invalid expression or a negative number.
+ Mixed Units: calc() is the only native CSS way to do this because rem is relative (based on the root font size, usually 16px)
+ and px is absolute. The browser calculates the final pixel value at runtime
+
+ */
+
+const FingerCharacter = styled.p`
+ flex: 1;
+ width: 300px;
+ height: ${props => props.showHint ? `calc(200px - 2rem)` : "200px"};
+ background-color: beige;
+ font-family: "Gallaudet", cursive;
+ font-size: 20rem;
+ color: black;
+ //margin-top: 40px;
+ align-items: center;
+ padding-top: 130px;
+ border: 1px solid red;
+`;
+
+const FingerspellHint = styled.p`
+ width: 300px;
+ border: 1px solid orange;
+ height: 2rem;
+`;
+
+const ButtonNav = styled.div`
+ border: 1px solid green;
+`;
+
+const FingerspellCheck = styled.div`
+ border: 1px solid orange;
+ width: 100%;
+ margin-top: auto;
+`;
+
+function getSmallWordLength() {
+ const max = 5;
+ const min = 3;
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function getMediumWordLength() {
+ const max = 7;
+ const min = 4;
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function getLargeWordLength() {
+ const max = 10;
+ const min = 6;
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+const DisplayScene = Object.freeze(
+ {
+ NORMAL: "NORMAL",
+ WORDS: "WORDS",
+ LETTERS: "LETTERS"
+ }
+);
+
+export default function FingerspellComponent({onBack}) {
+ const [isActive, setIsActive] = useState(false);
+ const [stepCount, setStepCount] = useState(0);
+ const [step, setStep] = useState(0);
+ const [word, setWord] = useState("");
+ const [wordList, setWordList] = useState([]);
+
+ // Configuration
+ const [showHint, setShowHint] = useState(false);
+ const [showWord, setShowWord] = useState(false);
+
+ // For sample words - what length do we want? Small, medium or large
+ const [sampleWordLength, setSampleWordLength] = useState(getSmallWordLength());
+ const [sampleWordLengthSetting, setSampleWordLengthSetting] = useState(0); // 0 == small, 1 == medium, 2 == large
+ const [sceneMode, setSceneMode] = useState(DisplayScene.NORMAL);
+
+ // Playback rate - slow, normal, fast
+ const [playbackRate, setPlaybackRate] = useState(1);
+ const [stepInterval, setStepInterval] = useState(1000);
+
+ const [repeat, setRepeat] = useState(false);
+
+ // Word list index
+ const [wordIndex, setWordIndex] = useState(0);
+
+ // Test entry
+ const [wordEntry, setWordEntry] = useState("");
+ const inputRef = useRef();
+
+
+ function updateSampleWordLength() {
+ if (sampleWordLengthSetting < 2) {
+ setSampleWordLengthSetting(sampleWordLengthSetting + 1);
+ } else {
+ setSampleWordLengthSetting(0);
+ }
+ }
+
+ function updatePlaybackSpeed() {
+ let newPlaybackRate = 0;
+ if (playbackRate < 2) {
+ newPlaybackRate = playbackRate + 1;
+ }
+ setPlaybackRate(newPlaybackRate);
+ switch (newPlaybackRate) {
+ case 0:
+ setStepInterval(1500);
+ break;
+ case 1:
+ setStepInterval(1000);
+ break;
+ default:
+ setStepInterval(700);
+ break;
+ }
+ }
+
+ function loadWords() {
+ // load random words
+ // https://random-words-api.kushcreates.com/
+ const words_to_fetch = 20;
+ const word_length = sampleWordLength;
+ const word_language = "language=en";
+ const starts_with = "firstletter=a";
+
+ const randomWordsUrl = `https://random-words-api.kushcreates.com/api?words=${words_to_fetch}&${word_language}&length=${word_length}`;
+ axios.get(randomWordsUrl).then((response) => {
+ const wordData = [];
+ response.data.forEach(element => {
+ const entry = {
+ "term": element.word,
+ "code": "",
+ "type": "spell"
+ };
+ wordData.push(entry);
+ });
+ setWordList(wordData);
+ });
+
+ }
+
+ // Data Effect Logic ─────────────────────────────────────────────────────────────
+
+ useEffect(() => {
+ let interval = null;
+ if (isActive) {
+ if (step < stepCount) {
+ interval = setInterval(() => {
+ setStep((step) => step + 1);
+ }, stepInterval);
+ } else {
+ if (!repeat) {
+ clearInterval(interval);
+ setIsActive(false);
+ }
+ setStep(0);
+ }
+ }
+
+ // Cleanup the interval on unmount or when isActive/seconds change
+ return () => clearInterval(interval);
+ }, [isActive, repeat, step, stepCount, stepInterval]);
+
+ useEffect(() => {
+ setStepCount(word.length);
+ }, [word]);
+
+ useEffect(() => {
+ loadWords();
+ }, []);
+
+ useEffect(() => {
+ if (wordList.length > 0) {
+ setWordIndex(0);
+ setWord(" " + wordList[0].term);
+ }
+ }, [wordList]);
+
+ // Term Test Logic ─────────────────────────────────────────────────────────────
+ function checkEntry() {
+ if (wordEntry.toLowerCase() === word.slice(1).toLowerCase()) {
+ toast.success("Correct!");
+ nextWord();
+ inputRef.current.focus();
+ } else {
+ toast.error("Wrong word! Try again.");
+ }
+ }
+
+ function updateEntry(e) {
+ setWordEntry(e.target.value);
+ }
+
+ const handleKeyDown = (event) => {
+ if (event.key === "Enter") {
+ checkEntry()
+ }
+ };
+
+ const onToggleRepeat = () => {
+ setRepeat(r => !r);
+ };
+
+ function nextWord() {
+ if (sceneMode === DisplayScene.NORMAL) {
+ const newIndex = wordIndex < wordList.length ? wordIndex + 1 : 0;
+ setWordIndex(newIndex);
+ setWord(" " + wordList[newIndex].term);
+ setWordEntry("");
+ setIsActive(true);
+ }
+ }
+
+ function onWordSize() {
+ // For sample words - what length do we want? Small, medium or large
+ let newLengthSetting = 0;
+ if (sampleWordLengthSetting < 2) {
+ newLengthSetting = sampleWordLengthSetting + 1;
+ }
+ setSampleWordLengthSetting(newLengthSetting);
+ switch(newLengthSetting) {
+ case 1:
+ setSampleWordLength(getMediumWordLength());
+ break;
+ case 2:
+ setSampleWordLength(getLargeWordLength());
+ break;
+ default:
+ setSampleWordLength(getSmallWordLength());
+ }
+ loadWords();
+ }
+
+ function playbackLabel() {
+ const returnValue = {
+ text: "",
+ tip: "",
+ icon: ""
+ };
+ switch (playbackRate) {
+ case 1:
+ returnValue.tip = "Normal - 1×";
+ returnValue.text = "1×";
+ returnValue.icon = "🚶🏻♀️➡️️";
+ break;
+ case 0:
+ returnValue.tip = "Slow - ½×";
+ returnValue.text = "½×";
+ returnValue.icon = "🐢️";
+ break;
+ default:
+ returnValue.tip = "Fast - 2×";
+ returnValue.text = "2×";
+ returnValue.icon = "🏃➡️";
+ break;
+ }
+ return returnValue;
+ }
+
+
+ return (
+
+
+
+
+
Fingerspell
+
+ Learn how to fingerspell
+
+
+
+
+
+
+ {word[step]}
+
+ {showHint &&
+ {word[step]}
+ }
+
+
+
+
+
+
+
+
+
+
+
+ "}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {showWord && word}
+
+
+
+
+
+ {/*{wordList.map((word, index) => (*/}
+ {/* - {word.term}
*/}
+ {/*))}*/}
+
+
+
+
+ );
+};
diff --git a/src/components/NumbersComponent.jsx b/src/components/NumbersComponent.jsx
new file mode 100644
index 0000000..b582955
--- /dev/null
+++ b/src/components/NumbersComponent.jsx
@@ -0,0 +1,305 @@
+import {useEffect, useRef, useState} from "react";
+import toast from "react-hot-toast";
+import Tippy from "@tippyjs/react";
+import {FlashcardPlayer} from "./FlashcardPlayer.jsx";
+import {
+ NumbersComponentContainer,
+ NumbersComponentHeader,
+ NumbersComponentBody,
+ NumbersComponentNav,
+ NumbersComponentTermsList,
+ NumbersComponentHint,
+ ButtonNav,
+ NumbersComponentCheck,
+} from "./NumbersComponent.styles.js";
+
+import number_terms from "../data/numbers.json" with {type: "json"};
+
+export default function NumbersSession({onBack}) {
+ const [isActive, setIsActive] = useState(false);
+ const [word, setWord] = useState("");
+
+ // wordList acts as a playlist - a series of tracks to be played sequentially.
+ const [wordList, setWordList] = useState([]);
+ // Word list index
+ const [wordIndex, setWordIndex] = useState(0);
+ const [playbackUrl, setPlaybackUrl] = useState("");
+ const selectRef = useRef(null);
+
+ // Configuration
+ const [showHint, setShowHint] = useState(true);
+ const [showWord, setShowWord] = useState(true);
+
+ // Test entry
+ const [wordEntry, setWordEntry] = useState("");
+ const inputRef = useRef();
+
+ // Playback rate - slow, normal, fast
+ const [autoPlay, setAutoPlay] = useState(false);
+ const [showPlayerControls, setShowPlayerControls] = useState(false);
+ const [playing, setPlaying] = useState(false);
+ const [playbackRate, setPlaybackRate] = useState(1);
+ const [repeat, setRepeat] = useState(false);
+
+ function setupCountFromZero() {
+ const terms = number_terms.map((term, i) => {
+ return {...term, ndx: i}
+ })
+ console.log(terms);
+ setWordList(terms);
+ setWordIndex(0);
+ setRepeat(false);
+ setPlaybackUrl(number_terms[0].code);
+ setWord(number_terms[0].term);
+ setAutoPlay(true);
+ }
+
+
+ // Term Test Logic ─────────────────────────────────────────────────────────────
+ function checkEntry() {
+ if (wordEntry === word) {
+ toast.success("Correct!");
+ nextWord();
+ inputRef.current.focus();
+ } else {
+ console.log(wordEntry, word);
+ toast.error("Wrong word! Try again.");
+ }
+ }
+
+ function updateEntry(e) {
+ setWordEntry(e.target.value);
+ }
+
+ const handleKeyDown = (event) => {
+ if (event.key === "Enter") {
+ checkEntry()
+ }
+ };
+
+ const onToggleRepeat = () => {
+ setRepeat(r => !r);
+ };
+
+ function onSelectTerm(e) {
+ console.log(e.target.value);
+ const newTermIndex = Number(e.target.value);
+ setPlaying(false);
+ setAutoPlay(false);
+ setIsActive(false);
+ setWord(wordList[newTermIndex].term)
+ setWordIndex(newTermIndex);
+ }
+
+ function getRandomInt(min, max) {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+ function nextWord() {
+ const randNumber = getRandomInt(34, 100000);
+ // {"term": "1", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%201-roPWtHm3Udw.mp4"},
+ // build playlist
+ const numberString = randNumber.toString();
+ const newWordList = []
+ for (let i = 0; i < numberString.length; i++) {
+ const term = number_terms.find((t) => t.term === numberString[i]);
+ console.log(term);
+ newWordList.push(term);
+ }
+ setWordList(newWordList);
+ const firstWord = newWordList[0]
+ setPlaybackUrl(firstWord.code);
+ setWord(firstWord.term);
+ setWordIndex(0);
+ setIsActive(true);
+ setAutoPlay(true);
+ setPlaying(true);
+ }
+
+ function getPlaybackUrl() {
+ console.log("Get url");
+ if (wordList.length > 0 && wordIndex > -1) {
+ const current = wordList[wordIndex];
+ console.log(current.code);
+ return current.code;
+ }
+ }
+
+ function onPlay() {
+ console.log("onPlay: ", isActive);
+ console.log("--wl: ", wordList.length);
+ console.log("--curr: ", wordIndex);
+ console.log("--word: ", word);
+ if (isActive) {
+ setIsActive(false);
+ setPlaying(false);
+ setAutoPlay(false);
+ } else {
+ setIsActive(true);
+ // setWordIndex(0);
+ // setAutoPlay(true);
+ setPlaying(true);
+ }
+ }
+
+ function playbackLabel() {
+ const returnValue = {
+ text: "",
+ tip: "",
+ icon: ""
+ };
+ switch (playbackRate) {
+ case 0.5:
+ returnValue.tip = "Slow - ½×";
+ returnValue.text = "½×";
+ returnValue.icon = "🐢️";
+ break;
+ default:
+ returnValue.tip = "Normal - 1×";
+ returnValue.text = "1×";
+ returnValue.icon = "🚶🏻♀️➡️️";
+ }
+ return returnValue;
+ }
+
+ function playbackError(error) {
+ console.error(error);
+ console.log("Playback error", error.nativeEvent.target.error);
+ console.log("Source: ", error.nativeEvent.target.src)
+ toast.error("Playback error");
+ }
+
+ const PLAYBACK_STATE_START = 1
+ const PLAYBACK_STATE_END = 2
+ const PLAYBACK_STATE_PAUSE = 3
+
+ function playingStateChanged(stateChange) {
+ switch(stateChange) {
+ case PLAYBACK_STATE_START:
+ console.log("Playback start");
+ // setPlaying(true);
+ break;
+ case PLAYBACK_STATE_END:
+ console.log("Playback end: ", repeat);
+
+ if (wordIndex + 1 < wordList.length) {
+ setWordIndex(wordIndex + 1);
+ setWord(wordList[wordIndex+1].term);
+ } else {
+ // stop playback
+ setPlaying(false);
+ setIsActive(false);
+ }
+ break;
+ case PLAYBACK_STATE_PAUSE:
+ console.log("Playback paused");
+ // setPlaying(false);
+ break;
+ default:
+ console.error("Unknown Playback state change: ", stateChange);
+ }
+ }
+
+ useEffect(() => {
+ setPlaybackUrl(getPlaybackUrl());
+ }, [playbackUrl, wordIndex]);
+
+
+ return (
+
+
+
+
+
NumbersComponent
+ Key Tips for 1-100 ASL Numbers
+
+ - 1-5: Palm faces in towards the signer.
+ - 6-9: Palm faces out.
+ - 11-15: Flicking motions.
+ - 20s: Unique handshapes, generally 20-29 start with a "G" or "L" shape base depending on the number.
+ - Multiples (22, 33, etc.): Involve a rocking motion.
+ - 67-99: Use "rocking numbers" technique
+
+
+ playingStateChanged(PLAYBACK_STATE_START)}
+ onPause={() => playingStateChanged(PLAYBACK_STATE_PAUSE)}
+ onEnded={() => playingStateChanged(PLAYBACK_STATE_END)}
+ onError={playbackError}
+ />
+ {showHint &&
+ {word}
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {showWord && word}
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/NumbersComponent.styles.js b/src/components/NumbersComponent.styles.js
new file mode 100644
index 0000000..7c774c5
--- /dev/null
+++ b/src/components/NumbersComponent.styles.js
@@ -0,0 +1,111 @@
+import styled from "styled-components";
+
+export const NumbersComponentContainer = styled.div`
+ width: 100%;
+`;
+
+export const NumbersComponentHeader = styled.div`
+ display: flex;
+ flex-direction: row;
+
+ .btn-back {
+ width: 100px;
+
+ flex-shrink: 0;
+ align-self: flex-start;
+ background: none;
+ border: none;
+ padding: 0;
+ color: var(--text);
+ font-size: 15px;
+ cursor: pointer;
+ transition: color 0.2s;
+ z-index: 100;
+
+ &:hover {
+ color: var(--text-h);
+ }
+ }
+
+ h1 {
+ //border: 1px solid pink;
+ width: 100%;
+ margin-top: 10px;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .text-header {
+ width: 100%;
+ margin-left: -100px;
+ }
+
+ ul {
+ display: flex;
+ list-style: none;
+ gap: 15px;
+ padding: 0;
+ text-align: left;
+ }
+
+ li {
+ border-right: 1px solid grey;
+ font-size: small;
+ line-height: 15px;
+ }
+
+ li:last-child {
+ border-right: none;
+ }
+`;
+
+export const NumbersComponentBody = styled.div`
+ //border: 1px solid blue;
+ display: flex;
+ justify-content: space-between;
+
+ .flashcard-video {
+ max-width: 400px;
+ }
+`;
+
+export const NumbersComponentNav = styled.nav`
+ //border: 1px solid yellow;
+ flex: 1;
+ width: 300px;
+ display: flex;
+ flex-direction: column;
+
+ button {
+ width: 150px;
+ }
+`;
+
+export const NumbersComponentTermsList = styled.div`
+ flex: none;
+ width: 200px;
+ border: 1px solid pink;
+ max-height: 330px;
+ overflow-y: auto;
+
+ ul {
+ list-style: none;
+ text-align: left;
+ }
+`;
+
+export const NumbersComponentHint = styled.p`
+ width: 400px;
+ border: 1px solid orange;
+ height: 2rem;
+`;
+
+export const ButtonNav = styled.div`
+ border: 1px solid green;
+`;
+
+export const NumbersComponentCheck = styled.div`
+ border: 1px solid orange;
+ width: 100%;
+ margin-top: auto;
+`;
\ No newline at end of file
diff --git a/src/components/SentencesSession.jsx b/src/components/SentencesSession.jsx
new file mode 100644
index 0000000..d68c597
--- /dev/null
+++ b/src/components/SentencesSession.jsx
@@ -0,0 +1,371 @@
+import styled from "styled-components";
+import {useEffect, useState} from "react";
+import Tippy from "@tippyjs/react";
+import ReactPlayer from "react-player";
+import toast from "react-hot-toast";
+
+
+// Styling ─────────────────────────────────────────────────────────────
+
+
+const SentencesContainer = styled.div`
+ width: 100%;
+`;
+
+const SentencesHeader = styled.div`
+ display: flex;
+ flex-direction: row;
+
+ .btn-back {
+ width: 100px;
+
+ flex-shrink: 0;
+ align-self: flex-start;
+ background: none;
+ border: none;
+ padding: 0;
+ color: var(--text);
+ font-size: 15px;
+ cursor: pointer;
+ transition: color 0.2s;
+ z-index: 100;
+
+ &:hover {
+ color: var(--text-h);
+ }
+ }
+
+ h1 {
+ //border: 1px solid pink;
+ width: 100%;
+
+ margin-top: 10px;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .text-header {
+ width: 100%;
+ margin-left: -100px;
+ }
+`;
+
+const SentencesTitle = styled.h2`
+ margin-top: -20px;
+`;
+
+const Sentences = styled.div`
+ border: 1px solid blue;
+ display: flex;
+ justify-content: space-between;
+`;
+
+const SentencesNav = styled.nav`
+ //border: 1px solid yellow;
+ flex: 1;
+ width: 300px;
+ display: flex;
+ flex-direction: column;
+
+ button {
+ width: 150px;
+ }
+`;
+
+const SentencesTermsList = styled.div`
+ flex: none;
+ width: 200px;
+ border: 1px solid pink;
+ max-height: 330px;
+ overflow-y: auto;
+
+ ul {
+ list-style: none;
+ text-align: left;
+ }
+`;
+
+/*
+ CSS calc()
+ Spaces around operators: You must include a space on both sides of the subtraction (-) operator. If you write calc(100px-2rem), it will be
+ treated as an invalid expression or a negative number.
+ Mixed Units: calc() is the only native CSS way to do this because rem is relative (based on the root font size, usually 16px)
+ and px is absolute. The browser calculates the final pixel value at runtime
+
+ */
+
+const FingerCharacter = styled.p`
+ flex: 1;
+ width: 300px;
+ height: ${props => props.showHint ? `calc(200px - 2rem)` : "200px"};
+ background-color: beige;
+ font-family: "Gallaudet", cursive;
+ font-size: 20rem;
+ color: black;
+ //margin-top: 40px;
+ align-items: center;
+ padding-top: 130px;
+ border: 1px solid red;
+`;
+
+const PlayerContainer = styled.div`
+ flex: 1;
+ width: 300px;
+ border: 1px solid white;
+`;
+
+const SentencesHint = styled.p`
+ width: 300px;
+ border: 1px solid orange;
+ height: 2rem;
+`;
+
+const ButtonNav = styled.div`
+ border: 1px solid green;
+`;
+
+const SentencesCheck = styled.div`
+ border: 1px solid orange;
+ width: 100%;
+ margin-top: auto;
+`;
+
+export default function SentencesComponent({onBack, terms}) {
+ // terms: list[term: "", codes: []]
+ const [isActive, setIsActive] = useState(false);
+
+ // number of 'words' in current phrase
+ const [stepCount, setStepCount] = useState(0);
+
+ // current 'workd' in current phrase
+ const [step, setStep] = useState(0);
+
+ // terms index
+ const [phraseIndex, setPhraseIndex] = useState(0);
+ const [phrase, setPhrase] = useState({}); // current phrase
+
+ // Configuration
+ const [showHint, setShowHint] = useState(false);
+ const [showWord, setShowWord] = useState(false);
+
+ // Playback rate - slow, normal, fast
+ const [playbackRate, setPlaybackRate] = useState(1.0);
+
+ const [repeat, setRepeat] = useState(false);
+ const [playing, setPlaying] = useState(false);
+ const [url, setUrl] = useState("");
+ const [autoPlay, setAutoPlay] = useState(true);
+ const [showPlayerControls, setShowPlayerControls] = useState(true);
+
+ const PLAYBACK_STATE_START = 1
+ const PLAYBACK_STATE_END = 2
+ const PLAYBACK_STATE_PAUSE = 3
+
+ function playingStateChanged(stateChange) {
+ switch(stateChange) {
+ case PLAYBACK_STATE_START:
+ console.log("Playback start");
+ setPlaying(true);
+ break;
+ case PLAYBACK_STATE_END:
+ console.log("Playback end: ", repeat);
+ if (step < stepCount) {
+ setStep(step+1);
+ setUrl(phrase.codes[step+1])
+ } else {
+ setPlaying(false);
+ }
+ break;
+ case PLAYBACK_STATE_PAUSE:
+ console.log("Playback paused");
+ setPlaying(false);
+ setIsActive(false);
+ break;
+ default:
+ console.error("Unknown Playback state change: ", stateChange);
+ }
+ }
+
+ function setCurrentTerm(index) {
+ setPhraseIndex(index);
+ setPhrase(terms[index]);
+ console.log(terms[index]);
+ setStepCount(terms[index].codes.length);
+ }
+
+ function playbackError(error) {
+ console.error(error);
+ console.log("Playback error", error.nativeEvent.target.error);
+ console.log("Source: ", error.nativeEvent.target.src)
+ toast.error("Playback error");
+ }
+
+ function updatePlaybackSpeed() {
+ switch (playbackRate) {
+ case .5:
+ setPlaybackRate(1.0);
+ break;
+ case 1:
+ setPlaybackRate(2.0);
+ break;
+ default:
+ setPlaybackRate(.5);
+ break;
+ }
+ }
+
+ // Data Effect Logic ─────────────────────────────────────────────────────────────
+
+ // useEffect(() => {
+ // console.log("Phrase: ", phrase);
+ // if (phrase.hasOwnProperty('codes')) {
+ // setStepCount(phrase.codes.length);
+ // setPlaying(true);
+ // setUrl(phrase.codes[0]);
+ // }
+ // }, [phrase]);
+ //
+ // useEffect(() => {
+ // if (terms.length > 0) {
+ // console.log(terms);
+ // setPhraseIndex(0);
+ // setPhrase(terms[0]);
+ // }
+ // }, [terms]);
+
+
+ const onToggleRepeat = () => {
+ setRepeat(r => !r);
+ };
+
+ function nextWord() {
+ console.log("PhraseIndex: ", phraseIndex);
+ const newIndex = phraseIndex + 1 < terms.length ? phraseIndex + 1 : 0;
+ setCurrentTerm(newIndex);
+ // setIsActive(true);
+ }
+
+ function playbackLabel() {
+ const returnValue = {
+ text: "",
+ tip: "",
+ icon: ""
+ };
+ switch (playbackRate) {
+ case 1:
+ returnValue.tip = "Normal - 1×";
+ returnValue.text = "1×";
+ returnValue.icon = "🚶🏻♀️➡️️";
+ break;
+ case 0.5:
+ returnValue.tip = "Slow - ½×";
+ returnValue.text = "½×";
+ returnValue.icon = "🐢️";
+ break;
+ default:
+ returnValue.tip = "Fast - 2×";
+ returnValue.text = "2×";
+ returnValue.icon = "🏃➡️";
+ break;
+ }
+ return returnValue;
+ }
+
+ function onSetActive() {
+ if (!isActive) { // Transition from not active to active
+ setStep(0);
+ setUrl(phrase.codes[0])
+ setPlaying(true);
+ } else {
+ setPlaying(false);
+ }
+ setIsActive(!isActive);
+ }
+
+ useEffect(() => {
+ console.log("Playback start: ", terms);
+ if(terms.length > 0) {
+ console.log(terms.length);
+ setCurrentTerm(0);
+ }
+ }, [terms])
+
+ // Render ─────────────────────────────────────────────────────────────
+
+ return (
+
+
+
+
+
Sentences
+
+
+
+
+ playingStateChanged(PLAYBACK_STATE_START)}
+ onPause={() => playingStateChanged(PLAYBACK_STATE_PAUSE)}
+ onEnded={() => playingStateChanged(PLAYBACK_STATE_END)}
+ onError={playbackError}
+ config={{
+ file: {
+ attributes: {
+ playsInline: true,
+ },
+ },
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+ "}>
+
+
+
+
+
+
+
+
+
+
+ {showWord && phrase.term}
+
+
+
+
+
+ {terms.map((word, index) => (
+ - {word.term}
+ ))}
+
+
+
+
+ );
+};
diff --git a/src/components/TermInput.jsx b/src/components/TermInput.jsx
index cf32900..e544249 100644
--- a/src/components/TermInput.jsx
+++ b/src/components/TermInput.jsx
@@ -1,26 +1,38 @@
import {useState, useEffect} from "react";
import Tippy from "@tippyjs/react";
import "tippy.js/dist/tippy.css";
+import axios from "axios";
+import toast from "react-hot-toast";
+// Import all term files
import terms from "../data/terms.json" with {type: "json"};
import other_terms from "../data/terms2.json" with {type: "json"};
import questions from "../data/questions.json" with {type: "json"};
import verbs from "../data/verbs.json" with {type: "json"};
-import date_time_terms from "../data/calendar-terms.json";
-import color_terms from "../data/colors.json";
-import faire_terms from "../data/faire.json";
+import date_time_terms from "../data/calendar-terms.json" with {type: "json"};
+import color_terms from "../data/colors.json" with {type: "json"};
+import faire_terms from "../data/faire.json" with {type: "json"};
+import countries from "../data/countries.json" with {type: "json"};
+import food_signs from "../data/food.json" with {type: "json"};
import asl_2_1_terms from "../data/asl_2_1_terms.json" with {type: "json"};
import asl_2_2_terms from "../data/asl_2_2_terms.json" with {type: "json"};
+import asl_2_3_terms from "../data/asl_2_3_terms.json" with {type: "json"};
+// import asl_2_4_terms from "../data/asl_2_4_terms.json" with {type: "json"};
+// import asl_2_5_terms from "../data/asl_2_5_terms.json" with {type: "json"};
+// import asl_2_6_terms from "../data/asl_2_6_terms.json" with {type: "json"};
-// import sentences from "../data/sentences1.json" with {type: "json"};
+import sentences from "../data/sentences-multi.json" with {type: "json"};
-import axios from "axios";
-import toast from "react-hot-toast";
+// Config content based on environment variables
const debugLayouts = import.meta.env.VITE_DEBUGGING === 1;
+console.log("debugLayouts", debugLayouts);
+const showFingerspell = import.meta.env.VITE_SHOW_FINGERSPELL === "true";
+console.log("showFingerspell", showFingerspell);
+const showNumbers = import.meta.env.VITE_SHOW_NUMBERS === "true";
+console.log("showNumbers", showNumbers);
-const DEVELOPMENT = false;
-
+// Setup our display categories
const CATEGORIES = [
{icon: "📚", title: "ASL Level I & II Class Terms - Comprehensive", description: "Core vocabulary from ASL Level I and II coursework.", terms: terms},
{icon: "❓", title: "Questions", description: "Essential question words and phrases used in ASL conversation.", terms: questions},
@@ -29,22 +41,27 @@ const CATEGORIES = [
{icon: "⚔️", title: "Renaissance Faire Terms", description: "Specialized vocabulary for Renaissance Faire settings.", terms: faire_terms},
{icon: "📆", title: "Calendar / Date & Time", description: "Months, Days, Time, etc.", terms: date_time_terms},
{icon: "🎨", title: "Colors", description: "Various Colors", terms: color_terms},
+ {icon: "🍔", title: "Food", description: "Country Names", terms: food_signs},
{icon: "1️⃣", title: "ASL 2 - Week 1", description: "Terms learned in week 1 of ASL 2 course.", terms: asl_2_1_terms},
{icon: "2️⃣", title: "ASL 2 - Week 2", description: "Terms learned in week 2 of ASL 2 course.", terms: asl_2_2_terms},
- // {icon: "📝", title: "Sentences", description: "Phrases", terms:sentences}
- // {icon: "3️⃣", title: "ASL 2 - Week 1", description: "Terms learned in week 1 of ASL 2 course.", terms: terms},
- // {icon: "4️⃣", title: "ASL 2 - Week 1", description: "Terms learned in week 1 of ASL 2 course.", terms: terms},
- // {icon: "5️⃣", title: "ASL 2 - Week 1", description: "Terms learned in week 1 of ASL 2 course.", terms: terms},
- // {icon: "6️⃣", title: "ASL 2 - Week 1", description: "Terms learned in week 1 of ASL 2 course.", terms: terms},
+ {icon: "3️⃣", title: "ASL 2 - Week 3", description: "Terms learned in week 3 of ASL 2 course.", terms: asl_2_3_terms},
+ {icon: "📝", title: "Sentences", description: "Phrases", terms: sentences},
+ {icon: "🌎", title: "Countries", description: "Country Names", terms: countries},
+ // {icon: "4️⃣", title: "ASL 2 - Week 4", description: "Terms learned in week 4 of ASL 2 course.", terms: asl_2_4_terms},
+ // {icon: "5️⃣", title: "ASL 2 - Week 5", description: "Terms learned in week 5 of ASL 2 course.", terms: asl_2_5_terms},
+ // {icon: "6️⃣", title: "ASL 2 - Week 6", description: "Terms learned in week 6 of ASL 2 course.", terms: asl_2_6_terms},
];
-if (DEVELOPMENT) {
+if(showFingerspell) {
CATEGORIES.splice(0, 0, {
icon: "🖐️",
title: "Finger Spelling",
description: "Practice spelling words letter by letter using ASL handshapes.",
terms: terms
});
+}
+
+if (showNumbers) {
CATEGORIES.splice(0, 0, {
icon: "🔢",
title: "Numbers",
@@ -57,68 +74,53 @@ const webResources = [
{url: "https://www.signasl.org/", description: "Sign ASL - American Sign Language Dictionary", type: ""},
{url: "https://www.handspeak.com/", description: "Hand Speak", type: ""},
{url: "https://www.lifeprint.com/", description: "ASL University", type: ""},
+ {url: "https://www.signschool.com/", description: "Sign School", type: ""},
{url: "https://www.startasl.com/asl-dictionary/", description: "Free dictionary on Paid site with Phrases.", type: ""},
{url: "https://asl.ms/", description: "ASL Finger Spell Comprehension Test", type: ""},
- {url: "https://www.signingsavvy.com/", description: "Sign Savvy", type: ""},
+ {url: "https://www.signingsavvy.com/tools", description: "Sign Savvy", type: ""},
{url: "https://en.wikipedia.org/wiki/American_Sign_Language", description: "Wikipedia", type: ""},
];
function useWindowDimensions() {
- const [dimensions, setDimensions] = useState({
- width: window.innerWidth,
- height: window.innerHeight,
- });
-
- useEffect(() => {
- const handleResize = () => setDimensions({
- width: window.innerWidth,
- height: window.innerHeight,
+ const [dimensions, setDimensions] = useState({
+ width: window.innerWidth,
+ height: window.innerHeight,
});
- window.addEventListener('resize', handleResize);
- return () => window.removeEventListener('resize', handleResize);
- }, []);
- return dimensions;
+ useEffect(() => {
+ const handleResize = () => setDimensions({
+ width: window.innerWidth,
+ height: window.innerHeight,
+ });
+ window.addEventListener("resize", handleResize);
+ return () => window.removeEventListener("resize", handleResize);
+ }, []);
+
+ return dimensions;
}
export function TermInput({onStart}) {
const [error, setError] = useState("");
- const [wordlist, setWordlist] = useState([]);
const [numberList, setNumberList] = useState([]);
const { height, width } = useWindowDimensions();
useEffect(() => {
- if (DEVELOPMENT) {
- // load random words
- const randomWordsUrl = "https://random-word-api.herokuapp.com/word?number=45";
- axios.get(randomWordsUrl).then((response) => {
- const wordData = [];
- response.data.forEach(element => {
- const entry = {
- "term": element,
- "code": "",
- "type": "spell"
- };
- wordData.push(entry);
- });
- setWordlist(wordData);
- });
-
- const randomNumbersUrl = "https://api.codetabs.com/v1/random/integer?min=1&max=9999×=45";
- axios.get(randomNumbersUrl).then((response) => {
- const numberData = [];
- response.data.data.forEach(element => {
- const entry = {
- "term": element.toString(),
- "code": ""
- };
- numberData.push(entry);
- });
- setNumberList(numberData);
- });
- }
+ // if (showNumbers) {
+ // const randomNumbersUrl = "https://api.codetabs.com/v1/random/integer?min=1&max=9999×=45";
+ // axios.get(randomNumbersUrl).then((response) => {
+ // const numberData = [];
+ // response.data.data.forEach(element => {
+ // const entry = {
+ // "term": element.toString(),
+ // "code": ""
+ // };
+ // numberData.push(entry);
+ // });
+ // setNumberList(numberData);
+ // });
+ // }
const displayString = `${width} x ${height}`;
console.log(displayString);
debugLayouts && toast(displayString, {
@@ -130,19 +132,13 @@ export function TermInput({onStart}) {
}, [height, width]);
useEffect(() => {
- if (DEVELOPMENT) {
+ if(showNumbers) {
CATEGORIES.find((category) => category.title === "Numbers").terms = numberList;
- CATEGORIES.find((category) => category.title === "Finger Spelling").terms = wordlist;
}
- }, [wordlist, numberList]);
+ }, [numberList]);
function handleStart(category) {
const terms = category.terms;
- if (terms.length === 0) {
- setError("Please enter at least one term before starting.");
- return;
- }
- setError("");
onStart(terms, category.title, category.description);
}
return (
diff --git a/src/data/asl_2_3_terms.json b/src/data/asl_2_3_terms.json
new file mode 100644
index 0000000..e87cb31
--- /dev/null
+++ b/src/data/asl_2_3_terms.json
@@ -0,0 +1,26 @@
+[
+ {"term": "Really? (are you sure?)", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/xBiqpivwL3g.mp4"},
+ {"term": "Confused", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/VJvLrvWCgHU.mp4"},
+ {"term": "Doubt", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/rJL_9qyE6xw.mp4"},
+ {"term": "Fake", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/ogNUNChfJE4.mp4"},
+ {"term": "False / Not True", "code": "https://media.signbsl.com/videos/asl/mariekatzenbachschool/mp4/false.mp4"},
+ {"term": "True", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/wBZSWnlg3-g.mp4"},
+ {"term": "Lie", "code": "https://media.signbsl.com/videos/asl/aslsearch/mp4/lie2.mp4"},
+ {"term": "Trouble", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/aTDC1kgRTGw.mp4"},
+ {"term": "Get out of Trouble", "code": "", "fix": true},
+ {"term": "Distracting", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/4zOdie2Uh-0.mp4"},
+ {"term": "Restless", "code": "https://player.vimeo.com/external/392125717.sd.mp4?s=8e01570e977cb00008d9352b30967df0b44bc98f&profile_id=164"},
+ {"term": "Become", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/4TPPOZK2IHU.mp4"},
+ {"term": "Hamburger", "code": "https://media.signbsl.com/videos/asl/aslsignbank/mp4/HAMBURGER-1844.mp4"},
+ {"term": "Home", "code": "https://media.signbsl.com/videos/asl/startasl/mp4/home.mp4"},
+ {"term": "Day", "code": "https://media.signbsl.com/videos/asl/aslsignbank/mp4/DAY-102.mp4"},
+ {"term": "Now + Day == Today", "code": "https://media.signbsl.com/videos/asl/tsdvideo/mp4/429.mp4"},
+ {"term": "Today (shorter)", "code": "https://media.signbsl.com/videos/asl/startasl/mp4/today.mp4"},
+ {"term": "Now", "code": "https://media.signbsl.com/videos/asl/aslsearch/mp4/now.mp4"},
+ {"term": "My Fault", "code": "https://player.vimeo.com/external/392125010.sd.mp4?s=91aa0687b4f1075418fcb58b0d21d8d3dfbeeac3&profile_id=164"},
+ {"term": "Your Fault", "code": "https://media.signbsl.com/videos/asl/aslsearch/mp4/your-fault.mp4"},
+ {"term": "Birth", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/433igLZMigk.mp4"},
+ {"term": "Birthday", "code": "https://media.signbsl.com/videos/asl/aslsignbank/mp4/BIRTHDAY-CANDLES-2113.mp4"},
+ {"term": "How Person Question", "code": "https://media.signbsl.com/videos/asl/startasl/mp4/how.mp4"},
+ {"term": "How Thing Question", "code": "https://media.signbsl.com/videos/asl/startasl/mp4/how2.mp4"}
+]
diff --git a/src/data/colors.json b/src/data/colors.json
index 95f6623..25c3c4e 100644
--- a/src/data/colors.json
+++ b/src/data/colors.json
@@ -11,7 +11,7 @@
{"term": "Pink", "code": ""},
{"term": "Purple", "code": ""},
{"term": "Red", "code": ""},
- {"term": "Silver", "code":"https://media.signbsl.com/videos/asl/youtube/mp4/9fWuTtBHMGY.mp4"},
+ {"term": "Silver", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/9fWuTtBHMGY.mp4"},
{"term": "Tan", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/LArybO-sRVE.mp4"},
{"term": "Turquoise", "code": "https://player.vimeo.com/external/392536451.sd.mp4?s=f74e8841764e2f1d06a4d314d0c6708fc090f519&profile_id=164"},
{"term": "White", "code": ""},
diff --git a/src/data/countries.json b/src/data/countries.json
new file mode 100644
index 0000000..937a63a
--- /dev/null
+++ b/src/data/countries.json
@@ -0,0 +1,20 @@
+[
+ {"term": "Country", "code": "https://www.youtube.com/watch?v=4iJ1t0DklFY"},
+ {"term": "Africa", "code": "https://www.youtube.com/watch?v=ZyH7kuEa18Q"},
+ {"term": "Australia", "code": "https://www.youtube.com/watch?v=Qkec7A7_o8c"},
+ {"term": "Canada", "code": "https://www.youtube.com/watch?v=6wD5KHuM4xE"},
+ {"term": "China", "code": "https://www.youtube.com/watch?v=yLX_qaQY6B8"},
+ {"term": "England", "code": "https://www.youtube.com/watch?v=_Q0GxbRQnKQ"},
+ {"term": "Europe", "code": "https://www.youtube.com/watch?v=gs57N42wVK0"},
+ {"term": "France", "code": "https://www.youtube.com/watch?v=mhxJADfOYRU"},
+ {"term": "Germany", "code": "https://www.youtube.com/watch?v=pn2NIz6Nw_A"},
+ {"term": "India", "code": "https://www.youtube.com/watch?v=kw4mnCKHY7I"},
+ {"term": "Iran", "code": "https://www.youtube.com/watch?v=lWgoRSVEz9s"},
+ {"term": "Iraq", "code": "https://www.youtube.com/watch?v=9I8NhjSBQuY"},
+ {"term": "Ireland", "code": "https://www.youtube.com/watch?v=D0F6keeYsNg"},
+ {"term": "Mexico", "code": "https://www.youtube.com/watch?v=9hDYv623eyM"},
+ {"term": "Russia", "code": "https://www.youtube.com/watch?v=YSAX7AP-JW4"},
+ {"term": "UK", "code": "https://www.youtube.com/watch?v=Wq7h19-eSV0"},
+ {"term": "USA", "code": "https://www.youtube.com/watch?v=VG1ccC2LJXM"}
+]
+
diff --git a/src/data/faire.json b/src/data/faire.json
index 1f6d6bc..b24ffd2 100644
--- a/src/data/faire.json
+++ b/src/data/faire.json
@@ -1,32 +1,183 @@
[
- {"term": "Bottle", "code": "https://media.signbsl.com/videos/asl/aslsignbank/mp4/BOTTLE-47.mp4"},
- {"term": "Camper", "code": "https://media.signbsl.com/videos/asl/aslsearch/mp4/camper.mp4"},
- {"term": "Camping", "code": "https://media.signbsl.com/videos/asl/mariekatzenbachschool/mp4/camping.mp4"},
- {"term": "Dress", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/4bH5_C1XJTE.mp4"},
- {"term": "Fairy", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/npbm43CeWqM.mp4"},
- {"term": "First Aid", "code": "https://player.vimeo.com/external/392127258.sd.mp4?s=b5f2cc211a4a27935975227c922dc86d614d2b7b&profile_id=164"},
- {"term": "Horse", "code": "https://media.signbsl.com/videos/asl/startasl/mp4/horse.mp4"},
- {"term": "Joust (Clash)", "code": "https://www.lifeprint.com/asl101/videos/clash_flash.mp4"},
- {"term": "King", "code": ""},
- {"term": "Knife", "code": "https://media.signbsl.com/videos/asl/aslsignbank/mp4/KNIFE-167.mp4"},
- {"term": "Knight", "code": "https://www.youtube.com/watch?v=XeQ1TwCKy_U"},
- {"term": "Park", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/OhugS4ENgkg.mp4"},
- {"term": "Parking lot", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/oWm64Do5zW0.mp4"},
- {"term": "Pickle (also Pineapple)", "code": "https://media.signbsl.com/videos/asl/aslsignbank/mp4/PICKLE-2008.mp4"},
- {"term": "Prince", "code": "https://media.signbsl.com/videos/asl/aslsearch/mp4/prince.mp4"},
- {"term": "Princess", "code": "https://media.signbsl.com/videos/asl/aslsearch/mp4/princess.mp4"},
- {"term": "Queen", "code": ""},
- {"term": "Sword", "code": "https://media.signbsl.com/videos/asl/aslsearch/mp4/sword.mp4"},
- {"term": "Welcome", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/tQBaI8oi6tw.mp4"},
- {"term": "Parents", "code": "https://media.signbsl.com/videos/asl/aslsignbank/mp4/PARENTS-696.mp4"},
- {"term": "Do you need help?", "code": "https://www.youtube.com/embed/HDwqcA11tx4?rel=0"},
- {"term": "Do you understand?", "code": "https://www.youtube.com/embed/plJHFy1RcMI?rel=0"},
- {"term": "Do you want to play a game?", "code": "https://www.youtube.com/embed/aRxUSAA_k2w?rel=0"},
- {"term": "How are you?", "code": "https://www.youtube.com/embed/JPtdvzvpWMQ?rel=0"},
- {"term": "How did you get here?", "code": "https://www.youtube.com/embed/8Gl6aTI1zAQ?rel=0"},
- {"term": "How many siblings do you have?", "code": "https://www.youtube.com/embed/gPjmZURJgWg?rel=0"},
- {"term": "How much does it cost?", "code": "https://www.youtube.com/embed/wPwZpfA397c?rel=0"},
- {"term": "How old are you?", "code": "https://www.youtube.com/embed/yQD5HyEyWkI?rel=0"},
- {"term": "What is your phone number", "code": "https://media.signbsl.com/videos/asl/startasl/mp4/what-is-your-phone-number.mp4"}
+ {
+ "term": "Bottle",
+ "code": "https://media.signbsl.com/videos/asl/aslsignbank/mp4/BOTTLE-47.mp4"
+ },
+ {
+ "term": "Camper",
+ "code": "https://media.signbsl.com/videos/asl/aslsearch/mp4/camper.mp4"
+ },
+ {
+ "term": "Camping",
+ "code": "https://media.signbsl.com/videos/asl/mariekatzenbachschool/mp4/camping.mp4"
+ },
+ {
+ "term": "Dress",
+ "code": "https://media.signbsl.com/videos/asl/youtube/mp4/4bH5_C1XJTE.mp4"
+ },
+ {
+ "term": "Fairy",
+ "code": "https://media.signbsl.com/videos/asl/youtube/mp4/npbm43CeWqM.mp4"
+ },
+ {
+ "term": "First Aid",
+ "code": "https://player.vimeo.com/external/392127258.sd.mp4?s=b5f2cc211a4a27935975227c922dc86d614d2b7b&profile_id=164"
+ },
+ {
+ "term": "Horse",
+ "code": "https://media.signbsl.com/videos/asl/startasl/mp4/horse.mp4"
+ },
+ {
+ "term": "Joust (Clash)",
+ "code": "https://www.lifeprint.com/asl101/videos/clash_flash.mp4"
+ },
+ {
+ "term": "King",
+ "code": ""
+ },
+ {
+ "term": "Knife",
+ "code": "https://media.signbsl.com/videos/asl/aslsignbank/mp4/KNIFE-167.mp4"
+ },
+ {
+ "term": "Knight",
+ "code": "https://www.youtube.com/watch?v=XeQ1TwCKy_U"
+ },
+ {
+ "term": "Park",
+ "code": "https://media.signbsl.com/videos/asl/youtube/mp4/OhugS4ENgkg.mp4"
+ },
+ {
+ "term": "Parking lot",
+ "code": "https://media.signbsl.com/videos/asl/youtube/mp4/oWm64Do5zW0.mp4"
+ },
+ {
+ "term": "Pickle (also Pineapple)",
+ "code": "https://media.signbsl.com/videos/asl/aslsignbank/mp4/PICKLE-2008.mp4"
+ },
+ {
+ "term": "Prince",
+ "code": "https://media.signbsl.com/videos/asl/aslsearch/mp4/prince.mp4"
+ },
+ {
+ "term": "Princess",
+ "code": "https://media.signbsl.com/videos/asl/aslsearch/mp4/princess.mp4"
+ },
+ {
+ "term": "Queen",
+ "code": ""
+ },
+ {
+ "term": "Sword",
+ "code": "https://media.signbsl.com/videos/asl/aslsearch/mp4/sword.mp4"
+ },
+ {
+ "term": "Welcome",
+ "code": "https://media.signbsl.com/videos/asl/youtube/mp4/tQBaI8oi6tw.mp4"
+ },
+ {
+ "term": "Parents",
+ "code": "https://media.signbsl.com/videos/asl/aslsignbank/mp4/PARENTS-696.mp4"
+ },
+ {
+ "term": "Do you need help?",
+ "code": "https://www.youtube.com/embed/HDwqcA11tx4?rel=0"
+ },
+ {
+ "term": "Do you understand?",
+ "code": "https://www.youtube.com/embed/plJHFy1RcMI?rel=0"
+ },
+ {
+ "term": "Do you want to play a game?",
+ "code": "https://www.youtube.com/embed/aRxUSAA_k2w?rel=0"
+ },
+ {
+ "term": "How are you?",
+ "code": "https://www.youtube.com/embed/JPtdvzvpWMQ?rel=0"
+ },
+ {
+ "term": "How did you get here?",
+ "code": "https://www.youtube.com/embed/8Gl6aTI1zAQ?rel=0"
+ },
+ {
+ "term": "How many siblings do you have?",
+ "code": "https://www.youtube.com/embed/gPjmZURJgWg?rel=0"
+ },
+ {
+ "term": "How much does it cost?",
+ "code": "https://www.youtube.com/embed/wPwZpfA397c?rel=0"
+ },
+ {
+ "term": "How old are you?",
+ "code": "https://www.youtube.com/embed/yQD5HyEyWkI?rel=0"
+ },
+ {
+ "term": "What is your phone number",
+ "code": "https://media.signbsl.com/videos/asl/startasl/mp4/what-is-your-phone-number.mp4"
+ },
+ {
+ "term": "Beer",
+ "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Beer%20var-wX78EPtSuzU.mp4"
+ },
+ {
+ "term": "Crepe",
+ "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Crepe-bcHahEqTzuA.mp4"
+ },
+ {
+ "term": "Doughnut",
+ "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Doughnut-LJgG-jJAZUg.mp4"
+ },
+ {
+ "term": "Hamburger",
+ "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Hamburger-N6o8WBkjFK4.mp4"
+ },
+ {
+ "term": "Honey",
+ "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Honey%202-BW6iLCTPYx8.mp4"
+ },
+ {
+ "term": "Hot Dog",
+ "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Sausage%2C%20Hot%20Dog-rfFblMZW92c.mp4"
+ },
+ {
+ "term": "Ice Cream",
+ "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Ice%20Cream%202-blIP3pcEkmY.mp4"
+ },
+ {
+ "term": "Mushroom",
+ "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Mushroom%2C%20Championship-FwEsnbhJcdw.mp4"
+ },
+ {
+ "term": "Nut",
+ "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Nut-3EyoOwwqMi4.mp4"
+ },
+ {
+ "term": "Pizza",
+ "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Pizza-mJVC9oI13Lo.mp4"
+ },
+ {
+ "term": "Popcorn",
+ "code": "https://signstock.blob.core.windows.net/signschool/videos/SignSchool%20Popcorn.mp4"
+ },
+ {
+ "term": "Potato",
+ "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Potato-bMnw7FVrglA.mp4"
+ },
+ {
+ "term": "Pretzel",
+ "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Olympics-clU8I371n5Y.mp4"
+ },
+ {
+ "term": "Sandwich",
+ "code": "https://signstock.blob.core.windows.net/signschool/videos/SignSchool%20Sandwich.mp4"
+ },
+ {
+ "term": "Soda",
+ "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Soda-vSOMm-bPMm4.mp4"
+ },
+ {
+ "term": "Wine",
+ "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Wine-uQou6pZTucA.mp4"
+ }
]
diff --git a/src/data/food.json b/src/data/food.json
new file mode 100644
index 0000000..f64313c
--- /dev/null
+++ b/src/data/food.json
@@ -0,0 +1,54 @@
+[
+ {"term": "Bacon", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Bacon-2ricwcKQJ1Y.mp4"},
+ {"term": "Bagel", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Bagel-Tt8Di-ylTIM.mp4"},
+ {"term": "Banana", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Banana%202-7dm2Wk8HYIY.mp4"},
+ {"term": "Beer", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Beer%20var-wX78EPtSuzU.mp4"},
+ {"term": "Cake", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Cake-ld9YQUWWWgw.mp4"},
+ {"term": "Carrot", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Carrot%202-Rg8mCLofZaQ.mp4"},
+ {"term": "Cheese", "code": "https://signstock.blob.core.windows.net/signschool/videos/SignSchool%20Cheese.mp4"},
+ {"term": "Chocolate", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Chocolate-zEiMHvlOtW8.mp4"},
+ {"term": "Coffee", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20coffee-zjqRswd2CkM.mp4"},
+ {"term": "Cookie", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Cookie%202-VDyv32guxac.mp4"},
+ {"term": "Crepe", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Crepe-bcHahEqTzuA.mp4"},
+ {"term": "Doughnut", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Doughnut-LJgG-jJAZUg.mp4"},
+ {"term": "Egg", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Egg-AB_6DLv-5-8.mp4"},
+ {"term": "Fish", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Fish-_GVODUZLS70.mp4"},
+ {"term": "Fruit", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Fruit-UcwPhApYAsY.mp4"},
+ {"term": "Grapes", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Grapes-6byvo_QDEoE.mp4"},
+ {"term": "Gum", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Gum-44XwkLXYj94.mp4"},
+ {"term": "Hamburger", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Hamburger-N6o8WBkjFK4.mp4"},
+ {"term": "Honey", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Honey%202-BW6iLCTPYx8.mp4"},
+ {"term": "Hot Dog", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Sausage%2C%20Hot%20Dog-rfFblMZW92c.mp4"},
+ {"term": "Ice Cream", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Ice%20Cream%202-blIP3pcEkmY.mp4"},
+ {"term": "Juice", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Juice-M16OET0NJEk.mp4"},
+ {"term": "Ketchup", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Ketchup-4Yn7uy7Uo1E.mp4"},
+ {"term": "Lettuce", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Cabbage%2C%20Lettuce%2C%20Garbage%202-mBmLhI--vyg.mp4"},
+ {"term": "Meat", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Content%2C%20Meat-YMsnuzgcmYk.mp4"},
+ {"term": "Milk", "code": "https://signstock.blob.core.windows.net/signschool/videos/SignSchool%20Milk.mp4"},
+ {"term": "Mushroom", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Mushroom%2C%20Championship-FwEsnbhJcdw.mp4"},
+ {"term": "Nut", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Nut-3EyoOwwqMi4.mp4"},
+ {"term": "Onion", "code": "https://signstock.blob.core.windows.net/signschool/videos/SignSchool%20Onion.mp4"},
+ {"term": "Pasta", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Pasta-GO8-46-dlIg.mp4"},
+ {"term": "Peas", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Peas-Esp7Q0dB3RI.mp4"},
+ {"term": "Pie", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Pie-qYyoVxL86o4.mp4"},
+ {"term": "Pineapple", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Pineapple%202-OMk3URQEERw.mp4"},
+ {"term": "Pizza", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Pizza-mJVC9oI13Lo.mp4"},
+ {"term": "Popcorn", "code": "https://signstock.blob.core.windows.net/signschool/videos/SignSchool%20Popcorn.mp4"},
+ {"term": "Popsicle", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Popsicle-g_h0lAoKBs8.mp4"},
+ {"term": "Potato", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Potato-bMnw7FVrglA.mp4"},
+ {"term": "Pretzel", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Olympics-clU8I371n5Y.mp4"},
+ {"term": "Rice", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Rice-zGSkINONDik.mp4"},
+ {"term": "Salad", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Salad-ETh-CCE1ye4.mp4"},
+ {"term": "Sandwich", "code": "https://signstock.blob.core.windows.net/signschool/videos/SignSchool%20Sandwich.mp4"},
+ {"term": "Sauce", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Sauce-Jn74uLB0_v0.mp4"},
+ {"term": "Shrimp", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Shrimp%202-1EgWn1Qa1JQ.mp4"},
+ {"term": "Soda", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Soda-vSOMm-bPMm4.mp4"},
+ {"term": "Soup", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Soup%2C%20Spoon-vAx8Y7ThSvM.mp4"},
+ {"term": "Strawberry", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Strawberry-h56ZEHdCSqU.mp4"},
+ {"term": "Tacos", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Taco-J9cbODQLzUM.mp4"},
+ {"term": "Tea", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Tea-KteSJtbKjwA.mp4"},
+ {"term": "Tomato", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Tomato-HC0J3JaPVqU.mp4"},
+ {"term": "Tortilla", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Tortilla-MxYWALTT75M.mp4"},
+ {"term": "Vegetable", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Vegetable-H4WFMRW0-Mc.mp4"},
+ {"term": "Wine", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Wine-uQou6pZTucA.mp4"}
+]
\ No newline at end of file
diff --git a/src/data/numbers.json b/src/data/numbers.json
new file mode 100644
index 0000000..aa1f78b
--- /dev/null
+++ b/src/data/numbers.json
@@ -0,0 +1,104 @@
+[
+ {"term": "number", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Number-ocqPQu_xQKY.mp4"},
+ {"term": "hundred", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/97FQFyNLDbg.mp4"},
+ {"term": "thousand", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/pnHCIwO5EQo.mp4"},
+ {"term": "million", "code": "https://media.signbsl.com/videos/asl/aslsearch/mp4/million.mp4"},
+ {"term": "1", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%201-roPWtHm3Udw.mp4"},
+ {"term": "2", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%202-134Blu6daD8.mp4"},
+ {"term": "3", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%203-ob_nKsit-Lw.mp4"},
+ {"term": "4", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%204-jA2eoxloaHc.mp4"},
+ {"term": "5", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%205-hcCQFYPXUHk.mp4"},
+ {"term": "6", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%206-zR2SZtM-DsM.mp4"},
+ {"term": "7", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%207-JOcIe5ikrP8.mp4"},
+ {"term": "8", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%208-CARjA59J2iE.mp4"},
+ {"term": "9", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%209-2guCgS9_uhg.mp4"},
+ {"term": "10", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2010-6ojLD8vgvg8.mp4"},
+ {"term": "11", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2011-41gWNdewpjM.mp4"},
+ {"term": "12", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2012-WQzWdM4VITc.mp4"},
+ {"term": "13", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2013-abeII7kaDyg.mp4"},
+ {"term": "14", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2014-zUvqxUuJ8Oc.mp4"},
+ {"term": "15", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2015-UbMTvct_PMk.mp4"},
+ {"term": "16", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2016-nCj3u_CzXEo.mp4"},
+ {"term": "17", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2017-pjoUbNTwS74.mp4"},
+ {"term": "18", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2018-DhSdUZQnsTk.mp4"},
+ {"term": "19", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2019-wO_y6Ioe15E.mp4"},
+ {"term": "20", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2020-DWvukTjn7p0.mp4"},
+ {"term": "21", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2021-unErbMtXUcA.mp4"},
+ {"term": "22", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2022-lX2vPDN4Lk0.mp4"},
+ {"term": "23", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2023-eYGdpPAJdgM.mp4"},
+ {"term": "24", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2024-MhFIAEHpTfA.mp4"},
+ {"term": "25", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2025-IUOLwKSy__8.mp4"},
+ {"term": "26", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2026-PYeFvzRhVV4.mp4"},
+ {"term": "27", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2027-HYYC-8j5cYc.mp4"},
+ {"term": "28", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2028-K1UB7oGMQwA.mp4"},
+ {"term": "29", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2029-p0v9UU-ekqU.mp4"},
+ {"term": "30", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2030-WmvjI4G24fY.mp4"},
+ {"term": "31", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2031-1pcZwe7aZeU.mp4"},
+ {"term": "32", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2032-9j4OhKx4aZ4.mp4"},
+ {"term": "33", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2033-BIJteAAY9-c.mp4"},
+ {"term": "34", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2034-EPVYrzYShmg.mp4"},
+ {"term": "35", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2035-K60uTzwKdzM.mp4"},
+ {"term": "36", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2036-xwhn6s_l1n4.mp4"},
+ {"term": "37", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2037-Bm5Q3T1b6nc.mp4"},
+ {"term": "38", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2038-EjN-kJE2LUg.mp4"},
+ {"term": "39", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2039-PsdV592090o.mp4"},
+ {"term": "40", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2040-sG-R3kE8BRY.mp4"},
+ {"term": "41", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2041-aSaIKpfZ_Y0.mp4"},
+ {"term": "42", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2042-HUeE4ilVdOw.mp4"},
+ {"term": "43", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2043-SQlGjaHP_MQ.mp4"},
+ {"term": "44", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2044-n_ZtlH77pHo.mp4"},
+ {"term": "45", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2045-9PnauFZ3qac.mp4"},
+ {"term": "46", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2046-OHfQrWuXZwk.mp4"},
+ {"term": "47", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2047-95RTpjw4PRw.mp4"},
+ {"term": "48", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2048-utIcI_pJm3g.mp4"},
+ {"term": "49", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2049-mK-efk5y0Ss.mp4"},
+ {"term": "50", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2050-qaOx5-whHHI.mp4"},
+ {"term": "51", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2051-WQmCq5K9gd8.mp4"},
+ {"term": "52", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2052-JEwBR50WL9k.mp4"},
+ {"term": "53", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2053-e8b4FF9PYjw.mp4"},
+ {"term": "54", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2054-vnWx1E6Y_is.mp4"},
+ {"term": "55", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2055-O-KqHbd3PTQ.mp4"},
+ {"term": "56", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2056-TTMg6QWZpaY.mp4"},
+ {"term": "57", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2057-XLwcvPnS1oA.mp4"},
+ {"term": "58", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2058-ZIPSZGSaNEo.mp4"},
+ {"term": "59", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2059-TaKU_egeFeA.mp4"},
+ {"term": "60", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2060-KjFlAszWPc0.mp4"},
+ {"term": "61", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2061-RtMi4c1mx_Q.mp4"},
+ {"term": "62", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2062-yUV0iudUHq4.mp4"},
+ {"term": "63", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2063-dCingQWzYcs.mp4"},
+ {"term": "64", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2064-x-KL87G2spg.mp4"},
+ {"term": "65", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2065-5uNQfRLOwbM.mp4"},
+ {"term": "66", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2066-D4NAMOEnFC0.mp4"},
+ {"term": "67", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2067-XbaM5Kq3uf0.mp4"},
+ {"term": "68", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2068-DUjyJXCx-xg.mp4"},
+ {"term": "69", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2069-FEVjdBOk8i4.mp4"},
+ {"term": "70", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2070%202x-u10QZUAoax8.mp4"},
+ {"term": "71", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2071-svHAVAaoE7M.mp4"},
+ {"term": "72", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2072-yCfSfn0ZjZ4.mp4"},
+ {"term": "73", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2073-6O8hEl5hWy0.mp4"},
+ {"term": "74", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2074-C09kfVnRWW0.mp4"},
+ {"term": "75", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2075-WyYz0Y6veHw.mp4"},
+ {"term": "76", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2076-3OI6vBkITtI.mp4"},
+ {"term": "77", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2077-x4fUBWBioq4.mp4"},
+ {"term": "78", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2078-xnNcQvi-YSg.mp4"},
+ {"term": "79", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2079-DrO0ZQsZR9k.mp4"},
+ {"term": "80", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2080-0PMuoKkULb0.mp4"},
+ {"term": "81", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2081-WFp2UgFzufM.mp4"},
+ {"term": "82", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2082-8akdToXWKd8.mp4"},
+ {"term": "83", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2083-0D7Gs8CBiRM.mp4"},
+ {"term": "84", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2084-l3e7YIH7-Ak.mp4"},
+ {"term": "85", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2085-nT5DlZiqLgI.mp4"},
+ {"term": "86", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2086-ki2PNlTw90Y.mp4"},
+ {"term": "87", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2087-u_R6NlFYaJU.mp4"},
+ {"term": "88", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2088-iE0HsHrwqLM.mp4"},
+ {"term": "89", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2089-XMELvcw6_xo.mp4"},
+ {"term": "90", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2090-QGgoTx4nOw0.mp4"},
+ {"term": "91", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2091-C7Dzs6lroJI.mp4"},
+ {"term": "92", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2092-YawPrph_5Bg.mp4"},
+ {"term": "93", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2093-1_P-kSc-VxA.mp4"},
+ {"term": "94", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2094-Ezmr2U8m_aE.mp4"},
+ {"term": "95", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2095-nldlrvWe60U.mp4"},
+ {"term": "96", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2096-DNrk3On24_4.mp4"},
+ {"term": "97", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2097-wL7ISqGxWgk.mp4"},
+ {"term": "98", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%2098-tYky-gyn2EE.mp4"}
+]
\ No newline at end of file
diff --git a/src/data/plans.md b/src/data/plans.md
new file mode 100644
index 0000000..79a30d0
--- /dev/null
+++ b/src/data/plans.md
@@ -0,0 +1,22 @@
+# Week 3 - Sentences
+
+
+Where do you live?
+
+What time do you work?
+
+Can you help me with my signing?
+
+I really enjoy mexican food.
+
+
+What kind of car do you drive?
+- I drive a silver truck
+
+My wife says to tell you hello
+
+https://media.signbsl.com/videos/asl/youtube/mp4/3msfJ_fibwg.mp4
+https://media.signbsl.com/videos/asl/aslsignbank/mp4/WIFE-2237.mp4
+https://media.signbsl.com/videos/asl/youtube/mp4/BJ_V7T3naFY.mp4
+https://media.signbsl.com/videos/asl/startasl/mp4/you.mp4
+https://media.signbsl.com/videos/asl/startasl/mp4/hello.mp4
\ No newline at end of file
diff --git a/src/data/sentences-multi.json b/src/data/sentences-multi.json
new file mode 100644
index 0000000..6a174c0
--- /dev/null
+++ b/src/data/sentences-multi.json
@@ -0,0 +1,71 @@
+[
+ {"term": "My wife says to tell you hello", "codes": [
+ "https://media.signbsl.com/videos/asl/youtube/mp4/3msfJ_fibwg.mp4",
+ "https://media.signbsl.com/videos/asl/aslsignbank/mp4/WIFE-2237.mp4",
+ "https://media.signbsl.com/videos/asl/youtube/mp4/BJ_V7T3naFY.mp4",
+ "https://media.signbsl.com/videos/asl/startasl/mp4/you.mp4",
+ "https://media.signbsl.com/videos/asl/startasl/mp4/hello.mp4"]},
+ {"term": "What kind of car do you drive?", "codes": [
+ "https://media.signbsl.com/videos/asl/startasl/mp4/what.mp4",
+ "https://media.signbsl.com/videos/asl/aslsignbank/mp4/TYPE-164.mp4",
+ "https://media.signbsl.com/videos/asl/startasl/mp4/car.mp4",
+ "https://media.signbsl.com/videos/asl/startasl/mp4/you.mp4",
+ "https://media.signbsl.com/videos/asl/aslsearch/mp4/drive.mp4"
+ ]},
+ {"term": "I really like Mexican food", "codes": [
+ "https://media.signbsl.com/videos/asl/youtube/mp4/qIaZAO2YlYk.mp4",
+ "https://media.signbsl.com/videos/asl/aslbricks/mp4/really.mp4",
+ "https://media.signbsl.com/videos/asl/startasl/mp4/like.mp4",
+ "https://media.signbsl.com/videos/asl/startasl/mp4/mexican.mp4",
+ "https://media.signbsl.com/videos/asl/startasl/mp4/food.mp4"
+ ]},
+ {"term": "Can you help me with my signing?", "codes": [
+ "https://media.signbsl.com/videos/asl/mariekatzenbachschool/mp4/can%202.mp4",
+ "https://media.signbsl.com/videos/asl/startasl/mp4/you.mp4",
+ "https://media.signbsl.com/videos/asl/startasl/mp4/help.mp4",
+ "https://media.signbsl.com/videos/asl/startasl/mp4/with.mp4",
+ "https://media.signbsl.com/videos/asl/youtube/mp4/3msfJ_fibwg.mp4",
+ "https://media.signbsl.com/videos/asl/youtube/mp4/6cCmHoxAGtc.mp4"
+ ]},
+ {"term": "What time do you work?", "codes": [
+ "https://media.signbsl.com/videos/asl/startasl/mp4/what.mp4",
+ "https://media.signbsl.com/videos/asl/aslbricks/mp4/time.mp4",
+ "https://media.signbsl.com/videos/asl/startasl/mp4/you.mp4",
+ "https://media.signbsl.com/videos/asl/startasl/mp4/work.mp4"
+ ]},
+ {"term": "Where do you live?", "codes": [
+ "https://media.signbsl.com/videos/asl/startasl/mp4/where.mp4",
+ "https://media.signbsl.com/videos/asl/startasl/mp4/you.mp4",
+ "https://media.signbsl.com/videos/asl/youtube/mp4/wcA5c3BrHQA.mp4"
+ ]},
+ {"term": "I drive a silver truck", "codes": [
+ "https://media.signbsl.com/videos/asl/youtube/mp4/qIaZAO2YlYk.mp4",
+ "https://media.signbsl.com/videos/asl/aslsearch/mp4/drive.mp4",
+ "https://media.signbsl.com/videos/asl/youtube/mp4/9fWuTtBHMGY.mp4",
+ "https://media.signbsl.com/videos/asl/aslsignbank/mp4/TRUCK-1316.mp4"
+ ]},
+ {"term": "My wife and I like to go camping", "codes" : [
+ "https://media.signbsl.com/videos/asl/youtube/mp4/3msfJ_fibwg.mp4",
+ "https://media.signbsl.com/videos/asl/aslsignbank/mp4/WIFE-2237.mp4",
+ "https://media.signbsl.com/videos/asl/aslsearch/mp4/and.mp4",
+ "https://media.signbsl.com/videos/asl/youtube/mp4/qIaZAO2YlYk.mp4",
+ "https://media.signbsl.com/videos/asl/startasl/mp4/like.mp4",
+ "https://media.signbsl.com/videos/asl/startasl/mp4/go.mp4",
+ "https://media.signbsl.com/videos/asl/youtube/mp4/khW2tiregWM.mp4"
+ ]},
+ {"term": "I like to go river fishing", "codes": [
+ "https://media.signbsl.com/videos/asl/youtube/mp4/qIaZAO2YlYk.mp4",
+ "https://media.signbsl.com/videos/asl/startasl/mp4/like.mp4",
+ "https://media.signbsl.com/videos/asl/startasl/mp4/go.mp4",
+ "https://media.signbsl.com/videos/asl/signlanguagestudent/mp4/river.mp4",
+ "https://media.signbsl.com/videos/asl/mariekatzenbachschool/mp4/fishing.mp4"
+ ]}
+]
+
+
+
+
+
+
+
+
diff --git a/src/data/terms.json b/src/data/terms.json
index a8f9233..46dece7 100644
--- a/src/data/terms.json
+++ b/src/data/terms.json
@@ -23,6 +23,7 @@
{"term": "Break", "code": "https://media.signbsl.com/videos/asl/aslsignbank/mp4/BREAK-420.mp4"},
{"term": "Brother", "code": "https://media.signbsl.com/videos/asl/startasl/mp4/brother.mp4"},
{"term": "But", "code": "https://media.signbsl.com/videos/asl/aslsearch/mp4/but.mp4"},
+ {"term": "Can't", "code": "https://media.signbsl.com/videos/asl/aslsearch/mp4/cannot.mp4"},
{"term": "Cheat", "code": "https://media.signbsl.com/videos/asl/aslsignbank/mp4/CHEAT_1-1058.mp4"},
{"term": "Child", "code": "https://media.signbsl.com/videos/asl/aslsignbank/mp4/CHILD-75.mp4"},
{"term": "Children", "code": ""},
@@ -38,6 +39,7 @@
{"term": "Draw", "code": ""},
{"term": "Drink", "code": ""},
{"term": "Drunk", "code": "https://media.signbsl.com/videos/asl/aslsearch/mp4/drunk.mp4"},
+ {"term": "End", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/Y8kF63nbYEc.mp4"},
{"term": "Express", "code": "https://media.signbsl.com/videos/asl/aslsignbank/mp4/EXPRESS-1363.mp4"},
{"term": "Fall", "code": ""},
{"term": "Fall Down", "code": "https://media.signbsl.com/videos/asl/startasl/mp4/fall-down.mp4"},
@@ -85,6 +87,7 @@
{"term": "Kid", "code": "https://media.signbsl.com/videos/asl/aslsearch/mp4/kid.mp4"},
{"term": "Knowledge", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/G1idOu49Nq0.mp4"},
{"term": "Large", "code": ""},
+ {"term": "Last", "code": ""},
{"term": "Last Name", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/3uim_eaSkmI.mp4"},
{"term": "Learn", "code": ""},
{"term": "Leave", "code": "https://media.signbsl.com/videos/asl/aslsearch/mp4/leave.mp4"},
diff --git a/src/data/terms2.json b/src/data/terms2.json
index 6da6a60..d826732 100644
--- a/src/data/terms2.json
+++ b/src/data/terms2.json
@@ -96,5 +96,11 @@
{"term": "Who", "code": ""},
{"term": "Why", "code": ""},
{"term": "Work", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/hQKYeuN5tMI.mp4"},
- {"term": "World", "code": ""}
+ {"term": "World", "code": ""},
+ {"term": "Appetizer", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Appetizer-YDERzTpcc6Y.mp4"},
+ {"term": "Breakfast", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Breakfast-THwAruhoYd8.mp4"},
+ {"term": "Dessert", "code": "https://signstock.blob.core.windows.net/signschool/videos/SignSchool%20Dessert%252C%20Dating.mp4"},
+ {"term": "Dinner", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Dinner-9jBzuXsAPvE.mp4"},
+ {"term": "Lunch", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Lunch-X2xNSM8So48.mp4"},
+ {"term": "Snack", "code": "https://signstock.blob.core.windows.net/signschool/videos/db_uploads/SignSchool%20Snack%202-CtUN_tUG-ZA.mp4"}
]
diff --git a/src/index.css b/src/index.css
index 900a56c..bc99779 100644
--- a/src/index.css
+++ b/src/index.css
@@ -54,6 +54,13 @@
}
}
+@font-face {
+ font-family: 'Gallaudet';
+ src: local('Gallaudet'), url('./assets/fonts/GALLAUDET.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
body.modal-open {
overflow: hidden;
}