@ -2,11 +2,35 @@ import React, {useState,useEffect} from 'react';
import logo from './logo.svg' ;
import './App.css' ;
import './fonts/ACROTSRG.TTF'
import './backgrounds/stars.png'
import DateTimePicker from 'react-datetime-picker'
const REMOTE _ADDR = "http://45.33.13.215:3005" ;
const axios = require ( 'axios' ) ;
function setCookie ( cname , cvalue , exdays ) {
var d = new Date ( ) ;
d . setTime ( d . getTime ( ) + ( exdays * 24 * 60 * 60 * 1000 ) ) ;
var expires = "expires=" + d . toUTCString ( ) ;
document . cookie = cname + "=" + cvalue + ";" + expires + ";path=/" ;
}
function getCookie ( cname ) {
var name = cname + "=" ;
var ca = document . cookie . split ( ';' ) ;
for ( var i = 0 ; i < ca . length ; i ++ ) {
var c = ca [ i ] ;
while ( c . charAt ( 0 ) == ' ' ) {
c = c . substring ( 1 ) ;
}
if ( c . indexOf ( name ) == 0 ) {
return c . substring ( name . length , c . length ) ;
}
}
return null ;
}
const ClickSubmitButton = ( input ) => {
input . addEventListener ( "keydown" , function ( event ) {
if ( event . keyCode === 13 ) {
@ -15,17 +39,73 @@ const ClickSubmitButton = (input) => {
} ) ;
}
const ChooseFlavorLoadingText = ( ) => {
var strings = [
"Communicating with the celestials..." ,
"Shooting for the stars..." ,
"Launching into the heavens..." ,
"Seeking heavenly advice..." ,
"Seeking divine wisdom..." ,
"Determining celestial intersection with the stars..." ,
"Communicating beyond mortal universes..." ,
"Heading into a cosmic universe..." ,
]
return strings [ Math . floor ( Math . random ( ) * strings . length ) ]
}
const UserPage = ( ) => {
const [ text , setText ] = useState ( "" ) ;
const [ page , setPage ] = useState ( null ) ;
switch ( page ) {
default : {
return ( < div className = "container stars border rounded shadow-sm" >
< div className = "row" >
< div className = "col-md-12 header text-center" >
< span className = "glowHeavy animated fadein" > { getCookie ( "username" ) } ' s ASTRONOMY < / s p a n >
< / d i v >
< / d i v >
< div className = "row" >
< div className = "col-md-12 text-center" >
{ text }
< / d i v >
< / d i v >
< / d i v > ) ;
}
}
}
const StartPage = ( ) => {
const StartPage = ( p ) => {
const [ text , setText ] = useState ( "" ) ;
const [ loaded , setLoaded ] = useState ( null ) ;
const [ username , setUsername ] = useState ( "" ) ;
const [ date , setDate ] = useState ( new Date ( "Tue Jan 01 1991 00:00:00 GMT+0900" ) ) ;
const [ page , setPage ] = useState ( null ) ;
const SubmitNewUser = ( ) => {
var obj = { username : username , birth _day : date . getDate ( ) ,
birth _month : date . getMonth ( ) , birth _year : date . getFullYear ( ) ,
birth _minute : date . getMinutes ( ) , birth _hour : date . getHours ( ) }
console . log ( "Sending request:" + JSON . stringify ( obj ) ) ;
axios . post ( REMOTE _ADDR + "/users/add/" , obj )
. then ( ( data ) => {
//Next create a cookie to remember this user's data.
console . log ( "Response: " + data ) ;
for ( var keys in obj ) {
setCookie ( keys , obj [ keys ] , 365 ) ;
}
//Now refresh the page...
p . setPage ( "UserPage" ) ;
} )
}
const SubmitBirthdate = ( e ) => {
setPage ( "LOADING" ) ;
SubmitNewUser ( ) ;
}
const SubmitUsername = ( e ) => {
setText ( < >
< span className = "slowblink" >
Communicating with the celestials ...
< /span></ > ) ;
setPage ( "BIRTHDATE" ) ;
}
const UpdateUsername = ( e ) => {
setUsername ( e . currentTarget . value ) ;
@ -42,13 +122,67 @@ const StartPage = ()=>{
} , 12000 ) } , [ loaded ] )
useEffect ( ( ) => { setTimeout ( ( ) => {
setText ( < > < span className = "fadein3" > Tell me your name ... < / s p a n >
< br / >
< input type = "text" id = "username" className = "starbox" onChange = { ( e ) => { UpdateUsername ( e ) } } / >
< br / >
< button className = "starbox" onClick = { ( e ) => SubmitUsername ( ) } id = "submit" > Continue < / b u t t o n >
< / > ) ;
document . getElementById ( "username" ) . focus ( ) ;
ClickSubmitButton ( document . getElementById ( "username" ) ) ;
} , 14000 ) } , [ loaded ] )
return ( < div className = "container stars border rounded shadow-sm" >
switch ( page ) {
case "LOADING" : {
return (
< div className = "pb-3 container stars border rounded shadow-sm" >
< div className = "row" >
< div className = "col-md-12 header text-center" >
< span className = "glowHeavy animated fadein" > ASTRONOMY < / s p a n >
< / d i v >
< / d i v >
< div className = "row" >
< div className = "col-md-12 text-center" >
< span className = "slowblink" >
{ ChooseFlavorLoadingText ( ) }
< / s p a n >
< / d i v >
< / d i v >
< / d i v >
) ;
} break ;
case "BIRTHDATE" : {
return (
< div className = "pb-3 container stars border rounded shadow-sm" >
< div className = "row" >
< div className = "col-md-12 header text-center" >
< span className = "glowHeavy animated fadein" > ASTRONOMY < / s p a n >
< / d i v >
< / d i v >
< div className = "row" >
< div className = "col-md-12 text-center" >
< span className = "fadein_2" >
I also need to know when you were born . Don ' t be shy now ... Tell it to me , relax .
< br / >
< DateTimePicker
className = "glowLight baseCalendar"
autoFocus = { true }
onChange = { ( d ) => { setDate ( d ) ;
console . log ( d ) } }
defaultView = { "century" }
value = { date }
clearIcon = { null }
disableClock = { true }
/ >
< br / >
< button className = "starbox" onClick = { ( e ) => SubmitBirthdate ( ) } id = "submit" > Continue < / b u t t o n >
< / s p a n >
< / d i v >
< / d i v >
< / d i v >
) ;
} break ;
default : {
return ( < div className = "pb-3 container stars border rounded shadow-sm" >
< div className = "row" >
< div className = "col-md-12 header text-center" >
< span className = "glowHeavy animated fadein" > ASTRONOMY < / s p a n >
@ -61,6 +195,8 @@ const StartPage = ()=>{
< / d i v >
< / d i v > ) ;
}
}
}
function App ( ) {
const [ data , setData ] = useState ( [ ] ) ;
@ -68,15 +204,34 @@ function App() {
const [ page , setPage ] = useState ( null ) ;
useEffect ( ( ) => {
axios . get ( REMOTE _ADDR )
. then ( ( data ) => {
setData ( data . data ) ;
console . log ( data ) ;
} )
if ( getCookie ( "username" ) ) {
setPage ( "UserPage" ) ;
} else {
setPage ( "StartPage" ) ;
}
} , [ loaded ] ) ;
switch ( page ) {
/ * c a s e " D a t e T i m e P i c k e r " : {
return < > < DateTimePicker
className = "glowLight baseCalendar"
autoFocus = { true }
onChange = { ( date ) => { setDate ( date ) ;
console . log ( date ) } }
defaultView = { "century" }
value = { date }
clearIcon = { null }
disableClock = { true }
/ >
< / >
} * /
case "UserPage" : {
return < UserPage / > ;
}
case "StartPage" : {
return < StartPage page = { page } setPage = { setPage } / > ;
} break ;
default : {
return < StartPage / > ;
return < > < / > ;
}
}
}
