initial commit

JTZ18 · May 23, 2022 · 2fc3564 · 2fc3564 · vercel · May 23, 2022
commit 2fc3564
Show file tree

Hide file tree

Showing 12 changed files with 1,015 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# 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?
diff --git a/README.md b/README.md
@@ -0,0 +1,14 @@
+run the following command to install all dependencies of the project
+```
+yarn
+```
+
+run the following command to preview development server
+```
+yarn dev
+```
+
+run the following command to build the project for production
+```
+yarn build
+```
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "hangman",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^1.3.0",
+    "vite": "^2.9.9"
+  }
+}
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,113 @@
+.Container {
+  background-color: #111927;
+  background-image: 
+      radial-gradient(at 47% 33%, hsl(39.47, 64%, 54%) 0, transparent 59%), 
+      radial-gradient(at 82% 65%, hsl(325.51, 59%, 41%) 0, transparent 55%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+}
+
+.keyboard {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 300px;
+  height: 100px;
+  padding: 20px;
+
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  background-color: rgba(20, 20, 20, 0.75);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.125);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
+  0 2px 4px rgba(0,0,0,0.07), 
+  0 4px 8px rgba(0,0,0,0.07), 
+  0 8px 16px rgba(0,0,0,0.07),
+  0 16px 32px rgba(0,0,0,0.07), 
+  0 32px 64px rgba(0,0,0,0.07);
+}
+
+.keyboard-row{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: black;
+  font-weight: 500;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: rgb(214, 214, 214);
+  cursor: pointer;
+  font-size: 1rem;
+  margin-left: 5px;
+  outline: none;
+  font-family: Arial, Helvetica, sans-serif;
+  border-radius: 20%;
+  transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; 
+}
+button:hover {
+  transform: scale(1.2);
+  box-shadow: rgb(0 0 0 / 80%) 0px 20px 38px -10px, 
+  rgb(0 0 0 / 50%) 0px 20px 10px -8px;
+}
+
+.word-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 300px;
+  height: 100px;
+
+}
+
+.word {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: white;
+  text-align: center;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.game-over {
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: white;
+  text-align: center;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+
+@media only screen and (min-width: 800px) {
+  .keyboard {
+    width: 800px;
+    height: 200px;
+  }
+
+  button {
+    width: 55px;
+    height: 55px;
+  }
+  button:hover {
+    transform: scale(1.05);
+  }
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import logo from './logo.svg'
+import './App.css'
+
+
+function App() {
+  const [correctGuesses, setCorrectGuesses] = useState([]) 
+  const word = "HANGMAN";
+  const row1 = ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"];
+  const row2 = ["A", "S", "D", "F", "G", "H", "J", "K", "L"];
+  const row3 = ["Z", "X", "C", "V", "B", "N", "M"];
+
+
+  const maskedWord = word.split('').map(letter => 
+  correctGuesses.includes(letter) ? letter : "_").join(" ");
+
+
+  return (
+    <div className="Container">
+      <div className="word-wrapper">
+        <p className="word">{maskedWord}</p>
+      </div>
+      <div className="keyboard">
+        <div className="keyboard-row">
+          {row1
+          .map((alphabet, index) => 
+          <button key={index} onClick={() => {
+              if (word.includes(alphabet)) {
+                  setCorrectGuesses([...correctGuesses, alphabet])
+              }
+          }}>{alphabet}</button>)}
+        </div>
+        <div className="keyboard-row">
+          {row2
+          .map((alphabet, index) => 
+          <button key={index} onClick={() => {
+              if (word.includes(alphabet)) {
+                  setCorrectGuesses([...correctGuesses, alphabet])
+              }
+          }}>{alphabet}</button>)}
+        </div>
+        <div className="keyboard-row">
+          {row3
+          .map((alphabet, index) => 
+          <button key={index} onClick={() => {
+              if (word.includes(alphabet)) {
+                  setCorrectGuesses([...correctGuesses, alphabet])
+              }
+          }}>{alphabet}</button>)}
+        </div>
+      </div>
+      {!maskedWord.includes("_") && <p className="game-over">You won!</p>}
+    </div>
+  )
+}
+
+export default App
+
diff --git a/src/favicon.svg b/src/favicon.svg
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/main.jsx b/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()]
+})