Initial commit - cloned the Svelte todo's app with google login enabled as a starting point. This system will initially be used to let the chrome extension for students report which computers are used by which students and when.
This commit is contained in:
126
client/main.css
Normal file
126
client/main.css
Normal file
@@ -0,0 +1,126 @@
|
||||
/* CSS declarations go here */
|
||||
body {
|
||||
padding: 10px;
|
||||
font-family: sans-serif;
|
||||
background-color: #315481;
|
||||
background-image: linear-gradient(to bottom, #315481, #918e82 100%);
|
||||
background-attachment: fixed;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
min-height: 100%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
header {
|
||||
background: #d2edf4;
|
||||
background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
|
||||
padding: 20px 15px 15px 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#login-buttons {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
display: inline-block;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 10px;
|
||||
margin-bottom: -10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.new-task input {
|
||||
box-sizing: border-box;
|
||||
padding: 10px 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
width: 100%;
|
||||
padding-right: 80px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.new-task input:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.delete {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
background: none;
|
||||
font-size: 1em;
|
||||
border: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
padding: 15px;
|
||||
border-bottom: #eee solid 1px;
|
||||
}
|
||||
|
||||
li .text {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
li.checked {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
li.checked .text {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
li.private {
|
||||
background: #eee;
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
header .hide-completed {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.toggle-private {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
li {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 150px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.new-task input {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
1
client/main.css.map
Normal file
1
client/main.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["main.sass"],"names":[],"mappings":"AAAA;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;;AAED;EACC;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;IACC;;;EAED;IACC;IACA;;;EAED;IACC","file":"main.css"}
|
||||
8
client/main.html
Normal file
8
client/main.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<head>
|
||||
<title>Todo List</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
|
||||
127
client/main.js
Normal file
127
client/main.js
Normal file
@@ -0,0 +1,127 @@
|
||||
import {Meteor} from 'meteor/meteor';
|
||||
import App from '../imports/ui/App.svelte';
|
||||
import '../imports/startup/accounts-config.js';
|
||||
import Phaser from 'phaser';
|
||||
|
||||
Meteor.startup(() => {
|
||||
new App({
|
||||
target: document.getElementById('app')
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
class playGame extends Phaser.Scene {
|
||||
constructor() {
|
||||
super("PlayGame");
|
||||
}
|
||||
create() {
|
||||
// graphic object used to draw walls
|
||||
this.wallGraphics = this.add.graphics();
|
||||
this.wallGraphics.lineStyle(1, 0x00ff00);
|
||||
|
||||
// graphic object used to draw rays of light
|
||||
this.lightGraphics = this.add.graphics();
|
||||
|
||||
// array with all polygons in game
|
||||
this.polygons = [];
|
||||
|
||||
// add random boxes
|
||||
for(let i = 0; i < gameOptions.boxes; i ++){
|
||||
this.addRandomBox();
|
||||
}
|
||||
|
||||
// walls around game perimeter
|
||||
this.polygons.push([[-1, -1], [game.config.width + 1, -1], [game.config.width + 1, game.config.height+1], [-1, game.config.height + 1]]);
|
||||
|
||||
// listener for input movement
|
||||
this.input.on("pointermove", this.renderLight, this);
|
||||
}
|
||||
addRandomBox() {
|
||||
// use a do...while statement because there can't be intersecting polygons
|
||||
do {
|
||||
// random x and y coordinates, width and height
|
||||
var startX = Phaser.Math.Between(10, game.config.width - 10 - gameOptions.sizeRange.max);
|
||||
var startY = Phaser.Math.Between(10, game.config.height - 10 - gameOptions.sizeRange.max);
|
||||
var width = Phaser.Math.Between(gameOptions.sizeRange.min, gameOptions.sizeRange.max);
|
||||
var height = Phaser.Math.Between(gameOptions.sizeRange.min, gameOptions.sizeRange.max);
|
||||
|
||||
// check if current box intersects other boxes
|
||||
} while(this.boxesIntersect(startX, startY, width, height));
|
||||
|
||||
// draw the box
|
||||
this.wallGraphics.strokeRect(startX, startY, width, height);
|
||||
|
||||
// insert box vertices into polygons array
|
||||
this.polygons.push([[startX, startY], [startX + width, startY], [startX + width, startY + height], [startX, startY + height]]);
|
||||
}
|
||||
// method to check if the box intersects other boxes
|
||||
boxesIntersect(x, y, w, h) {
|
||||
// loop through existing boxes
|
||||
for(let i = 0; i < this.polygons.length; i ++) {
|
||||
// if the box intersects the existing i-th box...
|
||||
if(x < this.polygons[i][1][0] && x + w > this.polygons[i][0][0] && y < this.polygons[i][3][1] && y + h > this.polygons[i][0][1]){
|
||||
// return true
|
||||
return true;
|
||||
}
|
||||
}
|
||||
// if we reach the end of the loop, return false
|
||||
return false;
|
||||
}
|
||||
// method to render the light
|
||||
renderLight(pointer) {
|
||||
// determine light polygon starting from pointer coordinates
|
||||
let visibility = this.createLightPolygon(pointer.x, pointer.y);
|
||||
|
||||
// clear and prepare lightGraphics graphic object
|
||||
this.lightGraphics.clear();
|
||||
this.lightGraphics.lineStyle(2, 0xff8800);
|
||||
this.lightGraphics.fillStyle(0xffff00);
|
||||
|
||||
// begin a drawing path
|
||||
this.lightGraphics.beginPath();
|
||||
|
||||
// move the graphic pen to first vertex of light polygon
|
||||
this.lightGraphics.moveTo(visibility[0][0], visibility[0][1]);
|
||||
|
||||
// loop through all light polygon vertices
|
||||
for(let i = 1; i <= visibility.length; i ++) {
|
||||
// draw a line to i-th light polygon vertex
|
||||
this.lightGraphics.lineTo(visibility[i % visibility.length][0], visibility[ i %visibility.length][1]);
|
||||
}
|
||||
|
||||
// close, stroke and fill light polygon
|
||||
this.lightGraphics.closePath();
|
||||
this.lightGraphics.fillPath();
|
||||
this.lightGraphics.strokePath();
|
||||
}
|
||||
// method to create light polygon using visibility_polygon.js
|
||||
createLightPolygon(x, y) {
|
||||
let segments = VisibilityPolygon.convertToSegments(this.polygons);
|
||||
segments = VisibilityPolygon.breakIntersections(segments);
|
||||
let position = [x, y];
|
||||
if (VisibilityPolygon.inPolygon(position, this.polygons[this.polygons.length - 1])) {
|
||||
return VisibilityPolygon.compute(position, segments);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
let config = {
|
||||
type: Phaser.AUTO,
|
||||
parent: "game",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
physics: {
|
||||
default: 'arcade',
|
||||
arcade: {
|
||||
gravity: {y: 200}
|
||||
}
|
||||
},
|
||||
scene: {
|
||||
scene: playGame
|
||||
}
|
||||
};
|
||||
|
||||
let game = new Phaser.Game(config);
|
||||
});
|
||||
103
client/main.sass
Normal file
103
client/main.sass
Normal file
@@ -0,0 +1,103 @@
|
||||
/* CSS declarations go here */
|
||||
body
|
||||
padding: 10px
|
||||
font-family: sans-serif
|
||||
background-color: #315481
|
||||
background-image: linear-gradient(to bottom, #315481, #918e82 100%)
|
||||
background-attachment: fixed
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
right: 0
|
||||
padding: 0
|
||||
margin: 0
|
||||
font-size: 14px
|
||||
|
||||
.container
|
||||
max-width: 600px
|
||||
margin: 0 auto
|
||||
min-height: 100%
|
||||
background: white
|
||||
|
||||
header
|
||||
background: #d2edf4
|
||||
background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%)
|
||||
padding: 20px 15px 15px 15px
|
||||
position: relative
|
||||
|
||||
#login-buttons
|
||||
display: block
|
||||
|
||||
h1
|
||||
font-size: 1.5em
|
||||
margin: 0
|
||||
margin-bottom: 10px
|
||||
display: inline-block
|
||||
margin-right: 1em
|
||||
|
||||
form
|
||||
margin-top: 10px
|
||||
margin-bottom: -10px
|
||||
position: relative
|
||||
|
||||
.new-task input
|
||||
box-sizing: border-box
|
||||
padding: 10px 0
|
||||
background: transparent
|
||||
border: none
|
||||
width: 100%
|
||||
padding-right: 80px
|
||||
font-size: 1em
|
||||
|
||||
.new-task input:focus
|
||||
outline: 0
|
||||
|
||||
ul
|
||||
margin: 0
|
||||
padding: 0
|
||||
background: white
|
||||
|
||||
.delete
|
||||
float: right
|
||||
font-weight: bold
|
||||
background: none
|
||||
font-size: 1em
|
||||
border: none
|
||||
position: relative
|
||||
|
||||
li
|
||||
position: relative
|
||||
list-style: none
|
||||
padding: 15px
|
||||
border-bottom: #eee solid 1px
|
||||
|
||||
li .text
|
||||
margin-left: 10px
|
||||
|
||||
li.checked
|
||||
color: #888
|
||||
|
||||
li.checked .text
|
||||
text-decoration: line-through
|
||||
|
||||
li.private
|
||||
background: #eee
|
||||
border-color: #ddd
|
||||
|
||||
header .hide-completed
|
||||
float: right
|
||||
|
||||
.toggle-private
|
||||
margin-left: 5px
|
||||
|
||||
@media (max-width: 600px)
|
||||
li
|
||||
padding: 12px 15px
|
||||
|
||||
.search
|
||||
width: 150px
|
||||
clear: both
|
||||
|
||||
.new-task input
|
||||
padding-bottom: 5px
|
||||
Reference in New Issue
Block a user