Browse Source

basics working

master
Rich Brown 1 year ago
parent
commit
a2a0ec0a87
6 changed files with 1410 additions and 5 deletions
  1. +19
    -0
      .eslintrc.js
  2. +0
    -0
      .prettierrc
  3. +74
    -0
      index.html
  4. +40
    -0
      index.js
  5. +1257
    -0
      package-lock.json
  6. +20
    -5
      package.json

+ 19
- 0
.eslintrc.js View File

@@ -0,0 +1,19 @@
module.exports = {
"env": {
"commonjs": true,
"es6": true,
"node": true
},
"extends": ["eslint:recommended", "plugin:prettier/recommended"],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018
},
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
};

+ 0
- 0
.prettierrc View File


+ 74
- 0
index.html View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Entry Observer</title>
<style>
html, body, p {
border: 0;
margin: 0;
}
#colorDiv {
width: 100vw;
height: 100vh;
background-color: crimson;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
#username {
font: bold 4rem Avenir, Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<div id="colorDiv" data-color="hm">
<p id="username"></p>
</div>
<script src="/socket.io/socket.io.js"></script>
<script>
const colorDiv = document.getElementById("colorDiv");
const usernameP = document.getElementById("username");
const invertHex = str => {
const array = [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"A",
"B",
"C",
"D",
"E",
"F",
];
return str
.split("")
.map(t => {
if (t === "#") return "#";
const idx = array.indexOf(t.toString().toUpperCase());
if (idx === -1) return "0";
if (idx >= 8) return array[idx - 8];
return array[15 - idx];
})
.join("");
};
const socket = io.connect("http://localhost:4567");
socket.on('color', (data) => {
const { color, username } = data;
colorDiv.style['background-color'] = color;
usernameP.innerHTML = username;
usernameP.style.color = invertHex(color);
});
</script>
</body>
</html>

+ 40
- 0
index.js View File

@@ -0,0 +1,40 @@
require("dotenv").config();

const MongoClient = require("mongodb").MongoClient;
const assert = require("assert");
const http = require("http");
const port = process.env.PORT;
const uri = process.env.MONGODB_URI;
const client = new MongoClient(uri, { useNewUrlParser: true });
const Socketio = require("socket.io");
const fs = require("fs");

const handler = function(req, res) {
fs.readFile("./index.html", (error, content) => {
if (error) throw new Error("ow");
else {
res.writeHead(200, { "Content-Type": "text/html" });
res.end(content, "utf-8");
}
});
};

const server = http.createServer(handler);
const io = Socketio(server);

server.listen(port, err => {
if (err) throw new Error(err);
console.log(`server is listening on ${port}`);
});

let emitter;
io.on("connection", socket => {
emitter = entry => socket.emit("color", { ...entry });
});

client.connect(function(err, database) {
assert.equal(null, err);
const db = database.db("test");
const stream = db.collection("entries").watch();
stream.on("change", ({ fullDocument }) => emitter(fullDocument));
});

+ 1257
- 0
package-lock.json
File diff suppressed because it is too large
View File


+ 20
- 5
package.json View File

@@ -1,12 +1,27 @@
{
"name": "mong",
"name": "color-observer",
"version": "1.0.0",
"description": "",
"description": "Thin full-stack observer of entries posted to colors-ten",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "nodemon index.js",
"start": "node index.js"
},
"keywords": [],
"keywords": [
"color",
"hex"
],
"author": "RL Brown <rlbrown72@gmail.com> (https://www.rich-text.net)",
"license": "MIT"
"license": "MIT",
"dependencies": {
"dotenv": "^8.0.0",
"mongodb": "^3.3.0-beta2",
"socket.io": "^2.2.0",
"prettier": "^1.18.2",
"eslint-plugin-prettier": "^3.1.0",
"eslint-config-prettier": "^6.0.0",
"eslint": "^6.1.0"
},
"devDependencies": {}
}

Loading…
Cancel
Save