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

Widgets implemented.

This commit is contained in:
Mal 2020-02-04 21:42:14 +01:00
parent d893483da9
commit d46b195269
11 changed files with 197 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
js/module.js
View File

@ -134,8 +134,8 @@ const GAME_SPEED = 1;
const GRAVITY = 2; const GRAVITY = 2;
let levelJson = new FileLoader('levels/test_stairs.json'); let levelJson = new FileLoader('levels/test_stairs.json');
console.log(levelJson.getContent());
const LEVEL = levelJson.getContent(); const LEVEL = JSON.parse(levelJson.getContent());
let lastRendered = undefined; let lastRendered = undefined;
let lastTimestamp = undefined; let lastTimestamp = undefined;
@ -177,11 +177,11 @@ window.addEventListener(
context = canvas.getContext('2d'); context = canvas.getContext('2d');
architecture = RetroArchitecture.createFromJson(LEVEL); architecture = RetroArchitecture.createFromData(LEVEL);
mrCroc = new MrCroc(); mrCroc = new MrCroc();
mrCroc.position.x = 250; mrCroc.position.x = architecture.tileWidth * LEVEL.startX + architecture.tileWidth * 0.5;
mrCroc.position.y = 0; mrCroc.position.y = architecture.tileHeight * LEVEL.startY;
window.requestAnimationFrame(MainLoop); window.requestAnimationFrame(MainLoop);
} }

4
js/retro/RetroArchitecture.js
View File

