Skip to content

Commit 43d3198

Browse files
author
Patrick Sachs
authored
Merge pull request #23 from PatrickSachs/develop
1.1.0
2 parents 18df068 + 1fc79e5 commit 43d3198

File tree

7 files changed

+407
-285
lines changed

7 files changed

+407
-285
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,5 @@ The UI is written in Vue.js and the application itself in Phaser 3. We use TypeS
2626
Feel free to shoot issues and PRs at us. Just keep in mind that this was designed as a fun little side project without serious production usage in mind.
2727

2828
New commits to master are automatically deployed to tree.sahnee.de. However, due to highly aggressive caching(Cloudflare, Service Worker & GitHub Pages) it may take a while for the changes to be visible on your machine.
29+
30+
Please make all Pull Requests against the `develop` branch only. We will merge `develop` into `master` once it is time for a new release.

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<meta charset="UTF-8">
66
<title>slow-tree</title>
7-
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
88
<meta name="HandheldFriendly" content="True">
99
<meta name="MobileOptimized" content="320">
1010
<meta http-equiv="cleartype" content="on">

‎package-lock.json‎

Lines changed: 275 additions & 271 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "slow-tree",
3-
"version": "1.0.1",
3+
"version": "1.1.0",
44
"description": "",
55
"main": "index.js",
66
"scripts": {
@@ -22,29 +22,31 @@
2222
"author": "Patrick Sachs & Jakob Heubl",
2323
"license": "",
2424
"dependencies": {
25-
"clean-webpack-plugin": "^2.0.0",
2625
"file-saver": "^2.0.1",
26+
"hammerjs": "^2.0.8",
2727
"phaser": "^3.16.2",
28-
"phaser3-nineslice": "git+https://github.com/PatrickSachs/phaser3-nineslice.git#types",
29-
"vue": "^2.6.6",
28+
"phaser3-nineslice": "^0.5.0",
29+
"vue": "^2.6.9",
3030
"vue-class-component": "^6.3.2",
3131
"vue-property-decorator": "^7.3.0",
32-
"vuetify": "^1.5.1"
32+
"vuetify": "^1.5.6"
3333
},
3434
"devDependencies": {
3535
"@types/file-saver": "^2.0.0",
36-
"@types/workbox-sw": "^3.2.0",
36+
"@types/hammerjs": "^2.0.36",
37+
"@types/workbox-sw": "^3.2.1",
3738
"browser-sync": "^2.26.3",
3839
"browser-sync-webpack-plugin": "^2.2.2",
40+
"clean-webpack-plugin": "^2.0.1",
3941
"copy-webpack-plugin": "^5.0.1",
40-
"css-loader": "^2.1.0",
42+
"css-loader": "^2.1.1",
4143
"dotenv": "^6.2.0",
4244
"style-loader": "^0.23.1",
4345
"ts-loader": "^5.3.3",
44-
"typescript": "^3.2.4",
45-
"vue-loader": "^15.6.2",
46-
"vue-template-compiler": "^2.6.6",
47-
"webpack": "^4.29.4",
46+
"typescript": "^3.3.3333",
47+
"vue-loader": "^15.7.0",
48+
"vue-template-compiler": "^2.6.9",
49+
"webpack": "^4.29.6",
4850
"webpack-cli": "^3.2.1",
4951
"workbox-webpack-plugin": "^4.1.0"
5052
}

‎src/components/App.vue‎

Lines changed: 84 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
<template>
22
<div id="app">
33
<v-app dark>
4-
<v-navigation-drawer app v-model="drawer" :mini-variant.sync="mini" hide-overlay stateless>
4+
<v-navigation-drawer
5+
app
6+
v-model="drawer"
7+
:mini-variant.sync="mini"
8+
touchless
9+
hide-overlay
10+
stateless
11+
>
512
<v-toolbar flat class="transparent">
613
<v-list class="pa-0">
714
<v-list-tile avatar>
@@ -205,6 +212,8 @@ import uuid from "@/utils/uuid";
205212
import LeavesGameObject from "@/gameobjects/LeavesGameObject";
206213
import FileSaver from "file-saver";
207214
import pkg from "../../package.json";
215+
import clamp from "@/utils/clamp";
216+
import * as mousewheel from "@/utils/mousewheel";
208217
209218
interface IMenuItem {
210219
id: string;
@@ -243,6 +252,7 @@ export default class STApp extends Vue {
243252
private oldSavegameVersion: boolean = false;
244253
private errorMessage: string = "";
245254
private pkg = pkg;
255+
private hammertime: HammerManager | null = null;
246256
247257
/**
248258
* Called when the component is ready to be used, but has no HTMl elements yet.
@@ -258,9 +268,18 @@ export default class STApp extends Vue {
258268
*/
259269
mounted() {
260270
console.log("Component ready, creating game ...", this);
271+
const el = this.$refs.game as HTMLDivElement;
261272
// Create the Phaser game and wait for it to be ready.
262-
this.game = new Game(this.$refs.game as HTMLDivElement);
273+
this.game = new Game(el);
263274
this.game.events.on("ready", this.onGameReady);
275+
// Hook up touch events.
276+
this.hammertime = new Hammer(el);
277+
this.hammertime.get("pinch").set({ enable: true });
278+
this.hammertime.get("pan").set({ enable: true });
279+
this.hammertime.on("pinchstart", this.onHammerPinch);
280+
this.hammertime.on("panstart", this.onHammerPan);
281+
mousewheel.addEventHandler(el, this.onMouseWheel);
282+
// Add a property to the window oject for debugging purposes.
264283
window.game = this.game;
265284
}
266285
@@ -289,6 +308,9 @@ export default class STApp extends Vue {
289308
scene.tree.on("interact", this.onTreeInteract, this);
290309
scene.background.on("new-background", this.onNewBackground);
291310
this.onNewBackground(scene.background.backgroundImage);
311+
// Set camera bounds
312+
const camera = scene.cameras.main;
313+
camera.setBounds(0, 0, camera.width, camera.height);
292314
// Check cache
293315
const cache = localStorage.getItem("cache");
294316
let willCache = true;
@@ -311,6 +333,66 @@ export default class STApp extends Vue {
311333
}
312334
}
313335
336+
/**
337+
* Called whenever we pinch.
338+
* @param e The event.
339+
*/
340+
onHammerPinch(e: HammerInput) {
341+
if (this.hammertime && this.scene) {
342+
const camera = this.scene.cameras.main;
343+
const oldZoom = camera.zoom;
344+
const pinchHandler = (e: HammerInput) => {
345+
const change = e.scale;
346+
const zoom = clamp(1, 10, oldZoom * e.scale);
347+
camera.zoom = zoom;
348+
};
349+
const pinchEndHandler = (e: HammerInput) => {
350+
if (this.hammertime) {
351+
this.hammertime.off("pinch", pinchHandler);
352+
this.hammertime.off("pinchend", pinchEndHandler);
353+
}
354+
};
355+
this.hammertime.on("pinch", pinchHandler);
356+
this.hammertime.on("pinchend", pinchEndHandler);
357+
}
358+
}
359+
360+
/**
361+
* Called when we pan around.
362+
* @param e The event.
363+
*/
364+
onHammerPan(e: HammerInput) {
365+
if (this.hammertime && this.scene) {
366+
const camera = this.scene.cameras.main;
367+
const origX = camera.scrollX;
368+
const origY = camera.scrollY;
369+
const panHandler = (e: HammerInput) => {
370+
camera.scrollX = origX - e.deltaX / camera.zoom;
371+
camera.scrollY = origY - e.deltaY / camera.zoom;
372+
};
373+
const panEndHandler = (e: HammerInput) => {
374+
if (this.hammertime) {
375+
this.hammertime.off("pan", panHandler);
376+
this.hammertime.off("panend", panEndHandler);
377+
}
378+
};
379+
this.hammertime.on("pan", panHandler);
380+
this.hammertime.on("panend", panEndHandler);
381+
}
382+
}
383+
384+
/**
385+
* Called when we scroll with the mouse wheel.
386+
*/
387+
onMouseWheel(scroll: number) {
388+
if (this.scene) {
389+
const camera = this.scene.cameras.main;
390+
const oldScroll = camera.zoom;
391+
const zoom = clamp(1, 10, oldScroll + scroll);
392+
camera.zoom = zoom;
393+
}
394+
}
395+
314396
/**
315397
* Called whenever a menu item is clicked.
316398
* @param item The menu item.

‎src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Vuetify from 'vuetify';
44
// TODO: Serve as seperate CSS file -> https://vuetifyjs.com/en/getting-started/quick-start (CDN section)
55
import 'vuetify/dist/vuetify.min.css';
66
import "./register-serviceworker";
7+
import "hammerjs";
78

89
Vue.use(Vuetify);
910

‎src/utils/mousewheel.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import clamp from "./clamp";
2+
3+
// https://stackoverflow.com/questions/37019995/how-to-detect-scroll-event-and-direction-in-a-not-scrollable-element-using-javas
4+
// https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel
5+
6+
// All code in this file is super non standard and different on every browser/OS combination.
7+
8+
const HANDLER_KEY = "__mousewheel_handler__";
9+
10+
type Callback = (scroll: number) => void;
11+
12+
export const addEventHandler = (element: HTMLElement, callback: Callback, options: any = false) => {
13+
const handler = (e: any) => {
14+
e = window.event || e;
15+
const delta = clamp(-1, 1, e.wheelData || -e.detail || e.deltaY);
16+
e.preventDefault();
17+
callback(delta);
18+
return false;
19+
}
20+
(callback as any)[HANDLER_KEY] = handler;
21+
element.addEventListener("mousewheel", handler, options);
22+
element.addEventListener("DOMMouseScroll", handler, options);
23+
}
24+
25+
export const removeEventHandler = (element: HTMLElement, callback: Callback, options: any = false) => {
26+
const handler = (callback as any)[HANDLER_KEY];
27+
if (handler) {
28+
element.removeEventListener("mousewheel", handler, options);
29+
element.removeEventListener("DOMMouseScroll", handler, options);
30+
}
31+
}

0 commit comments

Comments
 (0)