From 391b4a5c2749e48e11c6974770377d798eb7c51e Mon Sep 17 00:00:00 2001 From: VINCENT ADENIJI <54925113+TOSINNIJIS1@users.noreply.github.com> Date: Mon, 24 Aug 2020 17:01:17 -0400 Subject: [PATCH 1/2] value wont render on the cell --- src/App.js | 5 ++- .../SudokuGame/puzzle-builder/Board.js | 9 ++++-- .../SudokuGame/puzzle-builder/Grid.js | 17 +++++++--- .../puzzle-builder/KeyPad/KeyPad.js | 1 + .../puzzle-builder/KeyPad/KeyPadBoard.js | 18 +++++++---- .../SudokuGame/puzzle-handler/RenderPuzzle.js | 4 +++ src/components/assets/KeyButton.js | 32 +++++++++++++++---- src/components/assets/numBtn.js | 32 +++++++++++++++++++ 8 files changed, 95 insertions(+), 23 deletions(-) create mode 100644 src/components/assets/numBtn.js diff --git a/src/App.js b/src/App.js index bd796a8..cdfdf66 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,8 @@ import React, { useState, useReducer } from 'react'; import { Router, Route, Switch } from 'react-router-dom'; +import Number from './components/assets/numBtn' + // General utilities --------------------------------------------- import history from './utils/history'; import { GridContext } from './store/contexts/GridContext'; @@ -51,7 +53,6 @@ const App = () => { original: '', history: [], conflicts: new Set([]), - numbers: [], }); let grid = `${gridState.gridlength}x${gridState.gridlength}`; @@ -112,6 +113,8 @@ const App = () => { /> )} /> + + {/* */} { const classes = useStyles(); const [gridState, setGridState] = useContext(GridContext); @@ -22,7 +25,6 @@ const Board = (props) => { const board = []; for (let i = 0; i < boardState.length; i++) { - console.log(boardState.length, 'length length') let currRow = []; for (let j = 0; j < boardState[i].length; j++) { const conflicts = props.conflicts; @@ -39,6 +41,8 @@ const Board = (props) => { colIndex={j} onValueChange={handleSquareValueChange} /> + {console.log(boardState)} + ); @@ -56,9 +60,8 @@ const Board = (props) => { }; const board = generateBoard(); - console.log(board) - return
{board}
; + return
{board}
; }; const useStyles = makeStyles(() => ({ diff --git a/src/components/SudokuGame/puzzle-builder/Grid.js b/src/components/SudokuGame/puzzle-builder/Grid.js index 8048016..a0a39da 100644 --- a/src/components/SudokuGame/puzzle-builder/Grid.js +++ b/src/components/SudokuGame/puzzle-builder/Grid.js @@ -3,13 +3,16 @@ import { GridContext } from '../../../store/contexts/GridContext'; import styled from 'styled-components'; import { blue } from '@material-ui/core/colors'; import { makeStyles } from '@material-ui/core/styles'; + import KeyButton from '../../assets/KeyButton' + + function Grid(props) { - console.log(props, 'gridddd') const classes = useStyles(); const [gridState, setGridState] = useContext(GridContext); + console.log(props.value, 'myvalue') const generateSquareContent = () => { // A Square may only be edited if it's value is "." @@ -46,9 +49,6 @@ function Grid(props) { style['background'] = 'pink'; } } - - - return (
@@ -63,8 +63,13 @@ function Grid(props) { /> + value={squareValue} + change={handleSquareValueChange} + rowIndex={props.rowIndex} + colIndex={props.colIndex} + /> + {/* */}
); @@ -80,6 +85,8 @@ function Grid(props) { } }; + + // Cell validation const isValidInput = (i) => { return i === '' || (i.length === 1 && isNumeric(i)); diff --git a/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPad.js b/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPad.js index 44a1dc1..211dabb 100644 --- a/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPad.js +++ b/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPad.js @@ -12,6 +12,7 @@ import KeyPadBoard from './KeyPadBoard'; const KeyPad = (props) => { const [gridState, setGridState] = useContext(GridContext); + console.log(props, '1`') let gridNotChanged = 0; let gridChanged = 1; diff --git a/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPadBoard.js b/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPadBoard.js index 8c89569..3ffd5e5 100644 --- a/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPadBoard.js +++ b/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPadBoard.js @@ -5,28 +5,30 @@ import Typography from '@material-ui/core/Typography'; import { grey } from '@material-ui/core/colors'; import { makeStyles } from '@material-ui/core/styles'; -import Key from '../../../assets/KeyButton'; +import NumberButton from '../../../assets/numBtn'; -const KeyPadBoard = () => { +const KeyPadBoard = (props) => { + console.log(props, 'propss') const classes = useStyles(); const [gridState, setGridState] = useContext(GridContext); const GridLength = gridState.gridlength; - const generateBoard = () => { + const generateBoard = (props) => { const board = []; for (let i = 0; i < GridLength; i++) { let currRow = []; for (let j = 0; j < GridLength[i]; j++) { + let keys = j + 1 let currSquare = ( - - {j + 1} + console.log(keys)} > + {keys} ); currRow.push(currSquare); } - board.push(
{currRow}
); + board.push(
{currRow}
); } return board; @@ -34,7 +36,9 @@ const KeyPadBoard = () => { const board = generateBoard(); - return ; + return ( + + ); }; const useStyles = makeStyles(() => ({ diff --git a/src/components/SudokuGame/puzzle-handler/RenderPuzzle.js b/src/components/SudokuGame/puzzle-handler/RenderPuzzle.js index cdf32ca..99e0b56 100644 --- a/src/components/SudokuGame/puzzle-handler/RenderPuzzle.js +++ b/src/components/SudokuGame/puzzle-handler/RenderPuzzle.js @@ -20,6 +20,8 @@ import { Get4x4 } from './grid-axios-call/4x4'; import { Get6x6 } from './grid-axios-call/6x6'; import { Get9x9 } from './grid-axios-call/9x9'; + + // Authentication import axiosWithAuth from '../../../utils/axiosWithAuth'; import { postWithAuth } from '../Upload-image/postWithAuth'; @@ -332,7 +334,9 @@ const RenderPuzzle = (props) => { onNewGameClick={handleNewGameClick} onVerifyClick={handleVerifyClick} onSaveClick={handleSaveClick} + /> + ); diff --git a/src/components/assets/KeyButton.js b/src/components/assets/KeyButton.js index cb3f1f4..f6b4f29 100644 --- a/src/components/assets/KeyButton.js +++ b/src/components/assets/KeyButton.js @@ -1,17 +1,35 @@ -import React, { useState } from 'react'; +import React, { useState, useContext } from 'react'; import { GridContext } from '../../store/contexts/GridContext' +import Numbers from './numBtn' function Keys (props) { - console.log(props.change, 'onClick props') + const [value, setValue] = useState(props.value); + const handleChange = (e) => { + const target = setValue(e); + if(target) { + const row = props.rowIndex; + const col = props.colIndex; + props.onValueChange(row, col, target) + + } + } + return ( -

{props.change(props.board)}}> - {props.board} +
+ {/*

{value}

*/} + + +
+ -

) } diff --git a/src/components/assets/numBtn.js b/src/components/assets/numBtn.js new file mode 100644 index 0000000..ec0fa46 --- /dev/null +++ b/src/components/assets/numBtn.js @@ -0,0 +1,32 @@ +import React from 'react'; +import KeyButton from './KeyButton' + +const Numbers = (props) => { + console.log(props, 'number') + + const Length = 9; + + let board = []; + + for (let i = 0; i < Length; i++) { + board.push(i + 1) + + } + + + + + return ( +
+ {(board.map(data => + + + ))} +
+ // + ) +} + +export default Numbers \ No newline at end of file From 755fa6ba101349d5836b626526bb9d671a5c1ec9 Mon Sep 17 00:00:00 2001 From: VINCENT ADENIJI <54925113+TOSINNIJIS1@users.noreply.github.com> Date: Sun, 30 Aug 2020 11:41:50 -0400 Subject: [PATCH 2/2] keypad still not functioning, only need to target the cell. --- .../SudokuGame/puzzle-builder/Board.js | 14 +- .../SudokuGame/puzzle-builder/Grid.js | 4 +- .../puzzle-builder/KeyPad/KeyPad.js | 2 + .../puzzle-builder/KeyPad/KeyPadBoard.js | 11 +- .../SudokuGame/puzzle-handler/RenderPuzzle.js | 13 +- src/components/assets/KeyButton.js | 40 +-- src/components/assets/conaryFile.js | 237 ++++++++++++++++++ src/components/assets/numBtn.js | 37 ++- 8 files changed, 318 insertions(+), 40 deletions(-) create mode 100644 src/components/assets/conaryFile.js diff --git a/src/components/SudokuGame/puzzle-builder/Board.js b/src/components/SudokuGame/puzzle-builder/Board.js index 7552d59..00ec9a1 100644 --- a/src/components/SudokuGame/puzzle-builder/Board.js +++ b/src/components/SudokuGame/puzzle-builder/Board.js @@ -3,18 +3,20 @@ import { GridContext } from '../../../store/contexts/GridContext'; import { makeStyles } from '@material-ui/core/styles'; import Grid from './Grid'; -import KeyButton from '../../assets/KeyButton' +import KeyButton from '../../assets/KeyButton'; +import NumberButton from '../../assets/numBtn'; +import KeyPadBoard from '../puzzle-builder/KeyPad/KeyPadBoard' const Board = (props) => { const classes = useStyles(); const [gridState, setGridState] = useContext(GridContext); - console.log(gridState, ('Lord Grid')) console.log('BOARD PROPS: ', props); console.log('AKAKFILES: ', props); const handleSquareValueChange = (i, j, newValue) => { + console.log(i, j, newValue, 'bigbang') props.onSquareValueChange(i, j, newValue); }; @@ -42,7 +44,13 @@ const Board = (props) => { onValueChange={handleSquareValueChange} /> {console.log(boardState)} - + + + ); diff --git a/src/components/SudokuGame/puzzle-builder/Grid.js b/src/components/SudokuGame/puzzle-builder/Grid.js index a0a39da..a3eaf78 100644 --- a/src/components/SudokuGame/puzzle-builder/Grid.js +++ b/src/components/SudokuGame/puzzle-builder/Grid.js @@ -12,7 +12,7 @@ function Grid(props) { const [gridState, setGridState] = useContext(GridContext); - console.log(props.value, 'myvalue') + console.log(props.editable, 'myvalue') const generateSquareContent = () => { // A Square may only be edited if it's value is "." @@ -98,7 +98,7 @@ function Grid(props) { const isNumeric = (num) => { - return !isNaN(num); + return -!isNaN(num); }; diff --git a/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPad.js b/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPad.js index 211dabb..3d56dd2 100644 --- a/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPad.js +++ b/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPad.js @@ -9,6 +9,7 @@ import Tooltip from '@material-ui/core/Tooltip'; import { blue, grey } from '@material-ui/core/colors'; import { makeStyles, withStyles } from '@material-ui/core/styles'; import KeyPadBoard from './KeyPadBoard'; +import NumberButton from '../../../assets/numBtn' const KeyPad = (props) => { const [gridState, setGridState] = useContext(GridContext); @@ -32,6 +33,7 @@ const KeyPad = (props) => { + {/* */} diff --git a/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPadBoard.js b/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPadBoard.js index 3ffd5e5..48cff3c 100644 --- a/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPadBoard.js +++ b/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPadBoard.js @@ -5,10 +5,12 @@ import Typography from '@material-ui/core/Typography'; import { grey } from '@material-ui/core/colors'; import { makeStyles } from '@material-ui/core/styles'; +import KeyPad from './KeyPad' import NumberButton from '../../../assets/numBtn'; +import KeyButton from '../../../assets/KeyButton' const KeyPadBoard = (props) => { - console.log(props, 'propss') + console.log(props.onValueChange, 'propss') const classes = useStyles(); const [gridState, setGridState] = useContext(GridContext); @@ -37,7 +39,12 @@ const KeyPadBoard = (props) => { const board = generateBoard(); return ( - +
+ + + +
+ ); }; diff --git a/src/components/SudokuGame/puzzle-handler/RenderPuzzle.js b/src/components/SudokuGame/puzzle-handler/RenderPuzzle.js index 99e0b56..359c03a 100644 --- a/src/components/SudokuGame/puzzle-handler/RenderPuzzle.js +++ b/src/components/SudokuGame/puzzle-handler/RenderPuzzle.js @@ -4,6 +4,9 @@ import { GridContext } from '../../../store/contexts/GridContext'; import { PuzzleContext } from '../../../store/contexts/PuzzleContext'; import useMediaQuery from '@material-ui/core/useMediaQuery'; + +import NumberButton from '../../assets/numBtn' + import Box from '@material-ui/core/Box'; import Grid from '@material-ui/core/Grid'; import { makeStyles } from '@material-ui/core/styles'; @@ -13,7 +16,8 @@ import Board from '../puzzle-builder/Board'; import KeyPad from '../puzzle-builder/KeyPad/KeyPad'; // key value rendering: import KeyButton from '../../assets/KeyButton'; -import Length from '../../KeyPad/keypad/lengthKey'; +import KeyPadBoard from '../puzzle-builder/KeyPad/KeyPadBoard' + import { keysPuzzle } from './functions/keys'; import { Get4x4 } from './grid-axios-call/4x4'; @@ -132,7 +136,7 @@ const RenderPuzzle = (props) => { cellId: stringify(i, j), editable: prevEditable, }; - console.log('newBoardState: ', prevState.newBoardState); + console.log('newBoardState: ', prevEditable); // Now push the previous board state on the history stack const newHistory = getDeepCopyOfArray(prevState.history); @@ -337,6 +341,11 @@ const RenderPuzzle = (props) => { /> + + + + ); diff --git a/src/components/assets/KeyButton.js b/src/components/assets/KeyButton.js index f6b4f29..f81d51a 100644 --- a/src/components/assets/KeyButton.js +++ b/src/components/assets/KeyButton.js @@ -1,36 +1,38 @@ import React, { useState, useContext } from 'react'; import { GridContext } from '../../store/contexts/GridContext' import Numbers from './numBtn' +import Typography from '@material-ui/core/Typography'; +import Box from '@material-ui/core/Box'; + function Keys (props) { - const [value, setValue] = useState(props.value); + console.log(props, 'data') + + const handleClick = (i, j, newValue) => { + console.log(i, j, newValue, 'BIGbANG') + // props.valueChange(i, j, newValue) - const handleChange = (e) => { - const target = setValue(e); + } - if(target) { + const handleChange = () => { + const target = props.data + if((target)) { const row = props.rowIndex; const col = props.colIndex; - props.onValueChange(row, col, target) + handleClick(row, col, target) } } - + return ( -
- {/*

{value}

*/} - - +
+ + handleChange(console.log(props.data, 'valen')) + }> + {props.data} +
- - ) } -export default Keys \ No newline at end of file +export default Keys; \ No newline at end of file diff --git a/src/components/assets/conaryFile.js b/src/components/assets/conaryFile.js new file mode 100644 index 0000000..fa50ded --- /dev/null +++ b/src/components/assets/conaryFile.js @@ -0,0 +1,237 @@ +import React from "react"; +// import { anime } from "react-anime"; +import "../../../index.scss"; +function ProfileInputs({ handleSubmit, addHandleChange }) { +// var current = null; +// const handleSubmitFocus = (e) => { +// if (current) current.pause(); +// current = anime({ +// targets: "path", +// strokeDashoffset: { +// value: -2421, +// duration: 700, +// easing: "easeOutQuart", +// }, +// strokeDasharray: { +// value: "522 3000", +// duration: 700, +// easing: "easeOutQuart", +// }, +// }); +// }; +// const handleTextFocus = (e) => { +// if (current) current.pause(); +// //console.log(e);debugger; +// current = anime({ +// targets: "path", +// strokeDashoffset: { +// value: e.target.dataset.strokedashoffset, +// duration: 700, +// easing: "easeOutQuart", +// }, +// strokeDasharray: { +// value: e.target.dataset.strokedasharray, +// duration: 700, +// easing: "easeOutQuart", +// }, +// }); + }; + return ( +
+
+ + + + + + + + + +
+ + + + + + + + + + +
+ + +
+
+ + +
+
+ +
+
+
+
+ ); +} +export default ProfileInputs; \ No newline at end of file diff --git a/src/components/assets/numBtn.js b/src/components/assets/numBtn.js index ec0fa46..d2293dd 100644 --- a/src/components/assets/numBtn.js +++ b/src/components/assets/numBtn.js @@ -1,31 +1,44 @@ import React from 'react'; import KeyButton from './KeyButton' +import Box from '@material-ui/core/Box'; +import Typography from '@material-ui/core/Typography'; + const Numbers = (props) => { - console.log(props, 'number') + console.log(props, 'numbern ') + + let squareItem = props.class.squareItem + let boardRow = props.class.boardRow + let bboard = props.class.board const Length = 9; let board = []; for (let i = 0; i < Length; i++) { - board.push(i + 1) + let key = i + 1 + board.push(key) } - - + const handleValueSquareChange = (i, j, newValue) => { + console.log(i, j, newValue, 'bigbang'); + // props.onValueChange(i, j, newValue); + } return ( -
- {(board.map(data => - - + + + {(board.map(data => + + + ))} -
- // + + ) }