Client changes
This commit is contained in:
nannal
parent
8708bac1a2
commit
9ef945e575
18
client/Old/index.html
Normal file
18
client/Old/index.html
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<head>
|
||||||
|
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
|
||||||
|
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
|
||||||
|
</script>
|
||||||
|
<script src="./index.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<title>Embezzle</title>
|
||||||
|
<input type="text" id="location" /> <input type="button" value="send" onclick="send()" /><input type="button" value="get" onclick="get()" />
|
||||||
|
</br>
|
||||||
|
<input type="text" id="name" value="Name" />
|
||||||
|
<input type="text" id="ownerID" value="ownerID" />
|
||||||
|
<input type="text" id="gameID" value="gameID" />
|
||||||
|
<input type="text" id="seats" value="seats" />
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
30
client/Old/index.js
Normal file
30
client/Old/index.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
url="http://127.0.0.1:3000"
|
||||||
|
|
||||||
|
function send() {
|
||||||
|
data = {name: $('#name').val(), ownerID: $("#ownerID").val(), gameID: $("#gameID").val(), seats: $("#seats").val()}
|
||||||
|
console.log(JSON.stringify(data))
|
||||||
|
let xhr = new XMLHttpRequest();
|
||||||
|
xhr.open("POST", url + "/" + $('#location').val(), true)
|
||||||
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||||
|
xhr.onreadystatechange = function () {
|
||||||
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
||||||
|
|
||||||
|
console.log(JSON.parse(xhr.responseText))
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
xhr.send(JSON.stringify(data))
|
||||||
|
}
|
||||||
|
|
||||||
|
function get() {
|
||||||
|
let xhr = new XMLHttpRequest();
|
||||||
|
xhr.open("GET", url + "/" + $('#location').val(), true)
|
||||||
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||||
|
xhr.onreadystatechange = function () {
|
||||||
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
||||||
|
console.log(JSON.parse(xhr.responseText))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
xhr.send()
|
||||||
|
}
|
||||||
202
client/index.css
Normal file
202
client/index.css
Normal file
@ -0,0 +1,202 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.clearfix{
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
.header-banner{
|
||||||
|
padding-top:35px;
|
||||||
|
padding-bottom:100px;
|
||||||
|
color:#ffffff;
|
||||||
|
font-family:Helvetica, serif;
|
||||||
|
font-weight:100;
|
||||||
|
background-image:url("//grapesjs.com/img/bg-gr-v.png"), url(none);
|
||||||
|
background-attachment:scroll, scroll;
|
||||||
|
background-position:left top, center center;
|
||||||
|
background-repeat:repeat-y, no-repeat;
|
||||||
|
background-size:contain, cover;
|
||||||
|
opacity:1;
|
||||||
|
}
|
||||||
|
.container-width{
|
||||||
|
width:90%;
|
||||||
|
max-width:1150px;
|
||||||
|
margin:0 auto;
|
||||||
|
float:none;
|
||||||
|
}
|
||||||
|
.logo-container{
|
||||||
|
float:left;
|
||||||
|
width:50%;
|
||||||
|
}
|
||||||
|
.menu{
|
||||||
|
float:right;
|
||||||
|
width:50%;
|
||||||
|
}
|
||||||
|
.lead-title{
|
||||||
|
margin:150px 0 30px 0;
|
||||||
|
font-size:40px;
|
||||||
|
}
|
||||||
|
.footer-under{
|
||||||
|
background-color:#312833;
|
||||||
|
padding-bottom:100px;
|
||||||
|
padding-top:100px;
|
||||||
|
min-height:500px;
|
||||||
|
color:#eee;
|
||||||
|
position:relative;
|
||||||
|
font-weight:100;
|
||||||
|
font-family:Helvetica,serif;
|
||||||
|
}
|
||||||
|
.footer-container{
|
||||||
|
display:flex;
|
||||||
|
flex-wrap:wrap;
|
||||||
|
align-items:stretch;
|
||||||
|
justify-content:space-around;
|
||||||
|
}
|
||||||
|
.foot-list{
|
||||||
|
float:left;
|
||||||
|
width:200px;
|
||||||
|
}
|
||||||
|
.foot-list-title{
|
||||||
|
font-weight:400;
|
||||||
|
margin-bottom:10px;
|
||||||
|
padding:0.5em 0;
|
||||||
|
}
|
||||||
|
.foot-list-item{
|
||||||
|
color:rgba(238, 238, 238, 0.8);
|
||||||
|
font-size:0.8em;
|
||||||
|
padding:0.5em 0;
|
||||||
|
}
|
||||||
|
.foot-list-item:hover{
|
||||||
|
color:rgba(238, 238, 238, 1);
|
||||||
|
}
|
||||||
|
.foot-form-cont{
|
||||||
|
width:300px;
|
||||||
|
float:right;
|
||||||
|
}
|
||||||
|
.foot-form-title{
|
||||||
|
color:rgba(255,255,255,0.75);
|
||||||
|
font-weight:400;
|
||||||
|
margin-bottom:10px;
|
||||||
|
padding:0.5em 0;
|
||||||
|
text-align:right;
|
||||||
|
font-size:2em;
|
||||||
|
}
|
||||||
|
.form{
|
||||||
|
border-radius:3px;
|
||||||
|
padding:10px 15px;
|
||||||
|
background-color:rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
.input{
|
||||||
|
width:100%;
|
||||||
|
margin-bottom:15px;
|
||||||
|
padding:7px 10px;
|
||||||
|
border-radius:2px;
|
||||||
|
color:#fff;
|
||||||
|
background-color:#554c57;
|
||||||
|
border:none;
|
||||||
|
align-items:flex-start;
|
||||||
|
justify-content:flex-start;
|
||||||
|
flex-direction:row;
|
||||||
|
align-self:auto;
|
||||||
|
margin:15px 0 15px 0;
|
||||||
|
height:32px;
|
||||||
|
}
|
||||||
|
.sub-input{
|
||||||
|
width:100%;
|
||||||
|
margin-bottom:15px;
|
||||||
|
padding:7px 10px;
|
||||||
|
border-radius:2px;
|
||||||
|
color:#fff;
|
||||||
|
background-color:#554c57;
|
||||||
|
border:none;
|
||||||
|
}
|
||||||
|
.label{
|
||||||
|
width:100%;
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
.button{
|
||||||
|
width:100%;
|
||||||
|
margin:15px 0;
|
||||||
|
background-color:#785580;
|
||||||
|
border:none;
|
||||||
|
color:#fff;
|
||||||
|
border-radius:2px;
|
||||||
|
padding:7px 10px;
|
||||||
|
font-size:1em;
|
||||||
|
cursor:pointer;
|
||||||
|
align-items:flex-start;
|
||||||
|
align-self:flex-start;
|
||||||
|
}
|
||||||
|
.sub-btn{
|
||||||
|
width:100%;
|
||||||
|
margin:15px 0;
|
||||||
|
background-color:#785580;
|
||||||
|
border:none;
|
||||||
|
color:#fff;
|
||||||
|
border-radius:2px;
|
||||||
|
padding:7px 10px;
|
||||||
|
font-size:1em;
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
.sub-btn:hover{
|
||||||
|
background-color:#91699a;
|
||||||
|
}
|
||||||
|
.sub-btn:active{
|
||||||
|
background-color:#573f5c;
|
||||||
|
}
|
||||||
|
.row{
|
||||||
|
display:flex;
|
||||||
|
justify-content:flex-start;
|
||||||
|
align-items:stretch;
|
||||||
|
flex-wrap:nowrap;
|
||||||
|
padding:10px;
|
||||||
|
}
|
||||||
|
.cell{
|
||||||
|
min-height:75px;
|
||||||
|
flex-grow:1;
|
||||||
|
flex-basis:100%;
|
||||||
|
}
|
||||||
|
#ianajd{
|
||||||
|
padding:10px;
|
||||||
|
}
|
||||||
|
#ipah9l{
|
||||||
|
align-items:stretch;
|
||||||
|
}
|
||||||
|
#in2itk{
|
||||||
|
flex-basis:286%;
|
||||||
|
}
|
||||||
|
#ilxqxl{
|
||||||
|
padding:10px;
|
||||||
|
}
|
||||||
|
#imc13f{
|
||||||
|
padding:10px;
|
||||||
|
}
|
||||||
|
#ibppca{
|
||||||
|
padding:10px;
|
||||||
|
}
|
||||||
|
#ictkx3{
|
||||||
|
padding:10px;
|
||||||
|
float:none;
|
||||||
|
font-weight:900;
|
||||||
|
text-align:center;
|
||||||
|
font-size:72px;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px){
|
||||||
|
.foot-form-cont{
|
||||||
|
width:400px;
|
||||||
|
}
|
||||||
|
.foot-form-title{
|
||||||
|
width:autopx;
|
||||||
|
}
|
||||||
|
.row{
|
||||||
|
flex-wrap:wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 480px){
|
||||||
|
.foot-lists{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,15 +1,175 @@
|
|||||||
<head>
|
<header class="header-banner">
|
||||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
|
<link rel="stylesheet" type="text/css" href="index.css">
|
||||||
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
|
<div class="container-width">
|
||||||
</script>
|
<div class="logo-container">
|
||||||
<script src="./index.js"></script>
|
</div>
|
||||||
</head>
|
<nav class="menu">
|
||||||
<body>
|
</nav>
|
||||||
<title>Debug</title>
|
<div class="clearfix">
|
||||||
<input type="text" id="location" /> <input type="button" value="send" onclick="send()" /><input type="button" value="get" onclick="get()" />
|
</div>
|
||||||
</br>
|
<div class="lead-title">Embezzle
|
||||||
<input type="text" id="name" value="Name" />
|
</div>
|
||||||
<input type="text" id="ownerID" value="ownerID" />
|
</div>
|
||||||
<input type="text" id="gameID" value="gameID" />
|
</header>
|
||||||
<input type="text" id="seats" value="seats" />
|
<footer class="footer-under">
|
||||||
</body>
|
<form method="post" action="localhost:3001/lobby/register" class="form register">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="label">Name</label>
|
||||||
|
<input placeholder="Type here your name" class="input"/>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<button type="submit" class="button">Register</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<form method="post" action="http://localhost:3001/make" class="form">
|
||||||
|
<div class="form-group">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="label">Number of Seats on the Board<br/></label>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
</div>
|
||||||
|
<input type="number" class="input"/>
|
||||||
|
<div class="form-group">
|
||||||
|
<button type="submit" class="button">Send</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<form method="post" action="http://localhost:3001/lobby/join" class="form game-list">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="label">Game List<br/></label>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
</div>
|
||||||
|
<div class="form-group jsme">
|
||||||
|
<button type="submit" class="button">Name</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<form method="post" action="http://localhost:3001/lobby/join" class="form game-list">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="label">Lobby<br draggable="true" id="il3dmw-2-2"/></label>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
</div>
|
||||||
|
<div id="ilxqxl">Players:
|
||||||
|
<br/>
|
||||||
|
</div>
|
||||||
|
<div class="row" id="it1ua4">
|
||||||
|
<div class="cell" id="in2itk">
|
||||||
|
</div>
|
||||||
|
<div class="cell" id="ibmekl">
|
||||||
|
<button type="submit" class="button">Start</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div class="row">
|
||||||
|
<div class="cell" id="ijy5cf">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="cell" id="izmpsu">
|
||||||
|
<div id="imc13f">Players:
|
||||||
|
<br/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cell" id="ig7981">
|
||||||
|
<form class="form">
|
||||||
|
<div class="form-group">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="label">Donate<br/></label>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="row jsme" id="iu7my2">
|
||||||
|
<div class="cell" id="ipah9l">
|
||||||
|
<input type="number" class="input"/>
|
||||||
|
</div>
|
||||||
|
<div class="cell">
|
||||||
|
<button class="button">Send</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="cell" id="i5yvnh">
|
||||||
|
<div id="ianajd">
|
||||||
|
<div>Donation Log
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row" id="i3kiue">
|
||||||
|
<div class="cell" id="i5y7xs">
|
||||||
|
<button class="button">Send</button>
|
||||||
|
</div>
|
||||||
|
<div class="cell" id="ihhmej">
|
||||||
|
<div id="ibppca">
|
||||||
|
<div draggable="true" id="iuvwil-2">Accusations
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="cell" id="is596z">
|
||||||
|
<div id="ictkx3">Winner
|
||||||
|
<br/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container-width">
|
||||||
|
<div class="footer-container">
|
||||||
|
<div class="foot-lists">
|
||||||
|
<div class="foot-list">
|
||||||
|
<div class="foot-list-title">About us
|
||||||
|
</div>
|
||||||
|
<div class="foot-list-item">Code
|
||||||
|
<br/>
|
||||||
|
</div>
|
||||||
|
<div class="foot-list-item">
|
||||||
|
<div>Blog
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="foot-list-item">Donate
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="foot-list">
|
||||||
|
<div class="foot-list-title">Services
|
||||||
|
</div>
|
||||||
|
<div class="foot-list-item">Community
|
||||||
|
</div>
|
||||||
|
<div class="foot-list-item">
|
||||||
|
<div>Self-Host
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="clearfix">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-sub">
|
||||||
|
<div class="foot-form-cont">
|
||||||
|
<div class="foot-form-title">
|
||||||
|
<div>Give me your details
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input name="name" placeholder="Name" class="sub-input"/>
|
||||||
|
<input name="email" placeholder="Email" class="sub-input"/>
|
||||||
|
<input name="Secret" placeholder="Deepest Darkest Secret" class="sub-input"/>
|
||||||
|
<button type="button" class="sub-btn">Submit</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
@ -1,30 +1,3 @@
|
|||||||
url="http://127.0.0.1:3000"
|
fetch().then(result => {
|
||||||
|
console.log("Do the thing")
|
||||||
function send() {
|
})
|
||||||
data = {name: $('#name').val(), ownerID: $("#ownerID").val(), gameID: $("#gameID").val(), seats: $("#seats").val()}
|
|
||||||
console.log(JSON.stringify(data))
|
|
||||||
let xhr = new XMLHttpRequest();
|
|
||||||
xhr.open("POST", url + "/" + $('#location').val(), true)
|
|
||||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
||||||
xhr.onreadystatechange = function () {
|
|
||||||
if (xhr.readyState == 4 && xhr.status == 200) {
|
|
||||||
|
|
||||||
console.log(JSON.parse(xhr.responseText))
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
xhr.send(JSON.stringify(data))
|
|
||||||
}
|
|
||||||
|
|
||||||
function get() {
|
|
||||||
let xhr = new XMLHttpRequest();
|
|
||||||
xhr.open("GET", url + "/" + $('#location').val(), true)
|
|
||||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
||||||
xhr.onreadystatechange = function () {
|
|
||||||
if (xhr.readyState == 4 && xhr.status == 200) {
|
|
||||||
console.log(JSON.parse(xhr.responseText))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
xhr.send()
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user