jketreno/peddlers-of-ketran
1
0
Fork 0
Code Issues 42 Activity

Still working on loading

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-01-26 13:05:43 -08:00
parent a8995030ac
commit 5544485e30
9 changed files with 40 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env Normal file
View File

@ -0,0 +1,2 @@
REACT_APP_basePath="/ketr.ketran"
NODE_CONFIG_ENV='production'

9
README.md
View File

@ -3,9 +3,8 @@
This project consists of both the front-end and back-end game This project consists of both the front-end and back-end game
API server. API server.
The front-end is launched in development mode via 'npm start'. In production, you build The front-end is launched from the 'client' directory in development mode via 'npm start'. In production, you build
it via 'npm build' and deploy the public front-end. When you run the development it via 'npm build' and deploy the public front-end.
mode, the default port it will bind to is 8931.
The back-end is launched out of the 'server' directory via 'npm start' and will The back-end is launched out of the 'server' directory via 'npm start' and will
bind to the default port 8930. bind to the default port 8930.
@ -83,11 +82,11 @@ server -> game
```bash ```bash
git clone git.ketrenos.com:jketreno/peddlers-of-ketran.git git clone git.ketrenos.com:jketreno/peddlers-of-ketran.git
npm install
cd server cd server
npm install npm install
npm start & npm start &
cd .. cd ../client
npm install
npm start npm start
``` ```

8
client/package.json
View File

