Initial commit

b6b038cc · Nurasyl · b6b038cc · b6b038cc · b6b038cc · b6b038cc
Commit b6b038cc authored Apr 09, 2024 by Nurasyl
23 changed files
--- a/.gitignore
+++ b/.gitignore
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
\ No newline at end of file
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Burger Builder</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "burger-builder-template",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.6",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^3.1.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.2.0"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.tsx
+++ b/src/App.tsx
+import React from 'react';
+import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder';
+
+function App() {
+  return <BurgerBuilder/>;
+}
+
+export default App
--- a/src/components/BuildControls/BuildControl/BuildControl.css
+++ b/src/components/BuildControls/BuildControl/BuildControl.css
+.BuildControl {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 5px 0;
+}
+
+.BuildControl button {
+    display: block;
+    font: inherit;
+    padding: 5px;
+    margin: 0 5px;
+    width: 80px;
+    border: 1px solid #aa6817;
+    cursor: pointer;
+    outline: none;
+}
+
+.BuildControl button:disabled {
+    background-color: #ac9980;
+    border: 1px solid #7e7365;
+    color: #ccc;
+    cursor: default;
+}
+
+.BuildControl button:hover:disabled {
+    background-color: #ac9980;
+    color: #ccc;
+    cursor: not-allowed;
+}
+
+.Label {
+    padding: 10px;
+    font-weight: bold;
+    width: 80px;
+    text-transform: capitalize;
+}
+
+.BuildControl .Less {
+    background-color: #D39952;
+    color: white;
+}
+
+.BuildControl .More {
+    background-color: #8f5e1e;
+    color: white;
+}
+
+.BuildControl .Less:hover, .BuildControl .Less:active {
+    background-color: #daa972;
+    color: white;
+}
+
+.BuildControl .More:hover, .BuildControl .More:active {
+    background-color: #99703f;
+    color: white;
+}
--- a/src/components/BuildControls/BuildControl/BuildControl.tsx
+++ b/src/components/BuildControls/BuildControl/BuildControl.tsx
+import React from 'react';
+import type { IngredientNames } from '@/interfaces/Ingredients';
+import './BuildControl.css';
+
+interface Props {
+    type: IngredientNames;
+    onMoreClick: VoidFunction;
+    onLessClick: VoidFunction;
+}
+
+const BuildControl = ({type, onMoreClick, onLessClick}: Props) => {
+    return (
+        <div className='BuildControl'>
+            <div className='Label'>{type}</div>
+            <button className='Less' onClick={onLessClick}>Less</button>
+            <button className='More' onClick={onMoreClick}>More</button>
+        </div>
+    );
+}
+
+export default BuildControl;
--- a/src/components/BuildControls/BuildControls.css
+++ b/src/components/BuildControls/BuildControls.css
+.BuildControls {
+    width: 100%;
+    background-color: #CF8F2E;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    box-shadow: 0 2px 1px #ccc;
+    margin: auto;
+    padding: 10px 0;
+}
--- a/src/components/BuildControls/BuildControls.tsx
+++ b/src/components/BuildControls/BuildControls.tsx
+import React from 'react';
+import type { Ingredients, IngredientNames } from '@/interfaces/Ingredients';
+import BuildControl from './BuildControl/BuildControl';
+import './BuildControls.css';
+
+interface Props {
+    ingredients: Ingredients;
+    onMoreClick: (ingType: IngredientNames) => void;
+    onLessClick: (ingType: IngredientNames) => void;
+    price: number
+}
+
+const BuildControls = ({ingredients, onMoreClick, onLessClick, price}: Props) => {
+    return (
+        <div className='BuildControls'>
+            <p>Current Price: <strong>{price} ₸</strong></p>
+            {Object.keys(ingredients).map(ingType => (
+                <BuildControl 
+                    key={ingType} 
+                    type={ingType as IngredientNames}
+                    onLessClick={() => onLessClick(ingType as IngredientNames)}
+                    onMoreClick={() => onMoreClick(ingType as IngredientNames)}
+                />
+            ))}
+        </div>
+    );
+}
+
+export default BuildControls;
--- a/src/components/Burger/Burger.css
+++ b/src/components/Burger/Burger.css
+.Burger {
+    width: 100%;
+    margin: auto;
+    height: 250px;
+    overflow: auto;
+    text-align: center;
+    font-weight: bold;
+    font-size: 1.2rem;
+}
+
+@media (min-width: 1000px) and (min-height: 700px) {
+    .Burger {
+        width: 700px;
+        height: 600px;
+    }
+}
+
+@media (min-width: 500px) and (min-height: 401px) {
+    .Burger {
+        width: 450px;
+        height: 300px;
+    }
+}
+
+@media (min-width: 500px) and (max-height: 400px) {
+    .Burger {
+        width: 350px;
+        height: 200px;
+    }
+}
--- a/src/components/Burger/Burger.tsx
+++ b/src/components/Burger/Burger.tsx
+import React, { ReactNode } from 'react';
+import type { IngredientNames, Ingredients } from '@/interfaces/Ingredients';
+import Ingredient from './Ingredient/Ingredient';
+import './Burger.css';
+
+interface Props {
+    ingredients: Ingredients
+}
+
+const Burger = ({ingredients}: Props) => {
+    const ingredientsKey = Object.keys(ingredients);
+
+    const ingList: ReactNode[] = [];
+
+    ingredientsKey.forEach(ingKey => {
+        let amount = ingredients[ingKey as IngredientNames];
+
+        for(let i = 0; i < amount; i++) {
+            ingList.push(<Ingredient key={ingKey + i} type={ingKey as IngredientNames}/>)
+        }
+    })
+
+    return (
+        <div className="Burger">
+            <Ingredient type={"bread-top"}/>
+            {ingList.length > 0 ? ingList : <p>Добавьте ингредиенты</p>}
+            <Ingredient type={"bread-bottom"}/>
+        </div>
+    );
+}
+
+export default Burger;
--- a/src/components/Burger/Ingredient/Ingredient.css
+++ b/src/components/Burger/Ingredient/Ingredient.css
+.BreadBottom {
+    height: 13%;
+    width: 80%;
+    background: linear-gradient(#F08E4A, #e27b36);
+    border-radius: 0 0 30px 30px;
+    box-shadow: inset -15px 0 #c15711;
+    margin: 2% auto;
+}
+
+.BreadTop {
+    height: 20%;
+    width: 80%;
+    background: linear-gradient(#bc581e, #e27b36);
+    border-radius: 50% 50% 0 0;
+    box-shadow: inset -15px 0 #c15711;
+    margin: 2% auto;
+    position: relative;
+}
+
+.Seeds1 {
+    width: 10%;
+    height: 15%;
+    position: absolute;
+    background-color: white;
+    left: 30%;
+    top: 50%;
+    border-radius: 40%;
+    transform: rotate(-20deg);
+    box-shadow: inset -2px -3px #c9c9c9;
+}
+
+.Seeds1:after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: white;
+    left: -170%;
+    top: -260%;
+    border-radius: 40%;
+    transform: rotate(60deg);
+    box-shadow: inset -1px 2px #c9c9c9;
+}
+
+.Seeds1:before {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: white;
+    left: 180%;
+    top: -50%;
+    border-radius: 40%;
+    transform: rotate(60deg);
+    box-shadow: inset -1px -3px #c9c9c9;
+}
+
+.Seeds2 {
+    width: 10%;
+    height: 15%;
+    position: absolute;
+    background-color: white;
+    left: 64%;
+    top: 50%;
+    border-radius: 40%;
+    transform: rotate(10deg);
+    box-shadow: inset -3px 0 #c9c9c9;
+}
+
+.Seeds2:before {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: white;
+    left: 150%;
+    top: -130%;
+    border-radius: 40%;
+    transform: rotate(90deg);
+    box-shadow: inset 1px 3px #c9c9c9;
+}
+
+.Meat {
+    width: 80%;
+    height: 8%;
+    background: linear-gradient(#7f3608, #702e05);
+    margin: 2% auto;
+    border-radius: 15px;
+}
+
+.Cheese {
+    width: 90%;
+    height: 4.5%;
+    margin: 2% auto;
+    background: linear-gradient(#f4d004, #d6bb22);
+    border-radius: 20px;
+}
+
+.Salad {
+    width: 85%;
+    height: 7%;
+    margin: 2% auto;
+    background: linear-gradient(#228c1d, #91ce50);
+    border-radius: 20px;
+}
+
+.Bacon {
+    width: 80%;
+    height: 3%;
+    background: linear-gradient(#bf3813, #c45e38);
+    margin: 2% auto;
+}
--- a/src/components/Burger/Ingredient/Ingredient.tsx
+++ b/src/components/Burger/Ingredient/Ingredient.tsx
+import React from 'react';
+import './Ingredient.css';
+
+interface Props {
+    type: "salad" | "meat" | "bacon" | "cheese" | "bread-top" | "bread-bottom"
+}
+
+const Ingredient = ({type}: Props) => {
+    switch (type) {
+        case "bread-top":
+            return (
+                <div className="BreadTop">
+                    <div className='Seeds1'/>
+                    <div className='Seeds2'/>
+                </div>
+            )    
+        case "bread-bottom":
+            return <div className="BreadBottom"/>
+        case "bacon":
+            return <div className="Bacon"/>
+        case "cheese":
+            return <div className="Cheese"/>
+        case "meat":
+            return <div className="Meat"/>
+        case "salad":
+            return <div className="Salad"/>
+        default:
+            return null;
+    }
+}
+
+export default Ingredient;
--- a/src/containers/BurgerBuilder/BurgerBuilder.tsx
+++ b/src/containers/BurgerBuilder/BurgerBuilder.tsx
+import React, { Fragment, useState } from 'react';
+import type { Ingredients, IngredientNames } from '@/interfaces/Ingredients'; 
+import Burger from '@/components/Burger/Burger';
+import BuildControls from '@/components/BuildControls/BuildControls';
+import { IngredientPrices } from '@/helpers/IngPrice';
+
+const BurgerBuilder = () => {
+    const [totalPrice, setTotalPrice] = useState<number>(IngredientPrices.bread);
+    const [ingredients, setIngredients] = useState<Ingredients>({
+        salad: 0,
+        meat: 0,
+        bacon: 0,
+        cheese: 0
+    });
+
+    const onLessClick = (ingType: IngredientNames) => {
+        const ingredientsCopy = {...ingredients};
+        if(ingredientsCopy[ingType] > 0) {
+            ingredientsCopy[ingType] -= 1;
+            setIngredients(ingredientsCopy);
+            setTotalPrice(prevState => prevState - IngredientPrices[ingType]);
+        };
+    };
+
+    const onMoreClick = (ingType: IngredientNames) => {
+        const ingredientsCopy = {...ingredients};
+        ingredientsCopy[ingType] += 1;
+        setTotalPrice(prevState => prevState + IngredientPrices[ingType]);
+        setIngredients(ingredientsCopy);
+    };
+
+    return (
+        <>
+            <Burger ingredients={ingredients}/>
+            <BuildControls 
+                price={totalPrice}
+                onLessClick={onLessClick} 
+                onMoreClick={onMoreClick}
+                ingredients={ingredients}
+            />
+        </>
+    )
+}
+
+export default BurgerBuilder;
--- a/src/helpers/IngPrice.ts
+++ b/src/helpers/IngPrice.ts
+export enum IngredientPrices {
+    salad = 200,
+    cheese = 400,
+    bacon = 700,
+    meat = 900,
+    bread = 150
+}
\ No newline at end of file
--- a/src/index.css
+++ b/src/index.css
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/src/interfaces/Ingredients.ts
+++ b/src/interfaces/Ingredients.ts
+export type IngredientNames = 'salad' | 'cheese' | 'meat' | 'bacon';
+
+export type Ingredients = {
+    [key in IngredientNames]: number;
+}
\ No newline at end of file
--- a/src/main.tsx
+++ b/src/main.tsx
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
+/// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
+{
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: [
+      { find: "@", replacement: path.resolve(__dirname, "src") }
+    ],
+  },
+ 
+  plugins: [react()],
+ })