Mal/mr-crocs-adventures
Mal
/
mr-crocs-adventures
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Startpoint widget implemented

This commit is contained in:
Mal 2020-02-04 23:03:33 +01:00
parent d46b195269
commit fa648ae730
12 changed files with 231 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/module.js
View File

@ -133,7 +133,7 @@ const FRAME_DURATION = 1000 / FPS;
const GAME_SPEED = 1;
const GRAVITY = 2;
let levelJson = new FileLoader('levels/test_stairs.json');
let levelJson = new FileLoader('levels/test_startpoint.json');
const LEVEL = JSON.parse(levelJson.getContent());

66
tilorswift/graphics/entrance-point.svg Normal file
View File

@ -0,0 +1,66 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="49.793079mm"
height="55.887653mm"
viewBox="0 0 49.793079 55.887653"
version="1.1"
id="svg2331"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="entrance-point.svg">
<defs
id="defs2325" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.7"
inkscape:cx="205.52572"
inkscape:cy="-77.242676"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1827"
inkscape:window-height="1025"
inkscape:window-x="93"
inkscape:window-y="27"
inkscape:window-maximized="1" />
<metadata
id="metadata2328">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(155.6763,-12.032363)">
<path
style="fill:#0cff00;fill-opacity:1;stroke:#000000;stroke-width:0.95297039;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -137.0313,18.556468 v 31.454437 h -13.9483 l 20.47716,16.196275 0.0184,-0.483809 0.0177,0.483809 20.47716,-16.196275 h -13.94823 V 18.556468 h -4.78389 -3.52553 z"
id="path2298"
inkscape:connector-curvature="0" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

9
tilorswift/js/Brush.js Normal file
View File

@ -0,0 +1,9 @@
import BrushMode from "./BrushMode.js";
export default class Brush
{
constructor()
{
this.mode = BrushMode.TERRAIN;
}
}

7
tilorswift/js/BrushMode.js Normal file
View File

@ -0,0 +1,7 @@
const BrushMode = {
TERRAIN: 1,
ENTRANCE: 2,
EXIT: 3,
};
export default BrushMode;

12
tilorswift/js/Field.js
View File

