Emulation/Drop64
1
0
Fork 0
mirror of https://github.com/damouse/Drop64.git synced 2024-05-15 18:44:52 -04:00
Code Issues Packages Projects Releases Wiki Activity

fixes to touches for smartphones

Browse source
This commit is contained in:
damouse 2017-02-15 13:38:20 -06:00
parent c40bd8390a
commit 8f28e0bdc5
6 changed files with 71 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -16,11 +16,12 @@
"license": "MIT",
"homepage": "https://github.com/christianalfoni/webpack-express-boilerplate",
"scripts": {
"start": "node src/server",
"start": "node src/server"
},
"dependencies": {
"babel-cli": "^6.4.0",
"babel-core": "^6.22.1",
"ngtouchstart": "^1.0.1",
"socket.io": "^1.7.2"
},
"devDependencies": {

43
src/controller.js
View file

@ -1,16 +1,43 @@
angular.module('controller', [])
.controller('RootController', function($scope, $location) {
var socket = io.connect($location.$$host + ':' + $location.$$port);
.directive('myTouchstart', [function() {
return function(scope, element, attr) {
$scope.press = function(b, k) {
socket.emit("controller", { event: 'keydown', button: b, code: k });
element.on('touchstart', function(event) {
scope.$apply(function() {
scope.$eval(attr.myTouchstart);
});
});
};
}]).directive('myTouchend', [function() {
return function(scope, element, attr) {
// Touch stopped
$scope.release = function(b, k) {
socket.emit("controller", { event: 'keyup', button: b, code: k });
element.on('touchend', function(event) {
scope.$apply(function() {
scope.$eval(attr.myTouchend);
});
});
};
})
}])
.controller('RootController', function($scope, $location) {
var socket = io.connect($location.$$host + ':' + $location.$$port);
$scope.counter = 0;
$scope.touchesStarted = function() {
console.log("Touch Started");
$scope.counter++;
}
$scope.press = function(b, k) {
socket.emit("controller", { event: 'keydown', button: b, code: k });
};
// Touch stopped
$scope.release = function(b, k) {
socket.emit("controller", { event: 'keyup', button: b, code: k });
};
})
/**
* Add handlers to dpad-buttons

5
src/server.js
View file

@ -11,10 +11,7 @@ for (var d of["stylesheets", "vendor", "sensors", "src"]) {
}
io.on('connection', (socket) => {
socket.on("controller", (m) => {
console.log(m)
io.emit('input', m)
})
socket.on("controller", (m) => io.emit('input', m))
socket.on("command", (m) => io.emit('command', m))
});

14
stylesheets/controller.css
View file

@ -416,10 +416,10 @@ body {
/* Portrait */
// @media screen and (min-width: 320px) and (max-width: 767px) {
// #nespad {
// transform: scale(1);
// // margin: 120px 0px 0px 180px;
// /* height: 50vh; */
// }
// }
@media screen and (min-width: 320px) and (max-width: 767px) {
#nespad {
transform: scale(1);
// margin: 120px 0px 0px 180px;
/* height: 50vh; */
}
}

7
vendor/ngTouchStart.min.js vendored Normal file
View file

@ -0,0 +1,7 @@
"use strict";
angular.module("ngTouchstart", []).directive("ngTouchstart", function() {
return { controller: function(t, n) {
function r(r) {
var u = n.attr("ng-touchstart");
t.$event = r, t.$apply(u) }
n.bind("touchstart", r) } } });

36
views/controller.html
View file

@ -12,29 +12,31 @@
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-touch.js"></script> -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-touch.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="assets/three.min.js"></script>
<script src="assets/mathbox/build/mathbox-bundle.js"></script>
<script src="assets/cbuffer/cbuffer.js"></script>
<script src="assets/dat.gui/dat.gui.js"></script>
<script src='assets/ngTouchStart.min.js'></script>
<script type='text/javascript' src='assets/controller.js'></script>
</head>
<body ng-app="controller" ng-controller='RootController' id='main-content-wrap'>
{{ counter }}
<figure id="nespad">
<div class="cord"></div>
<section class="dpad-pane">
<div class="dpad-hole"></div>
<div id="dpad">
<canvas height="150" id="dpad-body" width="150"></canvas>
<button class="button" id="up" ng-mousedown='press("ArrowUp", 38)' ng-mouseup='release("ArrowUp", 38)'></button>
<button class="button" id="right" ng-mousedown='press("ArrowRight", 39)' ng-mouseup='release("ArrowRight", 39)'></button>
<button class="button" id="down" ng-mousedown='press("ArrowDown", 40)' ng-mouseup='release("ArrowDown", 40)'></button>
<button class="button" id="left" ng-mousedown='press("ArrowLeft", 37)' ng-mouseup='release("ArrowLeft", 37)'></button>
<button class="button" id="up" my-touchstart='touchesStarted()' my-touchstart='press("ArrowUp", 38)' my-touchend='release("ArrowUp", 38)'></button>
<button class="button" id="right" my-touchstart='press("ArrowRight", 39)' my-touchend='release("ArrowRight", 39)'></button>
<button class="button" id="down" my-touchstart='press("ArrowDown", 40)' my-touchend='release("ArrowDown", 40)'></button>
<button class="button" id="left" my-touchstart='press("ArrowLeft", 37)' my-touchend='release("ArrowLeft", 37)'></button>
</div>
</section>
<section class="menu-pane">
@ -43,8 +45,8 @@
<label class="start" for="start">Start</label>
</div>
<div class="buttons">
<button class="button select" id="select" ng-mousedown='press("z", 90)' ng-mouseup='release("z", 90)'>Select</button>
<button class="button start" id="start" ng-mousedown='press("Enter", 13)' ng-mouseup='release("Enter", 13)'>Start</button>
<button class="button select" id="select" my-touchstart='press("z", 90)' my-touchend='release("z", 90)'>Select</button>
<button class="button start" id="start" my-touchstart='press("Enter", 13)' my-touchend='release("Enter", 13)'>Start</button>
</div>
</section>
<section class="action-pane">
@ -53,10 +55,10 @@
</div>
<div class="buttons">
<label class="label">B
<button class="button" id="b" ng-mousedown='press("f", 70)' ng-mouseup='release("f", 70)'></button>
<button class="button" id="b" my-touchstart='press("f", 70)' my-touchend='release("f", 70)'></button>
</label>
<label class="label">A
<button class="button" id="a" ng-mousedown='press("g", 71)' ng-mouseup='release("g", 71)'></button>
<button class="button" id="a" my-touchstart='press("g", 71)' my-touchend='release("g", 71)'></button>
</label>
</div>
</section>
@ -72,20 +74,20 @@
<div class='row main-row'>
<div class='controls left-controls text-center'>
<div class='row'>
<button id='aaa' type='button' class='gamepad-button' ng-mousedown='press("ArrowUp", 38)' ng-mouseup='release("ArrowUp", 38)'>Up</button>
<button id='aaa' type='button' class='gamepad-button' my-touchstart='press("ArrowUp", 38)' my-touchend='release("ArrowUp", 38)'>Up</button>
</div>
<button class='gamepad-button' ng-mousedown='press("ArrowLeft", 37)' ng-mouseup='release("ArrowLeft", 37)'>Left</button>
<button class='gamepad-button' ng-mousedown='press("ArrowDown", 40)' ng-mouseup='release("ArrowDown", 40)'>Down</button>
<button class='gamepad-button' ng-mousedown='press("ArrowRight", 39)' ng-mouseup='release("ArrowRight", 39)'>Right</button>
<button class='gamepad-button' my-touchstart='press("ArrowLeft", 37)' my-touchend='release("ArrowLeft", 37)'>Left</button>
<button class='gamepad-button' my-touchstart='press("ArrowDown", 40)' my-touchend='release("ArrowDown", 40)'>Down</button>
<button class='gamepad-button' my-touchstart='press("ArrowRight", 39)' my-touchend='release("ArrowRight", 39)'>Right</button>
</div>
<div class='controls mid-controls text-center'>
{{ counter }}
<button class='gamepad-button' ng-mousedown='press("Enter", 13)' ng-mouseup='release("Enter", 13)'>Start</button>
<button class='gamepad-button' ng-mousedown='press("z", 90)' ng-mouseup='release("z", 90)'>Z</button>
<button class='gamepad-button' my-touchstart='press("Enter", 13)' my-touchend='release("Enter", 13)'>Start</button>
<button class='gamepad-button' my-touchstart='press("z", 90)' my-touchend='release("z", 90)'>Z</button>
</div>
<div class='controls right-controls text-center'>
<button class='gamepad-button' ng-mousedown='press("g", 71)' ng-mouseup='release("g", 71)'>A</button>
<button class='gamepad-button' ng-mousedown='press("f", 70)' ng-mouseup='release("f", 70)'>B</button>
<button class='gamepad-button' my-touchstart='press("g", 71)' my-touchend='release("g", 71)'>A</button>
<button class='gamepad-button' my-touchstart='press("f", 70)' my-touchend='release("f", 70)'>B</button>
</div>
</div>
<div class='row main-row'></div> -->