basic TeaLevel component implementation

Author: GreenWizard2015

ui/src/App.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import './App.css';
-import { Container, Form } from 'react-bootstrap';
+import { Col, Container, Form, Row } from 'react-bootstrap';
 import { connect } from 'react-redux';
 
 import NotificationsArea from './components/NotificationsArea.js';
@@ -11,6 +11,7 @@ import SystemStatusArea from './components/SystemStatusArea.js';
 import CurrentOperationInfoArea from './components/CurrentOperationInfoArea.js';
 import HoldToPour from './components/HoldToPour.js';
 import PowerLevel from './components/PowerLevel.js';
+import TeaLevel from './components/TeaLevel.js';
 
 function App({ isConnected }) {
   return (
@@ -26,7 +27,14 @@ function App({ isConnected }) {
             <PourTimeField />
             <CurrentOperationInfoArea />
             <SystemControls />
-            <HoldToPour />
+            <Row>
+              <Col>
+                <HoldToPour />
+              </Col>
+              <Col>
+                <TeaLevel />
+              </Col>
+            </Row>
           </>
         ) : null}
       </Form>

ui/src/components/TeaLevel.css

@@ -0,0 +1,43 @@
+.tea-glass {
+  height: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+}
+
+.tea-container {
+  position: relative;
+  height: 100%;
+  max-width: 100%;
+  width: fit-content;
+  display: flex;
+}
+
+.cup-image {
+  max-height: 30vh;
+  max-width: 100%;
+  object-fit: contain;
+  position: relative;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.tea-level {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  height: 3px;
+  background-color: #76b7b2;
+  z-index: 2;
+}
+
+.est-tea-level {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  height: 3px;
+  border-bottom: 3px dashed red;
+  z-index: 3;
+}

ui/src/components/TeaLevel.js

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import './TeaLevel.css';
+import cup from './cup.jpg';
+
+const bottomLevel = 20; // where the tea starts (0%)
+const maxLevel = 80; // where the tea ends (100%)
+
+function toRealLevel(level) {
+  const H = maxLevel - bottomLevel;
+  return (level / 100 * H) + bottomLevel;
+}
+
+function toPercentage(realLevel) {
+  const H = maxLevel - bottomLevel;
+  return (realLevel - bottomLevel) / H * 100;
+}
+
+function TeaLevel({ initialLevel=null }) {
+  const estimatedLevel = 50;
+  const [currentLevel, setCurrentLevel] = useState(initialLevel || 70);
+
+  const handleCupClick = (e) => {
+    const { top, height } = e.target.getBoundingClientRect();
+    const clickY = e.clientY;
+    const clickedPosition = top - clickY + height;
+    const clickedPercentage = (clickedPosition / height) * 100;
+    const newLevel = toPercentage(clickedPercentage);
+    // limit the new level to the range [0, 100]
+    setCurrentLevel( Math.min(Math.max(newLevel, 0), 100) );
+  };
+
+  return (
+    <div className="tea-glass">
+      <div className="tea-container">
+        <img src={cup} alt="Cup" className="cup-image" draggable="false" 
+          onClick={handleCupClick}
+        />
+        <div className="tea-level" style={{ bottom: `${toRealLevel(currentLevel)}%` }}></div>
+        <div className="est-tea-level" style={{ bottom: `${toRealLevel(estimatedLevel)}%` }}></div>
+      </div>
+    </div>
+  );
+}
+
+export default TeaLevel;