adam/SotM_Playfield
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Initial setup for multiple decks

Browse Source
This commit is contained in:
Adam Goldsmith 2017-09-20 18:10:37 -04:00
parent 802f76db8a
commit 906339debb
2 changed files with 90 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
script.js
View File

@ -2,7 +2,6 @@ let deckName, deckJSON, cardCount, deckWidth, deckHeight,
piles = {'deck': [], discard: []}; piles = {'deck': [], discard: []};
window.addEventListener('load', () => { window.addEventListener('load', () => {
deckName = document.querySelector('#card-container').getAttribute("data-deckName");
let xhr = new XMLHttpRequest(); let xhr = new XMLHttpRequest();
xhr.addEventListener("load", () => { xhr.addEventListener("load", () => {
deckJSON = JSON.parse(xhr.responseText); deckJSON = JSON.parse(xhr.responseText);
@ -13,7 +12,8 @@ window.addEventListener('load', () => {
deckHeight = deckJSON.ObjectStates[0].CustomDeck["1"].NumHeight; deckHeight = deckJSON.ObjectStates[0].CustomDeck["1"].NumHeight;
console.log(deckName); 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(); xhr.send();
}); });
@ -85,7 +85,7 @@ interact('.card-pile')
newCard.style.backgroundPosition = ` newCard.style.backgroundPosition = `
${(cardNum % deckWidth) * parseInt(style.getPropertyValue("width"))}px ${(cardNum % deckWidth) * parseInt(style.getPropertyValue("width"))}px
${Math.floor(cardNum/deckHeight) * parseInt(style.getPropertyValue("height"))}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}%`; newCard.style.backgroundSize = `${deckWidth * 100}% ${deckHeight * 100}%`;
// insert the card to the page // insert the card to the page

133
server.js
View File

@ -3,70 +3,95 @@
"use strict"; "use strict";
const http = require('http'), const http = require('http'),
qs = require('querystring'),
fs = require('fs'), fs = require('fs'),
url = require('url'), url = require('url'),
https = require('https'),
port = 8080; port = 8080;
const deckName = "the_Unholy_Priest_update_2";
const server = http.createServer((req, res) => { const server = http.createServer((req, res) => {
const uri = url.parse(req.url); const uri = url.parse(req.url);
if (req.method === 'POST') { let pathParts = uri.pathname.split("/");
handlePost(res, req, uri); switch (pathParts[1]) {
} case '':
else { case 'index.html':
switch( uri.pathname ) { sendIndex(res);
case '/': break;
case '/index.html': case 'style.css':
sendIndex(res, ""); sendFile(res, 'style.css', 'text/css');
break; break;
case '/style.css': case 'script.js':
sendFile(res, 'style.css', 'text/css'); sendFile(res, 'script.js', 'application/javascript');
break; break;
case '/script.js': case 'interact.js':
sendFile(res, 'script.js', 'application/javascript'); sendFile(res, 'interact.js', 'application/javascript');
break; break;
case '/interact.js': case 'deck':
sendFile(res, 'interact.js', 'application/javascript'); if (pathParts.length === 3) {
break; let deckName = pathParts[2];
case '/' + deckName + '.png': sendDeckIndex(res, deckName);
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');
} }
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); server.listen(process.env.PORT || port);
console.log('listening on 8080'); console.log('listening on 8080');
function sendIndex(res) { 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 = ` const html = `
<html> <html>
<head> <head>
<script src="interact.js"></script> <script src="/interact.js"></script>
<script src="script.js"></script> <script src="/script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="/style.css">
</head> </head>
<body> <body>
<div id="card-container" data-deckName="${deckName}"> <div id="card-container" data-deckName="${deckName}">
@ -80,6 +105,22 @@ function sendIndex(res) {
res.end(html, 'utf-8'); 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') { function sendFile(res, filename, contentType='text/html; charset=utf-8') {
fs.readFile(filename, (error, content) => { fs.readFile(filename, (error, content) => {
res.writeHead(200, {'Content-type': contentType}); res.writeHead(200, {'Content-type': contentType});