From 341204d73fdebf043db022bbf79551a976bb67b9 Mon Sep 17 00:00:00 2001
From: Evan Shortiss <evanshortiss@gmail.com>
Date: Thu, 12 Oct 2023 14:30:10 -0700
Subject: [PATCH] chore: add comments explaining certain components

---
 roshambo-ui/src/CaptureVideo.tsx     | 12 +++++++++++-
 roshambo-ui/src/HeightWrapper.tsx    |  8 ++++++++
 roshambo-ui/src/LandscapeBlocker.tsx |  6 ++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/roshambo-ui/src/CaptureVideo.tsx b/roshambo-ui/src/CaptureVideo.tsx
index 096f3fc..5e475df 100644
--- a/roshambo-ui/src/CaptureVideo.tsx
+++ b/roshambo-ui/src/CaptureVideo.tsx
@@ -10,10 +10,20 @@ function isMobileDevice () {
   return navigator.userAgent.match(/ipod|ipad|iphone|android/gi)
 }
 
+/**
+ * This component renders a video feed captured from the user's camera on screen
+ * using the <video> element in combination with the getUserMedia API. It also
+ * displays a button that can be used to capture the current frame. In other
+ * words this UI mimics a camera.
+ * 
+ * The captured image is written to a <canvas> element that is then shown in
+ * place of the video feed so the user can confirm it looks goof before sending
+ * it to the backend.
+ */
+
 const VideoCaptureComponent: React.FunctionComponent<VideoCaptureComponentProps> = ({ callback }) => {
   const [ imageData, setImageData ] = useState<string>()
   const videoRef = useRef<HTMLVideoElement|null>(null);
-  // const canvasRef = useRef<HTMLCanvasElement|null>(null);
   const [ stream, setStream ] = useState<MediaStream>()
 
   const stopStream = useCallback(() => {
diff --git a/roshambo-ui/src/HeightWrapper.tsx b/roshambo-ui/src/HeightWrapper.tsx
index 9f72353..5bb0bdb 100644
--- a/roshambo-ui/src/HeightWrapper.tsx
+++ b/roshambo-ui/src/HeightWrapper.tsx
@@ -1,5 +1,13 @@
 import React, { useEffect } from 'react';
 
+/**
+ * The address bar appearing/disappearing in Safari on iOS causes the page to
+ * dynamically change height when a user scrolls. This is an issue for a full
+ * screen application such as this one. It might be possible to address using
+ * the new "svh" unit height, but the technique in this file (plus index.css)
+ * works to dynamically resize the application to fit available space.
+ */
+
 const HeightWrapper: React.FC<{ children: JSX.Element }> = ({ children }) => {
   
   useEffect(() => {
diff --git a/roshambo-ui/src/LandscapeBlocker.tsx b/roshambo-ui/src/LandscapeBlocker.tsx
index fe52ec0..f5d267a 100644
--- a/roshambo-ui/src/LandscapeBlocker.tsx
+++ b/roshambo-ui/src/LandscapeBlocker.tsx
@@ -1,6 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import RoshamboLogo from './assets/2023_Roshambo_UI__Roshambo_Logo_only.svg'
 
+/**
+ * The application is designed with portrait mode in mind. This component
+ * will render a message that instructs users to switch to portrait mode on
+ * mobile devices so they aren't presented with an ugly UI.
+ */
+
 const LandscapeBlocker: React.FC<{ children: JSX.Element }> = ({ children }) => {
   const [ active, setActive ] = useState<boolean>(false)