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
API server.
The front-end is launched 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
mode, the default port it will bind to is 8931.
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.
The back-end is launched out of the 'server' directory via 'npm start' and will
bind to the default port 8930.
@ -83,11 +82,11 @@ server -> game
```bash
git clone git.ketrenos.com:jketreno/peddlers-of-ketran.git
npm install
cd server
npm install
npm start &
cd ..
cd ../client
npm install
npm start
```

8
client/package.json
View File

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

2
client/public/index.html
View File

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

18
client/src/App.js
View File

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

32
client/src/Board.js
View File

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

2
client/src/history.js
View File

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

4
server/basepath.js
View File

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

2
server/package.json
View File

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