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); - 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); }; @@ -22,7 +27,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 +43,14 @@ const Board = (props) => { colIndex={j} onValueChange={handleSquareValueChange} /> + {console.log(boardState)} + + + ); @@ -56,9 +68,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..a3eaf78 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.editable, '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)); @@ -91,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 44a1dc1..3d56dd2 100644 --- a/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPad.js +++ b/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPad.js @@ -9,9 +9,11 @@ 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); + console.log(props, '1`') let gridNotChanged = 0; let gridChanged = 1; @@ -31,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 8c89569..48cff3c 100644 --- a/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPadBoard.js +++ b/src/components/SudokuGame/puzzle-builder/KeyPad/KeyPadBoard.js @@ -5,28 +5,32 @@ 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 KeyPad from './KeyPad' +import NumberButton from '../../../assets/numBtn'; +import KeyButton from '../../../assets/KeyButton' -const KeyPadBoard = () => { +const KeyPadBoard = (props) => { + console.log(props.onValueChange, '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 +38,14 @@ 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..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,13 +16,16 @@ 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'; 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'; @@ -130,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); @@ -332,7 +338,14 @@ 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..f81d51a 100644 --- a/src/components/assets/KeyButton.js +++ b/src/components/assets/KeyButton.js @@ -1,18 +1,38 @@ -import React, { useState } from 'react'; +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) { - console.log(props.change, 'onClick props') + console.log(props, 'data') + const handleClick = (i, j, newValue) => { + console.log(i, j, newValue, 'BIGbANG') + // props.valueChange(i, j, newValue) - return ( -

{props.change(props.board)}}> - {props.board} + } + + const handleChange = () => { + const target = props.data + if((target)) { + const row = props.rowIndex; + const col = props.colIndex; + handleClick(row, col, target) -

+ } + } + + return ( +
+ + 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 new file mode 100644 index 0000000..d2293dd --- /dev/null +++ b/src/components/assets/numBtn.js @@ -0,0 +1,45 @@ +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, '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++) { + 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 => + + + + ))} + + + ) +} + +export default Numbers \ No newline at end of file