feature/layout-updates #1
53
src/store.js
53
src/store.js
@ -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;
|
||||||
|
}
|
15
src/ui.js
15
src/ui.js
@ -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
6
store.d.ts
vendored
@ -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
|
||||||
|
};
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user