Fix coloring

package.json

@@ -1,5 +1,5 @@
 {
-  "homepage": "tdraw.jaeheonshim.dev",
+  "homepage": "https://tdraw.jaeheonshim.dev",
   "name": "tdraw-web",
   "version": "0.1.0",
   "private": true,
@@ -48,5 +48,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "gh-pages": "^4.0.0"
   }
 }

public/CNAME

@@ -0,0 +1 @@
+tdraw.jaeheonshim.dev

src/App.js

@@ -20,7 +20,7 @@ function App() {
   const example_id = queryParams.get("example") && queryParams.get("example").trim().toLowerCase();
 
   const [TDrawState, setTDrawState] = useState({
-    consoleContent: "Welcome to TDraw!\n\nTDraw is an open source turtle graphics web platform for the Java programming language."
+    consoleContent: "Welcome to TDraw!\nTDraw is an open source turtle graphics web platform for the Java programming language.\nUse the editor on the left to create and run your own turtle graphcis programs.\n\nTDraw is developed and maintained by Jaeheon Shim (github.com/jaeheonshim)"
   });
 
   const [isRunning, setIsRunning] = useState(false);
@@ -72,6 +72,7 @@ function App() {
                   <NavDropdown.Item href="?example=hexagonal_spiral">Hexagonal Spiral</NavDropdown.Item>
                   <NavDropdown.Item href="?example=projectile_motion">Projectile Motion</NavDropdown.Item>
                   <NavDropdown.Item href="?example=sierpinski">Sierpinski Triangle</NavDropdown.Item>
+                  <NavDropdown.Item href="?example=sine_wave">Sine Wave</NavDropdown.Item>
                   <NavDropdown.Item href="?example=random">Random</NavDropdown.Item>
                 </NavDropdown>
                 <Nav.Link target="_blank" href="https://jaeheonshim.dev/TDraw-Engine/DOCUMENTATION.html">Documentation</Nav.Link>

src/Drawing/Canvas.js

@@ -72,6 +72,7 @@ export default function Canvas(props) {
             }
         }
 
+        context.strokeStyle = drawJson.points[props.frame].color;
         context.stroke();
 
         const lastLocation = drawJson.points[Math.min(props.frame, drawJson.points.length - 1)];

src/SplashScreen.js

@@ -12,11 +12,6 @@ export default function SplashScreen() {
                     />
                 </h1>
             </div>
-            <div className="flex-shrink-1" style={{color: "#c4c4c4", paddingRight: "0.5em"}}>
-                <h3 className="float-end">
-                    By Jaeheon Shim
-                </h3>
-            </div>
         </div>
     )
 }

src/examples.json

