From 73300bec07ca896b7a449c74534e0138a0a11ccb Mon Sep 17 00:00:00 2001 From: Marcos Cavalcante <54518635+MarcosRaoi@users.noreply.github.com> Date: Sun, 1 Oct 2023 09:45:13 -0300 Subject: [PATCH] Add the title of the game cells Add the title of the game cells to my portfolio showing the last information selected by the filters. I still plan to add a button to turn the information on and off to appear on top of the game cells. --- css/style.css | 31 ++++++++++++++++ json/game_cells.json | 4 +- src/index.js | 2 +- src/react-JSX/GameCell.js | 28 ++++++++++++++ src/react-JSX/GameCellTitle.js | 15 ++++++++ src/react-JSX/GameMenuFilters.js | 59 ++++++++++++++++++++++++----- src/react-JSX/GameResetFilter.js | 2 +- src/react-JSX/GamesPage.js | 10 +++-- src/react/GameCell.js | 39 ++++++++++++++++++- src/react/GameCellTitle.js | 37 ++++++++++++++++++ src/react/GameMenuFilters.js | 64 ++++++++++++++++++++++++++------ src/react/GamesPage.js | 15 ++++++-- texts/release_notes.txt | 6 ++- 13 files changed, 278 insertions(+), 34 deletions(-) create mode 100644 src/react-JSX/GameCellTitle.js create mode 100644 src/react/GameCellTitle.js diff --git a/css/style.css b/css/style.css index 1623c5a2..9985a9d1 100644 --- a/css/style.css +++ b/css/style.css @@ -117,6 +117,25 @@ body display: none; } +.game_cell_title +{ + width: 276px; + height: 25px; + background-color: #111; + color: #fff; + position: absolute; + text-align: center; + padding: 3px 13px; + + border-radius: 0px 0px 15px 15px; + border: 1px solid #fff; + border-top: 0px; + + /* (570/2) - (276 + (13*2) + (1*2) /2) */ + /* 285 - (304/2) */ + margin-left: 133px; +} + .celula_de_jogo, .celula_de_jogo_ultima { border: 1px solid #000; @@ -235,6 +254,12 @@ body right: 10px; } +.info_filter +{ + position: absolute; + right: 40px; +} + /***** MOBILE *****/ @media screen and (max-width: 768px) @@ -271,6 +296,12 @@ body height: auto; } + .game_cell_title + { + margin-left: auto; + width: 73%; + } + .celula_de_jogo, .celula_de_jogo_ultima { width: 80vw; diff --git a/json/game_cells.json b/json/game_cells.json index 6d9c3865..41d82ca0 100644 --- a/json/game_cells.json +++ b/json/game_cells.json @@ -321,7 +321,7 @@ "hidden": true }, { - "name": "Aula 8 de Animação Digital II - Customizar", + "name": "Aula 8 - Animação Digital II - Customizar", "data": { "key": "aula8_customizar", "info": "Um projeto estudo de SetBlendShapeWeight da Unity, pré estudos para criar Customizações de Personagens! Anim.D.II na UNICSUL.", @@ -491,7 +491,7 @@ "index": 1 }, { - "name": "DR15P", + "name": "Defold Raoi 15-Puzzle", "data": { "key": "DR15P", "info": "DR15P, ou Defold Raoi 15-Puzzle rs, é o clássico 15-Puzzle, feito na Defold, uma game engine free, usando a linguagem 🇧🇷 🌚 Lua.", diff --git a/src/index.js b/src/index.js index dd0dc3e2..ca9604ac 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ import Footer from "./react/Footer.js"; import MenuNavigation from "./react/MenuNavigation.js"; -const PORTFOLIO_VERSION = "1.29.0"; +const PORTFOLIO_VERSION = "1.30.0"; const ID_MENU_NAVIGATION = "topper"; const ID_FOOTER = "bottom"; diff --git a/src/react-JSX/GameCell.js b/src/react-JSX/GameCell.js index 59863bda..9a2a9486 100644 --- a/src/react-JSX/GameCell.js +++ b/src/react-JSX/GameCell.js @@ -1,6 +1,7 @@ import { getDataLenght } from "../getJson.js"; import GameInfo from "./GameInfo.js"; import GameLinkedBanner from "./GameLinkedBanner.js"; +import GameCellTitle from "./GameCellTitle.js"; const LAST_CELL_CLASS_NAME = "celula_de_jogo_ultima"; const NORMAL_CELL_CLASS_NAME = "celula_de_jogo"; @@ -9,6 +10,8 @@ const INVISIBLE_GAME_CELL_CLASS_NAME = "game_cell_invisible" class GameCell extends React.Component { constructor(props) { super(props); + this.cellObj = {}; + this.lastAcceptFilter = 0; } getClassName(cellIndexPosition, cellObject) { @@ -18,11 +21,35 @@ class GameCell extends React.Component { return (cellIndexPosition == getDataLenght() - 1) ? LAST_CELL_CLASS_NAME : NORMAL_CELL_CLASS_NAME; } + getGameCellTitle(lastFilter = 0) { + if (lastFilter < 0) { + return this.getGameCellTitle(this.lastAcceptFilter); + } + + this.lastAcceptFilter = lastFilter; + + switch (this.lastAcceptFilter) { + case 1: + return this.cellObj.data.release; + case 2: + return this.cellObj.name; + case 3: + return this.cellObj.data.language; + case 4: + return this.cellObj.data.technology; + case 5: + return this.cellObj.data.platform; + default: + return this.cellObj.name; + } + } + positionCell(positionClass, cellData) { let cellInfo = cellData.info; return (
+ {this.getGameCellTitle(this.props.lastFilter)} {cellInfo}
@@ -32,6 +59,7 @@ class GameCell extends React.Component { render() { let cellIndex = this.props.children; let className = this.getClassName(cellIndex, this.props.cell); + this.cellObj = this.props.cell; return this.positionCell(className, this.props.cell.data); } diff --git a/src/react-JSX/GameCellTitle.js b/src/react-JSX/GameCellTitle.js new file mode 100644 index 00000000..1c40663d --- /dev/null +++ b/src/react-JSX/GameCellTitle.js @@ -0,0 +1,15 @@ +class GameCellTitle extends React.Component { + constructor(props) { + super(props); + } + + getActualTitle() { + return this.props.children; + } + + render() { + return (
{this.getActualTitle()}
); + } +} + +export default GameCellTitle; \ No newline at end of file diff --git a/src/react-JSX/GameMenuFilters.js b/src/react-JSX/GameMenuFilters.js index e23424f2..817663c4 100644 --- a/src/react-JSX/GameMenuFilters.js +++ b/src/react-JSX/GameMenuFilters.js @@ -2,6 +2,16 @@ import GameFilter from "./GameFilter.js"; import GameResetFilter from "./GameResetFilter.js"; import GameReverseFilter from "./GameReverseFilter.js"; +const FILTERS = { + "DEFAULT": 0, + "RELEASE": 1, + "ALPHABETICAL": 2, + "LANGUAGE": 3, + "TECHNOLOGY": 4, + "PLATFORM": 5, + "REVERT": -1, +} + const resetFilterText = "ORDENAR POR:"; const filterTexts = ["LANÇAMENTO", "A / Z", "LINGUAGEM", "TECNOLOGIA", "PLATAFORMA"]; @@ -15,6 +25,7 @@ class GameMenuFilters extends React.Component { super(props); this.gamesPageRef = this.props.gamesPageRef; this.gameReverseFilterRef = undefined; + this.lastFilter; } updadeGamePage(gamesPage, cellsOrder) { @@ -23,10 +34,23 @@ class GameMenuFilters extends React.Component { gamesPage.updateCells(cellsOrder); } - logRelease(cells) { + baseFilter(gamesPage, cellsOrder, lastFilter) { + this.updadeGamePage(gamesPage, cellsOrder); + this.lastFilter = lastFilter; + + this.gamesPageRef.setLastFilter(this.lastFilter); + } + + baseLog() { console.clear(); + } + + logRelease(cells) { + this.baseLog(); + console.log("Release Order"); console.log(""); + let releaseOrderIndex = 1; cells.forEach(element => { console.log(releaseOrderIndex + "º - ", element.data.release,"was the release date for", element.name); @@ -45,13 +69,15 @@ class GameMenuFilters extends React.Component { }); this.logRelease(cells); - this.updadeGamePage(gamePage, cells); + this.baseFilter(gamePage, cells, FILTERS.RELEASE); } logAlphabetical(cells) { - console.clear(); + this.baseLog(); + console.log("Alphabetical Order"); console.log(""); + let alphabeticalOrderIndex = 1; cells.forEach(element => { console.log(alphabeticalOrderIndex + "º", element.name); @@ -74,16 +100,21 @@ class GameMenuFilters extends React.Component { }); this.logAlphabetical(cells); - this.updadeGamePage(gamePage, cells); + this.baseFilter(gamePage, cells, FILTERS.ALPHABETICAL); } - logProps(dataProp = "", cells = []) { - console.clear(); + logProps(cells = [], dataProp = "") { + this.baseLog(); + cells.forEach(element => { console.log(dataProp, " >> " , element.data[dataProp]); }); } + getFilterTypeData(dataProp) { + return FILTERS[dataProp.toUpperCase()] + } + filterData(dataProp = "", isAlphabetical = false) { if (isAlphabetical) { this.filterAlphabetical(); @@ -102,24 +133,32 @@ class GameMenuFilters extends React.Component { return 0; }); - this.logProps(dataProp, cells); - this.updadeGamePage(gamePage, cells); + this.logProps(cells, dataProp); + + this.baseFilter(gamePage, cells, this.getFilterTypeData(dataProp)); } //GameResetFilter.js resetFilter() { let gamePage = this.gamesPageRef; let cells = gamePage.getCells(); + + this.baseLog(); + cells.sort((a, b) => {return a.index - b.index;}); - this.updadeGamePage(gamePage, cells); + + this.baseFilter(gamePage, cells, FILTERS.DEFAULT); } //GameReverseFilter.js revertFilter() { + this.baseLog(); + let gamePage = this.gamesPageRef; let cells = gamePage.getCells(); cells.reverse(); - this.updadeGamePage(gamePage, cells); + + this.baseFilter(gamePage, cells, FILTERS.REVERT); } render() { diff --git a/src/react-JSX/GameResetFilter.js b/src/react-JSX/GameResetFilter.js index 24285cc1..6682dc53 100644 --- a/src/react-JSX/GameResetFilter.js +++ b/src/react-JSX/GameResetFilter.js @@ -3,7 +3,7 @@ import { getDataLenght } from "../getJson.js"; class GameResetFilter extends React.Component { getTotalGames() { - console.log("There are", getDataLenght(), "games in this Portfolio!") + console.log("There are", getDataLenght(), "games in this Portfolio!"); return "(" + getDataLenght() + ") "; } diff --git a/src/react-JSX/GamesPage.js b/src/react-JSX/GamesPage.js index a508cd70..30062b2a 100644 --- a/src/react-JSX/GamesPage.js +++ b/src/react-JSX/GamesPage.js @@ -6,13 +6,17 @@ class GamesPage extends React.Component { super(props); this.state = { cellsReceived: this.props.children.cells, - filterState: "" } this.pageWithCells = []; this.orderCellsIndex(); + this.lastFilter; } - updateCells(cellsOrder) { + setLastFilter(lastFilter) { + this.lastFilter = lastFilter; + } + + updateCells(cellsOrder = this.state.cellsReceived) { this.render(cellsOrder); } @@ -33,7 +37,7 @@ class GamesPage extends React.Component { cellsOrder.forEach( () => { let eachCell = cellsOrder[cellIndex]; - this.pageWithCells.push({cellIndex}); + this.pageWithCells.push({cellIndex}); cellIndex++; } ); diff --git a/src/react/GameCell.js b/src/react/GameCell.js index a57ac448..4376f057 100644 --- a/src/react/GameCell.js +++ b/src/react/GameCell.js @@ -9,6 +9,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function" import { getDataLenght } from "../getJson.js"; import GameInfo from "./GameInfo.js"; import GameLinkedBanner from "./GameLinkedBanner.js"; +import GameCellTitle from "./GameCellTitle.js"; var LAST_CELL_CLASS_NAME = "celula_de_jogo_ultima"; var NORMAL_CELL_CLASS_NAME = "celula_de_jogo"; @@ -20,7 +21,11 @@ var GameCell = function (_React$Component) { function GameCell(props) { _classCallCheck(this, GameCell); - return _possibleConstructorReturn(this, (GameCell.__proto__ || Object.getPrototypeOf(GameCell)).call(this, props)); + var _this = _possibleConstructorReturn(this, (GameCell.__proto__ || Object.getPrototypeOf(GameCell)).call(this, props)); + + _this.cellObj = {}; + _this.lastAcceptFilter = 0; + return _this; } _createClass(GameCell, [{ @@ -31,6 +36,32 @@ var GameCell = function (_React$Component) { } return cellIndexPosition == getDataLenght() - 1 ? LAST_CELL_CLASS_NAME : NORMAL_CELL_CLASS_NAME; } + }, { + key: "getGameCellTitle", + value: function getGameCellTitle() { + var lastFilter = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; + + if (lastFilter < 0) { + return this.getGameCellTitle(this.lastAcceptFilter); + } + + this.lastAcceptFilter = lastFilter; + + switch (this.lastAcceptFilter) { + case 1: + return this.cellObj.data.release; + case 2: + return this.cellObj.name; + case 3: + return this.cellObj.data.language; + case 4: + return this.cellObj.data.technology; + case 5: + return this.cellObj.data.platform; + default: + return this.cellObj.name; + } + } }, { key: "positionCell", value: function positionCell(positionClass, cellData) { @@ -39,6 +70,11 @@ var GameCell = function (_React$Component) { return React.createElement( "div", { "class": positionClass }, + React.createElement( + GameCellTitle, + null, + this.getGameCellTitle(this.props.lastFilter) + ), React.createElement(GameLinkedBanner, { bannerData: { cellData: cellData } }), React.createElement( GameInfo, @@ -52,6 +88,7 @@ var GameCell = function (_React$Component) { value: function render() { var cellIndex = this.props.children; var className = this.getClassName(cellIndex, this.props.cell); + this.cellObj = this.props.cell; return this.positionCell(className, this.props.cell.data); } diff --git a/src/react/GameCellTitle.js b/src/react/GameCellTitle.js new file mode 100644 index 00000000..0d7abb96 --- /dev/null +++ b/src/react/GameCellTitle.js @@ -0,0 +1,37 @@ +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var GameCellTitle = function (_React$Component) { + _inherits(GameCellTitle, _React$Component); + + function GameCellTitle(props) { + _classCallCheck(this, GameCellTitle); + + return _possibleConstructorReturn(this, (GameCellTitle.__proto__ || Object.getPrototypeOf(GameCellTitle)).call(this, props)); + } + + _createClass(GameCellTitle, [{ + key: "getActualTitle", + value: function getActualTitle() { + return this.props.children; + } + }, { + key: "render", + value: function render() { + return React.createElement( + "div", + { "class": "game_cell_title" }, + this.getActualTitle() + ); + } + }]); + + return GameCellTitle; +}(React.Component); + +export default GameCellTitle; \ No newline at end of file diff --git a/src/react/GameMenuFilters.js b/src/react/GameMenuFilters.js index 3205e58b..44370093 100644 --- a/src/react/GameMenuFilters.js +++ b/src/react/GameMenuFilters.js @@ -10,6 +10,16 @@ import GameFilter from "./GameFilter.js"; import GameResetFilter from "./GameResetFilter.js"; import GameReverseFilter from "./GameReverseFilter.js"; +var FILTERS = { + "DEFAULT": 0, + "RELEASE": 1, + "ALPHABETICAL": 2, + "LANGUAGE": 3, + "TECHNOLOGY": 4, + "PLATFORM": 5, + "REVERT": -1 +}; + var resetFilterText = "ORDENAR POR:"; var filterTexts = ["LANÇAMENTO", "A / Z", "LINGUAGEM", "TECNOLOGIA", "PLATAFORMA"]; @@ -28,6 +38,7 @@ var GameMenuFilters = function (_React$Component) { _this.gamesPageRef = _this.props.gamesPageRef; _this.gameReverseFilterRef = undefined; + _this.lastFilter; return _this; } @@ -38,12 +49,27 @@ var GameMenuFilters = function (_React$Component) { gamesPage.setCellsReceived(cellsOrder); gamesPage.updateCells(cellsOrder); } + }, { + key: "baseFilter", + value: function baseFilter(gamesPage, cellsOrder, lastFilter) { + this.updadeGamePage(gamesPage, cellsOrder); + this.lastFilter = lastFilter; + + this.gamesPageRef.setLastFilter(this.lastFilter); + } + }, { + key: "baseLog", + value: function baseLog() { + console.clear(); + } }, { key: "logRelease", value: function logRelease(cells) { - console.clear(); + this.baseLog(); + console.log("Release Order"); console.log(""); + var releaseOrderIndex = 1; cells.forEach(function (element) { console.log(releaseOrderIndex + "º - ", element.data.release, "was the release date for", element.name); @@ -63,14 +89,16 @@ var GameMenuFilters = function (_React$Component) { }); this.logRelease(cells); - this.updadeGamePage(gamePage, cells); + this.baseFilter(gamePage, cells, FILTERS.RELEASE); } }, { key: "logAlphabetical", value: function logAlphabetical(cells) { - console.clear(); + this.baseLog(); + console.log("Alphabetical Order"); console.log(""); + var alphabeticalOrderIndex = 1; cells.forEach(function (element) { console.log(alphabeticalOrderIndex + "º", element.name); @@ -94,19 +122,25 @@ var GameMenuFilters = function (_React$Component) { }); this.logAlphabetical(cells); - this.updadeGamePage(gamePage, cells); + this.baseFilter(gamePage, cells, FILTERS.ALPHABETICAL); } }, { key: "logProps", value: function logProps() { - var dataProp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""; - var cells = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; + var cells = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; + var dataProp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ""; + + this.baseLog(); - console.clear(); cells.forEach(function (element) { console.log(dataProp, " >> ", element.data[dataProp]); }); } + }, { + key: "getFilterTypeData", + value: function getFilterTypeData(dataProp) { + return FILTERS[dataProp.toUpperCase()]; + } }, { key: "filterData", value: function filterData() { @@ -130,8 +164,9 @@ var GameMenuFilters = function (_React$Component) { return 0; }); - this.logProps(dataProp, cells); - this.updadeGamePage(gamePage, cells); + this.logProps(cells, dataProp); + + this.baseFilter(gamePage, cells, this.getFilterTypeData(dataProp)); } //GameResetFilter.js @@ -141,10 +176,14 @@ var GameMenuFilters = function (_React$Component) { value: function resetFilter() { var gamePage = this.gamesPageRef; var cells = gamePage.getCells(); + + this.baseLog(); + cells.sort(function (a, b) { return a.index - b.index; }); - this.updadeGamePage(gamePage, cells); + + this.baseFilter(gamePage, cells, FILTERS.DEFAULT); } //GameReverseFilter.js @@ -152,10 +191,13 @@ var GameMenuFilters = function (_React$Component) { }, { key: "revertFilter", value: function revertFilter() { + this.baseLog(); + var gamePage = this.gamesPageRef; var cells = gamePage.getCells(); cells.reverse(); - this.updadeGamePage(gamePage, cells); + + this.baseFilter(gamePage, cells, FILTERS.REVERT); } }, { key: "render", diff --git a/src/react/GamesPage.js b/src/react/GamesPage.js index e919fbf3..baea33b5 100644 --- a/src/react/GamesPage.js +++ b/src/react/GamesPage.js @@ -18,17 +18,24 @@ var GamesPage = function (_React$Component) { var _this = _possibleConstructorReturn(this, (GamesPage.__proto__ || Object.getPrototypeOf(GamesPage)).call(this, props)); _this.state = { - cellsReceived: _this.props.children.cells, - filterState: "" + cellsReceived: _this.props.children.cells }; _this.pageWithCells = []; _this.orderCellsIndex(); + _this.lastFilter; return _this; } _createClass(GamesPage, [{ + key: "setLastFilter", + value: function setLastFilter(lastFilter) { + this.lastFilter = lastFilter; + } + }, { key: "updateCells", - value: function updateCells(cellsOrder) { + value: function updateCells() { + var cellsOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state.cellsReceived; + this.render(cellsOrder); } }, { @@ -61,7 +68,7 @@ var GamesPage = function (_React$Component) { var eachCell = cellsOrder[cellIndex]; _this2.pageWithCells.push(React.createElement( GameCell, - { cell: eachCell }, + { lastFilter: _this2.lastFilter, cell: eachCell }, cellIndex )); cellIndex++; diff --git a/texts/release_notes.txt b/texts/release_notes.txt index ed7ebe28..c0fffa4e 100644 --- a/texts/release_notes.txt +++ b/texts/release_notes.txt @@ -1,6 +1,10 @@ +v.1.30.0 - Add the title of the game cells +Add the title of the game cells to my portfolio showing the last information selected by the filters. I still plan to add a button to turn the information on and off to appear on top of the game cells. + +===== v.1.29.0 - Add Defold Raoi minigames Add the game Defold Raoi 15-Puzzle to my portfolio, it was a project to study the Lua language, and I got excited once I had heard about the Defold game engine in the studio where I work - +https://github.com/MarcosRaoi/marcosraoi.github.io/commit/3b66dc552d7b17de84b36b15cf53397767965a74 ===== v.1.28.2 - Create submodule pokedex Second test with pokedex cloned repo (https://github.com/MarcosRaoi/pokedex), now submodule