@ -7,6 +7,7 @@ export default class Field
{
this.tileset = tileset;
this.index = index;
this.isEntrancePoint = false;
this.initHtml();
this.initEventListeners();
}
@ -63,6 +64,17 @@ export default class Field
this.htmlElement.style.backgroundPositionX = -this.index * this.tileset.getTileWidth() + 'px';
}
setEntrancePoint(bool)
{
this.isEntrancePoint = bool;
if (this.isEntrancePoint) {
this.htmlElement.classList.add('entrance');
} else {
this.htmlElement.classList.remove('entrance');
}
}
getElement()
{
return this.htmlElement;

34
tilorswift/js/Terrain.js
View File

@ -10,6 +10,8 @@ export default class Terrain
this.fields = [];
this.tilesX = tilesX;
this.tilesY = tilesY;
this.entranceTileX = undefined;
this.entranceTileY = undefined;
this.backgroundColor = backgroundColor;
this.htmlElement = document.createElement('table');
this.brushTileIndex = 0;
@ -62,6 +64,38 @@ export default class Terrain
this.fields[y][x].setIndex(index);
}
setEntrancePoint(tileX, tileY)
{
if (this.fields[tileY][tileX].index === -1) {
if (this.entranceTileX !== undefined && this.entranceTileY !== undefined) {
this.fields[this.entranceTileY][this.entranceTileX].setEntrancePoint(false);
}
this.entranceTileX = tileX;
this.entranceTileY = tileY;
this.fields[tileY][tileX].setEntrancePoint(true);
}
}
getFieldCoordinates(field)
{
for (let y = 0; y < this.fields.length; y++) {
for (let x = 0; x < this.fields[y].length; x++) {
if (this.fields[y][x] === field) {
return {x: x, y: y};
}
}
}
return undefined;
}
hasEntrancePoint()
{
return this.entranceTileX !== undefined && this.entranceTileY !== undefined;
}
static createFromJson(json)
{
let terrainData = JSON.parse(json);

7
tilorswift/js/Tilorswift.js
View File

@ -20,6 +20,8 @@ export default class Tilorswift
scale: terrain.tileset.scale,
rows: terrain.tilesY,
columns: terrain.tilesX,
startX: terrain.entranceTileX,
startY: terrain.entranceTileY,
backgroundColor: terrain.backgroundColor,
matrix: matrix,
};
@ -29,6 +31,11 @@ export default class Tilorswift
static saveTerrainToFile(terrain)
{
if (!terrain.hasEntrancePoint()) {
alert('Es muss ein Startpunkt definiert sein!');
return;
}
let filename = prompt('Dateiname', 'terrain.json');
if (filename === null) {

28
tilorswift/js/menu/EntrancePointWidget.js Normal file
View File

@ -0,0 +1,28 @@
import Widget from "./Widget.js";
import BrushMode from "../BrushMode.js";
export default class EntrancePointWidget extends Widget
{
constructor(widgetBar, brush) {
super('Startpunkt');
this.widgetBar = widgetBar;
this.brush = brush;
this.htmlElement = this.createElement();
this.htmlElement.addEventListener(
'click',
() => {
this.widgetBar.disableWidgets();
this.enable();
this.brush.mode = BrushMode.ENTRANCE;
}
)
}
createElement()
{
let htmlElement = document.createElement('div');
htmlElement.id = 'entrance-picker';
return htmlElement;
}
}

5
tilorswift/js/menu/TilesetPickerWidget.js
View File

@ -1,13 +1,15 @@
import ButtonTile from "../ButtonTile.js";
import TilorswiftEvent from "../events/TilorswiftEvent.js";
import Widget from "./Widget.js";
import BrushMode from "../BrushMode.js";
export default class TilesetPickerWidget extends Widget
{
constructor(tileset)
constructor(tileset, brush)
{
super('Terrain');
this.tileset = tileset;
this.brush = brush;
this.htmlElement = this.createElementPicker();
this.htmlElementSelector = this.createElementSelector();
this.loadTileset();
@ -17,6 +19,7 @@ export default class TilesetPickerWidget extends Widget
(event) => {
if (this.isActive) {
this.setTile(event.button.index);
this.brush.mode = BrushMode.TERRAIN;
}
}
)

19
tilorswift/js/menu/WidgetBar.js
View File

@ -19,6 +19,7 @@ export default class WidgetBar
this.widgets.forEach(
(widget) => {
let container = document.createElement('div');
container.classList.add('widget-container');
container.appendChild(widget.getTitle());
container.appendChild(widget.getElement());
@ -29,4 +30,22 @@ export default class WidgetBar
return htmlElement;
}
enableWidgets()
{
this.widgets.forEach(
(widget) => {
widget.enable();
}
);
}
disableWidgets()
{
this.widgets.forEach(
(widget) => {
widget.disable();
}
);
}
}

19
tilorswift/js/module.js
View File

@ -11,6 +11,8 @@ import MainMenuEntry from "./menu/MainMenuEntry.js";
import TilorswiftMenuSaveClickedEvent from "./events/TilorswiftMenuSaveClickedEvent.js";
import TilesetPickerWidget from "./menu/TilesetPickerWidget.js";
import WidgetBar from "./menu/WidgetBar.js";
import EntrancePointWidget from "./menu/EntrancePointWidget.js";
import Brush from "./Brush.js";
import BrushMode from "./BrushMode.js";
let loader = new FileLoader('../levels/level.json');
@ -22,11 +24,17 @@ image.onload = function () {
let map = document.getElementById('map');
map.appendChild(terrain.getElement());
let brush = new Brush();
let tileset = new Tileset(image, 8, 3);
let tilesetPicker = new TilesetPickerWidget(tileset);
let widgetBar = new WidgetBar('widget-bar');
let tilesetPicker = new TilesetPickerWidget(tileset, brush);
widgetBar.addWidget(tilesetPicker);
let entrancePicker = new EntrancePointWidget(widgetBar, brush);
widgetBar.addWidget(entrancePicker);
document.body.appendChild(widgetBar.getElement());
let mouse = new Mouse();
@ -45,6 +53,7 @@ image.onload = function () {
window.addEventListener(
TilorswiftEvent.FIELD_CLICKED,
(event) => {
if (brush.mode === BrushMode.TERRAIN && !event.getField().isEntrancePoint) {
switch (event.button) {
case 0:
event.getField().setIndex(terrain.brushTileIndex);
@ -53,6 +62,14 @@ image.onload = function () {
event.getField().setIndex(-1);
break;
}
} else if (brush.mode === BrushMode.ENTRANCE) {
if (event.getField().index === -1) {
let coordinates = terrain.getFieldCoordinates(event.getField());
terrain.setEntrancePoint(coordinates.x, coordinates.y);
brush.mode = BrushMode.TERRAIN;
widgetBar.enableWidgets();
}
}
}
);

21
tilorswift/style.css
View File

@ -65,7 +65,6 @@ body {
#widget-bar {
position: fixed;
display: flex;
flex-flow: wrap row;
top: 32px;
left: 0;
@ -76,6 +75,10 @@ body {
box-shadow: 0 0 20px black;
}
.widget-container {
margin-bottom: 20px;
}
.widget-disabled {
filter: saturate(0);
}
@ -117,6 +120,16 @@ body {
display: none;
}
#entrance-picker {
width: 96px;
height: 96px;
border: 1px solid black;
background-image: url("graphics/entrance-point.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
cursor: pointer;
}
.field, .button-tile {
border: 0;
@ -126,7 +139,11 @@ body {
cursor: pointer;
display: inline-flex;
}
.entrance {
background-image: url("graphics/entrance-point.svg") !important;
background-size: contain !important;
background-position: center bottom !important;
}
.button-tile {
margin: 2px;
}