initial commit

Kyrylo Burmelov · Kyrylo Burmelov · commit 1631703ef498 · 2020-07-09T21:55:49.000+03:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@babel/preset-env"
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
@@ -0,0 +1,9 @@
+Starter for **HTTP, REST / WS** homework. Binary Studio Academy
+
+## Installation
+
+`yarn install`
+
+`yarn start`
+
+open http://localhost:3002/
diff --git a/config.js b/config.js
@@ -0,0 +1,6 @@
+import path from "path";
+
+export const STATIC_PATH = path.join(__dirname, "public");
+export const HTML_FILES_PATH = path.join(STATIC_PATH, "html");
+
+export const PORT = 3002;
diff --git a/data.js b/data.js
@@ -0,0 +1,11 @@
+export const texts = [
+  "Text for typing #1",
+  "Text for typing #2",
+  "Text for typing #3",
+  "Text for typing #4",
+  "Text for typing #5",
+  "Text for typing #6",
+  "Text for typing #7",
+];
+
+export default { texts };
diff --git a/package.json b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "http-ws-hw-starter",
+  "version": "1.0.0",
+  "description": "Starter for HTTP / WS homework. Binary Studio Academy",
+  "main": "index.js",
+  "scripts": {
+    "start": "nodemon server.js --exec \"babel-node\""
+  },
+  "keywords": [
+    "bsa",
+    "homework"
+  ],
+  "author": "Kyrylo Burmelov",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.17.1",
+    "socket.io": "^2.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.10.2",
+    "@babel/node": "^7.10.1",
+    "@babel/preset-env": "^7.10.2",
+    "@babel/register": "^7.10.1",
+    "nodemon": "^2.0.4"
+  }
+}
diff --git a/public/html/game.html b/public/html/game.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/styles/reset.css">
+  <link rel="stylesheet" href="/styles/common.css">
+  <link
+    href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap"
+    rel="stylesheet">
+  <script src="/socket.io/socket.io.js"></script>
+  <script defer type="module" src="/javascript/game.mjs"></script>
+  <title>Game</title>
+</head>
+
+<body>
+  <div id="root">
+    <div id="rooms-page" class="full-screen">
+      Rooms Page
+    </div>
+    <div id="game-page" class="full-screen display-none">
+      Game Page
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/public/html/login.html b/public/html/login.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/styles/reset.css">
+  <link rel="stylesheet" href="/styles/common.css">
+  <link rel="stylesheet" href="/styles/login.css">
+  <link
+    href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap"
+    rel="stylesheet">
+  <script defer type="module" src="/javascript/login.mjs"></script>
+  <title>Login</title>
+</head>
+
+<body>
+  <div id="login-page" class="full-screen flex-centered">
+    <div class="flex">
+      <div class="username-input-container">
+        <input id="username-input" autofocus placeholder="username" type="text">
+      </div>
+      <button id="submit-button" class="no-select">submit</button>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/public/javascript/game.mjs b/public/javascript/game.mjs
@@ -0,0 +1,7 @@
+const username = sessionStorage.getItem("username");
+
+if (!username) {
+  window.location.replace("/login");
+}
+
+const socket = io("", { query: { username } });
diff --git a/public/javascript/login.mjs b/public/javascript/login.mjs
@@ -0,0 +1,29 @@
+const username = sessionStorage.getItem("username");
+
+if (username) {
+  window.location.replace("/game");
+}
+
+const submitButton = document.getElementById("submit-button");
+const input = document.getElementById("username-input");
+
+const getInputValue = () => input.value;
+
+const onClickSubmitButton = () => {
+  const inputValue = getInputValue();
+  if (!inputValue) {
+    return;
+  }
+  sessionStorage.setItem("username", inputValue);
+  window.location.replace("/game");
+};
+
+const onKeyUp = ev => {
+  const enterKeyCode = 13;
+  if (ev.keyCode === enterKeyCode) {
+    submitButton.click();
+  }
+};
+
+submitButton.addEventListener("click", onClickSubmitButton);
+window.addEventListener("keyup", onKeyUp);
diff --git a/public/styles/common.css b/public/styles/common.css
@@ -0,0 +1,50 @@
+* {
+  font-family: "Open Sans", sans-serif;
+  line-height: normal;
+  color: var(--main-font-color);
+}
+
+.full-screen {
+  height: 100vh;
+  width: 100%;
+}
+
+.flex-centered {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.flex {
+  display: flex;
+}
+
+.no-select {
+  user-select: none;
+}
+
+.display-none {
+  display: none;
+}
+
+input {
+  width: 100%;
+  height: 100%;
+  padding: 5px 10px;
+  outline: none;
+  background-color: var(--white);
+  border: 1px solid var(--input-border-color);
+}
+
+input::placeholder {
+  color: var(--input-placeholder-color);
+}
+
+:root {
+  --main-font-color: #333;
+  --main-button-background-color: lightgrey;
+  --main-button-border-color: #999;
+  --input-border-color: #999;
+  --input-placeholder-color: #888;
+  --white: #fff;
+}
diff --git a/public/styles/login.css b/public/styles/login.css
@@ -0,0 +1,18 @@
+.username-input-container {
+  height: 39px;
+  width: 240px;
+}
+
+#username-input {
+  font-size: 16px;
+}
+
+#submit-button {
+  height: 39px;
+  font-size: 14px;
+  border: 1px solid var(--main-button-border-color);
+  background-color: var(--main-button-background-color);
+  text-transform: uppercase;
+  padding: 0 15px;
+  margin-left: 10px;
+}
diff --git a/public/styles/reset.css b/public/styles/reset.css
@@ -0,0 +1,15 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+button {
+  padding: 0;
+  border: none;
+  font: inherit;
+  color: inherit;
+  background-color: transparent;
+  cursor: pointer;
+  outline: none;
+}
diff --git a/routes/gameRoutes.js b/routes/gameRoutes.js
@@ -0,0 +1,13 @@
+import { Router } from "express";
+import path from "path";
+import { HTML_FILES_PATH } from "../config";
+
+const router = Router();
+
+router
+  .get("/", (req, res) => {
+    const page = path.join(HTML_FILES_PATH, "game.html");
+    res.sendFile(page);
+  });
+
+export default router;
diff --git a/routes/index.js b/routes/index.js
@@ -0,0 +1,7 @@
+import loginRoutes from "./loginRoutes";
+import gameRoutes from "./gameRoutes";
+
+export default app => {
+  app.use("/login", loginRoutes);
+  app.use("/game", gameRoutes);
+};
diff --git a/routes/loginRoutes.js b/routes/loginRoutes.js
@@ -0,0 +1,13 @@
+import { Router } from "express";
+import path from "path";
+import { HTML_FILES_PATH } from "../config";
+
+const router = Router();
+
+router
+  .get("/", (req, res) => {
+    const page = path.join(HTML_FILES_PATH, "login.html");
+    res.sendFile(page);
+  });
+
+export default router;
diff --git a/server.js b/server.js
@@ -0,0 +1,23 @@
+import express from "express";
+import http from "http";
+import socketIO from "socket.io";
+import socketHandler from "./socket";
+import routes from "./routes";
+import { STATIC_PATH, PORT } from "./config";
+
+const app = express();
+const httpServer = http.Server(app);
+const io = socketIO(httpServer);
+
+app.use(express.static(STATIC_PATH));
+routes(app);
+
+app.get("*", (req, res) => {
+  res.redirect("/login");
+});
+
+socketHandler(io);
+
+httpServer.listen(PORT, () => {
+  console.log(`Listen server on port ${PORT}`);
+});
diff --git a/socket/config.js b/socket/config.js
@@ -0,0 +1,3 @@
+export const MAXIMUM_USERS_FOR_ONE_ROOM = 5;
+export const SECONDS_TIMER_BEFORE_START_GAME = 10;
+export const SECONDS_FOR_GAME = 60;
diff --git a/socket/index.js b/socket/index.js
@@ -0,0 +1,8 @@
+import * as config from "./config";
+
+export default io => {
+  io.on("connection", socket => {
+    const username = socket.handshake.query.username;
+
+  });
+};
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +{
 +  "presets": [
 +    "@babel/preset-env"
 +  ]
 +}