Paint canvas repeatedly from external script

commonprefix · Aug 24, 2023 · 8cd50a8 · 8cd50a8
1 parent 1fbd6d0
commit 8cd50a8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/components/leaderboard.tsx b/components/leaderboard.tsx
@@ -1,6 +1,7 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import styles from '../styles/Home.module.css'
+import Script from 'next/script'
 import { createHash } from 'crypto'
 import { invertColor } from '../lib/color.js'
 import Link from 'next/link'
@@ -69,12 +70,13 @@ export default ({year, month, contractorHours, monthProjections}: {
   const prevLink = prevMonth(year, month)
   const nextLink = nextMonth(year, month)
 
-  const html = (
+  return (
     <div className={styles.container}>
       <Head>
         <title>Common Prefix Leaderboard</title>
       </Head>
 
+      <Script src="/assets/colorHours.js" strategy="beforeInteractive" />
       <main className={styles.main}>
         <h1 className={styles.title}>
           <span className={styles.titleCaption}>High Scores</span>
@@ -125,7 +127,12 @@ export default ({year, month, contractorHours, monthProjections}: {
                     <td className={styles.progressBarContainer}>
                       <div></div>
                       <div>
-                      <canvas id={`lala${contractor.name}`} width="150" height="15"></canvas>
+                      <canvas id={`canvas${contractor.name}`} width="150" height="15"></canvas>
+                      <Script id={`caller${contractor.name}`}>
+                      {`
+                        window.colorHours(document.getElementById(\`canvas${contractor.name}\`))
+                      `}
+                      </Script>
                       </div>
                       {
                         contractor.hoursProjection && contractor.percentageProjection?
@@ -152,11 +159,4 @@ export default ({year, month, contractorHours, monthProjections}: {
       </main>
     </div>
   )
-  console.log("adsf")
-  const canvas = document.getElementById("lalaOrfeas")
-  //console.log("lkjh")
-  //const ctx = canvas.getContext("2d")
-  //ctx.fillText("a", 10, 10)
-
-  return html
 }
diff --git a/public/assets/colorHours.js b/public/assets/colorHours.js
@@ -0,0 +1,4 @@
+window.colorHours = (canvas) => {
+  const ctx = canvas.getContext("2d")
+  ctx.fillText("a", 10, 10)
+}