Initial setup for multiple decks
This commit is contained in:
parent
802f76db8a
commit
906339debb
@ -2,7 +2,6 @@ let deckName, deckJSON, cardCount, deckWidth, deckHeight,
|
||||
piles = {'deck': [], discard: []};
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
deckName = document.querySelector('#card-container').getAttribute("data-deckName");
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.addEventListener("load", () => {
|
||||
deckJSON = JSON.parse(xhr.responseText);
|
||||
@ -13,7 +12,8 @@ window.addEventListener('load', () => {
|
||||
deckHeight = deckJSON.ObjectStates[0].CustomDeck["1"].NumHeight;
|
||||
console.log(deckName);
|
||||
});
|
||||
xhr.open("GET", "/" + deckName + ".json");
|
||||
deckName = document.querySelector('#card-container').getAttribute("data-deckName");
|
||||
xhr.open("GET", "/deck/" + deckName + "/deck.json");
|
||||
xhr.send();
|
||||
});
|
||||
|
||||
@ -85,7 +85,7 @@ interact('.card-pile')
|
||||
newCard.style.backgroundPosition = `
|
||||
${(cardNum % deckWidth) * parseInt(style.getPropertyValue("width"))}px
|
||||
${Math.floor(cardNum/deckHeight) * parseInt(style.getPropertyValue("height"))}px`;
|
||||
newCard.style.backgroundImage = `url('${deckName}.png')`;
|
||||
newCard.style.backgroundImage = "url('deck.png')";
|
||||
newCard.style.backgroundSize = `${deckWidth * 100}% ${deckHeight * 100}%`;
|
||||
|
||||
// insert the card to the page
|
||||
|
133
server.js
133
server.js
@ -3,70 +3,95 @@
|
||||
"use strict";
|
||||
|
||||
const http = require('http'),
|
||||
qs = require('querystring'),
|
||||
fs = require('fs'),
|
||||
url = require('url'),
|
||||
https = require('https'),
|
||||
port = 8080;
|
||||
|
||||
const deckName = "the_Unholy_Priest_update_2";
|
||||
|
||||
const server = http.createServer((req, res) => {
|
||||
const uri = url.parse(req.url);
|
||||
|
||||
if (req.method === 'POST') {
|
||||
handlePost(res, req, uri);
|
||||
}
|
||||
else {
|
||||
switch( uri.pathname ) {
|
||||
case '/':
|
||||
case '/index.html':
|
||||
sendIndex(res, "");
|
||||
break;
|
||||
case '/style.css':
|
||||
sendFile(res, 'style.css', 'text/css');
|
||||
break;
|
||||
case '/script.js':
|
||||
sendFile(res, 'script.js', 'application/javascript');
|
||||
break;
|
||||
case '/interact.js':
|
||||
sendFile(res, 'interact.js', 'application/javascript');
|
||||
break;
|
||||
case '/' + deckName + '.png':
|
||||
sendFile(res, deckName + '.png', 'image/png');
|
||||
break;
|
||||
case '/' + deckName + '.json':
|
||||
sendFile(res, deckName + '.json', 'application/json');
|
||||
break;
|
||||
default:
|
||||
res.writeHead(404, {'Content-type': "text/html; charset=utf-8"});
|
||||
const html = `
|
||||
<head>
|
||||
<title>404 Not Found</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Error 404: Path ${uri.pathname} not found</h1>
|
||||
You seem to have gone to the wrong place, would you like to go
|
||||
back to the <a href="/">main page</a>?
|
||||
</body>`;
|
||||
res.end(html, 'utf-8');
|
||||
let pathParts = uri.pathname.split("/");
|
||||
switch (pathParts[1]) {
|
||||
case '':
|
||||
case 'index.html':
|
||||
sendIndex(res);
|
||||
break;
|
||||
case 'style.css':
|
||||
sendFile(res, 'style.css', 'text/css');
|
||||
break;
|
||||
case 'script.js':
|
||||
sendFile(res, 'script.js', 'application/javascript');
|
||||
break;
|
||||
case 'interact.js':
|
||||
sendFile(res, 'interact.js', 'application/javascript');
|
||||
break;
|
||||
case 'deck':
|
||||
if (pathParts.length === 3) {
|
||||
let deckName = pathParts[2];
|
||||
sendDeckIndex(res, deckName);
|
||||
}
|
||||
else if (pathParts.length === 4) {
|
||||
let deckName = pathParts[2];
|
||||
switch (pathParts[3]) {
|
||||
case 'play':
|
||||
sendPlayfield(res, deckName);
|
||||
break;
|
||||
case 'deck.png':
|
||||
sendFile(res, deckName + '.png', 'image/png');
|
||||
break;
|
||||
case 'deck.json':
|
||||
sendFile(res, deckName + '.json', 'application/json');
|
||||
break;
|
||||
default:
|
||||
send404(res, uri);
|
||||
}
|
||||
}
|
||||
break;
|
||||
default:
|
||||
send404(res, uri);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
server.listen(process.env.PORT || port);
|
||||
console.log('listening on 8080');
|
||||
|
||||
function sendIndex(res) {
|
||||
let cards = [];
|
||||
const html = `
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li><a href="deck/the_Unholy_Priest_update_2">the_Unholy_Priest_update_2</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>`;
|
||||
res.writeHead(200, {'contentType': 'text/html; charset=utf-8'});
|
||||
res.end(html, 'utf-8');
|
||||
}
|
||||
|
||||
function sendDeckIndex(res, deckName) {
|
||||
const html = `
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<a href="${deckName}/play">Play!</a>
|
||||
</body>
|
||||
</html>`;
|
||||
res.writeHead(200, {'contentType': 'text/html; charset=utf-8'});
|
||||
res.end(html, 'utf-8');
|
||||
}
|
||||
|
||||
function sendPlayfield(res, deckName) {
|
||||
const html = `
|
||||
<html>
|
||||
<head>
|
||||
<script src="interact.js"></script>
|
||||
<script src="script.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<script src="/interact.js"></script>
|
||||
<script src="/script.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="card-container" data-deckName="${deckName}">
|
||||
@ -80,6 +105,22 @@ function sendIndex(res) {
|
||||
res.end(html, 'utf-8');
|
||||
}
|
||||
|
||||
|
||||
function send404(res, uri) {
|
||||
res.writeHead(404, {'Content-type': "text/html; charset=utf-8"});
|
||||
const html = `
|
||||
<head>
|
||||
<title>404 Not Found</title>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Error 404: Path ${uri.pathname} not found</h1>
|
||||
You seem to have gone to the wrong place, would you like to go
|
||||
back to the <a href="/">main page</a>?
|
||||
</body>`;
|
||||
res.end(html, 'utf-8');
|
||||
}
|
||||
|
||||
function sendFile(res, filename, contentType='text/html; charset=utf-8') {
|
||||
fs.readFile(filename, (error, content) => {
|
||||
res.writeHead(200, {'Content-type': contentType});
|
||||
|
Loading…
Reference in New Issue
Block a user