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

even more style

master
evan 2019-10-08 15:15:49 -07:00
parent 12fed6164c
commit 9b35a9851f
5 changed files with 124 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/frame_handler.ts
View File

@ -181,7 +181,7 @@ export class FrameHandler {
// frame number update // frame number update
this.frameNumberDiv.className = ''; this.frameNumberDiv.className = '';
this.frameNumberDiv.innerText = this.frameNumberDiv.innerText =
'Frame ' + (this.currentFrame + 1).toString() + ' / ' + this.filenames.length.toString(); (this.currentFrame + 1).toString() + ' / ' + this.filenames.length.toString();
// draw pins // draw pins
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
this.canvasContext.strokeStyle = '#FF0000'; this.canvasContext.strokeStyle = '#FF0000';

4
app/page.ts
View File

@ -239,7 +239,7 @@ export class Page {
// 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.animationData.frames[f][pinIDtoCheck] === undefined) { if (this.animationData.frames[f][pinIDtoCheck] === undefined) {
if (!errorOnFrame) { if (!errorOnFrame) {
pinDataErrorString += ' Frame ' + f + ' :\n'; pinDataErrorString += f + ' :\n';
} }
pinDataErrorString += ' Pin: ' + this.animationData.pins[p].name + '\n'; pinDataErrorString += ' Pin: ' + this.animationData.pins[p].name + '\n';
passPinData = false; passPinData = false;
@ -309,7 +309,7 @@ export class Page {
this.animationData.originY = null; this.animationData.originY = null;
this.animationData.frameRate = 30; this.animationData.frameRate = 30;
this.animationData.loop = true; this.animationData.loop = true;
this.animationData.frames = [ { filename: '' } ]; this.animationData.frames = [{ filename: '' }];
// blank slate canvas data // blank slate canvas data
this.projectData.currentFrame = 0; this.projectData.currentFrame = 0;

38
app/pin_handler.ts
View File

@ -32,26 +32,24 @@ export class PinHandler {
this.UpdatePinBoxStatus(); this.UpdatePinBoxStatus();
}); });
// put origin into pincontainer array // put origin into pincontainer array
this.allPinContainers = [ originPin ]; this.allPinContainers = [originPin];
} }
public UpdatePinBoxStatus = () => { public UpdatePinBoxStatus = () => {
for (let i = 0; i < this.allPinContainers.length; i++) { for (let i = 0; i < this.allPinContainers.length; i++) {
const pinDiv = this.allPinContainers[i]; const pinDiv = this.allPinContainers[i];
pinDiv.classList.remove('selected', 'warning'); pinDiv.classList.remove('selected', 'warning');
if (i > 0) { if (this.GetPinNumberFromID(this.allPinContainers[i].id) === this.projectData.currentlySelectedPin) {
if (this.GetPinNumberFromID(this.allPinContainers[i].id) === this.projectData.currentlySelectedPin) { this.allPinContainers[i].classList.add('selected');
this.allPinContainers[i].classList.add('selected'); }
} // check frames for missing pin info
// check frames for missing pin info const pinNumber = this.GetPinNumberFromID(pinDiv.id);
const pinNumber = this.GetPinNumberFromID(pinDiv.id); for (let f = 0; f < this.animationData.frames.length; f++) {
for (let f = 0; f < this.animationData.frames.length; f++) { if (this.animationData.frames[f] !== undefined) {
if (this.animationData.frames[f] !== undefined) { if (this.animationData.frames[f][pinNumber] === undefined) {
if (this.animationData.frames[f][pinNumber] === undefined) { pinDiv.classList.add('warning');
pinDiv.classList.add('warning'); // console.log('added warning');
// console.log('added warning'); break;
break;
}
} }
} }
} }
@ -137,7 +135,8 @@ export class PinHandler {
newDiv.appendChild(removePinButton); newDiv.appendChild(removePinButton);
removePinButton.textContent = 'X'; removePinButton.textContent = 'X';
removePinButton.className = 'removeButton'; removePinButton.className = 'removeButton';
removePinButton.addEventListener('click', () => { removePinButton.addEventListener('click', (event: MouseEvent) => {
event.stopPropagation();
// get ID number for this div // get ID number for this div
const idNumber = this.GetPinNumberFromID(newDiv.id); const idNumber = this.GetPinNumberFromID(newDiv.id);
let indexToDelete: number = 0; let indexToDelete: number = 0;
@ -155,9 +154,11 @@ export class PinHandler {
// remove the div itself // remove the div itself
newDiv.remove(); newDiv.remove();
this.UpdateAnimationPinNames(); this.UpdateAnimationPinNames();
//reset to origin
this.SelectOriginPin();
}); });
// break // break
newDiv.appendChild(document.createElement('br'));
this.UpdateAnimationPinNames(); this.UpdateAnimationPinNames();
this.UpdatePinBoxStatus(); this.UpdatePinBoxStatus();
@ -178,6 +179,11 @@ export class PinHandler {
this.UpdateAnimationPinNames(); this.UpdateAnimationPinNames();
}; };
private SelectOriginPin = () => {
this.projectData.currentlySelectedPin = 0;
this.UpdatePinBoxStatus();
};
private RemovePinDataForID = (pinID: number) => { private RemovePinDataForID = (pinID: number) => {
// check for matching id in pin list and remove // check for matching id in pin list and remove

67
app/stylesheets/main.scss
View File

@ -41,8 +41,6 @@ div {
padding: 0; padding: 0;
min-width: 200px; min-width: 200px;
border: 1px solid; border: 1px solid;
border-style: dashed;
border-radius: 10px;
background-color: $canvas-bg-color; background-color: $canvas-bg-color;
} }
@ -57,25 +55,27 @@ div {
#settings { #settings {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
justify-content: flex-end; justify-content: center;
width: 20%; align-content: center;
max-width: 150px;
min-width: 100px;
} }
.settingsItem { .settingsItem {
display: flex;
flex-direction: row;
margin: 12px; margin: 12px;
padding: 4px; padding: 4px;
text-align: center; text-align: center;
border: 1px solid;
border-radius: 5px;
input { input {
width: 80%; width: 80%;
} }
.label {
margin: 5px;
}
} }
.settingsItem { .settingsItem {
@ -84,8 +84,23 @@ div {
} }
} }
#frameNumber {
text-align: right;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number'] {
-moz-appearance:textfield;
}
#framerate { #framerate {
width: 30px; width: 50px;
text-align: center;
} }
.borderbox { .borderbox {
@ -143,6 +158,8 @@ div {
width: 50%; width: 50%;
border: 4px solid $warning-border-color; border: 4px solid $warning-border-color;
padding: 1px; padding: 1px;
text-align: center;
margin: 0 auto;
//background-color: $warning-bg-color; //background-color: $warning-bg-color;
//color: $warning-text-color; //color: $warning-text-color;
} }
@ -171,7 +188,7 @@ body {
display: inline-grid; display: inline-grid;
} }
$pin-button-size: 6vw; $pin-button-size: 75px;
.pinButtonContainer { .pinButtonContainer {
grid-row-start: 1; grid-row-start: 1;
@ -192,6 +209,10 @@ $pin-button-size: 6vw;
&.warning { &.warning {
border: 2px solid $warning-border-color; border: 2px solid $warning-border-color;
background-color: $warning-bg-color; background-color: $warning-bg-color;
input {
background-color: $warning-bg-color;
}
} }
&.selected { &.selected {
@ -200,12 +221,27 @@ $pin-button-size: 6vw;
&.warning { &.warning {
border: 2px solid $warning-selected-border-color; border: 2px solid $warning-selected-border-color;
background-color: $warning-selected-bg-color; background-color: $warning-selected-bg-color;
input {
background-color: $warning-selected-bg-color;
}
}
input {
background-color: $selected-bg-color;
} }
} }
input { input {
background-color: $bg-color;
width: 80%; width: 80%;
transform: translateY($pin-button-size / 2); height: 20px;
transform: translateY($pin-button-size / 2 - 10px);
border: none;
color: $main-font-color;
text-align: center;
font-size: 10px;
} }
} }
@ -218,11 +254,12 @@ $pin-button-size: 6vw;
} }
.removeButton { .removeButton {
display: block;
margin: 0 auto;
position: relative; position: relative;
transform: translate($pin-button-size / 2, -$pin-button-size / 2); transform: translate($pin-button-size / 2, -$pin-button-size / 2);
width: 15px; width: 15px;
height: 15px; border-radius: 50%;
border-radius: 5px;
background-color: rgb(158, 15, 34); background-color: rgb(158, 15, 34);
color: rgb(227, 227, 236); color: rgb(227, 227, 236);
} }

