-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
43 additions
and
131 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,22 @@ | ||
| <template> | ||
| <div> | ||
| <header class="dark:bg-black dark:text-white bg-white text-black h-full"> | ||
| <div class="flex justify-between p-4"> | ||
| <div class="text-3xl font-bold font-sans"> | ||
| <h1>MagicDrop</h1> | ||
| </div> | ||
| <div class="text-3xl font-bold font-sans"> | ||
| <UButton :icon="$colorMode.value === 'dark' ? 'i-heroicons-moon' : 'i-heroicons-sun'" size="xl" | ||
| color="white" variant="link" @click="switchColorMode" /> | ||
| </div> | ||
| </div> | ||
| </header> | ||
| <slot /> | ||
| </div> | ||
| </template> | ||
| </template> | ||
| <script setup> | ||
| const colorMode = useColorMode(); | ||
| function switchColorMode () { | ||
| colorMode.value = colorMode.value === "dark" ? "light" : "dark"; | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,19 @@ | ||
| <template> | ||
| <div> | ||
| <header class="bg-[#3d405b] text-white h-36"> | ||
| <div class="flex justify-between p-4"> | ||
| <div class="text-6xl font-bold font-sans"> | ||
| <h1>MagicDrop</h1> | ||
| <main class="p-4"> | ||
| <div class="flex w-full mb-2"> | ||
| <div class="w-1/2 h-40 rounded-lg bg-downy-300 mr-1 hover:w-3/4 text-center flex justify-center items-center"> | ||
| <NuxtLink to="/Send"> | ||
| <h1 class="text-3xl text-bold">Sender</h1> | ||
| </NuxtLink> | ||
| </div> | ||
| <div class="text-6xl font-bold font-sans"> | ||
| <UButton :icon="$colorMode.value === 'dark' ? 'i-heroicons-moon' : 'i-heroicons-sun'" size="xl" color="white" | ||
| variant="link" @click="switchColorMode" /> | ||
| <div class="w-1/2 h-40 rounded-lg bg-blue-500 ml-1 hover:w-3/4 flex justify-center items-center"> | ||
| <NuxtLink to="/Receive"> | ||
| <h1 class="text-3xl text-bold">Receiver</h1> | ||
| </NuxtLink> | ||
| </div> | ||
| </div> | ||
| </header> | ||
| <main> | ||
| <div class="w-full min-h-12 bg-[#f2cc8f] text-black p-4 flex justify-between"> | ||
| <div> | ||
| <h1 class="font-bold text-2xl">RECEIVING</h1> | ||
| <p class="text-sm"> | ||
| Your device will shown as <b>{{ characterName }}</b> | ||
| </p> | ||
| </div> | ||
| <div> | ||
| <UToggle size="md" :model-value="true" /> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <Peers :data="data" :loading="pending" /> | ||
| <Cloud :characterName="characterName" /> | ||
| </div> | ||
| <Cloud :characterName="'Data'" /> | ||
| </main> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import Peer from "peerjs"; | ||
| import { uniqueNamesGenerator, starWars, adjectives } from "unique-names-generator"; | ||
| const characterName = uniqueNamesGenerator({ | ||
| dictionaries: [adjectives, starWars], | ||
| }).replace(/\s/g, ""); | ||
| const { data, pending, refresh } = await useFetch( | ||
| "http://192.168.137.1:9000/peerjs/peers", | ||
| { | ||
| transform (data) { | ||
| return data.filter((el) => el !== characterName); | ||
| }, | ||
| } | ||
| ); | ||
| useIntervalFn(() => { | ||
| console.log("Refreshing..."); | ||
| refresh(); | ||
| }, 10000); | ||
| let myPeer = null; | ||
| // Connect to the PeerJS Server using the configured URL | ||
| const serverUrl = process.env.PEERJS_SERVER_URL || "192.168.137.1:9000"; | ||
| const options = { | ||
| host: serverUrl.split(":")[0], | ||
| port: serverUrl.split(":")[1], | ||
| path: "/", | ||
| debug: 3, | ||
| }; | ||
| myPeer = new Peer(characterName, {}); // Connect to server | ||
| const colorMode = useColorMode(); | ||
| function switchColorMode () { | ||
| colorMode.value = colorMode.value === "dark" ? "light" : "dark"; | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters