diff --git a/README.md b/README.md index 758ee98..efb8263 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,6 @@ server -> game gameId: id gameState: { tiles: [] - } } ``` @@ -97,6 +96,10 @@ Install the following into your nginx server configuration: proxy_set_header Connection "upgrade"; proxy_pass http://localhost:8930; } + + location /ketr.ketran { + alias /var/www/html/peddlers-of-ketran; + } ``` Add security tokens in ketr.ketran/config/local.json: @@ -121,11 +124,11 @@ sudo systemctl start ketr.ketran ### New game ```bash -curl -k -s -X POST http://localhost:8911/ketr.ketran/api/v1/games/ +curl -k -s -X POST http://localhost:8930/ketr.ketran/api/v1/games/ ``` ### Game status ```bash -curl -k -s -X GET http://localhost:8911/ketr.ketran/api/v1/games/:id +curl -k -s -X GET http://localhost:8930/ketr.ketran/api/v1/games/:id ``` diff --git a/config/default.json b/config/default.json index 4a6a93f..9531080 100755 --- a/config/default.json +++ b/config/default.json @@ -14,7 +14,7 @@ } }, "server": { - "port": 8911 + "port": 8930 }, "frontendPath": "./", "basePath": "/ketr.ketran", diff --git a/src/Board.js b/src/Board.js index 51ea891..51b908b 100755 --- a/src/Board.js +++ b/src/Board.js @@ -427,7 +427,7 @@ class Board extends React.Component { const base = document.querySelector("base"); window.location.href = base ? base.href : "/"; console.log(`Unable to find game ${props.match.params.id}`); - throw `Unable to find requested game. Staring new one.`; + throw `Unable to find requested game ${props.match.params.id}. Starting new one.`; } return res.json(); }).then((game) => { @@ -460,7 +460,7 @@ class Board extends React.Component { this.loadTimer = null; } - if (!this.state.game) { + if (this.state.game) { return; } diff --git a/src/WaveBalls.js b/src/WaveBalls.js deleted file mode 100644 index 08816b4..0000000 --- a/src/WaveBalls.js +++ /dev/null @@ -1,190 +0,0 @@ -import React, { useState, useEffect } from "react"; - -class WaveBalls extends React.Component { - constructor(props) { - super(props); - this.componentDidMount = this.componentDidMount.bind(this); - this.updateDimensions = this.updateDimensions.bind(this); - this.updatePositions = this.updatePositions.bind(this); - this.updateFrame = this.updateFrame.bind(this); - this.drawFrame = this.drawFrame.bind(this); - this.mouseMove = this.mouseMove.bind(this); - this.mouse = { x: 0, y: 0 }; - } - - mouseMove(event) { - const rect = this.canvas.parentElement.getBoundingClientRect(); - this.mouse.x = (event.clientX - rect.left) / this.width; - this.mouse.y = (event.clientY - rect.top) / this.height; - } - - updateDimensions() { - if (this.updateSizeTimer) { - clearTimeout(this.updateSizeTimer); - } else { - const ctx = this.canvas.getContext("2d"); - ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - } - - this.updateSizeTimer = setTimeout(() => { - this.canvas.width = this.canvas.offsetWidth; - this.canvas.height = this.canvas.offsetHeight; - this.width = this.canvas.parentElement.clientWidth; - this.height = this.canvas.parentElement.clientHeight; - this.updateSizeTimer = 0; - this.updateFrame(); - }, 250); - } - - /* Max framerate of 30FPS, regardless of display frame rate to prevent UX starvation. - * - * If a frame render has not been requested, request the frame to be drawn at the next - * opportunity */ - updateFrame() { - if (this.updateFrameTimeout || !this.canvas) { - return; - } - - const isVisible = window.getComputedStyle(this.canvas).opacity != 0; - /* If the WaveBalls are not faded completely out, update ball - * positions and scheduel a render, which will then set a new - * timeout for updateFrame(). - * - * Otherwise schedule another a check in 250ms to see if the - * window is now visible */ - if (isVisible) { - this.updatePositions(); - window.requestAnimationFrame(this.drawFrame); - } else { - this.updateFrameTimeout = setTimeout(() => { - this.updateFrameTimeout = 0; - this.updateFrame(); - }, 250); - } - } - - drawFrame() { - if (!this.canvas) { - return; - } - - const ctx = this.canvas.getContext("2d"); - ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - - /* If the window is being resized, don't render balls as - * they will have a distorted aspect ratio until the canvas - * width re-snaps to the new dimensions */ - if (!this.updateSizeTimer) { - this.balls.forEach((ball) => { - ctx.beginPath(); - ctx.fillStyle = ball.color; - ctx.arc(ball.pos.x, ball.pos.y, ball.size, 0, 2 * Math.PI); - ctx.fill(); - }); - } - - this.updateFrameTimeout = setTimeout(() => { - this.updateFrameTimeout = 0; - this.updateFrame(); - }, 1000 / 30); - } - - updatePositions() { - if (!this.canvas) { - return; - } - - const interval = 20000, - alpha = ((Date.now() - this.start.getTime()) % interval) / interval, - sun = { r: 0xFC, g: 0xD4, b: 0x40 }, - normal = { r: 197, g: 197, b: 197 }, - gravity = 0.5; - - this.balls.forEach((ball) => { - ball.alpha.x = ball.start - alpha; - if (ball.alpha.x < 0.) { - ball.alpha.x += 1.; - } - - ball.opacity.current = 0.5 * Math.cos(8. * (alpha - ball.opacity.start) * Math.PI); - ball.pos.x = ball.alpha.x; - ball.pos.y = - (0.187 * Math.cos(2. * Math.PI * (alpha - ball.alpha.x)) + - (0.5 + ball.offset + ball.alpha.y * Math.sin(4. * Math.PI * (alpha - ball.alpha.x)) * 0.5)); - - /* Gravity influence needs to ramp to 0 near alpha [0, 1] borders */ - const localGravity = gravity * (1. - Math.pow(Math.abs(ball.pos.x - 0.5) / 0.5, 2)), - alphaDistance = 1. - Math.min(Math.sqrt(Math.pow(ball.pos.x - this.mouse.x, 2) + Math.pow(ball.pos.y - this.mouse.y, 2)), localGravity) / localGravity; - if (alphaDistance > 0.) { - ball.pos.x -= alphaDistance * alphaDistance * (ball.pos.x - this.mouse.x); - ball.pos.y -= alphaDistance * alphaDistance * (ball.pos.y - this.mouse.y); - ball.opacity.current += alphaDistance * (1 - ball.opacity.current); - const rgba = [ - normal.r + (sun.r - normal.r) * alphaDistance, - normal.g + (sun.g - normal.g) * alphaDistance, - normal.b + (sun.b - normal.b) * alphaDistance, - ball.opacity.current - ]; - ball.color = "rgba(" + rgba.join(",") + ")"; - } else { - ball.color = "rgba(197,197,197," + ball.opacity.current + ")"; - } - - ball.pos.x = ball.pos.x * (this.canvas.width + 64) - 32; - ball.pos.y = ball.pos.y * (this.canvas.height + 64) - 32; - }); - } - - componentDidMount() { - this.balls = []; - this.start = new Date(); - - for (var i = 0; i < 100; i++) { - let ball = { - pos: { - x: 0., - y: 0. - }, - alpha: { - x: 0., - y: (Math.random() * 0.7) - 0.35 - }, - start: Math.random(), - offset: Math.pow(Math.random() - 0.5, 3), - brightness: Math.floor(255 * Math.random()), - opacity:{ - start: Math.random(), - current: 0 - }, - size: 1 + Math.random() * 6 - }; - - this.balls.push(ball); - } - - this.updateDimensions(); - this.updatePositions(); - window.addEventListener("mousemove", this.mouseMove); - window.addEventListener("resize", this.updateDimensions); - } - - componentWillUnmount() { - if (this.updatePositionsTimer) { - clearTimeout(this.updatePositionsTimer); - this.updatePositionsTimer = 0; - } - if (this.updateSizeTimer) { - clearTimeout(this.updateSizeTimer); - this.updateSizeTimer = 0; - } - window.removeEventListener("mousemove", this.mouseMove); - window.removeEventListener("resize", this.updateDimensions); - } - - render() { - return ( - this.canvas = el}> - ); - } -} -export default WaveBalls; diff --git a/webpack.dev.js b/webpack.dev.js index ff227ee..16b9a94 100755 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -6,13 +6,12 @@ const config = require("config"); const base = config.get("basePath"); const proxy = { -// "/photos/api/*": "http://localhost:8123/", } console.log(`Using base: ${base}`); proxy[`${base}/`] = { - target: "http://localhost:8911", + target: "http://localhost:8930", bypass: function(req, res, proxyOptions) { if ((req.url.indexOf(`${base}/assets`) == 0) || (req.url.indexOf(`${base}/dist`) == 0)) { @@ -29,8 +28,8 @@ module.exports = merge(common, { mode: "development", devServer: { contentBase: path.join(__dirname, "/"), - port: 1130, - publicPath: `http://localhost:1130${base}/dist/`, + port: 8930, + publicPath: `http://localhost:8930${base}/dist/`, hotOnly: true, disableHostCheck: true, historyApiFallback: true,