@ -163,10 +163,8 @@ export default class RetroArchitecture
} }
} }
static createFromJson(json) static createFromData(data)
{ {
let data = JSON.parse(json);
let tileset = new RetroSprite(data.tileset, data.scale); let tileset = new RetroSprite(data.tileset, data.scale);
let architecture = new RetroArchitecture( let architecture = new RetroArchitecture(

5
tilorswift/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tilorswift</title> <title>Tilorswift</title>
@ -8,8 +8,5 @@
</head> </head>
<body> <body>
<div id="map"></div> <div id="map"></div>
<div id="menu">
<div id="tileset"></div>
</div>
</body> </body>
</html> </html>

1
tilorswift/js/Field.js
View File

@ -15,7 +15,6 @@ export default class Field
{ {
this.htmlElement.addEventListener( this.htmlElement.addEventListener(
'mousedown', (event) => { 'mousedown', (event) => {
console.log(event);
window.dispatchEvent(new TilorswiftFieldClickedEvent(this, event.button)); window.dispatchEvent(new TilorswiftFieldClickedEvent(this, event.button));
} }
); );

3
tilorswift/js/Mouse.js
View File

@ -18,8 +18,6 @@ export default class Mouse
window.addEventListener( window.addEventListener(
'mouseup', 'mouseup',
(event) => { (event) => {
console.log(this);
switch (event.button) { switch (event.button) {
case 0: case 0:
this.isPressedLeft = false; this.isPressedLeft = false;
@ -54,7 +52,6 @@ export default class Mouse
switch (event.button) { switch (event.button) {
case 0: case 0:
this.isPressedLeft = true; this.isPressedLeft = true;
console.log(this);
break; break;
case 1: case 1:
this.isPressedMiddle = true; this.isPressedMiddle = true;

8
tilorswift/js/Tilorswift.js
View File

@ -29,10 +29,16 @@ export default class Tilorswift
static saveTerrainToFile(terrain) static saveTerrainToFile(terrain)
{ {
let filename = prompt('Dateiname', 'terrain.json');
if (filename === null) {
return;
}
let json = Tilorswift.getTerrainAsJson(terrain); let json = Tilorswift.getTerrainAsJson(terrain);
let download = document.createElement('a'); let download = document.createElement('a');
download.setAttribute('download', 'terrain.json'); download.setAttribute('download', filename);
download.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(json)); download.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(json));
download.click(); download.click();
download.remove(); download.remove();

68
tilorswift/js/menu/TilesetPickerWidget.js Normal file
View File

@ -0,0 +1,68 @@
import ButtonTile from "../ButtonTile.js";
import TilorswiftEvent from "../events/TilorswiftEvent.js";
import Widget from "./Widget.js";
export default class TilesetPickerWidget extends Widget
{
constructor(tileset)
{
super('Terrain');
this.tileset = tileset;
this.htmlElement = this.createElementPicker();
this.htmlElementSelector = this.createElementSelector();
this.loadTileset();
window.addEventListener(
TilorswiftEvent.BUTTON_TILE_CLICKED,
(event) => {
if (this.isActive) {
this.setTile(event.button.index);
}
}
)
}
loadTileset()
{
this.htmlElement.appendChild(this.htmlElementSelector);
for (let t = 0; t < this.tileset.tiles; t++) {
let button = new ButtonTile(this.tileset, t);
this.htmlElementSelector.appendChild(button.getElement());
}
}
createElementPicker()
{
let htmlElement = document.createElement('div');
htmlElement.id = 'tileset-picker';
htmlElement.style.width = this.tileset.getTileWidth() + 'px';
htmlElement.style.height = this.tileset.getTileHeight() + 'px';
htmlElement.style.backgroundSize = this.tileset.getTileWidth() + 'px ' + this.tileset.getTileHeight() + 'px';
htmlElement.style.backgroundImage = 'url("' + this.tileset.image.src + '")';
htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileWidth() + 'px';
return htmlElement;
}
createElementSelector()
{
let htmlElementSelector = document.createElement('div');
htmlElementSelector.id = 'tileset-selector';
htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles)) * this.tileset.getTileWidth() + 'px';
htmlElementSelector.style.left = String(this.tileset.getTileWidth() + 1) + 'px';
return htmlElementSelector;
}
setTile(index)
{
let position = -this.tileset.getTileWidth() * index + 'px ' + this.tileset.getTileHeight() + 'px';
this.htmlElement.style.backgroundPosition = position;
}
getElement()
{
return this.htmlElement;
}
}

35
tilorswift/js/menu/Widget.js Normal file
View File

@ -0,0 +1,35 @@
export default class Widget
{
constructor(title)
{
this.title = title;
this.htmlElement = document.createElement('div');
this.isActive = true;
}
getTitle()
{
let htmlElementTitle = document.createElement('div');
htmlElementTitle.classList.add('widget-title');
htmlElementTitle.innerText = this.title;
return htmlElementTitle;
}
enable()
{
this.isActive = true;
this.htmlElement.classList.remove('widget-disabled');
}
disable()
{
this.isActive = false;
this.htmlElement.classList.add('widget-disabled');
}
getElement()
{
return this.htmlElement;
}
}

32
tilorswift/js/menu/WidgetBar.js Normal file
View File

@ -0,0 +1,32 @@
export default class WidgetBar
{
constructor(id)
{
this.id = id;
this.widgets = [];
}
addWidget(widget)
{
this.widgets.push(widget);
}
getElement()
{
let htmlElement = document.createElement('div');
htmlElement.id = this.id;
this.widgets.forEach(
(widget) => {
let container = document.createElement('div');
container.appendChild(widget.getTitle());
container.appendChild(widget.getElement());
htmlElement.appendChild(container);
}
);
return htmlElement;
}
}

28
tilorswift/js/module.js
View File

@ -3,32 +3,31 @@ import FileLoader from "../../js/FileLoader.js";
import TilorswiftEvent from "./events/TilorswiftEvent.js"; import TilorswiftEvent from "./events/TilorswiftEvent.js";
import Mouse from "./Mouse.js"; import Mouse from "./Mouse.js";
import Tileset from "./Tileset.js"; import Tileset from "./Tileset.js";
import ButtonTile from "./ButtonTile.js";
import Tilorswift from "./Tilorswift.js"; import Tilorswift from "./Tilorswift.js";
import TilorswiftSavedEvent from "./events/TilorswiftSavedEvent.js"; import TilorswiftSavedEvent from "./events/TilorswiftSavedEvent.js";
import MainMenu from "./menu/MainMenu.js"; import MainMenu from "./menu/MainMenu.js";
import MenuGroup from "./menu/MenuGroup.js"; import MenuGroup from "./menu/MenuGroup.js";
import MainMenuEntry from "./menu/MainMenuEntry.js"; import MainMenuEntry from "./menu/MainMenuEntry.js";
import TilorswiftMenuSaveClickedEvent from "./events/TilorswiftMenuSaveClickedEvent.js"; import TilorswiftMenuSaveClickedEvent from "./events/TilorswiftMenuSaveClickedEvent.js";
import TilesetPickerWidget from "./menu/TilesetPickerWidget.js";
import WidgetBar from "./menu/WidgetBar.js";
import BrushMode from "./BrushMode.js";
let loader = new FileLoader('../levels/level.json'); let loader = new FileLoader('../levels/level.json');
let image = new Image(); let image = new Image();
image.src = '../graphics/tileset-landscape01.jpg'; image.src = '../graphics/tileset-landscape01.jpg';
image.onload = function () { image.onload = function () {
let terrain = Terrain.createFromJson(loader.getContent()); let terrain = Terrain.createFromJson(loader.getContent());
let map = document.getElementById('map'); let map = document.getElementById('map');
map.appendChild(terrain.getElement()); map.appendChild(terrain.getElement());
let menuTileset = document.getElementById('tileset');
let tileset = new Tileset(image, 8, 3); let tileset = new Tileset(image, 8, 3);
let tilesetPicker = new TilesetPickerWidget(tileset);
for (let t = 0; t < tileset.tiles; t++) { let widgetBar = new WidgetBar('widget-bar');
let button = new ButtonTile(tileset, t); widgetBar.addWidget(tilesetPicker);
menuTileset.appendChild(button.getElement()); document.body.appendChild(widgetBar.getElement());
}
let mouse = new Mouse(); let mouse = new Mouse();
@ -46,7 +45,6 @@ image.onload = function () {
window.addEventListener( window.addEventListener(
TilorswiftEvent.FIELD_CLICKED, TilorswiftEvent.FIELD_CLICKED,
(event) => { (event) => {
console.log(event);
switch (event.button) { switch (event.button) {
case 0: case 0:
event.getField().setIndex(terrain.brushTileIndex); event.getField().setIndex(terrain.brushTileIndex);
@ -76,6 +74,7 @@ image.onload = function () {
} }
); );
/* Prevent Firefox's default drag and drop for images */
document.addEventListener( document.addEventListener(
'dragstart', 'dragstart',
function (event) { function (event) {
@ -83,15 +82,6 @@ image.onload = function () {
} }
); );
window.addEventListener(
'keydown', function (event) {
if (event.code === 'KeyS') {
Tilorswift.saveTerrainToFile(terrain);
window.dispatchEvent(new TilorswiftSavedEvent());
}
}
);
window.addEventListener( window.addEventListener(
TilorswiftEvent.MENU_SAVE_CLICKED, TilorswiftEvent.MENU_SAVE_CLICKED,
function () { function () {

48
tilorswift/style.css
View File

@ -7,6 +7,7 @@ body {
padding: 0; padding: 0;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
font-family: sans-serif;
} }
#level { #level {
@ -62,36 +63,61 @@ body {
display: block; display: block;
} }
#menu { #widget-bar {
position: fixed; position: fixed;
display: flex; display: flex;
flex-flow: wrap row; flex-flow: wrap row;
top: 32px; top: 32px;
left: 0; left: 0;
bottom: 0; bottom: 0;
padding-top: 20px;
width: 96px; width: 96px;
overflow: hidden; padding: 20px;
background-color: #cccccc; background-color: #cccccc;
box-shadow: 0 0 20px black; box-shadow: 0 0 20px black;
} }
#menu:hover { .widget-disabled {
animation-name: menuFadeIn; filter: saturate(0);
animation-duration: 0.5s;
width: 512px;
} }
#map { #map {
position: fixed; position: fixed;
top: 32px; top: 32px;
left: 96px; left: 136px;
right: 0; right: 0;
bottom: 0; bottom: 0;
overflow: scroll; overflow: scroll;
background-color: black; background-color: black;
} }
#tileset-picker {
border: 1px solid black;
cursor: pointer;
position: relative;
overflow: visible;
}
#tileset-picker.widget-disabled {
cursor: not-allowed;
}
#tileset-selector {
display: none;
position: absolute;
top: 0;
background-color: #cccccc;
box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
}
#tileset-picker:hover > #tileset-selector {
display: block;
}
#tileset-picker.widget-disabled:hover > #tileset-selector {
display: none;
}
.field, .button-tile { .field, .button-tile {
border: 0; border: 0;
padding: 0; padding: 0;
@ -101,6 +127,10 @@ body {
display: inline-flex; display: inline-flex;
} }
.button-tile {
margin: 2px;
}
.selection { .selection {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -110,4 +140,4 @@ body {
.field:hover .selection { .field:hover .selection {
opacity: 0.5; opacity: 0.5;
} }