Add files via upload

jenyadev3 · May 3, 2023 · 1128b72 · 1128b72
1 parent 72c61b1
commit 1128b72
Show file tree

Hide file tree

Showing 3 changed files with 170 additions and 0 deletions.
diff --git a/data.js b/data.js
@@ -0,0 +1,57 @@
+const images = [{
+  'id': 'YdAqiUkUoWA',
+  'url': 'img/cats-1.jpg',
+  'description': 'pink petaled flower',
+}, {
+  'id': 'hX_hf2lPpUU',
+  'url': 'img/cats-2.jpg',
+  'description': 'green leaf',
+}, {
+  'id': 'w1JE5duY62M',
+  'url': 'img/cats-3.jpg',
+  'description': 'red and white petaled flower close-up photography',
+}, {
+  'id': '3tYZjGSBwbk',
+  'url': 'img/cats-4.jpg',
+  'description': 'white daisy in bloom during daytime',
+}, {
+  'id': 'NoXUQ54pDac',
+  'url': 'img/cats-5.jpg',
+  'description': 'white-and-pink flowers',
+}, {
+  'id': 'OZhYgZh0bAg',
+  'url': 'img/cats-6.jpg',
+  'description': 'white and purple flower petals',
+}, {
+  'id': 'YdAqiUkUoWA1',
+  'url': 'img/cats-1.jpg',
+  'description': 'pink petaled flower',
+}, {
+  'id': 'hX_hf2lPpUU1',
+  'url': 'img/cats-2.jpg',
+  'description': 'green leaf',
+}, {
+  'id': 'w1JE5duY62M1',
+  'url': 'img/cats-3.jpg',
+  'description': 'red and white petaled flower close-up photography',
+}, {
+  'id': '3tYZjGSBwbk1',
+  'url': 'img/cats-4.jpg',
+  'description': 'white daisy in bloom during daytime',
+}, {
+  'id': 'NoXUQ54pDac1',
+  'url': 'img/cats-5.jpg',
+  'description': 'white-and-pink flowers',
+}, {
+  'id': 'OZhYgZh0bAg1',
+  'url': 'img/cats-6.jpg',
+  'description': 'white and purple flower petals',
+}];
+
+
+// списки выделенных и отгаданных карточек для отладки
+const visibleItems = ['hX_hf2lPpUU', '3tYZjGSBwbk'];
+const finishedItems = ['YdAqiUkUoWA', 'YdAqiUkUoWA1', 'w1JE5duY62M', 'w1JE5duY62M1'];
+window.images = images;
+window.visibleItems = visibleItems;
+window.finishedItems = finishedItems;
diff --git a/index.html b/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <title>Игра Мемори</title>
+  <link rel="stylesheet" href="css/style.css">
+  <script src="vendor/react.development.js"></script>
+  <script src="vendor/react-dom.development.js"></script>
+  <script src="vendor/babel.min.js"></script>
+  <script src="data.js"></script>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="text/babel">
+
+    const container = document.getElementById('root');
+    const root = ReactDOM.createRoot(container);
+    // Передаем данные(массивы из файла data.js)
+    root.render(<App images={images} visibleItems={visibleItems} finishedItems={finishedItems}/>);
+
+    // Отрисовываем игровое поле
+    function App({images, visibleItems, finishedItems}) {
+      return (
+        <section className="game container">
+          <Cards images={images} visibleItems={visibleItems} finishedItems={finishedItems}/>
+         </section>
+      );
+    }
+
+
+    function Cards({images, visibleItems, finishedItems}) {
+      const cards = images.map((item) => (
+       <Card 
+       key={item.id}
+       img={item.url}
+       text={item.description}
+       isShown={visibleItems.includes(item.id)}
+       isFinished={finishedItems.includes(item.id)}
+      />
+    ));
+    return (
+      <ul className="cards cards-theme-cars">
+        {cards}
+        </ul>
+    );
+    }
+
+    // Компонент самой карточки
+    function Card({img, text, isShown = false, isFinished = true}) {
+    // Добавляем доп.класс карточке в зависимости от того в каком она состоянии. Если она обычная, класс остается ттем же
+       const className = `card ${isShown ? "card-show" : ""} ${isFinished ? "card-finished" : ""}`;
+       return (
+    // Карточка представляет из себя изображение,каждая имеет свои img и text (взяты из массива, см.компонент Cards)
+      <li className={className}>
+       <img src={img} alt={text} width="204" height="144"/>
+        </li>
+     );
+  }
+
+  </script>
+</body>
+</html>
diff --git a/template.html b/template.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="css/style.css">
+  <title>Игровое поле</title>
+</head>
+<body>
+  <section class="game container">
+    <ul class="cards cards-theme-cars">
+      <li class="card card-show">
+        <img src="img/cats-1.jpg" width="204" height="144" alt="Котик">
+      </li>
+      <li class="card">
+        <img src="img/cats-2.jpg" width="204" height="144" alt="Котик">
+      </li>
+      <li class="card">
+        <img src="img/cats-3.jpg" width="204" height="144" alt="Котик">
+      </li>
+      <li class="card">
+        <img src="img/cats-4.jpg" width="204" height="144" alt="Котик">
+      </li>
+      <li class="card card-finished">
+        <img src="img/cats-5.jpg" width="204" height="144" alt="Котик">
+      </li>
+      <li class="card card-show">
+        <img src="img/cats-6.jpg" width="204" height="144" alt="Котик">
+      </li>
+      <li class="card">
+        <img src="img/cats-6.jpg" width="204" height="144" alt="Котик">
+      </li>
+      <li class="card card-finished">
+        <img src="img/cats-5.jpg" width="204" height="144" alt="Котик">
+      </li>
+      <li class="card">
+        <img src="img/cats-4.jpg" width="204" height="144" alt="Котик">
+      </li>
+      <li class="card">
+        <img src="img/cats-3.jpg" width="204" height="144" alt="Котик">
+      </li>
+      <li class="card">
+        <img src="img/cats-2.jpg" width="204" height="144" alt="Котик">
+      </li>
+      <li class="card">
+        <img src="img/cats-1.jpg" width="204" height="144" alt="Котик">
+      </li>
+    </ul>
+  </section>
+</body>
+</html>