diff --git a/.idea/modules.xml b/.idea/modules.xml index 3774a58aaf3e438c45c73f4dc885195b870ed2f7..09659ce2ea7484c677e788dc31e10edab4411ab4 100644 --- a/.idea/modules.xml +++ b/.idea/modules.xml @@ -2,7 +2,7 @@ <project version="4"> <component name="ProjectModuleManager"> <modules> - <module fileurl="file://$PROJECT_DIR$/.idea/dtek0065_project.iml" filepath="$PROJECT_DIR$/.idea/dtek0065_project.iml" /> + <module fileurl="file://$PROJECT_DIR$/.idea/DTEK0065_project.iml" filepath="$PROJECT_DIR$/.idea/DTEK0065_project.iml" /> </modules> </component> </project> \ No newline at end of file diff --git a/projekti/src/App.js b/projekti/src/App.js index 5d36ceed67a064c7da3d602fc13b4ba4bacbcc5e..d6a881adcd5e16d83c5e860f09f9c3fef31804fd 100644 --- a/projekti/src/App.js +++ b/projekti/src/App.js @@ -1,11 +1,51 @@ import React, {Component} from "react"; + class App extends Component { constructor() { super(); this.state = initialState; } +} + + export interface ICanvasBoard { + height: number; + width: number; +} + +const CanvasBoard = ({ height, width }: ICanvasBoard) => { + return ( + <canvas + style={{ + border: "3px solid black", + }} + height={height} + width={width} + /> + ); +}; + +import { ChakraProvider, Container, Heading } from "@chakra-ui/react"; +import { Provider } from "react-redux"; +import CanvasBoard from "./components/CanvasBoard"; +import ScoreCard from "./components/ScoreCard"; +import store from "./store"; + +const App = () => { + return ( + <Provider store={store}> + <ChakraProvider> + <Container maxW="container.lg" centerContent> + <Heading as="h1" size="xl">SNAKE GAME</Heading> + <CanvasBoard height={600} width={1000} /> //Canvasboard component added + </Container> + </ChakraProvider> + </Provider> + ); +}; + +export default App; // how the snake moves on the board moveSnake() { @@ -14,7 +54,6 @@ class App extends Component { // updates the direction of the snake from the input it gets changeDirection() { -//homonaama } // checks if food is eaten