89
dist/index.html vendored
View File

@ -1,52 +1,57 @@
<html> <html>
<head>
<title>AnimationTool</title>
<meta charset="utf-8">
<link rel="icon" href="/favicon.ico"> <head>
</head> <title>AnimationTool</title>
<body> <meta charset="utf-8">
<div id="dropZone" class="center">
<link rel="icon" href="/favicon.ico">
</head>
<body>
<div id="dropZone">
<div id="allTop">
<div id="top"> <div id="top">
<div id="canvasStyle"> <div id="canvasStyle">
<canvas id="canvasImage" class="spriteCanvas" alt=""></canvas> <canvas id="canvasImage" class="spriteCanvas" alt=""></canvas>
<div id="frameNumber"></div> <div id="frameNumber"></div>
</div> </div>
<div id="settings"> </div>
<div class="settingsItem"> <div id="settings">
<div class="label">Name</div> <div class="settingsItem">
<input type="text" id="filename"> <div class="label">Name</div>
</div> <input type="text" id="filename">
<div class="settingsItem"> </div>
<div class="label">FPS</div> <div class="settingsItem">
<input type="number" value="30" id="framerate"> <div class="label">FPS</div>
</div> <input type="number" value="30" id="framerate">
<div class="settingsItem"> </div>
<div class="label">Looping</div> <div class="settingsItem">
<input type="checkbox" id="looping"> <div class="label">Looping</div>
</div> <input type="checkbox" id="looping">
</div> </div>
</div> </div>
<div class="borderbox">
<div id="frameViewer"></div>
</div>
<div class="borderbox">
<div id="pinContainer" class="pinContainer" >
<div class="pinButtonContainer" id="originPin">Origin</div>
</div>
<div id="addpin" class="pinButtonContainer">+</div>
</div>
<div id = "info">
<div class="instruction">
<p>Drag images onto the page to upload them</p>
<p><b>Arrow Keys</b> - Advance frames</p>
<p><b>Spacebar</b> - Play/Pause Animation</p>
<p><b>S</b> - Save</p>
</div>
<div id="outputMessage"></div>
</div>
</div> </div>
<div class="borderbox">
<div id="frameViewer"></div>
</div>
<div class="borderbox">
<div id="pinContainer" class="pinContainer">
<div class="pinButtonContainer" id="originPin">Origin</div>
</div>
<div id="addpin" class="pinButtonContainer">+</div>
</div>
<div id="info">
<div class="instruction">
<p>Drag images onto the page to upload them</p>
<p><b>Arrow Keys</b> - Advance frames</p>
<p><b>Spacebar</b> - Play/Pause Animation</p>
<p><b>S</b> - Save</p>
</div>
<div id="outputMessage"></div>
</div>
</div>
<script src="bundle.js"></script> <script src="bundle.js"></script>
</body> </body>
</html>
</html>