chore: add comments explaining certain components

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(() => {

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(() => {

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)