diff --git a/minimal-app/src/features/invisibleMaze/invisibleMaze.js b/minimal-app/src/features/invisibleMaze/invisibleMaze.js index a203532b7dc1eab0a4987d9c1406c0cbc4e03b31..87f75147b2f78ff7d4502b57ef56a164ee3a370f 100644 --- a/minimal-app/src/features/invisibleMaze/invisibleMaze.js +++ b/minimal-app/src/features/invisibleMaze/invisibleMaze.js @@ -1,38 +1,44 @@ import React from 'react'; -import { useSelector, useDispatch } from 'react-redux'; -import PropTypes from 'prop-types'; import styles from './invisibleMaze.module.css'; export function InvisibleMaze() { return ( <main> - <label> - <button className={styles.panel}> - </button> - <button className={styles.panel}> - </button> - <button className={styles.panel}> - </button> - <button className={styles.panel}> - </button> - <button className={styles.panel}> - </button> - <button className={styles.panel}> - </button> - <button className={styles.panel}> - </button> - <button className={styles.panel}> - </button> - <button className={styles.panel}> - </button> - <button className={styles.create}> - {"Create Maze"} - </button> - <button className={styles.reset}> - </button> - <button className={styles.play}> - </button> - </label> + <div className={styles.maze}> + <button className={styles.panel}> + </button> + <button className={styles.panel}> + </button> + <button className={styles.panel}> + </button> + </div> + <div className={styles.maze}> + <button className={styles.panel}> + </button> + <button className={styles.panel}> + </button> + <button className={styles.panel}> + </button> + </div> + <div className={styles.maze}> + <button className={styles.panel}> + </button> + <button className={styles.panel}> + </button> + <button className={styles.panel}> + </button> + </div> + <div className={styles.controlPanel}> + <button className={styles.create}> + {"Create Maze"} + </button> + <button className={styles.reset}> + {"Reset Maze"} + </button> + <button className={styles.play}> + {"Play Maze"} + </button> + </div> </main> ); } \ No newline at end of file diff --git a/minimal-app/src/features/invisibleMaze/invisibleMaze.module.css b/minimal-app/src/features/invisibleMaze/invisibleMaze.module.css index 4ade51cc465f068329bffc5b66dc0a70a5583e33..29604f3f7175c93e115034efb1df0a84fcb4d9b1 100644 --- a/minimal-app/src/features/invisibleMaze/invisibleMaze.module.css +++ b/minimal-app/src/features/invisibleMaze/invisibleMaze.module.css @@ -1,20 +1,31 @@ .panel { - width: 50px; + width: 100px; height: 50px; } .create { - width: 50px; + width: 100px; height: 50px; + font-weight: bold; } .reset { - width: 50px; + width: 100px; height: 50px; + font-weight: bold; } .play { - width: 50px; + width: 100px; height: 50px; + font-weight: bold; } -.maze { - width: 50px; - height: 50px; +.maze{ + display: flex; + flex-flow: row, nowrap; + padding: 10px; + align-content: center; } +.controlPanel{ + display: flex; + background-color: maroon; + padding: 10px; + flex-flow: row, nowrap; +} \ No newline at end of file