Replace lock-screen with backgrounds and games located in /public
The helper class LockScreen
will be located in imports/util/lockScreen.js
.
Add a new config file imports/config/lockScreen.js
:
let games = [ // Object order will be used for the dropdown-menu
{
"id": 0, // The id located in the public folder: gameID
"features": {
"safari": true, // Enable for safari
"mobile": true // Enable on mobile
},
"maxWidth": { // Optional values, games only
"desktop": 700, // Desktop size is a window width >= 768 pixels (Bootstrap 3 xs breakpoint)
"mobile": { // Mobile size is a window width < 768 pixels (Bootstrap 3 xs breakpoint)
"portrait": 500,
"landscape": 400
}
}
},
{
"id": 1,
"features": {
"safari": true,
"mobile": true
}
},
{
"id": 2,
"features": {
"safari": true,
"mobile": true
}
}
];
let backgrounds = [ // Object order will be used for the dropdown-menu
{
"id": 0, // The id located in the public folder: backgroundID
"features": {
"safari": true, // Enable for safari
"mobile": true // Enable on mobile
}
},
{
"id": 1,
"features": {
"safari": true,
"mobile": true
}
},
{
"id": 2,
"features": {
"safari": true,
"mobile": true
}
}
];
Add new Templates for the background and iframe which both render an iframe on top of the app. The z-index order should be as follow, from highest to lowest:
- Sweet-Alert messages
- Pomodoro-Timer overlay
- Game overlay
- Background overlay
- The cards learning view
Move the new templates inside /imports/ui/learn/overlays/
and hook them up to the learn template:
<template name="learnAlgorithms">
{{#if isBreakActive}} // Add Background and game overlays if Session.get('pomodoroBreakActive') is true
{{> learnAlgorithmsBackgroundOverlay}}
{{> learnAlgorithmsGameOverlay}}
{{/if}}
...
</template>
- The iframes should resize themself if the window size changes so we might have to hook them on to a resizeSensor, similar to how we do it with the pdf-viewer
- The background iframe should take up the whole screen
- The game should be centered, if possible
- The user should see a miniature version of the pomodoro-timer so that he knows how much time is left
- There should be two dropdown menus so that the user can change the background and game on the fly, this might need an additional overlay template
- The user should be able to save his default background and game in his user profile