initial commit
This commit is contained in:
schrom01
commit
ef9451f59a
|
|
@ -0,0 +1,113 @@
|
|||
/**
|
||||
* Webservice mit Express
|
||||
* WBE-Praktikum
|
||||
*/
|
||||
|
||||
var express = require('express')
|
||||
var app = express()
|
||||
|
||||
// Fehlerobjekt anlegen
|
||||
//
|
||||
function error(status, msg) {
|
||||
var err = new Error(msg)
|
||||
err.status = status
|
||||
return err
|
||||
}
|
||||
|
||||
// Zufällige ID erzeugen, Quelle:
|
||||
// https://stackoverflow.com/questions/6860853/generate-random-string-for-div-id#6860916
|
||||
//
|
||||
function guidGenerator() {
|
||||
var S4 = function() {
|
||||
return (((1+Math.random())*0x10000)|0).toString(16).substring(1)
|
||||
}
|
||||
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4())
|
||||
}
|
||||
|
||||
// Statische Dateien im Verzeichnis public
|
||||
app.use(express.static('public'))
|
||||
|
||||
// API-Key überprüfen
|
||||
//
|
||||
app.use('/api', function(req, res, next){
|
||||
var key = req.query['api-key']
|
||||
|
||||
// Key fehlt
|
||||
if (!key) {
|
||||
return next(error(400, 'api key required'))
|
||||
}
|
||||
// Key falsch
|
||||
if (!~apiKeys.indexOf(key)) {
|
||||
return next(error(401, 'invalid api key'))
|
||||
}
|
||||
// korrekter Key
|
||||
req.key = key
|
||||
next()
|
||||
})
|
||||
|
||||
// JSON-Daten akzeptieren
|
||||
app.use(express.json())
|
||||
|
||||
// gültige API-Keys
|
||||
var apiKeys = ['wbeweb', 'c4game']
|
||||
|
||||
// unsere tolle in-memory Datenbank :)
|
||||
var data = {1234567890: {demodata: "wbe is an inspiring challenge"}}
|
||||
|
||||
// GET-Request bearbeiten
|
||||
//
|
||||
app.get('/api/data/:id', function(req, res, next){
|
||||
var id = req.params.id
|
||||
var result = data[id]
|
||||
|
||||
if (result) res.send(result)
|
||||
else next()
|
||||
})
|
||||
|
||||
// POST-Request bearbeiten
|
||||
//
|
||||
app.post('/api/data', function (req, res, next) {
|
||||
let id = guidGenerator()
|
||||
data[id] = req.body
|
||||
res.send({id})
|
||||
})
|
||||
|
||||
// DELETE-Request bearbeiten
|
||||
//
|
||||
app.delete('/api/data/:id', function(req, res, next){
|
||||
var id = req.params.id
|
||||
delete data[id]
|
||||
res.sendStatus(204)
|
||||
})
|
||||
|
||||
// PUT-Request bearbeiten
|
||||
//
|
||||
app.put('/api/data/:id', function(req, res, next){
|
||||
var id = req.params.id
|
||||
if (data[id]) {
|
||||
data[id] = req.body
|
||||
res.send(req.body)
|
||||
}
|
||||
else next()
|
||||
})
|
||||
|
||||
// Middleware mit vier Argumenten wird zur Fehlerbehandlung verwendet
|
||||
//
|
||||
app.use(function(err, req, res, next){
|
||||
res.status(err.status || 500)
|
||||
res.send({ error: err.message })
|
||||
})
|
||||
|
||||
// Catch-all: wenn keine vorangehende Middleware geantwortet hat, wird
|
||||
// hier ein 404 (not found) erzeugt
|
||||
//
|
||||
app.use(function(req, res){
|
||||
res.status(404)
|
||||
res.send({ error: "not found" })
|
||||
})
|
||||
|
||||
app.listen(3000)
|
||||
console.log('Express started on port 3000')
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"name": "expresso",
|
||||
"version": "1.0.0",
|
||||
"description": "Express Demo Project",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "your name",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"express": "^4.17.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Vier gewinnt</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script>
|
||||
|
||||
/*
|
||||
* This solution sould be considered as a proof of concept – the code
|
||||
* definitely needs some cleanup and documentation
|
||||
*/
|
||||
|
||||
let state = {
|
||||
board: [
|
||||
[ '', '', '', '', '', '', '' ],
|
||||
[ '', '', '', '', '', '', '' ],
|
||||
[ '', '', '', '', '', '', '' ],
|
||||
[ '', '', '', '', '', '', '' ],
|
||||
[ '', '', '', '', '', '', '' ],
|
||||
[ '', '', '', '', '', '', '' ]
|
||||
],
|
||||
next: 'b'
|
||||
}
|
||||
|
||||
const SERVICE = "http://localhost:3000/api/data/c4state?api-key=c4game"
|
||||
|
||||
|
||||
// Initialize game
|
||||
//
|
||||
function initGame () {
|
||||
let board = showBoard()
|
||||
attachEventHandler(board)
|
||||
}
|
||||
|
||||
|
||||
// Show board
|
||||
//
|
||||
function showBoard () {
|
||||
let board = document.querySelector(".board")
|
||||
|
||||
// first remove all fields
|
||||
while (board.firstChild) { board.removeChild(board.firstChild) }
|
||||
|
||||
// ...
|
||||
// your implementation
|
||||
// ...
|
||||
|
||||
return board
|
||||
}
|
||||
|
||||
|
||||
// Helper function for DOM manipulation
|
||||
//
|
||||
function elt (type, attrs, ...children) {
|
||||
let node = document.createElement(type)
|
||||
for (a in attrs) {
|
||||
node.setAttribute(a, attrs[a])
|
||||
}
|
||||
for (let child of children) {
|
||||
if (typeof child != "string") node.appendChild(child)
|
||||
else node.appendChild(document.createTextNode(child))
|
||||
}
|
||||
return node
|
||||
}
|
||||
|
||||
|
||||
// Attach event handler to board
|
||||
//
|
||||
function attachEventHandler (board) {
|
||||
board.addEventListener("click", (e) => {
|
||||
|
||||
// ...
|
||||
// your implementation
|
||||
// ...
|
||||
|
||||
showBoard()
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// Get current state from server and re-draw board
|
||||
//
|
||||
function loadState () {
|
||||
|
||||
// ...
|
||||
// your implementation
|
||||
// ...
|
||||
|
||||
}
|
||||
|
||||
// Put current state to server
|
||||
//
|
||||
function saveState () {
|
||||
|
||||
// ...
|
||||
// your implementation
|
||||
// ...
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="board"></div>
|
||||
|
||||
<div class="controls">
|
||||
<button onclick="loadState()">Load</button>
|
||||
<button onclick="saveState()">Save</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
initGame()
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.board {
|
||||
width: 84vmin;
|
||||
margin: auto;
|
||||
outline: 1px solid black;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.inactive {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.board .field {
|
||||
border: 1px solid black;
|
||||
width: 12vmin;
|
||||
height: 12vmin;
|
||||
}
|
||||
|
||||
.board .field .piece {
|
||||
width: 10vmin;
|
||||
height: 10vmin;
|
||||
border-radius: 50%;
|
||||
margin: 1vmin;
|
||||
}
|
||||
.board .field .blue {
|
||||
background-color: blue;
|
||||
}
|
||||
.board .field .red {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.controls {
|
||||
text-align: center;
|
||||
}
|
||||
.controls button {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.message {
|
||||
text-align: center;
|
||||
margin-top: 2em;
|
||||
}
|
||||
Binary file not shown.
Loading…
Reference in New Issue