diff --git a/docker-compose.yml b/docker-compose.yml index 54192ab..cb7ba59 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -7,6 +7,9 @@ services: - postgres ports: - "3005:3005" + working_dir: /server + volumes: + - ./server:/server postgres: image: postgres:10.4 @@ -27,8 +30,9 @@ services: restart: on-failure depends_on: - postgres + - server ports: - - 3002:3000 + - "3002:3000" environment: - CHOKIDAR_USEPOLLING=true stdin_open: true diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 5524bb6..932010b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -2437,6 +2437,37 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz", "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==" }, + "axios": { + "version": "0.19.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz", + "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==", + "requires": { + "follow-redirects": "1.5.10" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "follow-redirects": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "requires": { + "debug": "=3.1.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + } + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 8a04ba4..e02362c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", + "axios": "^0.19.2", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1" @@ -30,5 +31,10 @@ "last 1 firefox version", "last 1 safari version" ] - } + }, + "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).", + "main": "index.js", + "devDependencies": {}, + "author": "", + "license": "ISC" } diff --git a/frontend/public/ACROTSRG.TTF b/frontend/public/ACROTSRG.TTF new file mode 100644 index 0000000..7bcf290 Binary files /dev/null and b/frontend/public/ACROTSRG.TTF differ diff --git a/frontend/public/index.html b/frontend/public/index.html index aa069f2..265cdb3 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -15,6 +15,7 @@ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> + - React App + Astronomy diff --git a/frontend/public/stars.png b/frontend/public/stars.png new file mode 100644 index 0000000..e4987ac Binary files /dev/null and b/frontend/public/stars.png differ diff --git a/frontend/src/App.css b/frontend/src/App.css index 74b5e05..2cdc90e 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,3 +1,102 @@ +body{ + background-color: #0d194a; + background-image: url("http://45.33.13.215/stars.png"); + font-family: Copperplate,Verdana; + color: #fff; + text-shadow: + 0 0 1px #aaa, + 0 0 2px #aaa, + 0 0 4px #aaa, + 0 0 8px #ccc, + 0 0 16px #ccc, + 0 0 18px #ccc, + 0 0 20px #ccc, + 0 0 30px #ccc; +} + +.starbox{ + opacity:0.5; + background-color:#0d194a; + color:#fff; +} + +.starbox:hover{ + border: 1px white solid; + opacity:0.8; + background-color:#0d194a; + color:#fff; +} + +.header{ + font: 32px ACROTSRG; + font-weight: bold; +} + +@font-face { + font-family: ACROTSRG; + src: local('ACROTSRG'), url(./fonts/ACROTSRG.TTF) format('truetype'); +} + +.glowHeavy { + color: #fff; + text-shadow: + 0 0 5px #fff, + 0 0 10px #fff, + 0 0 20px #fff, + 0 0 40px #0ff, + 0 0 80px #0ff, + 0 0 90px #0ff, + 0 0 100px #0ff, + 0 0 150px #0ff; +} + +.glowLight { + color: #fff; + text-shadow: + 0 0 1px #aaa, + 0 0 2px #aaa, + 0 0 4px #aaa, + 0 0 8px #ccc, + 0 0 16px #ccc, + 0 0 18px #ccc, + 0 0 20px #ccc, + 0 0 30px #ccc; +} + +.fadein { + animation-name: fadein; + animation-duration: 4s; +} +.fadein3 { + animation-name: fadein; + animation-duration: 4s; + animation-iteration-count: 3; +} + +.slowblink{ + animation-name: slowblink; + animation-duration: 2s; + animation-iteration-count: infinite; +} + +.longfadein { + animation-name: fadein; + animation-duration: 8s; +} + +@keyframes fadein { + 0% {opacity:0;} + 100% {opacity:1;} +} +@keyframes slowblink { + 0% {opacity:0;} + 50% {opacity:1;} + 100% {opacity:0;} +} + +.stars { +} + .App { text-align: center; } diff --git a/frontend/src/App.js b/frontend/src/App.js index fb923d3..0c131bd 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,26 +1,84 @@ -import React from 'react'; +import React, {useState,useEffect} from 'react'; import logo from './logo.svg'; import './App.css'; +import './fonts/ACROTSRG.TTF' + +const REMOTE_ADDR = "http://45.33.13.215:3005"; + +const axios = require('axios'); + +const ClickSubmitButton = (input) => { + input.addEventListener("keydown", function(event) { + if (event.keyCode === 13) { + event.preventDefault(); + document.getElementById("submit").click();} + }); +} + + +const StartPage = ()=>{ + const [text,setText] = useState(""); + const [loaded,setLoaded] = useState(null); + const [username,setUsername] = useState(""); + + const SubmitUsername = (e)=>{ + setText(<> + + Communicating with the celestials... + ); + } + const UpdateUsername = (e)=>{ + setUsername(e.currentTarget.value); + } + + useEffect(()=>{setTimeout(()=>{ + setText(Well hello there...); + },4000)},[loaded]) + useEffect(()=>{setTimeout(()=>{ + setText(I see this is your first time here.); + },8000)},[loaded]) + useEffect(()=>{setTimeout(()=>{ + setText(Tell me your name...); + },12000)},[loaded]) + useEffect(()=>{setTimeout(()=>{ + setText(<>Tell me your name... + {UpdateUsername(e)}}/> + + ); + document.getElementById("username").focus(); + ClickSubmitButton(document.getElementById("username")); + },14000)},[loaded]) + return (
+
+
+ ASTRONOMY +
+
+
+
+ {text} +
+
+
); +} function App() { - return ( -
-
- logo -

- ??? -

- - Learn React - -
-
- ); + const [data,setData] = useState([]); + const [loaded,setLoaded] = useState(null); + const [page,setPage] = useState(null); + + useEffect(()=>{ + axios.get(REMOTE_ADDR) + .then((data)=>{ + setData(data.data); + console.log(data); + }) + },[loaded]); + switch (page) { + default:{ + return ; + } + } } export default App; diff --git a/frontend/src/fonts/ACROTSRG.TTF b/frontend/src/fonts/ACROTSRG.TTF new file mode 100644 index 0000000..7bcf290 Binary files /dev/null and b/frontend/src/fonts/ACROTSRG.TTF differ diff --git a/server/Dockerfile b/server/Dockerfile index f455a73..9692035 100644 --- a/server/Dockerfile +++ b/server/Dockerfile @@ -8,6 +8,8 @@ COPY . /src/app RUN yarn install +RUN yarn global add nodemon + EXPOSE 3005 -CMD [ "npm", "start" ] \ No newline at end of file +CMD [ "nodemon", "app.js" ] \ No newline at end of file diff --git a/server/app.js b/server/app.js index 7671cbf..9c74424 100644 --- a/server/app.js +++ b/server/app.js @@ -4,6 +4,15 @@ const port = 3005 app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`)) const Pool = require('pg').Pool + +let allowCrossDomain = function(req, res, next) { + res.header('Access-Control-Allow-Origin', "*"); + res.header('Access-Control-Allow-Headers', "*"); + res.header('Access-Control-Allow-Methods', "*"); + next(); + } + app.use(allowCrossDomain); + const pool = new Pool({ user: 'postgres', @@ -14,7 +23,7 @@ new Pool({ }) const getUsers = (request, response) => { - pool.query('SELECT * FROM users', (error, results) => { + pool.query('SELECT * FROM signs', (error, results) => { if (error) { response.status(500).json(error.message) } else {