Feedback

.gitignore

@@ -1,104 +1,23 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Optional npm cache directory
-.npm
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
 
-# Optional eslint cache
-.eslintcache
+# testing
+/coverage
 
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
+# production
+/build
 
-# Optional REPL history
-.node_repl_history
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# Next.js build output
-.next
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and *not* Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -1,3 +1,9 @@
+![Screenshot 2021-08-07 at 19-36-24 Game](https://user-images.githubusercontent.com/58252790/128607396-b190a851-a21c-4943-9452-c264b1887a1d.png)
+
+```Istenenler tamamlandi.Eklenecek birkac ozellik var ondan sonra deploy edecegim.```
+
+---
+
 ## HAFTA 4 - ÖDEV
 
 # React mix example
@@ -9,7 +15,7 @@ Ne istiyoruz?
 
 - Ekranda 500px X 500px boyutunda köşe renkleri olan bir alan (oyun tahtasi) oluşturun.
 - Bir karakter component'i oluşturun. Bu karakter 20px x 20px bir kare de olabilir sizin göstermek istediginiz bir image da olabilir.
-- Uygulama acildiginda karakterimiz bu oyun tahtasinda yukari, asagi, sag, sol ok tuslariyla hareket edebilsin istiyoruz. 
+- Uygulama acildiginda karakterimiz bu oyun tahtasinda yukari, asagi, sag, sol ok tuslariyla hareket edebilsin istiyoruz.
 - Space tusuna basili tutulursa karakterin hareket etme hızı iki katına çıkmalı.
 - Sayfa yenilenirse karakter kaldigi yerden devam etmeli.
 - Karakter oyun tahtasindan cikamamali.
@@ -18,11 +24,10 @@ Ne istiyoruz?
 - Uygulamayı tamamen React hooks ile yapmayı deneyin. Kendi hooklarinizi yazmakta cekinmeyin.
 - Olabildigince duzenli kod yazmayi deneyin. Birden cok component olusturun.
 - Istediginiz bir ESLint kuralini takip edin.
-- Opsiyonel olarak uygulamanızı vercel, netlify v.b bir servise deploy edin ve linki readme dosyaniza ekleyin. 
+- Opsiyonel olarak uygulamanızı vercel, netlify v.b bir servise deploy edin ve linki readme dosyaniza ekleyin.
 - Arkadaslarinizla discord uzerinden code-review yapin. En az 1 kere! Yazdiginiz kodlari karsilikli olarak nasil daha iyi hale getirebilirsiniz buna bakin.
 
-
-Daha iyi anlasilmasi icin ornek resimler.
+Daha iyi anlasilmasi icin ornek resimler
 (Burada mario ve kare karakterleri yukari, asagi, sag, sol ok tuslariyla hareket edebiliyor. )
 
 <img width="657" alt="Screen Shot 2021-08-02 at 18 49 38" src="https://user-images.githubusercontent.com/6469914/127889099-c052d9dd-981a-4d0b-90a4-ce0c5747094c.png">

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "easy-board-game-yusufcmlt",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "node-sass": "^6.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "web-vitals": "^1.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
+      rel="stylesheet"
+    />
+
+    <title>Game</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from "react";
+import "./App.scss";
+import GameMap from "./components/map/GameMap";
+import SelectionList from "./components/selections/SelectionList";
+
+function App() {
+  const appRef = useRef(null);
+
+  useEffect(() => {
+    appRef.current.classList.add("app--opened");
+  }, []);
+
+  return (
+    <div ref={appRef} className="app">
+      <div className="app__header">
+        <h1 className="app__heading-1">Game Test</h1>
+        <SelectionList />
+      </div>
+      <GameMap mapHeight="512" mapWidth="640" />
+    </div>
+  );
+}
+
+export default App;

src/App.scss

@@ -0,0 +1,38 @@
+.app {
+  height: 100vh;
+
+  background-image: url("./assets/img/background-img.jpg");
+  background-size: cover;
+
+  filter: brightness(5%);
+
+  transition: 2s;
+
+  display: grid;
+  grid-template-columns: [full-start] 1fr [map-select-start] 20rem [ map-select-end game-start header-start] 64rem [ game-end header-end char-select-start] 20rem [char-select-end] 1fr [full-end];
+  grid-template-rows: [full-start] 1fr [header-start] 20rem [header-end game-start] 51.2rem [game-end dpad-start] 20rem [dpad-end] 1fr [full-end];
+
+  &--opened {
+    filter: brightness(100%);
+  }
+  &__header {
+    grid-column: header-start/header-end;
+    grid-row: header-start/header-end;
+
+    display: grid;
+
+    align-items: center;
+    align-content: flex-start;
+    row-gap: 2rem;
+  }
+  &__heading-1 {
+    font-size: 3rem;
+    color: white;
+    text-transform: uppercase;
+    margin: auto;
+  }
+  &__select {
+    text-align: center;
+    margin: 0 auto;
+  }
+}

src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});