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.
MarcosRaoi · Oct 1, 2023 · 73300be · 73300be
1 parent 3b66dc5
commit 73300be
Show file tree

Hide file tree

Showing 13 changed files with 278 additions and 34 deletions.
diff --git 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
@@ -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 🇧🇷 &#127770; Lua.",

diff --git 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
@@ -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 (
             <div class={positionClass}>
+                <GameCellTitle>{this.getGameCellTitle(this.props.lastFilter)}</GameCellTitle>
                 <GameLinkedBanner bannerData={{ cellData }} />
                 <GameInfo>{cellInfo}</GameInfo>
             </div>
@@ -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
@@ -0,0 +1,15 @@
+class GameCellTitle extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    getActualTitle() {
+        return this.props.children;
+    }
+
+    render() {
+        return (<div class="game_cell_title">{this.getActualTitle()}</div>);
+    }
+}
+
+export default GameCellTitle;
diff --git 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
@@ -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
@@ -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(<GameCell cell={eachCell}>{cellIndex}</GameCell>);
+                this.pageWithCells.push(<GameCell lastFilter={this.lastFilter} cell={eachCell}>{cellIndex}</GameCell>);
                 cellIndex++;
             }
         );

diff --git 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);
         }