From 81d8c0530087d15883dd4e619aee02354d957878 Mon Sep 17 00:00:00 2001 From: Ryan Vander Stelt <87216059+ryanvanderstelt@users.noreply.github.com> Date: Thu, 20 Mar 2025 12:49:35 -0500 Subject: [PATCH 1/5] Create README.md --- README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..094dc46 --- /dev/null +++ b/README.md @@ -0,0 +1,15 @@ +# vg_companion + +[DB Logical Design LucidChart](https://lucid.app/lucidchart/f79a155b-6a9e-40bf-ba05-13a7cc55a194/edit?beaconFlowId=20D12269528BA563&page=0_0&invitationId=inv_9a91e9ae-6987-484e-b29f-2fb772df86a5# "DB Logical Design") + +[Sequence Diagram](https://lucid.app/lucidchart/168d17e9-0ad1-499e-aa6b-5bf10eaa2399/edit?beaconFlowId=905D0E1505D5A83D&invitationId=inv_725bef4e-f5e2-4040-b5ec-c2d527884cb8&page=0_0# "Sequence Diagram") + +[LoFi Mockup](https://imgur.com/a/t4Y2GQV "LoFi Mockup") + +[Use Case Design](https://lucid.app/lucidchart/c1d84bf1-6a1b-4273-9043-2c9e84e461da/edit?view_items=YWIUvePaxaJL%2CYWIUnejlxf7w%2CYWIUuA2PBa70%2CYWIUsaxSwRHg&invitationId=inv_baa3b1bd-0aa5-4dad-9c2e-6147a2014de8 "Use Case Design") + +[State Diagram](https://lucid.app/lucidchart/f7b49134-e792-4c6c-bc96-3100d2d4b606/edit?beaconFlowId=EA263B65A1BF114A&invitationId=inv_b445fa03-c469-4ea9-8d92-adb59e0996fa&page=0_0# "State Diagram") + +[Figma Design](https://www.figma.com/design/o9ZceBulLnFnE4VmwHazSm/vg_companion_figma?node-id=0-1&t=096e7YyhUMaJiV7l-1 "Figma Design") + +[Google Doc](https://docs.google.com/document/d/10ZZMZ_rv8ICpIr0MRWC0qau3UxFNBjpOiRFCHmjUEIw/edit?usp=sharing "Google Doc") From 191ef57e43e411ef74b0b4179d2e65a48700bcda Mon Sep 17 00:00:00 2001 From: ryanvanderstelt Date: Thu, 27 Mar 2025 12:03:56 -0500 Subject: [PATCH 2/5] added necessary files --- client/src/App.js | 1 + client/src/Guides.css | 0 client/src/Guides.js | 0 client/src/Notes.css | 0 client/src/Notes.js | 0 client/src/Timer.css | 0 client/src/Timer.js | 0 7 files changed, 1 insertion(+) create mode 100644 client/src/Guides.css create mode 100644 client/src/Guides.js create mode 100644 client/src/Notes.css create mode 100644 client/src/Notes.js create mode 100644 client/src/Timer.css create mode 100644 client/src/Timer.js diff --git a/client/src/App.js b/client/src/App.js index 7b49554..aec4c25 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -6,6 +6,7 @@ function App() { return ( <> + ); } diff --git a/client/src/Guides.css b/client/src/Guides.css new file mode 100644 index 0000000..e69de29 diff --git a/client/src/Guides.js b/client/src/Guides.js new file mode 100644 index 0000000..e69de29 diff --git a/client/src/Notes.css b/client/src/Notes.css new file mode 100644 index 0000000..e69de29 diff --git a/client/src/Notes.js b/client/src/Notes.js new file mode 100644 index 0000000..e69de29 diff --git a/client/src/Timer.css b/client/src/Timer.css new file mode 100644 index 0000000..e69de29 diff --git a/client/src/Timer.js b/client/src/Timer.js new file mode 100644 index 0000000..e69de29 From 5e62ca9565302f731dbaaee40739355c5b8f0402 Mon Sep 17 00:00:00 2001 From: ryanvanderstelt Date: Thu, 27 Mar 2025 12:16:56 -0500 Subject: [PATCH 3/5] unformatted sections added to App.js, placeholder format and html for each section --- client/src/App.js | 7 ++++++- client/src/Guides.js | 12 ++++++++++++ client/src/Notes.js | 12 ++++++++++++ client/src/Timer.js | 12 ++++++++++++ 4 files changed, 42 insertions(+), 1 deletion(-) diff --git a/client/src/App.js b/client/src/App.js index aec4c25..14036f4 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,12 +1,17 @@ // src/App.js import "./App.css"; import Navbar from "./Navbar"; +import Timer from "./Timer" +import Notes from "./Notes" +import Guides from "./Guides" function App() { return ( <> - + + + ); } diff --git a/client/src/Guides.js b/client/src/Guides.js index e69de29..120663f 100644 --- a/client/src/Guides.js +++ b/client/src/Guides.js @@ -0,0 +1,12 @@ +import "./Guides.css" +import React from "react"; + +const Guides = () => { + return ( + <> +