@@ -4,5 +4,6 @@
     "hexagonal_spiral": "aW1wb3J0IGphdmEuYXd0Lio7CmltcG9ydCBjb20uamFlaGVvbnNoaW0udGRyYXcudHVydGxlLlR1cnRsZTsKCi8vIEV4YW1wbGU6IEhleGFnb25hbCBTcGlyYWwKLy8gQnk6IEphZWhlb24gU2hpbQpwdWJsaWMgY2xhc3MgTWFpbiB7CiAgICBwdWJsaWMgc3RhdGljIHZvaWQgbWFpbihTdHJpbmdbXSBhcmdzKSB0aHJvd3MgSU9FeGNlcHRpb24gewogICAgICAgIFR1cnRsZSB0ID0gbmV3IFR1cnRsZSgpOwoKICAgICAgICB0LnBlbkRvd24oKTsKICAgICAgICBmb3IgKGludCBpID0gMDsgaSA8IDMxMDsgKytpKSB7CiAgICAgICAgICAgIHQuZm9yd2FyZChpICogMik7CiAgICAgICAgICAgIHQuY291bnRlckNsb2Nrd2lzZSg2MCk7CiAgICAgICAgfQogICAgfQp9",
     "projectile_motion": "aW1wb3J0IGNvbS5qYWVoZW9uc2hpbS50ZHJhdy50dXJ0bGUuVHVydGxlOwoKLy8gRXhhbXBsZTogUHJvamVjdGlsZSBNb3Rpb24KLy8gQnk6IEphZWhlb24gU2hpbQpwdWJsaWMgY2xhc3MgTWFpbiB7CiAgICBwdWJsaWMgc3RhdGljIGRvdWJsZSBHUkFWSVRZID0gOS44OyAvLyBncmF2aXR5CiAgICBwdWJsaWMgc3RhdGljIGRvdWJsZSBWRUxPQ0lUWSA9IDg1OyAvLyBpbml0aWFsIHZlbG9jaXR5CiAgICBwdWJsaWMgc3RhdGljIGRvdWJsZSBMQVVOQ0hfVEhFVEEgPSA0NTsgLy8gbGF1bmNoIGFuZ2xlCgogICAgcHVibGljIHN0YXRpYyB2b2lkIG1haW4oU3RyaW5nW10gYXJncykgdGhyb3dzIElPRXhjZXB0aW9uIHsKICAgICAgICBUdXJ0bGUgdCA9IG5ldyBUdXJ0bGUoKTsKCiAgICAgICAgZG91YmxlIHZ4ID0gVHVydGxlLmNvcyhMQVVOQ0hfVEhFVEEpICogVkVMT0NJVFk7CiAgICAgICAgZG91YmxlIHZ5ID0gVHVydGxlLnNpbihMQVVOQ0hfVEhFVEEpICogVkVMT0NJVFk7CiAgICAgICAgZG91YmxlIGR0ID0gMC4wNTsKCiAgICAgICAgdC5zZXRQb3NpdGlvbigtMzYwLCAwKTsKICAgICAgICB0LnBlbkRvd24oKTsKCiAgICAgICAgZG91YmxlIHRpbWUgPSAwOwogICAgICAgIHdoaWxlKHZ5ID4gMCB8fCB0LmdldFBvc2l0aW9uKCkueSA+IDApIHsKICAgICAgICAgICAgdC5zZXRIZWFkaW5nKFR1cnRsZS5hdGFuKHZ5IC8gdngpKTsKICAgICAgICAgICAgdC5mb3J3YXJkKChpbnQpIE1hdGguc3FydCgoZHQgKiBkdCkgKiAodnggKiB2eCArIHZ5ICogdnkpKSk7CiAgICAgICAgICAgIHZ5IC09IEdSQVZJVFkgKiBkdDsKICAgICAgICAgICAgdGltZSArPSBkdDsKICAgICAgICB9CiAgICB9Cn0=",
     "sierpinski": "aW1wb3J0IGNvbS5qYWVoZW9uc2hpbS50ZHJhdy50dXJ0bGUuVHVydGxlOwoKLy8gRXhhbXBsZTogU2llcnBpbnNraSBUcmlhbmdsZQovLyBCeTogSmFlaGVvbiBTaGltCnB1YmxpYyBjbGFzcyBNYWluIHsKICAgIHB1YmxpYyBzdGF0aWMgdm9pZCBtYWluKFN0cmluZ1tdIGFyZ3MpIHRocm93cyBJT0V4Y2VwdGlvbiB7CiAgICAgICAgVHVydGxlIHQgPSBuZXcgVHVydGxlKCk7CiAgICAgICAgdC5zZXRIZWFkaW5nKDYwKTsKCiAgICAgICAgdHJpYW5nbGUodCwgbmV3IGRvdWJsZVtdIHstMjQwLjAsIC0yMjAuMCwgMC4wLCAxOTUuMH0sIDApOwogICAgfQoKICAgIHB1YmxpYyBzdGF0aWMgdm9pZCB0cmlhbmdsZShUdXJ0bGUgdCwgZG91YmxlW10gcG9pbnRzLCBpbnQgZGVwdGgpIHsKICAgICAgICBpZihkZXB0aCA+IDYpIHJldHVybjsKCiAgICAgICAgdC5wZW5VcCgpOwogICAgICAgIHQuc2V0UG9zaXRpb24oKGludCkgTWF0aC5yb3VuZChwb2ludHNbMF0pLCAoaW50KSBNYXRoLnJvdW5kKHBvaW50c1sxXSkpOwogICAgICAgIHQucGVuRG93bigpOwoKICAgICAgICBmb3IoaW50IGkgPSAwOyBpIDwgMzsgKytpKSB7CiAgICAgICAgICAgIHQuZm9yd2FyZCgoaW50KSBNYXRoLnNxcnQoTWF0aC5wb3cocG9pbnRzWzNdIC0gcG9pbnRzWzFdLCAyKSArIE1hdGgucG93KHBvaW50c1syXSAtIHBvaW50c1swXSwgMikpKTsKICAgICAgICAgICAgdC5jdygxMjApOwogICAgICAgIH0KCiAgICAgICAgdHJpYW5nbGUodCwgbmV3IGRvdWJsZVtdIHsgcG9pbnRzWzBdLCBwb2ludHNbMV0sIHBvaW50c1swXSArIChwb2ludHNbMl0gLSBwb2ludHNbMF0pIC8gMiwgcG9pbnRzWzFdICsgKHBvaW50c1szXSAtIHBvaW50c1sxXSkgLyAyIH0sIGRlcHRoICsgMSk7CiAgICAgICAgdHJpYW5nbGUodCwgbmV3IGRvdWJsZVtdIHsgcG9pbnRzWzJdLCBwb2ludHNbMV0sIHBvaW50c1swXSArIChwb2ludHNbMl0gLSBwb2ludHNbMF0pICogMyAvIDIsIHBvaW50c1sxXSArIChwb2ludHNbM10gLSBwb2ludHNbMV0pIC8gMiB9LCBkZXB0aCArIDEpOwogICAgICAgIHRyaWFuZ2xlKHQsIG5ldyBkb3VibGVbXSB7IHBvaW50c1swXSArIChwb2ludHNbMl0gLSBwb2ludHNbMF0pIC8gMiwgcG9pbnRzWzFdICsgKHBvaW50c1szXSAtIHBvaW50c1sxXSkgLyAyLCBwb2ludHNbMl0sIHBvaW50c1szXSB9LCBkZXB0aCArIDEpOwogICAgfQp9",
