feature/layout-updates #1

Merged
SethTrowbridge merged 34 commits from feature/layout-updates into master 2023-06-07 21:12:15 -04:00
3 changed files with 73 additions and 1 deletions
Showing only changes of commit 3c1d10eabe - Show all commits

View File

@ -212,4 +212,55 @@ export const Provider =(props)=>
}; };
/** @type {()=>Store.Binding} */ /** @type {()=>Store.Binding} */
export const Consumer =()=> React.useContext(Context); export const Consumer =()=> React.useContext(Context);
/** @type {(inTest:Store.Test|undefined)=>Store.Grade} */
export const Grade =(inTest)=>
{
/** @type {Store.Grade} */
const output = { Total:0, Done:0, Score:0 };
/** @type {(inGoal:number, inResult:number)=>number} */
const Mapper =(inGoal, inResult)=>
{
const err = Math.abs(inGoal-inResult);
if(err == 0){ return 1; }
else if(err > 0 && err <= 5){ return 0.9; }
else if(err > 5 && err <= 10){ return 0.7; }
else if(err > 10 && err <= 15){ return 0.2; }
else{ return 0; }
}
if(inTest)
{
for(let i=0; i<inTest.Plot.length; i++)
{
const {TestL, TestR, UserL, UserR} = inTest.Plot[i];
if(TestL)
{
output.Total ++;
if(UserL)
{
output.Done++;
output.Score += Mapper(TestL.Stim, UserL.Stim);
}
}
if(TestR)
{
output.Total ++;
if(UserR)
{
output.Done++;
output.Score += Mapper(TestR.Stim, UserR.Stim);
}
}
}
}
if(output.Done > 0)
{
output.Score = Math.floor((output.Score/output.Done) * 10000)/100;
}
return output;
}

View File

@ -51,6 +51,20 @@ export const Select =()=>
</div>`; </div>`;
} }
/** @type {BasicElement} */
export const Grade =()=>
{
const [State] = Store.Consumer();
const grade = Store.Grade(State.Live.Test);
return html`<div class="font-sans">
<div>Complete: ${grade.Done} of ${grade.Total}</div>
<div>Accuracy: ${grade.Score}%</div>
<div class="h-4 bg-gray-200 rounded-full overflow-hidden">
<div class=${`h-full w-[${grade.Done/grade.Total*100}%] bg-emerald-500 shadow-sss`}></div>
</div>
</div>`
};
/** @type {BasicElement} */ /** @type {BasicElement} */
export const Controls =()=> export const Controls =()=>
{ {
@ -79,6 +93,7 @@ export const Controls =()=>
}, [playGet]); }, [playGet]);
return html` return html`
<${Grade}/>
<div class="flex"> <div class="flex">
<div>Channel</div> <div>Channel</div>
<div>${State.Chan.Value}</div> <div>${State.Chan.Value}</div>

6
store.d.ts vendored
View File

@ -49,4 +49,10 @@ declare namespace Store {
type DrawChart = { Cross?:DrawPoint, UserL: DrawGroup, UserR: DrawGroup, TestL: DrawGroup, TestR: DrawGroup }; type DrawChart = { Cross?:DrawPoint, UserL: DrawGroup, UserR: DrawGroup, TestL: DrawGroup, TestR: DrawGroup };
type Binding = [state:State, dispatch:(inAction:Action)=>void] type Binding = [state:State, dispatch:(inAction:Action)=>void]
type Grade = {
Total:number,
Done:number,
Score:number
};
} }