Merge branch 'main' into text-editor

shrey141102 · Jan 4, 2024 · 5e51f10 · 5e51f10
2 parents 9b853fb + 76d779e
commit 5e51f10
Show file tree

Hide file tree

Showing 15 changed files with 761 additions and 3 deletions.
diff --git a/AudioAnalyser/README.md b/AudioAnalyser/README.md
@@ -0,0 +1,29 @@
+# AUDIO ANALYSER
+
+- This a simple project where i created a amplification wave of the sound using only html, css and js, which can be shows according to the pitch of the user's sound.
+- If pitch of the user's sound is high, amplitude will be high.
+- Otherwise, amplitude will be low.
+
+--- 
+
+## **Tech Stack 🎮**
+
+- HTML
+- CSS
+- JS
+
+<br>
+
+## **Screenshots 📸**
+
+![image](https://github.com/shrey141102/Javascript-projects/assets/114330097/1f68df5e-b745-43a7-a63a-d55211694848)
+
+<br>
+
+## **Created By 👦**
+
+[Avdhesh Varshney](https://github.com/Avdhesh-Varshney)
+
+<br>
+
+### **Happy Coding 🎉**
diff --git a/AudioAnalyser/index.html b/AudioAnalyser/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Audio Analyser</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+    <main>
+        <button onclick="init()">Start</button>
+    </main>
+    <div id="transcript"></div>
+    <!-- JavaScript -->
+    <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/AudioAnalyser/script.js b/AudioAnalyser/script.js
@@ -0,0 +1,92 @@
+class AudioVisualizer {
+    constructor(audioContext, processFrame, processError) {
+        this.audioContext = audioContext;
+        this.processFrame = processFrame;
+        this.connectStream = this.connectStream.bind(this);
+        navigator.mediaDevices.getUserMedia({ audio: true, video: false })
+            .then(this.connectStream)
+            .catch((error) => {
+                if (processError) {
+                    processError(error);
+                }
+            });
+    }
+    connectStream(stream) {
+        this.analyser = this.audioContext.createAnalyser();
+        const source = this.audioContext.createMediaStreamSource(stream);
+        console.log(source)
+        source.connect(this.analyser);
+        this.analyser.smoothingTimeConstant = 0.5;
+        this.analyser.fftSize = 32;
+
+        this.initRenderLoop(this.analyser);
+    }
+    initRenderLoop() {
+        const frequencyData = new Uint8Array(this.analyser.frequencyBinCount);
+        const processFrame = this.processFrame || (() => { });
+
+        const renderFrame = () => {
+            this.analyser.getByteFrequencyData(frequencyData);
+            processFrame(frequencyData);
+
+            requestAnimationFrame(renderFrame);
+        };
+        requestAnimationFrame(renderFrame);
+    }
+}
+
+const visualMainElement = document.querySelector('main');
+const visualValueCount = 16;
+let visualElements;
+const createDOMElements = () => {
+    let i;
+    for (i = 0; i < visualValueCount; ++i) {
+        const elm = document.createElement('div');
+        visualMainElement.appendChild(elm);
+    }
+    visualElements = document.querySelectorAll('main div');
+};
+createDOMElements();
+
+const startTranscriptions = () => {
+    fetch("/start_asr").then(res => res.json()).then(data => console.log(data))
+    setInterval(() => {
+        fetch("/get_audio").then(res => res.json()).then(data => {
+            let doc = document.getElementById("transcript")
+            if (data !== "") {
+                doc.innerHTML = data
+            }
+        })
+    }, 100)
+};
+
+const init = () => {
+    // Creating initial DOM elements
+    const audioContext = new AudioContext();
+    const initDOM = () => {
+        visualMainElement.innerHTML = '';
+        createDOMElements();
+    };
+    initDOM();
+
+    // Swapping values around for a better visual effect
+    const dataMap = { 0: 15, 1: 10, 2: 8, 3: 9, 4: 6, 5: 5, 6: 2, 7: 1, 8: 0, 9: 4, 10: 3, 11: 7, 12: 11, 13: 12, 14: 13, 15: 14 };
+    const processFrame = (data) => {
+        const values = Object.values(data);
+        let i;
+        for (i = 0; i < visualValueCount; ++i) {
+            const value = values[dataMap[i]] / 255;
+            const elmStyles = visualElements[i].style;
+            elmStyles.transform = `scaleY( ${value} )`;
+            elmStyles.opacity = Math.max(.25, value);
+        }
+    };
+    const processError = () => {
+        visualMainElement.classList.add('error');
+        visualMainElement.innerText = 'Please allow access to your microphone in order to see this demo.\nNothing bad is going to be happen...';
+    }
+
+    const a = new AudioVisualizer(audioContext, processFrame, processError);
+
+    startTranscriptions()
+};
diff --git a/AudioAnalyser/style.css b/AudioAnalyser/style.css
@@ -0,0 +1,83 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+body,
+main {
+    margin: 0;
+    padding: 0;
+    min-width: 100%;
+    min-height: 100vh;
+    font-family: sans-serif;
+    text-align: center;
+    color: #fff;
+    background: #000;
+}
+
+button {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 5em;
+    height: 2em;
+    margin-left: -2.5em;
+    margin-top: -1em;
+    z-index: 100;
+    padding: .25em .5em;
+    color: #fff;
+    background: #000;
+    border: 1px solid #fff;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1.15em;
+    font-weight: 200;
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+    transition: box-shadow .5s;
+}
+
+button:hover {
+    box-shadow: 0 0 30px 5px rgba(255, 255, 255, 0.75);
+}
+
+main {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+main>div {
+    display: inline-block;
+    width: 3px;
+    height: 100px;
+    margin: 0 7px;
+    background: currentColor;
+    transform: scaleY(.5);
+    opacity: .25;
+}
+
+main.error {
+    color: #f7451d;
+    min-width: 20em;
+    max-width: 30em;
+    margin: 0 auto;
+    white-space: pre-line;
+}
+
+#transcript {
+    position: fixed;
+    width: 100vw;
+    padding-left: 20vw;
+    padding-right: 20vw;
+    font-size: x-large;
+}
+
+p {
+    position: absolute;
+    left: 25%;
+    top: 70%;
+    padding-left: 19vw;
+    font-size: x-large;
+}
diff --git a/Connect4/.DS_Store b/Connect4/.DS_Store
diff --git a/Connect4/README.md b/Connect4/README.md
@@ -0,0 +1,33 @@
+Connect 4 Game:
+This is a simple implementation of the Connect 4 game using HTML, CSS, and JavaScript.
+
+How to Play:
+1)Open the index.html file in a web browser.
+2)The game board will be displayed with a grid of circles.
+3)Click on any circle in a column to drop your piece. The piece will fall to the lowest available position in that column.
+4)Players take turns, and the goal is to connect four of their pieces vertically, horizontally, or diagonally before the opponent does.
+
+Game Interface:
+1)The game board is a 7x6 grid.
+2)The circles represent the positions where players can drop their pieces.
+3)Red and yellow pieces alternate turns.
+4)The current player is displayed at the top of the board.
+
+Styling:
+1)The game board has a blue background with navy borders.
+2)White circles represent empty spaces.
+3)Red circles represent player Red's pieces.
+4)Yellow circles represent player Yellow's pieces. 
+
+JavaScript Logic:
+1)The game logic is handled in the script.js file.
+2)Players can click on a tile to place their piece.
+3)The game checks for a winner after each move.
+4)The first player to connect four pieces in a row (horizontally, vertically, or diagonally) wins.
+5)The game ends when there is a winner or the board is full (a draw).
+
+Note:
+This implementation uses basic HTML, CSS, and JavaScript and does not include features like multiplayer, AI opponents, or additional animations.
+Feel free to modify and enhance the game based on your preferences or requirements.
+
+Have fun playing Connect 4!
diff --git a/Connect4/index.html b/Connect4/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=\, initial-scale=1.0">
+    <title>Connect 4</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js"></script>
+</head>
+<body>
+    <h1>Connect 4</h1>
+    <h2 id="winner"></h2>
+    <div id="board"></div>
+</body>
+</html>
diff --git a/Connect4/script.js b/Connect4/script.js
@@ -0,0 +1,111 @@
+var playerRed = "R";
+var playerYellow = "Y";
+var currPlayer = playerRed;
+
+var gameOver = false;
+var board;
+var currColumns;
+
+var rows = 6;
+var columns = 7;
+
+window.onload = function () {
+    setGame();
+};
+
+function setGame() {
+    board = [];
+    currColumns = [5, 5, 5, 5, 5, 5, 5];
+
+    for (let r = 0; r < rows; r++) {
+        let row = [];
+        for (let c = 0; c < columns; c++) {
+            row.push(' ');
+
+            let tile = document.createElement("div");
+            tile.id = r.toString() + "-" + c.toString();
+            tile.classList.add("tile");
+            tile.addEventListener("click", setPiece);
+            document.getElementById("board").append(tile);
+        }
+        board.push(row);
+    }
+}
+
+function setPiece() {
+    if (gameOver) {
+        return;
+    }
+
+    let coords = this.id.split("-");
+    let r = parseInt(coords[0]);
+    let c = parseInt(coords[1]);
+
+    r = currColumns[c];
+    if (r < 0) {
+        return;
+    }
+
+    board[r][c] = currPlayer;
+    let tile = document.getElementById(r.toString() + "-" + c.toString());
+    if (currPlayer == playerRed) {
+        tile.classList.add("red-piece");
+        currPlayer = playerYellow;
+    } 
+    else {
+        tile.classList.add("yellow-piece");
+        currPlayer = playerRed;
+    }
+
+    r -= 1;
+    currColumns[c] = r;
+
+    checkWinner();
+}
+
+function checkWinner() {
+    for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < columns - 3; c++) {
+            if (board[r][c] != ' ' && board[r][c] == board[r][c + 1] && board[r][c + 1] == board[r][c + 2] && board[r][c + 2] == board[r][c + 3]) {
+                setWinner(r, c);
+                return;
+            }
+        }
+    }
+    for (let c = 0; c < columns; c++) {
+        for (let r = 0; r < rows - 3; r++) {
+            if (board[r][c] != ' ' && board[r][c] == board[r + 1][c] && board[r + 1][c] == board[r + 2][c] && board[r + 2][c] == board[r + 3][c]) {
+                setWinner(r, c);
+                return;
+            }
+        }
+    }
+    for (let r = 0; r < rows - 3; r++) {
+        for (let c = 0; c < columns - 3; c++) {
+            if (board[r][c] != ' ' && board[r][c] == board[r + 1][c + 1] && board[r + 1][c + 1] == board[r + 2][c + 2] && board[r + 2][c + 2] == board[r + 3][c + 3]) {
+                setWinner(r, c);
+                return;
+            }
+        }
+    }
+    for (let r = 3; r < rows; r++) {
+        for (let c = 0; c < columns - 3; c++) {
+            if (board[r][c] != ' ' && board[r][c] == board[r - 1][c + 1] && board[r - 1][c + 1] == board[r - 2][c + 2] && board[r - 2][c + 2] == board[r - 3][c + 3]) {
+                setWinner(r, c);
+                return;
+            }
+        }
+    }
+}
+
+function setWinner(r, c) {
+    let winner = document.getElementById("winner");
+    if (board[r][c] == playerRed) {
+        winner.innerText = "Red Wins";
+    } 
+    else {
+        winner.innerText = "Yellow Wins";
+    }
+
+    gameOver = true;
+}