scss styles for frames

app/frame_handler.ts

@@ -115,27 +115,25 @@ export class FrameHandler {
 	public RefreshFrameViewer() {
 		// set all frames to inactive
 		for (let i = 0; i < this.frameViewer.children.length; i++) {
-			this.frameViewer.children[i].className = 'frame';
+			this.frameViewer.children[i].classList.remove('selected', 'warning');
 		}
 		// set current frame to active
 		if (this.frameViewer.children[this.projectData.currentFrame] !== undefined) {
-			this.frameViewer.children[this.projectData.currentFrame].className = 'frameActive';
+			this.frameViewer.children[this.projectData.currentFrame].classList.add('selected');
 		}
 
 		// check frames for data errors
 		for (let f = 0; f < this.animationData.frames.length; f++) {
+			// this.frameViewer.children[f].classList.add('warning');
+
 			if (this.animationData.pins !== undefined) {
 				for (let p = 0; p < this.animationData.pins.length; p++) {
 					if (this.animationData.pins[p] !== undefined) {
 						const pinIDtoCheck = this.animationData.pins[p].id;
-						console.log('checking frame ' + f + ' for pinID ' + this.animationData.pins[p].name);
+						// console.log('checking frame ' + f + ' for pinID ' + this.animationData.pins[p].name);
 						if (this.frameViewer.children[f] !== undefined) {
 							if (this.animationData.frames[f][pinIDtoCheck] === undefined) {
-								if (f === this.projectData.currentFrame) {
+								this.frameViewer.children[f].classList.add('warning');
-									this.frameViewer.children[f].className = 'frameActiveWarning';
-								} else {
-									this.frameViewer.children[f].className = 'frameWarning';
-								}
 								break;
 							}
 						}
@@ -147,8 +145,8 @@ export class FrameHandler {
 
 	private RefreshImage() {
 		if (this.filenames.length === 0) {
-			this.frameNumberDiv.className = 'warning';
+			// this.frameNumberDiv.className = 'warning';
-			this.frameNumberDiv.innerText = 'No images uploaded yet';
+			// this.frameNumberDiv.innerText = 'No images uploaded yet';
 		} else {
 			this.canvasContext.clearRect(0, 0, this.htmlCanvasElement.width, this.htmlCanvasElement.height);
 			this.canvasContext.imageSmoothingEnabled = false;

app/pin_handler.ts

@@ -26,10 +26,9 @@ export class PinHandler {
 		this.animationData = animationData;
 
 		// add origin click behaviour
+		originPin.id = 'pinID_0';
 		originPin.addEventListener('click', () => {
-			this.DeselectAllPinContainers();
+			this.SelectPin(originPin);
-			originPin.className = 'pinButtonContainerSelected';
-			projectData.currentlySelectedPin = 0;
 		});
 		// put origin into pincontainer array
 		this.allPinContainers = [ originPin ];
@@ -63,6 +62,7 @@ export class PinHandler {
 			this.allPinContainers[i].remove();
 		}
 		this.ResetPinSelection();
+		this.UpdateAnimationPinNames();
 	};
 
 	public GetAvailablePins = (): number[] => {
@@ -99,6 +99,20 @@ export class PinHandler {
 		this.allPinContainers[0].className = 'pinButtonContainerSelected';
 	};
 
+	private CheckOriginDataExists = () => {
+		this.allPinContainers[0].className = 'pinButtonContainer';
+		if (this.projectData.currentlySelectedPin === 0) {
+			this.allPinContainers[0].className = 'pinButtonContainerSelected';
+		}
+		if (this.animationData.originX === null || this.animationData.originY === null) {
+			if (this.projectData.currentlySelectedPin === 0) {
+				this.allPinContainers[0].className = 'pinButtonContainerErrorSelected';
+			} else {
+				this.allPinContainers[0].className = 'pinButtonContainerError';
+			}
+		}
+	};
+
 	private UpdatePinSettingsDiv = () => {
 		// create info window div and append to pincontainer
 		const newDiv = document.createElement('div');
@@ -146,15 +160,24 @@ export class PinHandler {
 		newDiv.appendChild(selectPinButton);
 		selectPinButton.textContent = 'Select';
 		selectPinButton.addEventListener('click', () => {
-			this.DeselectAllPinContainers();
+			this.SelectPin(newDiv);
-			newDiv.className = 'pinButtonContainerSelected';
-			this.projectData.currentlySelectedPin = parseInt(newDiv.id.split('_')[1]);
-			console.log('selected pin ' + this.projectData.currentlySelectedPin);
-			this.UpdateAnimationPinNames();
 		});
 		this.UpdateAnimationPinNames();
 	};
 
+	private SelectPin = (pinDiv: HTMLElement) => {
+		this.CheckOriginDataExists();
+		this.DeselectAllPinContainers();
+		this.projectData.currentlySelectedPin = parseInt(pinDiv.id.split('_')[1]);
+		if (pinDiv.className === 'pinButtonContainerError') {
+			pinDiv.className = 'pinButtonContainerErrorSelected';
+		} else {
+			pinDiv.className = 'pinButtonContainerSelected';
+		}
+		console.log('selected pin ' + this.projectData.currentlySelectedPin);
+		this.UpdateAnimationPinNames();
+	};
+
 	private RemovePinDataForID = (pinID: number) => {
 		// check for matching id in pin list and remove
 
@@ -185,7 +208,20 @@ export class PinHandler {
 
 	private DeselectAllPinContainers = () => {
 		for (let i = 0; i < this.allPinContainers.length; i++) {
-			this.allPinContainers[i].className = 'pinButtonContainer';
+			const pinDiv = this.allPinContainers[i];
+			pinDiv.className = 'pinButtonContainer';
+			if (i > 0) {
+				// check frames for missing pin info
+				const pinNumber = this.GetPinNumberFromID(pinDiv.id);
+				for (let f = 0; this.animationData.frames.length; f++) {
+					if (this.animationData.frames[f] !== undefined) {
+						if (this.animationData.frames[f][pinNumber] === undefined) {
+							pinDiv.className = 'pinButtonContainerError';
+							break;
+						}
+					}
+				}
+			}
 		}
 	};
 

app/stylesheets/main.scss

@@ -0,0 +1,119 @@
+$bg-color: #859094;
+$bg-dark-color: #7a8386;
+$main-border-color: #6b7578;
+$main-font-color: #101e24;
+$selected-border-color: #09e7ca;
+$selected-bg-color: #4d998f;
+$warning-border-color: #aa093a;
+$warning-bg-color: #6e545c;
+$warning-selected-border-color: #ff044f;
+$warning-selected-bg-color: #aa093a;
+$warning-text-color: #ff1d61;
+
+div {
+	display: block;
+	color: $main-font-color;
+	font-family: "Arial", Helvetica, sans-serif;
+}
+
+.numberinput {
+	width: 64px;
+}
+
+.instruction {
+	font-size: 12px;
+	margin: auto;
+	width: 50%;
+	border: 2px solid;
+	padding: 1px;
+	text-align: center;
+}
+
+#frameViewer {
+	display: flex;
+	flex-direction: row;
+}
+.frame {
+	flex: 1;
+	width: 32px;
+	height: 32px;
+	max-width: 32px;
+	color: $main-font-color;
+	padding: 1px;
+	display: inline-block;
+	border: 2px solid $main-border-color;
+	background-color: $bg-dark-color;
+
+	&.warning {
+		border: 2px solid $warning-border-color;
+		background-color: $warning-bg-color;
+	}
+	&.selected {
+		border: 2px solid $selected-border-color;
+		background-color: $selected-bg-color;
+		&.warning {
+			border: 2px solid $warning-selected-border-color;
+			background-color: $warning-selected-bg-color;
+		}
+	}
+}
+
+.errorMessage {
+	font-size: 12px;
+	width: 50%;
+	border: 2px solid $warning-border-color;
+	padding: 1px;
+	background-color: $warning-bg-color;
+}
+
+.warningMessage {
+	display: block;
+	color: $warning-text-color;
+	background-color: $warning-bg-color;
+	font-family: "Arial", Helvetica, sans-serif;
+}
+
+body {
+	background-color: $bg-color;
+}
+
+#dropZone {
+	width: 100%;
+	height: 100%;
+}
+
+#canvasImage {
+	border: 2px solid $main-border-color;
+	image-rendering: pixelated;
+}
+
+.pinContainer {
+	display: flex;
+	flex-direction: row;
+}
+.pinButtonContainer {
+	max-width: 10%;
+	flex: 1;
+	font-size: 12px;
+	border: 2px solid $main-border-color;
+	padding: 1px;
+
+	// .warning {
+	// 	border: 2px solid $warning-border-color;
+	// 	background-color: $warning-bg-color;
+	// }
+
+	// .selected {
+	// 	border: 2px solid $selected-border-color;
+	// 	background-color: $selected-bg-color;
+	// 	.warning {
+	// 		border: 2px solid $warning-selected-border-color;
+	// 		background-color: $warning-selected-bg-color;
+	// 	}
+	// }
+}
+
+.removeButton {
+	background-color: rgb(158, 15, 34);
+	color: rgb(227, 227, 236);
+}

dist/assets/stylesheets/main.css

@@ -1,121 +0,0 @@
-div {
-	display: block;
-	color: #101e24;
-	font-family: "Arial", Helvetica, sans-serif;
-}
-
-.numberinput {
-	width: 64px;
-}
-
-.instruction {
-	font-size: 12px;
-	margin: auto;
-	width: 50%;
-	border: 2px solid #6b7578;
-	padding: 1px;
-	text-align: center;
-}
-
-#frameViewer {
-	display: flex;
-	flex-direction: row;
-}
-.frame {
-	flex: 1;
-	width: 32px;
-	height: 32px;
-	max-width: 32px;
-	color: #101e24;
-	border: 2px solid #3f4446;
-	padding: 1px;
-	background-color: rgb(90, 92, 95);
-	display: inline-block;
-}
-.frameActive {
-	flex: 1;
-	width: 32px;
-	height: 32px;
-	max-width: 32px;
-	color: #101e24;
-	border: 2px solid #0865df;
-	padding: 1px;
-	background-color: rgb(35, 75, 185);
-	display: inline-block;
-}
-.frameWarning {
-	flex: 1;
-	width: 32px;
-	height: 32px;
-	max-width: 32px;
-	color: #101e24;
-	border: 2px solid rgb(233, 7, 75);
-	padding: 1px;
-	background-color: rgb(83, 14, 20);
-	display: inline-block;
-}
-.frameActiveWarning {
-	flex: 1;
-	width: 32px;
-	height: 32px;
-	max-width: 32px;
-	color: #101e24;
-	border: 2px solid rgb(233, 7, 75);
-	padding: 1px;
-	background-color: rgb(185, 8, 61);
-	display: inline-block;
-}
-
-.errorMessage {
-	font-size: 12px;
-	color: rgb(233, 7, 75);
-	width: 50%;
-	border: 2px solid rgb(233, 7, 75);
-	padding: 1px;
-	background-color: rgb(83, 14, 20);
-}
-
-.warning {
-	display: block;
-	color: #520012;
-	font-family: "Arial", Helvetica, sans-serif;
-}
-
-body {
-	background-color: #818485;
-}
-
-#dropZone {
-	width: 100%;
-	height: 100%;
-}
-
-#canvasImage {
-	border: 2px solid #6b7578;
-	image-rendering: pixelated;
-}
-
-.pinContainer {
-	display: flex;
-	flex-direction: row;
-}
-.pinButtonContainer {
-	max-width: 10%;
-	flex: 1;
-	font-size: 12px;
-	border: 2px solid #6b7578;
-	padding: 1px;
-}
-.pinButtonContainerSelected {
-	max-width: 10%;
-	flex: 1;
-	font-size: 12px;
-	border: 2px solid #0865df;
-	padding: 1px;
-	background-color: rgb(35, 75, 185);
-}
-
-.removeButton {
-	background-color: rgb(158, 15, 34);
-	color: rgb(227, 227, 236);
-}

dist/index.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8">
 
     <link rel="icon" href="/favicon.ico">
-    <link rel="stylesheet" href="assets/stylesheets/main.css">
   </head>
 	<body>
         <div id="dropZone">
@@ -17,7 +16,7 @@
           <div id="canvasStyle">
             <canvas id="canvasImage" alt=""></canvas>
           </div>
-          <div id="frameNumber" class="warning"></div>
+          <div id="frameNumber" class="warningMessage"></div>
           <div id="frameViewer"></div>
           <button id="addpin">Create New Pin</button>
           <div id="pinContainer" class="pinContainer">

index.ts

@@ -1,4 +1,5 @@
 import { Page } from './app/page';
+import './app/stylesheets/main.scss';
 
 const page = new Page();
 page.Load();

package.json

@@ -19,7 +19,13 @@
 	},
 	"homepage": "https://github.com/MoonsideGames/AnimationTool#readme",
 	"devDependencies": {
+		"css-loader": "^3.2.0",
+		"fibers": "^4.0.1",
+		"node-sass": "^4.12.0",
 		"prettier": "^1.18.2",
+		"sass": "^1.23.0",
+		"sass-loader": "^8.0.0",
+		"style-loader": "^1.0.0",
 		"ts-loader": "^6.1.2",
 		"tslint": "^5.20.0",
 		"tslint-config-prettier": "^1.18.0",

webpack/dev.config.js

@@ -1,25 +1,31 @@
-const path = require("path");
+const path = require('path');
 
 module.exports = {
-    mode: "development",
+	mode: 'development',
-    devtool: "inline-source-map",
+	devtool: 'inline-source-map',
-    entry: "./index.ts",
+	entry: {
+		main: [ './index.ts' ]
+	},
 	output: {
-      filename: "bundle.js"
+		filename: 'bundle.js'
 	},
 	resolve: {
 		// Add `.ts` and `.tsx` as a resolvable extension.
-      extensions: [".ts", ".tsx", ".js"]
+		extensions: [ '.ts', '.tsx', '.js' ]
 	},
 	module: {
 		rules: [
 			// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
 			{
 				test: /\.tsx?$/,
-            loader: "ts-loader",
+				loader: 'ts-loader',
 				options: {
 					allowTsInNodeModules: true
 				}
+			},
+			{
+				test: /\.scss$/,
+				use: [ 'style-loader', 'css-loader', 'sass-loader?sourceMap' ]
 			}
 		]
 	},
@@ -28,4 +34,4 @@ module.exports = {
 		compress: false,
 		port: 8080
 	}
-  };
+};

webpack/prod.config.js

@@ -1,25 +1,29 @@
-const path = require("path");
+const path = require('path');
 
 module.exports = {
-    mode: "production",
+	mode: 'production',
-    entry: "./index.ts",
+	entry: './index.ts',
 	output: {
-      filename: "bundle.js"
+		filename: 'bundle.js'
 	},
 	resolve: {
 		// Add `.ts` and `.tsx` as a resolvable extension.
-      extensions: [".ts", ".tsx", ".js"]
+		extensions: [ '.ts', '.tsx', '.js' ]
 	},
 	module: {
 		rules: [
 			// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
 			{
 				test: /\.tsx?$/,
-            loader: "ts-loader",
+				loader: 'ts-loader',
 				options: {
 					allowTsInNodeModules: true
 				}
+			},
+			{
+				test: /\.(s*)css$/,
+				use: [ 'style-loader', 'css-loader', 'sass-loader' ]
 			}
 		]
 	}
-  };
+};