Refactor CSS styles for prompt panel and multisplode; rename interval…

…-timer file and fix class name; enhance progress component with SVG and JSDoc comments
chrisdurfee · Dec 10, 2024 · e9cd562 · e9cd562
1 parent 363d7cc
commit e9cd562
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 12 deletions.
diff --git a/css/components/pages/prompt-panel.css b/css/components/pages/prompt-panel.css
@@ -2,8 +2,9 @@
 	position: absolute;
 	background: rgba(255, 255, 255, .15);
 	width: 70%;
+	max-width: 650px;
 	height: 80vh;
-    max-height: 340px;
+	max-height: 340px;
 	top: 6%;
 	bottom: 6%;
 	left: 0px;

diff --git a/css/multisplode.css b/css/multisplode.css
@@ -196,13 +196,16 @@ svg {
 	.orientation-panel.prompt-panel {
 		width: 85%;
 	}
-	.orientation-panel.prompt-panel img, .prompt-panel object {
+
+	.orientation-panel.prompt-panel img,
+	.prompt-panel object {
 		display: block;
 		width: 95%;
-		max-width: 100%;
+		max-width: 400px;
 		height: auto;
 		margin: 20px auto;
 	}
+
 	.orientation-panel.prompt-panel section .content {
 		padding: 20px 5%;
 	}

diff --git a/src/components/organisms/intterval-timer.js → src/components/organisms/interval-timer.js b/src/components/organisms/intterval-timer.js → src/components/organisms/interval-timer.js
@@ -1,13 +1,13 @@
 import { Timer } from "./timer";
 
 /**
- * INtervalTimer
+ * IntervalTimer
  *
  * This class will handle the timer.
  *
  * @class
  */
-export class INtervalTimer extends Timer
+export class IntervalTimer extends Timer
 {
 	/**
 	 * This will set up the timer.

diff --git a/src/components/organisms/progress.js b/src/components/organisms/progress.js
@@ -1,6 +1,19 @@
 import { Div } from "@base-framework/atoms";
 import { Component } from "@base-framework/base";
 
+/**
+ * This is the svg for the progress bar.
+ *
+ * @type {string} ProgressSVG
+ */
+const ProgressSVG = `<svg id="level-progress-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83.2 83.6" width="83px" height="83px">
+<style>
+	.progress-bg{opacity:0.2;fill:#FFFFFF;stroke-width:0px;enable-background:new ;} .progress{fill:none;stroke:#FF4881;stroke-width:4;stroke-miterlimit:10;}
+</style>
+<path class="progress-bg" d="M74.7 21L62.2 8.5C50.9-2.8 32.3-2.8 21 8.5L8.5 21c-11.3 11.3-11.3 29.9 0 41.2L21 74.7C32.3 86 50.9 86 62.2 74.7l12.5-12.5C86 50.9 86 32.3 74.7 21zm-3.3 39.1L60.1 71.4c-10.2 10.2-26.9 10.2-37.1 0L11.8 60.1C1.6 49.9 1.6 33.2 11.8 23L23 11.8c10.2-10.2 26.9-10.2 37.1 0L71.4 23c10.2 10.2 10.2 26.9 0 37.1z"/>
+<path id="progress-line" class="progress" d="M60.82 72.582c-10.606 10.605-27.968 10.605-38.572 0L10.603 60.834c-10.605-10.605-10.605-27.967 0-38.57l11.644-11.645C32.852.013 50.214.013 60.817 10.62l11.75 11.643c10.604 10.605 10.604 27.967 0 38.57l-11.748 11.75"/>
+</svg>`;
+
 /**
  * Progress
  *
@@ -13,6 +26,7 @@ export class Progress extends Component
 	/**
 	 * This will create a new progress bar.
 	 *
+	 * @returns {void}
 	 */
 	beforeSetup()
 	{
@@ -23,15 +37,14 @@ export class Progress extends Component
 		this.progress = 0;
 	}
 
+	/**
+	 * This will render the progress bar.
+	 *
+	 * @returns {object}
+	 */
 	render()
 	{
-		return Div({ class: 'progress-bar', onSet: ['scoreNumber', (value) => this.update(value, this.data.minimum)], html: `<svg id="level-progress-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83.2 83.6" width="83px" height="83px">
-		<style>
-		  .progress-bg{opacity:0.2;fill:#FFFFFF;stroke-width:0px;enable-background:new ;} .progress{fill:none;stroke:#FF4881;stroke-width:4;stroke-miterlimit:10;}
-		</style>
-		<path class="progress-bg" d="M74.7 21L62.2 8.5C50.9-2.8 32.3-2.8 21 8.5L8.5 21c-11.3 11.3-11.3 29.9 0 41.2L21 74.7C32.3 86 50.9 86 62.2 74.7l12.5-12.5C86 50.9 86 32.3 74.7 21zm-3.3 39.1L60.1 71.4c-10.2 10.2-26.9 10.2-37.1 0L11.8 60.1C1.6 49.9 1.6 33.2 11.8 23L23 11.8c10.2-10.2 26.9-10.2 37.1 0L71.4 23c10.2 10.2 10.2 26.9 0 37.1z"/>
-		<path id="progress-line" class="progress" d="M60.82 72.582c-10.606 10.605-27.968 10.605-38.572 0L10.603 60.834c-10.605-10.605-10.605-27.967 0-38.57l11.644-11.645C32.852.013 50.214.013 60.817 10.62l11.75 11.643c10.604 10.605 10.604 27.967 0 38.57l-11.748 11.75"/>
-	  </svg>` });
+		return Div({ class: 'progress-bar', onSet: ['scoreNumber', (value) => this.update(value, this.data.minimum)], html: ProgressSVG });
 	}
 
 	/**
@@ -61,6 +74,7 @@ export class Progress extends Component
 	 * This will modify the transition of the element.
 	 *
 	 * @param {number} time
+	 * @returns {void}
 	 */
 	modifyTransition(time)
 	{
@@ -73,6 +87,7 @@ export class Progress extends Component
 	 *
 	 * @param {number} number
 	 * @param {number} total
+	 * @returns {void}
 	 */
 	update(number, total)
 	{
@@ -95,6 +110,7 @@ export class Progress extends Component
 	 * This will change the stroke offset of the element.
 	 *
 	 * @param {number} number
+	 * @returns {void}
 	 */
 	changeStrokeOffset(number)
 	{
@@ -106,6 +122,11 @@ export class Progress extends Component
 		this.element.style.strokeDashoffset = number;
 	}
 
+	/**
+	 * This will reset the progress bar.
+	 *
+	 * @returns {void}
+	 */
 	reset()
 	{
 		const length = this.length;
@@ -117,6 +138,11 @@ export class Progress extends Component
 		this.modifyTransition(duration);
 	}
 
+	/**
+	 * This will remove the transition of the element.
+	 *
+	 * @returns {void}
+	 */
 	beforeDestroy()
 	{
 		/* this will remove the transition to go back