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