+    "sine_wave": "aW1wb3J0IGNvbS5qYWVoZW9uc2hpbS50ZHJhdy50dXJ0bGUuVHVydGxlOwppbXBvcnQgamF2YS5hd3QuQ29sb3I7CgovLyBFeGFtcGxlOiBTaW5lIFdhdmUKLy8gQnk6IEphZWhlb24gU2hpbQpwdWJsaWMgY2xhc3MgTWFpbiB7CiAgICBwdWJsaWMgc3RhdGljIHZvaWQgbWFpbihTdHJpbmdbXSBhcmdzKSB0aHJvd3MgSU9FeGNlcHRpb24gewogICAgICAgIFR1cnRsZSB0ID0gbmV3IFR1cnRsZSgpOwogCiAgICAgICAgdC5zZXRQb3NpdGlvbigtMzgwLCAwKTsKICAgICAgICB0LnBlbkRvd24oKTsKICAgICAgICBmb3IoaW50IGkgPSAwOyBpIDwgOTIwOyArK2kpIHsKICAgICAgICAgICAgZG91YmxlIGR5ID0gVHVydGxlLmNvcyhpKTsgLy8gZHkgPSBjb3MoeCkgZHgKICAgICAgICAgICAgdC5zZXRIZWFkaW5nKFR1cnRsZS5hdGFuKGR5KSk7CiAgICAgICAgICAgIHQuZm9yd2FyZCgoaW50KSBNYXRoLnNxcnQoMSArIGR5ICogZHkpKTsKICAgICAgICB9CiAgICB9Cn0K",
     "random": "aW1wb3J0IGNvbS5qYWVoZW9uc2hpbS50ZHJhdy50dXJ0bGUuVHVydGxlOwoKLy8gRXhhbXBsZTogUmFuZG9tCi8vIEJ5OiBKYWVoZW9uIFNoaW0KcHVibGljIGNsYXNzIE1haW4gewogICAgcHVibGljIHN0YXRpYyB2b2lkIG1haW4oU3RyaW5nW10gYXJncykgdGhyb3dzIElPRXhjZXB0aW9uIHsKICAgICAgICBUdXJ0bGUgdCA9IG5ldyBUdXJ0bGUoKTsKCiAgICAgICAgZm9yKGludCBpID0gMDsgaSA8IDEwMDsgaSsrKSB7CiAgICAgICAgICAgIHQuc2V0SGVhZGluZyhNYXRoLnJhbmRvbSgpICogMzYwKTsKICAgICAgICAgICAgdC5mb3J3YXJkKChpbnQpIChNYXRoLnJhbmRvbSgpICogNTApKTsKICAgICAgICB9CiAgICB9Cn0="
 }

src/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 import SplashScreen from './SplashScreen';
@@ -12,9 +11,4 @@ root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+);