parent
67aca89939
commit
311da62018
Binary file not shown.
|
After Width: | Height: | Size: 412 KiB |
@ -1,26 +1,84 @@ |
|||||||
import React from 'react'; |
import React, {useState,useEffect} from 'react'; |
||||||
import logo from './logo.svg'; |
import logo from './logo.svg'; |
||||||
import './App.css'; |
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(<> |
||||||
|
<span className="slowblink"> |
||||||
|
Communicating with the celestials... |
||||||
|
</span></>); |
||||||
|
} |
||||||
|
const UpdateUsername = (e)=>{ |
||||||
|
setUsername(e.currentTarget.value); |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(()=>{setTimeout(()=>{ |
||||||
|
setText(<span className="fadein3">Well hello there...</span>); |
||||||
|
},4000)},[loaded]) |
||||||
|
useEffect(()=>{setTimeout(()=>{ |
||||||
|
setText(<span className="fadein3">I see this is your first time here.</span>); |
||||||
|
},8000)},[loaded]) |
||||||
|
useEffect(()=>{setTimeout(()=>{ |
||||||
|
setText(<span className="fadein3">Tell me your name...</span>); |
||||||
|
},12000)},[loaded]) |
||||||
|
useEffect(()=>{setTimeout(()=>{ |
||||||
|
setText(<><span className="fadein3">Tell me your name...</span> |
||||||
|
<input type="text" id="username" className="starbox" onChange={(e)=>{UpdateUsername(e)}}/> |
||||||
|
<button className="starbox" onClick={(e)=>SubmitUsername()} id="submit">Continue</button> |
||||||
|
</>); |
||||||
|
document.getElementById("username").focus(); |
||||||
|
ClickSubmitButton(document.getElementById("username")); |
||||||
|
},14000)},[loaded]) |
||||||
|
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">ASTRONOMY</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="row"> |
||||||
|
<div className="col-md-12 text-center"> |
||||||
|
{text} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div>); |
||||||
|
} |
||||||
|
|
||||||
function App() { |
function App() { |
||||||
return ( |
const [data,setData] = useState([]); |
||||||
<div className="App"> |
const [loaded,setLoaded] = useState(null); |
||||||
<header className="App-header"> |
const [page,setPage] = useState(null); |
||||||
<img src={logo} className="App-logo" alt="logo" /> |
|
||||||
<p> |
useEffect(()=>{ |
||||||
??? |
axios.get(REMOTE_ADDR) |
||||||
</p> |
.then((data)=>{ |
||||||
<a |
setData(data.data); |
||||||
className="App-link" |
console.log(data); |
||||||
href="https://reactjs.org" |
}) |
||||||
target="_blank" |
},[loaded]); |
||||||
rel="noopener noreferrer" |
switch (page) { |
||||||
> |
default:{ |
||||||
Learn React |
return <StartPage/>; |
||||||
</a> |
} |
||||||
</header> |
} |
||||||
</div> |
|
||||||
); |
|
||||||
} |
} |
||||||
|
|
||||||
export default App; |
export default App; |
||||||
|
|||||||
Binary file not shown.
Loading…
Reference in new issue