MoonsideGames
/
AnimationTool
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

scss styles for frames

master
Beau Blyth 2019-10-04 16:38:11 -07:00
parent fc76ad81ab
commit e0360b237a
10 changed files with 1355 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/frame_handler.ts
View File

@ -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].className = 'frameActiveWarning';
} else {
this.frameViewer.children[f].className = 'frameWarning';
}
this.frameViewer.children[f].classList.add('warning');
break;
}
}
@ -147,8 +145,8 @@ export class FrameHandler {
private RefreshImage() {
if (this.filenames.length === 0) {
this.frameNumberDiv.className = 'warning';
this.frameNumberDiv.innerText = 'No images uploaded yet';
// this.frameNumberDiv.className = 'warning';
// this.frameNumberDiv.innerText = 'No images uploaded yet';
} else {
this.canvasContext.clearRect(0, 0, this.htmlCanvasElement.width, this.htmlCanvasElement.height);
this.canvasContext.imageSmoothingEnabled = false;

54
app/pin_handler.ts
View File

@ -26,10 +26,9 @@ export class PinHandler {
this.animationData = animationData;
// add origin click behaviour
originPin.id = 'pinID_0';
originPin.addEventListener('click', () => {
this.DeselectAllPinContainers();
originPin.className = 'pinButtonContainerSelected';
projectData.currentlySelectedPin = 0;
this.SelectPin(originPin);
});
// 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();
newDiv.className = 'pinButtonContainerSelected';
this.projectData.currentlySelectedPin = parseInt(newDiv.id.split('_')[1]);
console.log('selected pin ' + this.projectData.currentlySelectedPin);
this.UpdateAnimationPinNames();
this.SelectPin(newDiv);
});
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;
}
}
}
}
}
};

119
app/stylesheets/main.scss Normal file
View File

@ -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);
}

121
dist/assets/stylesheets/main.css vendored
View File

@ -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);
}

3
dist/index.html vendored
View File

@ -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">

1
index.ts
View File

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

6
package.json
View File

@ -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",

1114
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

22
webpack/dev.config.js
View File

@ -1,25 +1,31 @@
const path = require("path");
const path = require('path');
module.exports = {
mode: "development",
devtool: "inline-source-map",
entry: "./index.ts",
mode: 'development',
devtool: 'inline-source-map',
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
}
};
};

18
webpack/prod.config.js
View File

@ -1,25 +1,29 @@
const path = require("path");
const path = require('path');
module.exports = {
mode: "production",
entry: "./index.ts",
mode: 'production',
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' ]
}
]
}
};
};