From de8976a056f0b549acaac9d3c2841bbbd7e92c54 Mon Sep 17 00:00:00 2001
From: Isak Ruas <isakruas@gmail.com>
Date: Fri, 25 Oct 2024 20:14:01 -0300
Subject: [PATCH] feat: remove unrelated files to optimize project structure

---
 app/backend/go.mod      |   7 -
 app/backend/go.sum      |   4 -
 app/backend/main.go     | 123 ------
 app/frontend/index.html | 860 ----------------------------------------
 4 files changed, 994 deletions(-)
 delete mode 100644 app/backend/go.mod
 delete mode 100644 app/backend/go.sum
 delete mode 100644 app/backend/main.go
 delete mode 100644 app/frontend/index.html

diff --git a/app/backend/go.mod b/app/backend/go.mod
deleted file mode 100644
index f72bdf1..0000000
--- a/app/backend/go.mod
+++ /dev/null
@@ -1,7 +0,0 @@
-module server
-
-go 1.19
-
-require github.com/gorilla/websocket v1.5.1
-
-require golang.org/x/net v0.17.0 // indirect
diff --git a/app/backend/go.sum b/app/backend/go.sum
deleted file mode 100644
index 272772f..0000000
--- a/app/backend/go.sum
+++ /dev/null
@@ -1,4 +0,0 @@
-github.com/gorilla/websocket v1.5.1 h1:gmztn0JnHVt9JZquRuzLw3g4wouNVzKL15iLr/zn/QY=
-github.com/gorilla/websocket v1.5.1/go.mod h1:x3kM2JMyaluk02fnUJpQuwD2dCS5NDG2ZHL0uE0tcaY=
-golang.org/x/net v0.17.0 h1:pVaXccu2ozPjCXewfr1S7xza/zcXTity9cCdXQYSjIM=
-golang.org/x/net v0.17.0/go.mod h1:NxSsAGuq816PNPmqtQdLE42eU2Fs7NoRIZrHJAlaCOE=
diff --git a/app/backend/main.go b/app/backend/main.go
deleted file mode 100644
index f756077..0000000
--- a/app/backend/main.go
+++ /dev/null
@@ -1,123 +0,0 @@
-package main
-
-import (
-	"encoding/json"
-	"log"
-	"net/http"
-	"sync"
-	"time"
-
-	"github.com/gorilla/websocket"
-)
-
-type Message struct {
-	Type string `json:"type"`
-	Room string `json:"room"`
-	Text string `json:"text"`
-}
-
-type RoomManager struct {
-	rooms map[string]map[*websocket.Conn]bool
-	mutex sync.RWMutex
-}
-
-func NewRoomManager() *RoomManager {
-	return &RoomManager{
-		rooms: make(map[string]map[*websocket.Conn]bool),
-	}
-}
-
-func (rm *RoomManager) AddClientToRoom(room string, client *websocket.Conn) {
-	rm.mutex.Lock()
-	defer rm.mutex.Unlock()
-
-	if rm.rooms[room] == nil {
-		rm.rooms[room] = make(map[*websocket.Conn]bool)
-	}
-	rm.rooms[room][client] = true
-	log.Printf("[%s] client added to room %s\n", time.Now().UTC().Format(time.RFC3339), room)
-}
-
-func (rm *RoomManager) RemoveClientFromRoom(room string, client *websocket.Conn) {
-	rm.mutex.Lock()
-	defer rm.mutex.Unlock()
-
-	if rm.rooms[room] != nil {
-		delete(rm.rooms[room], client)
-		if len(rm.rooms[room]) == 0 {
-			delete(rm.rooms, room)
-			log.Printf("[%s] room %s is now empty and removed\n", time.Now().UTC().Format(time.RFC3339), room)
-		}
-	}
-}
-
-func (rm *RoomManager) BroadcastMessage(room string, message []byte, sender *websocket.Conn) {
-	rm.mutex.RLock()
-	defer rm.mutex.RUnlock()
-
-	if rm.rooms[room] != nil {
-		for client := range rm.rooms[room] {
-			if client != sender {
-				go func(c *websocket.Conn) {
-					if err := c.WriteMessage(websocket.TextMessage, message); err != nil {
-						log.Printf("[%s] error broadcasting message to client: %v\n", time.Now().UTC().Format(time.RFC3339), err)
-						rm.RemoveClientFromRoom(room, c)
-					}
-				}(client)
-			}
-		}
-		log.Printf("[%s] message broadcasted to room %s\n", time.Now().UTC().Format(time.RFC3339), room)
-	}
-}
-
-func wsHandler(rm *RoomManager, w http.ResponseWriter, r *http.Request) {
-	upgrader := websocket.Upgrader{
-		CheckOrigin: func(r *http.Request) bool {
-			// Allow all connections by default
-			return true
-		},
-	}
-
-	conn, err := upgrader.Upgrade(w, r, nil)
-	if err != nil {
-		log.Printf("[%s] error upgrading to websocket: %v\n", time.Now().UTC().Format(time.RFC3339), err)
-		return
-	}
-	defer conn.Close()
-
-	for {
-		_, message, err := conn.ReadMessage()
-		if err != nil {
-			log.Printf("[%s] error reading message: %v\n", time.Now().UTC().Format(time.RFC3339), err)
-			rm.RemoveClientFromRoom("", conn)
-			break
-		}
-
-		var msg Message
-		if err := json.Unmarshal(message, &msg); err != nil {
-			log.Printf("[%s] error unmarshalling message: %v\n", time.Now().UTC().Format(time.RFC3339), err)
-			continue
-		}
-
-		switch msg.Type {
-		case "join":
-			rm.AddClientToRoom(msg.Room, conn)
-		case "text":
-			go rm.BroadcastMessage(msg.Room, message, conn)
-		case "audio":
-			go rm.BroadcastMessage(msg.Room, message, conn)
-		default:
-			log.Printf("[%s] invalid message type: %s\n", time.Now().UTC().Format(time.RFC3339), msg.Type)
-		}
-	}
-}
-
-func main() {
-	rm := NewRoomManager()
-
-	http.HandleFunc("/ws", func(w http.ResponseWriter, r *http.Request) {
-		wsHandler(rm, w, r)
-	})
-	log.SetFlags(0)
-	log.Fatal(http.ListenAndServe(":8080", nil))
-}
diff --git a/app/frontend/index.html b/app/frontend/index.html
deleted file mode 100644
index 505c8e1..0000000
--- a/app/frontend/index.html
+++ /dev/null
@@ -1,860 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <!-- Meta tags for character set and viewport -->
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!-- Vue.js CDN -->
-    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
-    <!-- ECUtils CDN -->
-    <script src="https://d3llw48k0uhrwl.cloudfront.net/bundle.js"></script>
-  </head>
-  <style>
-    /* Styles for the scrollbar */
-    /* For WebKit browsers */
-    ::-webkit-scrollbar {
-      width: 6px !important;
-      /* Width of the scrollbar */
-    }
-
-    ::-webkit-scrollbar-thumb {
-      background-color: rgba(255, 255, 255, 0.5) !important;
-      /* Color of the thumb (the movable part) */
-      border-radius: 3px !important;
-      /* Border radius of the thumb */
-    }
-
-    /* For non-WebKit browsers */
-    /* Hide the default scrollbar */
-    html {
-      scrollbar-width: thin !important;
-      /* Set the width of the scrollbar */
-    }
-
-    body {
-      scrollbar-color: rgba(255, 255, 255, 0.5) transparent !important;
-      /* Color of the scrollbar and the scrollbar track */
-    }
-
-    /* Another alternative for WebKit browsers, including Chrome */
-    /* Make the scrollbar thinner */
-    @media screen and (-webkit-min-device-pixel-ratio: 0) {
-      /* Specific selector for Chrome */
-      ::-webkit-scrollbar {
-        width: 6px !important;
-        /* Width of the scrollbar */
-      }
-
-      ::-webkit-scrollbar-thumb {
-        background-color: rgba(255, 255, 255, 0.5) !important;
-        /* Color of the thumb (the movable part) */
-        border-radius: 3px !important;
-        /* Border radius of the thumb */
-      }
-    }
-
-    /* CSS styles for the application */
-
-    body {
-      /* Set font family and background color */
-      font-family: monospace, sans-serif;
-      background-color: #000;
-      color: #fff;
-      margin: 0;
-      padding: 0;
-    }
-
-    #app {
-      /* Flexbox setup for main app container */
-      display: flex;
-      flex-direction: column;
-      height: 100vh;
-      margin: 0 auto;
-      width: 480px;
-    }
-
-    .friends-list {
-      /* Styling for friends list section */
-      background-color: #222;
-      padding: 1rem;
-      border-bottom: 1px solid #333;
-      overflow-y: auto;
-      flex: 1;
-    }
-
-    .friends-list h2 {
-      /* Heading style for friends list */
-      margin-bottom: 1rem;
-      color: #ddd;
-    }
-
-    .friend-list-items {
-      /* Style for friend list items */
-      list-style: none;
-      padding: 0;
-      margin: 0;
-    }
-
-    .friend-item:hover {
-      /* Hover effect for friend item */
-      background-color: #111;
-    }
-
-    .friend-item {
-      /* Styling for each friend item */
-      display: flex;
-      align-items: center;
-      padding: 0.5rem 1rem;
-      border-bottom: 1px solid #333;
-      cursor: pointer;
-      transition: background-color 0.2s ease-in-out;
-    }
-
-    .friend-name-btn {
-      /* Styling for friend name button */
-      flex: 1;
-      text-align: left;
-      background-color: transparent;
-      border: none;
-      color: inherit;
-      font-weight: bold;
-      cursor: pointer;
-      text-decoration: none;
-      transition: color 0.2s ease-in-out;
-    }
-
-    .friend-name-btn:hover {
-      /* Hover effect for friend name button */
-      color: #ddd;
-    }
-
-    .friend-room,
-    .friend-edit-btn,
-    .friend-delete-btn {
-      /* Styling for friend room, edit, and delete buttons */
-      margin-left: 0.5rem;
-      color: #ccc;
-      cursor: pointer;
-      transition: color 0.2s ease-in-out;
-    }
-
-    .friend-room:hover,
-    .friend-edit-btn:hover,
-    .friend-delete-btn:hover {
-      /* Hover effect for friend room, edit, and delete buttons */
-      color: #ddd;
-    }
-
-    .friend-edit-btn,
-    .friend-delete-btn {
-      /* Styling for edit and delete buttons */
-      display: inline-block;
-      padding: 0.5rem 0.75rem;
-      border-radius: 4px;
-      background-color: #444;
-      color: #fff;
-      border: none;
-      cursor: pointer;
-      transition: background-color 0.2s ease-in-out;
-      margin-left: 0.5rem;
-    }
-
-    .friend-edit-btn:hover {
-      /* Hover effect for edit button */
-      background-color: #555;
-    }
-
-    .friend-delete-btn:hover {
-      /* Hover effect for delete button */
-      background-color: #f00;
-    }
-
-    .friend-form {
-      /* Styling for friend form section */
-      background-color: #222;
-      padding: 1rem;
-      border-bottom: 1px solid #333;
-    }
-
-    .friend-form h2 {
-      /* Heading style for friend form */
-      margin-bottom: 1rem;
-      color: #ddd;
-    }
-
-    .friend-form label {
-      /* Label style for friend form */
-      display: block;
-      margin-bottom: 0.5rem;
-      color: #ccc;
-    }
-
-    .friend-name-input,
-    .friend-room-input {
-      /* Input style for friend name and room */
-      width: calc(100% - 2.3rem);
-      padding: 0.5rem;
-      background-color: #333;
-      border: 1px solid #444;
-      color: #eee;
-      outline: none;
-    }
-
-    .friend-submit-btn {
-      /* Styling for friend submit button */
-      display: block;
-      margin-top: 1rem;
-      padding: 0.75rem 1rem;
-      background-color: #444;
-      border: none;
-      color: #fff;
-      cursor: pointer;
-      transition: background-color 0.2s ease-in-out;
-    }
-
-    .friend-submit-btn:hover {
-      /* Hover effect for friend submit button */
-      background-color: #555;
-    }
-
-    .chat-section {
-      /* Styling for chat section */
-      flex: 1;
-      background-color: #111;
-      overflow-y: auto;
-      padding: 1rem;
-    }
-
-    .chat-section h2 {
-      /* Heading style for chat section */
-      margin-bottom: 1rem;
-      color: #ddd;
-    }
-
-    .message-list {
-      /* Style for message list */
-      margin-bottom: 1rem;
-    }
-
-    .message-input {
-      /* Input style for typing message */
-      width: calc(100% - 2.3rem);
-      padding: 0.75rem 1rem;
-      background-color: #333;
-      border: 1px solid #444;
-      color: #eee;
-      outline: none;
-      margin-bottom: 0.5rem;
-      border-radius: 4px;
-      margin-top: 1.5rem;
-    }
-
-    .message-send-btn {
-      /* Styling for message send button */
-      padding: 0.75rem 1rem;
-      background-color: #444;
-      margin-bottom: 0.5rem;
-      margin-right: 0.5rem;
-      border: none;
-      color: #fff;
-      cursor: pointer;
-      transition: background-color 0.2s ease-in-out;
-      border-radius: 4px;
-    }
-
-    .message-send-btn:hover {
-      /* Hover effect for message send button */
-      background-color: #555;
-    }
-
-    .message {
-      /* Style for message container */
-      margin-bottom: 10px;
-      margin-top: 1rem;
-      overflow: hidden;
-    }
-
-    .sent-message {
-      /* Style for sent message */
-      text-align: right;
-    }
-
-    .received-message {
-      /* Style for received message */
-      text-align: left;
-    }
-
-    .message p {
-      /* Style for message text */
-      margin: 0;
-    }
-
-    .message-audio {
-      /* Style for message audio */
-      margin-top: 5px;
-    }
-
-    .recording-toggle-btn {
-      /* Styling for recording toggle button */
-      align-items: center;
-      justify-content: center;
-      padding: 0.75rem 1rem;
-      margin-bottom: 0.5rem;
-      margin-right: 0.5rem;
-      background-color: #444;
-      border: none;
-      color: #fff;
-      cursor: pointer;
-      transition: background-color 0.2s ease-in-out;
-      border-radius: 4px;
-      width: auto;
-    }
-
-    .recording-toggle-btn:hover {
-      /* Hover effect for recording toggle button */
-      background-color: #555;
-    }
-
-    .recording-toggle-btn svg {
-      /* Styling for recording icon */
-      margin-right: 0.5rem;
-      fill: #fff;
-    }
-
-    .recording-toggle-btn.recording svg {
-      /* Styling for recording icon when recording */
-      fill: #f00;
-    }
-
-    .opacity {
-      /* Sets the opacity to 50% */
-      opacity: 0.5;
-    }
-  </style>
-
-  <body>
-    <!-- Chat, Friends List, Friend Form, and Connection Message sections -->
-    <div id="app">
-      <!-- Chat Section -->
-      <section
-        v-if="currentFriend"
-        :class="['chat-section', { 'opacity': !engine }]"
-      >
-        <!-- Display current friend's name -->
-        <h2>Chat with {{ currentFriend.name }}</h2>
-        <!-- Display messages -->
-        <div id="messages" class="message-list">
-          <!-- Iterate through messages -->
-          <div
-            v-for="message in currentFriend.messages"
-            :key="message.id"
-            class="message"
-          >
-            <!-- Sent messages -->
-            <div v-if="message.sent" class="sent-message">
-              <!-- Text message -->
-              <p v-if="message.type == 'text'">
-                {{ renderText(message.raw) }} :
-              </p>
-              <!-- Audio message -->
-              <p v-else>You sent an audio message :</p>
-              <!-- Audio player for sent message -->
-              <audio
-                v-if="message.type == 'audio'"
-                controls
-                class="message-audio"
-              >
-                <source :src="renderAudio(message.raw)" type="audio/mpeg" />
-                Your browser does not support the audio element.
-              </audio>
-            </div>
-            <!-- Received messages -->
-            <div v-else class="received-message">
-              <!-- Text message -->
-              <p v-if="message.type == 'text'">
-                : {{ renderText(message.raw) }}
-              </p>
-              <!-- Audio message -->
-              <p v-else>: You received an audio message</p>
-              <!-- Audio player for received message -->
-              <audio
-                v-if="message.type == 'audio'"
-                controls
-                class="message-audio"
-              >
-                <source :src="renderAudio(message.raw)" type="audio/mpeg" />
-                Your browser does not support the audio element.
-              </audio>
-            </div>
-          </div>
-        </div>
-        <!-- Input for typing message -->
-        <input
-          type="text"
-          v-model="messageInput"
-          placeholder="Type your message..."
-          class="message-input"
-        />
-        <!-- Buttons for sending message and toggling recording -->
-        <div>
-          <button @click="sendMessage" class="message-send-btn">Send</button>
-          <button @click="toggleRecording" class="recording-toggle-btn">
-            {{ recording ? 'Stop Recording' : 'Start Recording' }}
-          </button>
-        </div>
-      </section>
-
-      <!-- Friends List Section -->
-      <section :class="['friends-list', { 'opacity': !engine }]">
-        <!-- Heading for friends list -->
-        <h2>Friends List</h2>
-        <!-- List of friends -->
-        <ul class="friend-list-items">
-          <!-- Iterate through friends -->
-          <li
-            v-for="(friend, index) in friends"
-            :key="friend.name"
-            class="friend-item"
-          >
-            <!-- Button to open chat with friend -->
-            <button @click="openChat(friend, index)" class="friend-name-btn">
-              {{ friend.name }}
-            </button>
-            <!-- Display friend's room -->
-            <!--span class="friend-room">{{ friend.room }}</span-->
-            <!-- Button to edit friend -->
-            <button @click="editFriend(friend)" class="friend-edit-btn">
-              Edit
-            </button>
-            <!-- Button to delete friend -->
-            <button @click="deleteFriend(friend)" class="friend-delete-btn">
-              Delete
-            </button>
-          </li>
-        </ul>
-      </section>
-
-      <!-- Friend Form Section -->
-      <section :class="['friend-form', { 'opacity': !engine }]">
-        <!-- Heading for adding/editing friend -->
-        <h2>Add/Edit Friend</h2>
-        <!-- Input for friend's name -->
-        <label for="friendNameInput">Name:</label>
-        <input
-          type="text"
-          id="friendNameInput"
-          v-model="friendName"
-          class="friend-name-input"
-        />
-
-        <!-- Input for friend's room -->
-        <label for="friendRoomInput">Room:</label>
-        <input
-          type="text"
-          id="friendRoomInput"
-          v-model="friendRoom"
-          class="friend-room-input"
-        />
-
-        <!-- Button to add/edit friend -->
-        <button @click="addOrEditFriend" class="friend-submit-btn">
-          {{ editingFriend ? 'Edit Friend' : 'Add Friend' }}
-        </button>
-      </section>
-
-      <!-- Friend Form Section -->
-      <section v-if="!engine" class="friend-form">
-        <!-- Heading for adding/editing friend -->
-
-        <!-- Input for friend's name -->
-        <label for="privateKeyInput">Your private key:</label>
-        <input
-          type="text"
-          id="privateKeyInput"
-          v-model="privateKey"
-          class="friend-name-input"
-        />
-        <span v-if="privateKeyInputError">{{privateKeyInputError}}</span>
-
-        <!-- Button to add/edit friend -->
-        <button @click="unlock" class="friend-submit-btn">Unlock</button>
-      </section>
-
-      <!-- Connection Message Section -->
-      <section v-if="!connected" class="connection-message">
-        <p>Connection lost, attempting to reconnect...</p>
-      </section>
-    </div>
-
-    <!-- JavaScript -->
-    <script>
-      // JavaScript code
-
-      // URL for signaling server
-      const signalingServerUrl = 'ws://localhost:8080/ws'
-      let signalingSocket
-
-      // Vue.js application instance
-      const app = Vue.createApp({
-        data() {
-          // Data properties for the application
-          return {
-            connected: false,
-            privateKey: null,
-            privateKeyInputError: null,
-            engine: null,
-            friends: [],
-            friendName: '',
-            friendRoom: '',
-            editingFriend: null,
-            currentFriend: null,
-            currentFriendIndex: null,
-            recording: false,
-            mediaRecorder: null,
-            messageInput: '',
-            audioChunks: [],
-          }
-        },
-
-        methods: {
-          unlock() {
-            const isHexadecimal = (str) => {
-              return /^0x[0-9a-f]+$/i.test(str)
-            }
-            if (isHexadecimal(this.privateKey)) {
-              this.privateKeyInputError = null
-              this.engine = window.ecutils
-              this.connectToSignalingServer()
-              this.loadFriendsFromLocal()
-              this.privateKey = BigInt(this.privateKey)
-            } else {
-              this.privateKeyInputError = 'Invalid hexadecimal private key.'
-            }
-          },
-          // Method to render text
-          renderText(data) {
-            return this.koblitzDecode(data)
-          },
-          // Method to render audio
-          renderAudio(data) {
-            const blob = this.base64ToBlob(this.koblitzDecode(data))
-            return URL.createObjectURL(blob)
-          },
-          // Method to save friends to local storage
-          saveFriendsToLocal() {
-            localStorage.setItem('friends', JSON.stringify(this.friends))
-          },
-          // Method to load friends from local storage
-          loadFriendsFromLocal() {
-            const friends = localStorage.getItem('friends')
-            if (friends) {
-              this.friends = JSON.parse(friends)
-            }
-          },
-
-          koblitzEncode(data) {
-            const encoder = new this.engine.algorithms.Koblitz(
-              (curve_name = 'secp521r1'),
-            )
-            const encoded_points = encoder.encode(data, 2n ** 8n, true)
-            return encoder.serialize(encoded_points)
-          },
-          koblitzDecode(data) {
-            const decoder = new this.engine.algorithms.Koblitz(
-              (curve_name = 'secp521r1'),
-            )
-            return decoder.decode(decoder.deserialize(data), 0n, 2n ** 8n, true)
-          },
-          getDiffieHellmanSecret(friendRoom) {
-            const dh = new this.engine.protocols.DiffieHellman(
-              this.privateKey,
-              (curve_name = 'secp521r1'),
-            )
-            const room = JSON.parse(friendRoom)
-            const publicKey = new this.engine.core.Point(
-              BigInt(room.x),
-              BigInt(room.y),
-            )
-            const secret = dh.compute_shared_secret(publicKey)
-            return secret.x.toString() + secret.y.toString()
-          },
-          // Method to connect to signaling server
-          connectToSignalingServer() {
-            signalingSocket = new WebSocket(signalingServerUrl)
-
-            signalingSocket.onopen = () => {
-              console.log('Connected to signaling server')
-              this.connected = true
-              this.friends.forEach((friend) => {
-                this.sendSignalingMessage({
-                  type: 'join',
-                  room: this.getDiffieHellmanSecret(friend.room),
-                })
-              })
-            }
-
-            signalingSocket.onmessage = (event) => {
-              const message = JSON.parse(event.data)
-              console.log('Received message:', message)
-              if (message.type === 'text' || message.type === 'audio') {
-                this.receiveMessage(message)
-              }
-            }
-
-            signalingSocket.onclose = () => {
-              console.log('Connection closed, attempting to reconnect...')
-              this.connected = false
-              setTimeout(this.connectToSignalingServer, 2000)
-            }
-
-            signalingSocket.onerror = (error) => {
-              console.error('Websocket error:', error)
-              this.connected = false
-            }
-          },
-          // Method to send signaling message
-          sendSignalingMessage(message) {
-            let data
-            if (message.type == 'text' || message.type == 'audio') {
-              data = {
-                ...message,
-                raw: this.koblitzEncode(message.raw),
-              }
-            } else {
-              data = message
-            }
-            if (signalingSocket.readyState === WebSocket.OPEN) {
-              let send = JSON.stringify(data)
-              signalingSocket.send(send)
-              console.log('Sent signaling message:', send)
-            } else {
-              console.warn(
-                'WebSocket connection is not open. Failed to send message:',
-                data,
-              )
-            }
-          },
-          // Method to add or edit friend
-          addOrEditFriend() {
-            if (this.editingFriend) {
-              this.editingFriend.name = this.friendName
-              this.editingFriend.room = this.friendRoom
-              if (
-                this.editingFriend.name.trim() === '' ||
-                this.editingFriend.room.trim() === ''
-              ) {
-                this.deleteFriend(this.editingFriend)
-              }
-              this.editingFriend = null
-            } else {
-              const newFriendId = Math.random().toString(36).substr(2, 9)
-              const newFriend = {
-                id: newFriendId,
-                name: this.friendName,
-                room: this.friendRoom,
-                messages: [],
-              }
-              if (
-                this.friendName.trim() === '' &&
-                this.friendRoom.trim() === ''
-              ) {
-                return
-              }
-              this.friends.push(newFriend)
-            }
-            this.friendName = ''
-            this.friendRoom = ''
-          },
-          // Method to edit friend
-          editFriend(friend) {
-            this.friendName = friend.name
-            this.friendRoom = friend.room
-            this.editingFriend = friend
-          },
-          // Method to delete friend
-          deleteFriend(friend) {
-            const index = this.friends.indexOf(friend)
-            if (index !== -1) {
-              if (this.currentFriend === friend) {
-                this.currentFriend.messages = []
-                this.currentFriend = null
-              }
-              this.friends.splice(index, 1)
-            }
-          },
-          // Method to open chat with friend
-          openChat(friend, index) {
-            this.currentFriendIndex = index
-            this.currentFriend = friend
-
-            const openingMessage = {
-              type: 'join',
-              room: this.getDiffieHellmanSecret(friend.room),
-            }
-            this.sendSignalingMessage(openingMessage)
-          },
-
-          // Method to send message
-          sendMessage() {
-            if (this.recording) {
-              this.stopRecording()
-              return
-            }
-
-            if (this.messageInput.trim() === '') {
-              return
-            }
-
-            const messageToSend = {
-              type: this.recording ? 'audio' : 'text',
-              raw: this.recording ? this.audioChunks : this.messageInput,
-              room: this.getDiffieHellmanSecret(
-                this.friends[this.currentFriendIndex].room,
-              ),
-            }
-
-            this.sendSignalingMessage(messageToSend)
-
-            let message = {
-              id: Date.now(),
-              type: this.recording ? 'audio' : 'text',
-              raw: this.recording ? this.audioChunks : this.messageInput,
-              sent: true,
-            }
-
-            let data = {
-              ...message,
-              raw: this.koblitzEncode(message.raw),
-            }
-
-            this.friends[this.currentFriendIndex].messages.push(data)
-
-            if (!this.recording) {
-              this.messageInput = ''
-            }
-          },
-
-          // Method to receive message
-          receiveMessage(message) {
-            const sender = this.friends.find(
-              (friend) =>
-                this.getDiffieHellmanSecret(friend.room) === message.room,
-            )
-            if (sender) {
-              const senderIndex = this.friends.indexOf(sender)
-              this.friends[senderIndex].messages.push({
-                id: Date.now(),
-                type: message.type,
-                sent: false,
-                raw: message.raw,
-              })
-            }
-          },
-
-          // Method to toggle recording
-          toggleRecording() {
-            if (this.recording) {
-              this.stopRecording()
-            } else {
-              this.startRecording()
-            }
-          },
-          // Method to stop recording
-          stopRecording() {
-            this.recording = false
-            const mediaRecorder = this.mediaRecorder
-            if (mediaRecorder && mediaRecorder.state === 'recording') {
-              mediaRecorder.stop()
-            }
-          },
-          // Method to start recording
-          startRecording() {
-            navigator.mediaDevices
-              .getUserMedia({ audio: true })
-              .then((stream) => {
-                this.recording = true
-                const mediaRecorder = new MediaRecorder(stream)
-                this.mediaRecorder = mediaRecorder
-                mediaRecorder.addEventListener('dataavailable', (event) => {
-                  this.audioChunks.push(event.data)
-                })
-                mediaRecorder.addEventListener('stop', () => {
-                  const audioBlob = new Blob(this.audioChunks)
-                  const reader = new FileReader()
-                  reader.onloadend = () => {
-                    const base64data = reader.result.split(',')[1]
-                    const messageToSend = {
-                      type: 'audio',
-                      raw: base64data,
-                      room: this.getDiffieHellmanSecret(
-                        this.currentFriend.room,
-                      ),
-                    }
-
-                    this.sendSignalingMessage(messageToSend)
-
-                    let message = {
-                      id: Date.now(),
-                      type: 'audio',
-                      raw: base64data,
-                      sent: true,
-                    }
-
-                    let data = {
-                      ...message,
-                      raw: this.koblitzEncode(message.raw),
-                    }
-
-                    this.currentFriend.messages.push(data)
-                  }
-                  reader.readAsDataURL(audioBlob)
-                  this.audioChunks = []
-                })
-                mediaRecorder.start()
-              })
-              .catch((error) => {
-                console.error('Error accessing microphone:', error)
-              })
-          },
-
-          // Method to convert base64 data to Blob
-          base64ToBlob(base64Data) {
-            const sliceSize = 512
-            const byteCharacters = atob(base64Data)
-            const byteArrays = []
-
-            for (
-              let offset = 0;
-              offset < byteCharacters.length;
-              offset += sliceSize
-            ) {
-              const slice = byteCharacters.slice(offset, offset + sliceSize)
-
-              const byteNumbers = new Array(slice.length)
-              for (let i = 0; i < slice.length; i++) {
-                byteNumbers[i] = slice.charCodeAt(i)
-              }
-
-              const byteArray = new Uint8Array(byteNumbers)
-              byteArrays.push(byteArray)
-            }
-            return new Blob(byteArrays, { type: 'audio/mpeg' })
-          },
-        },
-        // Created lifecycle hook
-        // created() {
-        //   this.connectToSignalingServer()
-        //   this.loadFriendsFromLocal()
-        // },
-        // Watcher for friends data property
-        watch: {
-          friends: {
-            handler: 'saveFriendsToLocal',
-            deep: true,
-          },
-        },
-      })
-      app.mount('#app')
-    </script>
-  </body>
-</html>