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;
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 lastTimestamp = undefined;
@ -177,11 +177,11 @@ window.addEventListener(
context = canvas.getContext('2d');
architecture = RetroArchitecture.createFromJson(LEVEL);
architecture = RetroArchitecture.createFromData(LEVEL);
mrCroc = new MrCroc();
mrCroc.position.x = 250;
mrCroc.position.y = 0;
mrCroc.position.x = architecture.tileWidth * LEVEL.startX + architecture.tileWidth * 0.5;
mrCroc.position.y = architecture.tileHeight * LEVEL.startY;
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 architecture = new RetroArchitecture(

5
tilorswift/index.html
View File

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

1
tilorswift/js/Field.js
View File

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

3
tilorswift/js/Mouse.js
View File

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

8
tilorswift/js/Tilorswift.js
View File

@ -29,10 +29,16 @@ export default class Tilorswift
static saveTerrainToFile(terrain)
{
let filename = prompt('Dateiname', 'terrain.json');
if (filename === null) {
return;
}
let json = Tilorswift.getTerrainAsJson(terrain);
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.click();
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 Mouse from "./Mouse.js";
import Tileset from "./Tileset.js";
import ButtonTile from "./ButtonTile.js";
import Tilorswift from "./Tilorswift.js";
import TilorswiftSavedEvent from "./events/TilorswiftSavedEvent.js";
import MainMenu from "./menu/MainMenu.js";
import MenuGroup from "./menu/MenuGroup.js";
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 BrushMode from "./BrushMode.js";
let loader = new FileLoader('../levels/level.json');
let image = new Image();
image.src = '../graphics/tileset-landscape01.jpg';
image.onload = function () {
let terrain = Terrain.createFromJson(loader.getContent());
let map = document.getElementById('map');
map.appendChild(terrain.getElement());
let menuTileset = document.getElementById('tileset');
let tileset = new Tileset(image, 8, 3);
let tilesetPicker = new TilesetPickerWidget(tileset);
for (let t = 0; t < tileset.tiles; t++) {
let button = new ButtonTile(tileset, t);
menuTileset.appendChild(button.getElement());
}
let widgetBar = new WidgetBar('widget-bar');
widgetBar.addWidget(tilesetPicker);
document.body.appendChild(widgetBar.getElement());
let mouse = new Mouse();
@ -46,7 +45,6 @@ image.onload = function () {
window.addEventListener(
TilorswiftEvent.FIELD_CLICKED,
(event) => {
console.log(event);
switch (event.button) {
case 0:
event.getField().setIndex(terrain.brushTileIndex);
@ -76,6 +74,7 @@ image.onload = function () {
}
);
/* Prevent Firefox's default drag and drop for images */
document.addEventListener(
'dragstart',
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(
TilorswiftEvent.MENU_SAVE_CLICKED,
function () {

48
tilorswift/style.css
View File

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