jrtechs
/
jrtechs-GoogleTrendsGame
mirror of https://github.com/jrtechs/GoogleTrendsGame.git
1
0
Fork 0
Code Issues 0 Releases 0 Wiki Activity
Browse Source

Implemented using a templating system for the html generation.

master
jrtechs 5 years ago
parent
4d98290b43
commit
e2cd7ddef3
6 changed files with 130 additions and 5 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +9
    -0
      googletrendsgame/JQueryReWork/html/footer.html
  2. +54
    -0
      googletrendsgame/JQueryReWork/html/game.html
  3. +18
    -0
      googletrendsgame/JQueryReWork/html/header.html
  4. +0
    -0
      googletrendsgame/JQueryReWork/html/lobby.html
  5. +5
    -0
      googletrendsgame/JQueryReWork/html/mainTemplate.html
  6. +44
    -5
      googletrendsgame/JQueryReWork/server.js

+ 9
- 0
googletrendsgame/JQueryReWork/html/footer.html View File

@ -0,0 +1,9 @@
</body>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- / -->
</html>

+ 54
- 0
googletrendsgame/JQueryReWork/html/game.html View File

@ -0,0 +1,54 @@
<div class="">
<div class="row w-100">
<div class="col-12">
<div class="logo w-100">trend spot</div>
</div>
</div>
<div class="row">
<!-- Main -->
<div class="col-8 game__main">
<div class="game__round">Round 4/7</div>
<div class="row w-100">
<div class="col-8">
<input class="w-100 game__phrase--entry" type="text">
</div>
<div class="col-4">
<div class="game__phrase--clue">car</div>
</div>
</div>
<button class="game__submit">Submit my answer!</button>
<!--<div class="game__user-score">jesseg89: 20,005 points</div>-->
<div class="game__room">You're in <em>dave61's room</em> | 12/20 players</div>
<a href="lobby.html" class="game__exit">Leave Game</a>
</div>
<!-- / -->
<div class="col-4 col-sm-3 game__sidebar">
<div class="game__timer">60 seconds</div>
<ol class="game__players">
<li class="game__player">
<span class="game__player-name">John Daniels</span>
<span class="game__player-score">10,000 points</span>
<span class="game__player-ready">X</span>
</li>
<li class="game__player">
<span class="game__player-name">John Daniels</span>
<span class="game__player-score">10,000 points</span>
<span class="game__player-ready">X</span>
</li>
<li class="game__player">
<span class="game__player-name">John Daniels</span>
<span class="game__player-score">10,000 points</span>
<span class="game__player-ready">X</span>
</li>
</ol>
</div>
</div>
</div>

+ 18
- 0
googletrendsgame/JQueryReWork/html/header.html View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>Trend Spotter | Game</title>
<!-- / -->
<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,300,400,500,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="app.css">
<!-- / -->
</head>
<body>

+ 0
- 0
googletrendsgame/JQueryReWork/html/lobby.html View File


+ 5
- 0
googletrendsgame/JQueryReWork/html/mainTemplate.html View File

@ -0,0 +1,5 @@
{>header}
{>mainContent}
{>footer}

+ 44
- 5
googletrendsgame/JQueryReWork/server.js View File

@ -25,19 +25,58 @@ const PORT = 5000;
const whiskers = require('whiskers'); const whiskers = require('whiskers');
function fetchHTML(templateContext, templateKey, filename)
function fetchHTMLInTemplateContext(templateContext, templateKey, filename)
{ {
templateContext[templateKey] = fs.readFileSync(filename)
templateContext[templateKey] = fetchFile(filename);
}
function fetchFile(filename)
{
return fs.readFileSync(filename);
}
function fetchLobby(templateContext)
{
}
function fetchGame(templateContext)
{
}
function processPage(result, pageHTMLFile, templateFillerFunction)
{
var templateContext = new Object();
var promises = [
fetchFile("./html/mainTemplate.html"),
templateFillerFunction(templateContext),
fetchHTMLInTemplateContext(templateContext, "header", "./html/header.html"),
fetchHTMLInTemplateContext(templateContext, "footer", "./html/footer.html"),
fetchHTMLInTemplateContext(templateContext, "mainContent", "./html/" + pageHTMLFile)
];
Promise.all(promises).then(function(resultArray)
{
result.write(whiskers.render(resultArray[0], templateContext));
result.end();
});
} }
app.get('/', (requst, result) => app.get('/', (requst, result) =>
{ {
result.write(fs.readFileSync("./html/home.html"));
result.end();
processPage(result, "lobby.html", fetchLobby);
}); });
app.get('/game', (request, result)=>
{
processPage(result, "game.html", fetchLobby);
});
app.use(express.static('css')); app.use(express.static('css'));
app.use(express.static('js')); app.use(express.static('js'));

Write Preview
Loading…
Cancel
Save