diff --git a/rpg_game/src/components/MainGame/MainGame.js b/rpg_game/src/components/MainGame/MainGame.js index 73b9730..ef3ec0a 100644 --- a/rpg_game/src/components/MainGame/MainGame.js +++ b/rpg_game/src/components/MainGame/MainGame.js @@ -8,7 +8,6 @@ import createStreet from "../Maps/Street/StreetFunctions"; import createHouse from "../Maps/House/HouseFunctions"; import createGraveyard from "../Maps/Graveyard/GraveyardFunctions"; import { connect } from "react-redux"; -import Pusher from "pusher-js"; import Node from "../Node/Node"; import { makeStreetGrid, @@ -24,9 +23,9 @@ import characterTwo from "../Node/images/character_two.png"; import characterThree from "../Node/images/character_three.png"; import characterFour from "../Node/images/character_four.png"; import characterFive from "../Node/images/character_five.png"; +import Pusher from 'pusher-js'; // eslint-disable-next-line -let playerPosition; const pusher = new Pusher("f2df1cd773bc785afe1e", { cluster: "eu", @@ -45,11 +44,10 @@ class MainGame extends React.Component { }; } - componentWillMount = () => { + componentDidMount = () => { this.createForest(); - }; + - componentDidMount = () => { window.addEventListener("keydown", e => { this.handleKeyDown(e); }); @@ -94,30 +92,18 @@ class MainGame extends React.Component { const positionDown = this.props.grid[this.props.playerPosition.i + 1][ this.props.playerPosition.j ]; - // if (positionDown.toForest) { - // this.createForest(); - // } - // if (positionDown.toHouse) { - // this.createHouse(); - // } - // if (positionDown.toGraveyard) { - // this.createGraveyard(); - // } - // if (positionDown.exitStreet) { - // this.createStreet(); - // } if ( this.props.playerPosition.s_to !== 0 && !positionDown.treeOne && !positionDown.treeTwo && - !positionDown.treeThree + !positionDown.treeThree && + !positionDown.skeleton && + !positionDown.grave && + !positionDown.goldOne && + !positionDown.goldStatue && + !positionDown.darkTree ) { - const newGrid = this.movePlayer( - this.props.grid, - this.props.playerPosition.i + 1, - this.props.playerPosition.j - ); - this.props.moveThePlayer(newGrid, positionDown, "s"); + this.props.moveThePlayer("s"); } return; } @@ -128,21 +114,18 @@ class MainGame extends React.Component { const positionLeft = this.props.grid[this.props.playerPosition.i][ this.props.playerPosition.j - 1 ]; - // if (positionLeft.toForest) { - // this.createForest(); - // } if ( this.props.playerPosition.w_to !== 0 && // .neighbors.includes(positionLeft) was old code !positionLeft.treeOne && !positionLeft.treeTwo && - !positionLeft.treeThree + !positionLeft.treeThree && + !positionLeft.skeleton && + !positionLeft.grave && + !positionLeft.goldOne && + !positionLeft.goldStatue && + !positionLeft.darkTree ) { - const newGrid = this.movePlayer( - this.props.grid, - this.props.playerPosition.i, - this.props.playerPosition.j - 1 - ); - this.props.moveThePlayer(newGrid, positionLeft, "w"); + this.props.moveThePlayer("w"); } return; } @@ -153,27 +136,18 @@ class MainGame extends React.Component { const positionRight = this.props.grid[this.props.playerPosition.i][ this.props.playerPosition.j + 1 ]; - // if (positionRight.toForest) { - // this.createForest(); - // } - // if (positionRight.toStreet) { - // this.createStreet(); - // } - // if (positionRight.toGraveyard) { - // this.createGraveyard(); - // } if ( this.props.playerPosition.e_to !== 0 && !positionRight.treeOne && !positionRight.treeTwo && - !positionRight.treeThree + !positionRight.treeThree && + !positionRight.skeleton && + !positionRight.grave && + !positionRight.goldOne && + !positionRight.goldStatue && + !positionRight.darkTree ) { - const newGrid = this.movePlayer( - this.props.grid, - this.props.playerPosition.i, - this.props.playerPosition.j + 1 - ); - this.props.moveThePlayer(newGrid, positionRight, "e"); + this.props.moveThePlayer("e"); } return; } @@ -184,21 +158,18 @@ class MainGame extends React.Component { const positionUp = this.props.grid[this.props.playerPosition.i - 1][ this.props.playerPosition.j ]; - // if (positionUp.toStreet) { - // this.createStreet(); - // } if ( this.props.playerPosition.n_to !== 0 && !positionUp.treeOne && !positionUp.treeTwo && - !positionUp.treeThree + !positionUp.treeThree && + !positionUp.skeleton && + !positionUp.grave && + !positionUp.goldOne && + !positionUp.goldStatue && + !positionUp.darkTree ) { - const newGrid = this.movePlayer( - this.props.grid, - this.props.playerPosition.i - 1, - this.props.playerPosition.j - ); - this.props.moveThePlayer(newGrid, positionUp, "n"); + this.props.moveThePlayer("n"); } return; } @@ -213,27 +184,15 @@ class MainGame extends React.Component { }; createStreet = () => { - const streetGrid = createStreet([]); - this.props.makeStreetGrid(streetGrid); - grid = streetGrid; - playerPosition = grid[0][0]; - document.querySelector(".grid").style.backgroundImage = `url(${street})`; + this.props.makeStreetGrid(); }; createHouse = () => { - const houseGrid = createHouse([]); - this.props.makeHouseGrid(houseGrid); - grid = houseGrid; - playerPosition = grid[0][0]; - document.querySelector(".grid").style.backgroundImage = `url(${wood})`; + this.props.makeHouseGrid(); }; createGraveyard = () => { - const graveyardGrid = createGraveyard([]); - this.props.makeGraveyardGrid(graveyardGrid); - grid = graveyardGrid; - playerPosition = grid[0][0]; - document.querySelector(".grid").style.backgroundImage = `url(${img})`; + this.props.makeGraveyardGrid(); }; movePlayer = (grid, i, j) => { @@ -245,9 +204,6 @@ class MainGame extends React.Component { }; render() { - if (this.props.grid) { - // console.log(this.props.grid); - } return ( @@ -379,6 +335,7 @@ const StyledMainGame = styled.div` margin: 20px; width: 70%; box-shadow: 0px 1.87781px 6.25935px rgba(0, 0, 0, 2.06); + } .game-info { @@ -395,43 +352,20 @@ const StyledMainGame = styled.div` height: auto; margin-bottom: 30px; box-shadow: 0px 1.87781px 6.25935px rgba(0, 0, 0, 2.06); - - h5 { - margin-top: 30px; - color: #fff; - font-size: 20px; - } - - li { - margin-top: 10px; - color: #fff; - font-size: 13px; - } - } - - .chat-space { - border: 2px solid #01134c; - width: 100%; - min-height: 250px; - height: auto; - box-shadow: 0px 1.87781px 6.25935px rgba(0, 0, 0, 2.06); display: flex; flex-direction: column; justify-content: space-between; padding: 10px; - .message-view { border: 1px solid white; background: #fff; flex: 1; padding: 10px; - span { color: black; font-size: 12px; } } - .input-field { margin-top: 20px; input { @@ -443,8 +377,31 @@ const StyledMainGame = styled.div` color: #111; } } + button { + padding: 5px; + } + } + + h5 { + margin-top: 30px; + color: #fff; + font-size: 20px; + } + + li { + margin-top: 10px; + color: #fff; + font-size: 13px; } } + + .chat-space { + border: 2px solid #01134c; + width: 100%; + min-height: 250px; + height: auto; + box-shadow: 0px 1.87781px 6.25935px rgba(0, 0, 0, 2.06); + } } .node { @@ -484,4 +441,3 @@ export default connect( const rows = 10; const cols = 10; -let grid; diff --git a/rpg_game/src/components/Maps/Forest/ForestFunctions.js b/rpg_game/src/components/Maps/Forest/ForestFunctions.js index b485fdb..6d326a8 100644 --- a/rpg_game/src/components/Maps/Forest/ForestFunctions.js +++ b/rpg_game/src/components/Maps/Forest/ForestFunctions.js @@ -56,8 +56,8 @@ const createNode = (i, j) => { (i === 9 && j === 13) || (i === 9 && j === 14), grave: i === 0 && j === 8, - goldOne: i === 0 && j === 9, - toStreet: i === 0 && j === 14, + goldOne: i === 0 && j === 7, + toStreet: i === 0 && j === 9, toHouse: i === 9 && j === 3 // add other neccessary key value pairs for more functionality }; diff --git a/rpg_game/src/components/Maps/Street/StreetFunctions.js b/rpg_game/src/components/Maps/Street/StreetFunctions.js index a22b690..6ec76c4 100644 --- a/rpg_game/src/components/Maps/Street/StreetFunctions.js +++ b/rpg_game/src/components/Maps/Street/StreetFunctions.js @@ -1,5 +1,5 @@ const rows = 10; -const cols = 15; +const cols = 10; const createStreet = (grid) => { for (let i = 0; i < rows; i++) { @@ -26,8 +26,44 @@ const createNode = (i, j) => { start: i === 0 && j === 0, // create start point neighbors: [], goldStatue: - (i === 9 && j === 14) || (i === 0 && j === 14) || (i === 9 && j === 0), + (i === 3 && j === 9) || (i === 1 && j === 2) || (i === 9 && j === 0), skeleton: i === 5 && j === 7, + darkTree: + (i === 0 && j === 1) || + (i === 1 && j === 1) || + (i === 2 && j === 1) || + (i === 2 && j === 2) || + (i === 2 && j === 3) || + (i === 4 && j === 1) || + (i === 5 && j === 1) || + (i === 6 && j === 1) || + (i === 7 && j === 1) || + (i === 9 && j === 1) || + (i === 9 && j === 2) || + (i === 9 && j === 3) || + (i === 9 && j === 4) || + (i === 9 && j === 5) || + (i === 4 && j === 2) || + (i === 2 && j === 4) || + (i === 2 && j === 6) || + (i === 2 && j === 7) || + (i === 2 && j === 8) || + (i === 2 && j === 9) || + (i === 4 && j === 3) || + (i === 4 && j === 4) || + (i === 4 && j === 6) || + (i === 4 && j === 7) || + (i === 4 && j === 8) || + (i === 4 && j === 9) || + (i === 1 && j === 6) || + (i === 1 && j === 4) || + (i === 5 && j === 4) || + (i === 6 && j === 4) || + (i === 5 && j === 6) || + (i === 6 && j === 6) + , + grave: (i === 0 && j === 9), + goldOne: (i === 1 && j === 2), toForest: i === 9 && j === 8 }; }; diff --git a/rpg_game/src/store/actions/authenticationActions.js b/rpg_game/src/store/actions/authenticationActions.js index c6829ad..868d488 100644 --- a/rpg_game/src/store/actions/authenticationActions.js +++ b/rpg_game/src/store/actions/authenticationActions.js @@ -27,6 +27,7 @@ export const doLogIn = (user, history ) => dispatch => { history.push("/character") }) .catch(error => { + debugger let errorMessage = error.response.data; dispatch(genericAction(LOGIN_ERROR, errorMessage)); @@ -40,6 +41,7 @@ export const doSignUp = (user, history) => dispatch => { axios .post(`${appURL}/api/registration/`, user) .then(response => { + debugger const { key } = response.data; localStorage.setItem("token", key); diff --git a/rpg_game/src/store/actions/gridActions.js b/rpg_game/src/store/actions/gridActions.js index e27e746..1cf6e21 100644 --- a/rpg_game/src/store/actions/gridActions.js +++ b/rpg_game/src/store/actions/gridActions.js @@ -9,52 +9,100 @@ export const MAKE_GRAVEYARD_GRID = "MAKE_GRAVEYARD_GRID"; export const MOVE_PLAYER = "MOVE_PLAYER"; export const ROOM_INFO = "ROOM_INFO"; -export const genericAction = (type, payload, roomTitle, playerPosition) => ({ +export const genericAction = (type, payload, roomTitle, players) => ({ type, payload, roomTitle, - playerPosition + players }); const url = "https://muddyapp.herokuapp.com/api/adv"; -export const sendMessage = (payload) => dispatch => { - axios.post(`${url}/say`, payload) -} +export const sendMessage = payload => dispatch => { + axios.post(`${url}/say`, payload); +}; -export const makeForestGrid = () => dispatch => { - axiosWithAuth().get(`${url}/init/`).then(res => { +export const makeForestGrid = () => dispatch => { + let currentPosition; + axiosWithAuth().get(`${url}/init/`) + .then(res => { dispatch(genericAction(ROOM_INFO, res.data)) - return axios.get(`${url}/rooms/`).then(res => { - dispatch(genericAction(MAKE_FOREST_GRID, res.data.rooms)) - }) - }) - - // return genericAction(MAKE_FOREST_GRID, forestGrid); -}; + debugger + currentPosition = res.data.title; + const players = res.data.player; + return axios.get(`${url}/rooms/`).then(res => { + debugger + if (Number(currentPosition) < 99) { + dispatch( + genericAction(MAKE_FOREST_GRID, res.data.rooms, currentPosition, players) + ); + } else { -export const makeStreetGrid = (streetGrid) => { - return genericAction(MAKE_STREET_GRID, streetGrid); + dispatch( + genericAction(MAKE_STREET_GRID, res.data.rooms, currentPosition, players) + ); + } + }); + }); }; +export const makeStreetGrid = streetGrid => dispatch => { + let currentPosition; + axiosWithAuth() + .get(`${url}/init/`) + .then(res => { + currentPosition = res.data.title; + const players = res.data.player; + return axios.get(`${url}/rooms/`).then(res => { + + dispatch( + genericAction(MAKE_STREET_GRID, res.data.rooms, currentPosition, players) + ); + }); + }); +}; -export const makeHouseGrid = (houseGrid) => { +export const makeHouseGrid = houseGrid => { return genericAction(MAKE_FOREST_GRID, houseGrid); }; -export const makeGraveyardGrid = (graveyardGrid) => { +export const makeGraveyardGrid = graveyardGrid => { return genericAction(MAKE_GRAVEYARD_GRID, graveyardGrid); }; -export const moveThePlayer = (newGrid, playerPosition, direction) => dispatch => { - const reqBody = {direction: direction}; - - axiosWithAuth().post(`${url}/move/`, reqBody).then(res => { - dispatch(genericAction(MOVE_PLAYER, newGrid, res.title, playerPosition )); +export const moveThePlayer = direction => dispatch => { + const reqBody = { direction: direction }; + - return axiosWithAuth().get(`${url}/init/`).then(res => { - dispatch(genericAction(ROOM_INFO, res.data)) - }) + let currentPosition; + axiosWithAuth() + .post(`${url}/move/`, reqBody) + .then(res => { + currentPosition = res.data.title; + if (res.data.title === "100") { + axiosWithAuth() + .get(`${url}/init/`) + .then(res => { + const players = res.data.player; + return axios.get(`${url}/rooms/`).then(res => { + dispatch( + genericAction(MAKE_STREET_GRID, res.data.rooms, currentPosition, players) + ); + }); + }); + } else if (res.data.title === "0") { + axiosWithAuth() + .get(`${url}/init/`) + .then(res => { + const players = res.data.player; + return axios.get(`${url}/rooms/`).then(res => { + dispatch( + genericAction(MAKE_FOREST_GRID, res.data.rooms, currentPosition, players) + ); + }); + }); + } else { + dispatch(genericAction(MOVE_PLAYER, currentPosition)); + } }); }; - diff --git a/rpg_game/src/store/reducers/grid.js b/rpg_game/src/store/reducers/grid.js index 0336409..70d1422 100644 --- a/rpg_game/src/store/reducers/grid.js +++ b/rpg_game/src/store/reducers/grid.js @@ -1,34 +1,49 @@ import * as type from "../actions/gridActions"; import createForest from "../../components/Maps/Forest/ForestFunctions"; +import createStreet from "../../components/Maps/Street/StreetFunctions"; const initialState = { grid: null, playerPosition: null, loading: null, error: null, - currentRoom: null, + currentRoom: null }; const rows = 10; const cols = 10; - const grid = (state = initialState, action) => { switch (action.type) { case type.ROOM_INFO: return { ...state, - currentRoom: action.payload, - } + currentRoom: action.payload + }; + case type.MAKE_FOREST_GRID: + let rooms = action.payload; + + // we have a big array with objects // split only the forest world out of it: + let result = []; - case type.MAKE_FOREST_GRID: - let rooms = action.payload; - - let grid = []; + let i, + j, + tempoArray, + chunk = 100; + + for (i = 0, j = rooms.length; i < j; i += chunk) { + tempoArray = rooms.slice(i, i + chunk); + result.push(tempoArray); + } + + rooms = result[0]; + + + let grid = []; let tempArray = []; let keepTrackOfIndex = 9; - + for (let i = 0; i < rooms.length; i++) { if (keepTrackOfIndex === i) { keepTrackOfIndex += 10; @@ -39,33 +54,102 @@ const grid = (state = initialState, action) => { tempArray.push(rooms[i]); } } - const forest = createForest([]); - + let keepTrackOfCurrentForestPosition; for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { + if (grid[i][j].title === action.roomTitle) { + grid[i][j].start = true; + keepTrackOfCurrentForestPosition = grid[i][j]; + } else { + grid[i][j].start = false; + } grid[i][j].i = forest[i][j].i; grid[i][j].j = forest[i][j].j; - grid[i][j].start = forest[i][j].start; grid[i][j].neighbors = forest[i][j].neighbors; grid[i][j].treeOne = forest[i][j].treeOne; grid[i][j].treeTwo = forest[i][j].treeTwo; grid[i][j].treeThree = forest[i][j].treeThree; grid[i][j].grave = forest[i][j].grave; grid[i][j].goldOne = forest[i][j].goldOne; + grid[i][j].toStreet = forest[i][j].toStreet; } } + const yeah = action.roomTitle + debugger return { ...state, grid: grid, - playerPosition: grid[0][0] + playerPosition: keepTrackOfCurrentForestPosition, + players: action.players }; case type.MAKE_STREET_GRID: + let allRooms = action.payload; + + // we have a big array with objects // split only the forest world out of it: + let theResult = []; + + let streetI, + streetJ, + tempoStreetArray, + streetChunk = 100; + + for ( + streetI = 0, streetJ = allRooms.length; + streetI < streetJ; + streetI += streetChunk + ) { + tempoStreetArray = allRooms.slice(streetI, streetI + streetChunk); + theResult.push(tempoStreetArray); + } + + allRooms = theResult[1]; + let streetGrid = []; + let tempStreetArray = []; + let keepTrackOfStreetIndex = 9; + + for (let i = 0; i < allRooms.length; i++) { + if (keepTrackOfStreetIndex === i) { + keepTrackOfStreetIndex += 10; + tempStreetArray.push(allRooms[i]); + streetGrid.push(tempStreetArray); + tempStreetArray = []; + } else { + tempStreetArray.push(allRooms[i]); + } + } + + const street = createStreet([]); + + let keepTrackOfCurrentStreetPosition; + for (let i = 0; i < rows; i++) { + for (let j = 0; j < cols; j++) { + if (streetGrid[i][j].title === action.roomTitle) { + streetGrid[i][j].start = true; + keepTrackOfCurrentStreetPosition = streetGrid[i][j]; + } else { + streetGrid[i][j].start = false; + } + streetGrid[i][j].i = street[i][j].i; + streetGrid[i][j].j = street[i][j].j; + streetGrid[i][j].neighbors = street[i][j].neighbors; + streetGrid[i][j].skeleton = street[i][j].skeleton; + streetGrid[i][j].goldStatue = street[i][j].goldStatue; + streetGrid[i][j].toForest = street[i][j].toForest; + streetGrid[i][j].darkTree = street[i][j].darkTree; + streetGrid[i][j].goldOne = street[i][j].goldOne; + streetGrid[i][j].grave = street[i][j].grave; + + + } + } return { ...state, - grid: action.payload + grid: streetGrid, + playerPosition: keepTrackOfCurrentStreetPosition, + players: action.players }; case type.MAKE_HOUSE_GRID: @@ -81,21 +165,25 @@ const grid = (state = initialState, action) => { }; case type.MOVE_PLAYER: + let currentGrid = [...state.grid]; - const newGrid = state.grid.map(room => { - if(room.title === action.roomTitle){ - room.start = true - } - if(room.title === state.playerPosition.title) { - room.start = false + let keepTrackOfCurrentPosition; + for (let i = 0; i < rows; i++) { + for (let j = 0; j < cols; j++) { + if (currentGrid[i][j].title === action.payload) { + currentGrid[i][j].start = true; + keepTrackOfCurrentPosition = currentGrid[i][j]; + } else { + currentGrid[i][j].start = false; + } } - return room; - }); + } return { ...state, - grid: newGrid, - playerPosition: action.playerPosition + grid: currentGrid, + playerPosition: keepTrackOfCurrentPosition, + players: action.players }; default: