mindol1004/excel-download
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

react web game : 지뢰찾기

Browse Source
This commit is contained in:
haerong22
2021-03-13 00:32:14 +09:00
parent b8357a8d3a
commit 7ebe360415
8 changed files with 161 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
react_webgame/7. 틱택토/Table.jsx Normal file
View File

@@ -0,0 +1,17 @@
import React, {memo} from "react";
import Tr from "./Tr";
const Table = memo(({ tableData, dispatch }) => {
console.log("table rendered");
return (
<table>
{Array(tableData.length)
.fill()
.map((tr, i) => (
<Tr rowIndex={i} rowData={tableData[i]} dispatch={dispatch} />
))}
</table>
);
});
export default Table;

24
react_webgame/7. 틱택토/Td.jsx Normal file
View File

@@ -0,0 +1,24 @@
import React, { useCallback, useRef, useEffect, memo } from "react";
import { CLICK_CELL } from "./TicTacToe";
const Td = memo(({ rowIndex, cellIndex, dispatch, cellData }) => {
console.log("td rendered")
const ref = useRef([]);
useEffect(() => {
console.log(rowIndex === ref.current[0], cellIndex === ref.current[1], dispatch === ref.current[2], cellData === ref.current[3])
ref.current = [rowIndex, cellIndex, dispatch, cellData]
}, [rowIndex, cellIndex, dispatch, cellData])
const onClickTd = useCallback(() => {
console.log(rowIndex, cellIndex);
if(cellData) {
return;
}
dispatch({ type: CLICK_CELL, row: rowIndex, cell: cellIndex });
}, [cellData]);
return <td onClick={onClickTd}>{cellData}</td>;
});
export default Td;

0
react_webgame/main/TicTacToe.jsx → react_webgame/7. 틱택토/TicTacToe.jsx
View File

20
react_webgame/7. 틱택토/Tr.jsx Normal file
View File

@@ -0,0 +1,20 @@
import React, {memo, useMemo} from "react";
import Td from "./Td";
const Tr = memo(({ rowData, rowIndex, dispatch }) => {
console.log("tr rendered")
return (
<tr>
{Array(rowData.length)
.fill()
.map((td, i) => (
useMemo(
() => <Td rowIndex={rowIndex} cellIndex={i} dispatch={dispatch} cellData={rowData[i]} >{""}</Td>,
[rowData[i]],
)
))}
</tr>
);
});
export default Tr;

6
react_webgame/7. 틱택토/client.jsx Normal file
View File

@@ -0,0 +1,6 @@
import React from "react";
import ReactDom from "react-dom";
import TicTacToe from "./TicTacToe";
ReactDom.render(<TicTacToe />, document.querySelector("#root"));

21
react_webgame/7. 틱택토/index.html Normal file
View File

@@ -0,0 +1,21 @@
<html>
<head>
<meta charset="utf-8" />
<title>틱택토</title>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
width: 40px;
height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>

43
react_webgame/main/Form.jsx Normal file
View File

@@ -0,0 +1,43 @@
import React, { useState, useCallback } from "react";
const Form = () => {
const [row, setRow] = useState(10);
const [cell, setCell] = useState(10);
const [mine, setMine] = useState(20);
const onChangeRow = useCallback((e) => {
setRow(e.target.value);
}, []);
const onChangeCell = useCallback((e) => {
setCell(e.target.value);
}, []);
const onChangeMine = useCallback((e) => {
setMine(e.target.value);
}, []);
return (
<div>
<input
type="number"
placeholder="세로"
value={row}
onChange={onChangeRow}
/>
<input
type="number"
placeholder="가로"
value={cell}
onChange={onChangeCell}
/>
<input
type="number"
placeholder="지뢰"
value={mine}
onChange={onChangeMine}
/>
<button onClick={onClickBtn}>시작</button>
</div>
);
};
export default Form;

30
react_webgame/main/MineSearch.jsx Normal file
View File

@@ -0,0 +1,30 @@
import React, { useReducer } from "react";
import Table from "./Table";
const initialState = {
tableData: [],
timer: 0,
result: "",
};
const reducer = (state, action) => {
switch (action.type) {
default:
return state;
}
};
const MineSearch = () => {
const [state, dispatch] = useReducer(reducer, initialState);
const { result } = state;
return (
<>
<Form />
<div>{timer}</div>
<Table />
<div>{result}</div>
</>
);
};
export default MineSearch;