@ -17,10 +17,10 @@
"web-vitals": "^2.1.2" "web-vitals": "^2.1.2"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "export $(cat ../.env | xargs) && react-scripts start",
"build": "react-scripts build", "build": "export $(cat ../.env | xargs) && react-scripts build",
"test": "react-scripts test", "test": "export $(cat ../.env | xargs) && react-scripts test",
"eject": "react-scripts eject" "eject": "export $(cat ../.env | xargs) && react-scripts eject"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [

2
client/public/index.html
View File

@ -3,6 +3,8 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<base href="%PUBLIC_URL%"/>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta

18
client/src/App.js
View File

@ -12,27 +12,21 @@ import {
Routes Routes
} from "react-router-dom"; } from "react-router-dom";
//import 'typeface-roboto'; //import 'typeface-roboto';
import history from "./history.js"; //import history from "./history.js";
import Board from "./Board.js"; import Board from "./Board.js";
import "./App.css"; import "./App.css";
function App() { let base = process.env.PUBLIC_URL;
let base = document.querySelector("base") ? document.querySelector("base").href : "";
if (base) {
base = new URL(base).pathname;
} else {
base = '/';
}
function App() {
console.log(`Base: ${base}`); console.log(`Base: ${base}`);
return ( return (
<Router> <Router>
<Routes history={history}> <Routes>
<Route exact component={<Board/>} path={base + 'games/:id?'}/> <Route element={<Board/>} path={`${base}/games/:id`}/>
<Route exact element={<Board/>} path={base}/> <Route exact element={<Board/>} path={`${base}`}/>
</Routes> </Routes>
</Router> </Router>
); );

32
client/src/Board.js
View File

@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import "./Board.css"; import "./Board.css";
import history from "./history.js"; //import history from "./history.js";
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import TextField from '@material-ui/core/TextField'; import TextField from '@material-ui/core/TextField';
import List from '@material-ui/core/List'; import List from '@material-ui/core/List';
@ -39,8 +39,10 @@ function withRouter(Component) {
} }
/* end of withRouter polyfill */ /* end of withRouter polyfill */
const assetsPath = '/assets'; const base = process.env.PUBLIC_URL;
const gamesPath = '/games';
const assetsPath = `${base}/assets`;
const gamesPath = `${base}/games`;
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
@ -423,15 +425,13 @@ class Board extends React.Component {
const params = {}; const params = {};
console.log(props.router);
if (props.router && props.router.params.id) { if (props.router && props.router.params.id) {
console.log(`Loading game: ${props.router.params.id}`); console.log(`Loading game: ${props.router.params.id}`);
params.url = `api/v1/games/${props.router.params.id}`; params.url = `${base}/api/v1/games/${props.router.params.id}`;
params.method = "GET" params.method = "GET"
} else { } else {
console.log("Requesting new game."); console.log("Requesting new game.");
params.url = "api/v1/games"; params.url = `${base}/api/v1/games`;
params.method = "POST"; params.method = "POST";
} }
@ -445,8 +445,6 @@ class Board extends React.Component {
// body: JSON.stringify(data) // body data type must match "Content-Type" header // body: JSON.stringify(data) // body data type must match "Content-Type" header
}).then((res) => { }).then((res) => {
if (res.status > 400) { if (res.status > 400) {
const base = document.querySelector("base");
window.location.href = base ? base.href : "/";
console.log(`Unable to find game ${props.router.params.id}`); console.log(`Unable to find game ${props.router.params.id}`);
throw new Error(`Unable to find requested game ${props.router.params.id}. Starting new one.`); throw new Error(`Unable to find requested game ${props.router.params.id}. Starting new one.`);
} }
@ -455,20 +453,21 @@ class Board extends React.Component {
console.log (`Game ${game.id} loaded.`); console.log (`Game ${game.id} loaded.`);
if (!props.router.params.id) { if (!props.router.params.id) {
history.push(`${gamesPath}/${game.id}`); // history.push(`${gamesPath}/${game.id}`);
} }
this.game = game; this.game = game;
this.setState({ game: game }); //this.setState({ game: game });
this.pips = Pips(this); this.pips = Pips(this);
this.tiles = Tiles(this); this.tiles = Tiles(this);
this.table = Table(this); this.table = Table(this);
this.borders = this.game.borders.map((file) => { this.borders = this.game.borders.map((file) => {
console.log(file);
return Border(this, file); return Border(this, file);
}); });
this.loadTimer = window.setTimeout(this.loadGame, 1000); //this.loadTimer = window.setTimeout(this.loadGame, 1000);
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
alert(error); alert(error);
@ -485,7 +484,7 @@ class Board extends React.Component {
return; return;
} }
window.fetch(`api/v1/games/${this.state.game.id}`, { window.fetch(`${base}/api/v1/games/${this.state.game.id}`, {
method: "GET", method: "GET",
cache: 'no-cache', cache: 'no-cache',
credentials: 'same-origin', credentials: 'same-origin',
@ -517,7 +516,7 @@ class Board extends React.Component {
this.loadTimer = null; this.loadTimer = null;
} }
window.fetch(`api/v1/games/${this.state.game.id}`, { window.fetch(`${base}/api/v1/games/${this.state.game.id}`, {
method: "PUT", method: "PUT",
cache: 'no-cache', cache: 'no-cache',
credentials: 'same-origin', credentials: 'same-origin',
@ -685,12 +684,13 @@ class Board extends React.Component {
if (this.updateSizeTimer) { if (this.updateSizeTimer) {
clearTimeout(this.updateSizeTimer); clearTimeout(this.updateSizeTimer);
} }
console.log("Fix updateDimensions");
this.updateSizeTimer = setTimeout(() => { this.updateSizeTimer = setTimeout(() => {
const container = document.getElementById("root"), const container = document.getElementById("root"),
offset = container.firstChild.offsetHeight, offset = container.firstChild.offsetHeight,
height = window.innerHeight - offset; height = window.innerHeight - offset;
return;
this.offsetY = offset; this.offsetY = offset;
this.width = window.innerWidth; this.width = window.innerWidth;
this.height = height; this.height = height;
@ -1071,7 +1071,7 @@ class Board extends React.Component {
window.addEventListener("mousemove", this.mouseMove); window.addEventListener("mousemove", this.mouseMove);
window.addEventListener("resize", this.updateDimensions); window.addEventListener("resize", this.updateDimensions);
this.updateDimensions(); setTimeout(this.updateDimensions, 1000);
} }
componentWillUnmount() { componentWillUnmount() {

2
client/src/history.js
View File

@ -2,7 +2,7 @@ import { createBrowserHistory } from 'history';
// Run our app under the /base URL. // Run our app under the /base URL.
const history = createBrowserHistory({ const history = createBrowserHistory({
basename: process.env.PUBLIC_URL // basename: process.env.PUBLIC_URL
});/*, });/*,
push = history.push; push = history.push;

4
server/basepath.js
View File

@ -1,6 +1,4 @@
const config = require("config"); let basePath = process.env.REACT_APP_basePath;
let basePath = config.get("basePath");
basePath = "/" + basePath.replace(/^\/+/, "").replace(/\/+$/, "") + "/"; basePath = "/" + basePath.replace(/^\/+/, "").replace(/\/+$/, "") + "/";
if (basePath == "//") { if (basePath == "//") {
basePath = "/"; basePath = "/";

2
server/package.json
View File

@ -4,7 +4,7 @@
"main": "app.js", "main": "app.js",
"devDependencies": {}, "devDependencies": {},
"scripts": { "scripts": {
"start": "NODE_CONFIG_ENV='production' node app.js" "start": "export $(cat ../.env | xargs) && node app.js"
}, },
"author": "James Ketrenos <james_settlers@ketrenos.com>", "author": "James Ketrenos <james_settlers@ketrenos.com>",
"license": "MIT", "license": "MIT",