This is where our guides go

+ + ); +}; + +export default Guides; \ No newline at end of file diff --git a/client/src/Notes.js b/client/src/Notes.js index e69de29..9f71c49 100644 --- a/client/src/Notes.js +++ b/client/src/Notes.js @@ -0,0 +1,12 @@ +import "./Notes.css" +import React from "react"; + +const Notes = () => { + return ( + <> +

This is where our notes go

+ + ); +}; + +export default Notes; \ No newline at end of file diff --git a/client/src/Timer.js b/client/src/Timer.js index e69de29..4aea807 100644 --- a/client/src/Timer.js +++ b/client/src/Timer.js @@ -0,0 +1,12 @@ +import "./Timer.css" +import React from "react"; + +const Timer = () => { + return ( + <> +

This is where our timer goes

+ + ); +}; + +export default Timer; \ No newline at end of file From 29eaa8c098c03f64861c60ef4ffae288bc9ca29f Mon Sep 17 00:00:00 2001 From: ryanvanderstelt Date: Thu, 27 Mar 2025 13:06:34 -0500 Subject: [PATCH 4/5] very basic, barely functional layout for app --- client/src/App.css | 26 ++++++++++++++++++++++++++ client/src/App.js | 16 +++++++++++++--- 2 files changed, 39 insertions(+), 3 deletions(-) diff --git a/client/src/App.css b/client/src/App.css index 74b5e05..76559cb 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -32,7 +32,33 @@ from { transform: rotate(0deg); } + to { transform: rotate(360deg); } } + +#notes { + height: 300px; + background-color: aqua; +} + +#timer { + height: 100px; + background-color: greenyellow; +} + +#guides { + background-color: yellow; +} + +.page { + min-width: 100px; + height: auto; +} + +.divider { + display: flex; + height: auto; + background-color: antiquewhite; +} \ No newline at end of file diff --git a/client/src/App.js b/client/src/App.js index 14036f4..168dd45 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -9,9 +9,19 @@ function App() { return ( <> - - - +
+
+
+ +
+
+ +
+
+
+ +
+
); } From 83cd8f25c6e4bd45d51f69d1bbbc52d2b605685c Mon Sep 17 00:00:00 2001 From: eshanks Date: Thu, 27 Mar 2025 13:10:46 -0500 Subject: [PATCH 5/5] added timer functionality --- client/src/Timer.js | 53 ++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 47 insertions(+), 6 deletions(-) diff --git a/client/src/Timer.js b/client/src/Timer.js index 4aea807..01cd63c 100644 --- a/client/src/Timer.js +++ b/client/src/Timer.js @@ -1,12 +1,53 @@ -import "./Timer.css" -import React from "react"; +import React, { useState, useEffect } from "react"; +import "./Timer.css"; const Timer = () => { + const [isRunning, setIsRunning] = useState(false); + const [time, setTime] = useState(0); + + useEffect(() => { + let interval; + if (isRunning) { + interval = setInterval(() => { + setTime((prevTime) => prevTime + 10); + }, 10); + } else { + clearInterval(interval); + } + return () => clearInterval(interval); + }, [isRunning]); + + const hours = Math.floor(time / 3600000); + const minutes = Math.floor((time % 3600000) / 60000); + const seconds = Math.floor((time % 60000) / 1000); + const milliseconds = Math.floor((time % 1000) / 10); + + const handleStart = () => setIsRunning(true); + const handleStop = () => setIsRunning(false); + const handleReset = () => { + setIsRunning(false); + setTime(0); + }; + return ( - <> -

This is where our timer goes

- +
+

Stopwatch

+
+ {String(hours).padStart(2, "0")} + Hr + {String(minutes).padStart(2, "0")} + Min + {String(seconds).padStart(2, "0")} + Sec + {String(milliseconds).padStart(2, "0")} +
+
+ + + +
+
); }; -export default Timer; \ No newline at end of file +export default Timer;