mirror of
https://github.com/damouse/Drop64.git
synced 2024-06-11 08:37:33 -04:00
mostly styling
This commit is contained in:
damouse
parent
d9e73cfb38
commit
73435ead78
|
|
@ -16,7 +16,7 @@
|
|||
"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",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
// Same
|
||||
angular.module('controller', [])
|
||||
.controller('RootController', function($scope) {
|
||||
var socket = io.connect('localhost:3000');
|
||||
.controller('RootController', function($scope, $location) {
|
||||
var socket = io.connect($location.$$host + ':' + $location.$$port);
|
||||
|
||||
$scope.press = function(b, k) {
|
||||
socket.emit("controller", { event: 'keydown', button: b, code: k });
|
||||
|
|
@ -12,3 +11,7 @@ angular.module('controller', [])
|
|||
socket.emit("controller", { event: 'keyup', button: b, code: k });
|
||||
};
|
||||
})
|
||||
|
||||
/**
|
||||
* Add handlers to dpad-buttons
|
||||
*/
|
||||
|
|
|
|||
101
src/nes.js
Normal file
101
src/nes.js
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
// Implementation of the NES controller, kept seperately from the angular, controller implementation
|
||||
// because of the order of the imports
|
||||
(function() {
|
||||
"use strict";
|
||||
var pad = document.getElementById("dpad"),
|
||||
i = 0,
|
||||
padbuttons = pad.getElementsByClassName("button"),
|
||||
|
||||
click = function() {
|
||||
pad.className = this.id;
|
||||
document.onmouseup = function() {
|
||||
pad.className = "";
|
||||
};
|
||||
};
|
||||
|
||||
for (i = 0; i < padbuttons.length; i += 1) {
|
||||
padbuttons[i].onmousedown = click;
|
||||
}
|
||||
}());
|
||||
|
||||
/**
|
||||
* Draw d-pad
|
||||
*/
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
var canvas = document.getElementById("dpad-body");
|
||||
|
||||
function angularShape(canvas, coords) {
|
||||
var shape = canvas.getContext("2d"),
|
||||
i = 0;
|
||||
shape.beginPath();
|
||||
shape.moveTo(coords[0][0], coords[0][1]);
|
||||
coords.slice(1);
|
||||
|
||||
for (i = 0; i < coords.length; i += 1) {
|
||||
shape.lineTo(coords[i][0], coords[i][1]);
|
||||
}
|
||||
|
||||
shape.closePath();
|
||||
return shape;
|
||||
}
|
||||
|
||||
function linearFill(shape, color1, color2, coords) {
|
||||
var bg = shape.createLinearGradient(coords[0], coords[1], coords[2], coords[3]);
|
||||
bg.addColorStop(0, color1);
|
||||
bg.addColorStop(1, color2);
|
||||
shape.fillStyle = bg;
|
||||
shape.fill();
|
||||
}
|
||||
|
||||
function ySide(canvas, y, xFrom, xTo) {
|
||||
var shape = angularShape(canvas, [
|
||||
[y, xFrom],
|
||||
[y + 5, xFrom + 3.5],
|
||||
[y + 5, xTo + 3.5],
|
||||
[y, xTo]
|
||||
]);
|
||||
linearFill(shape, "#666", "#000", [y, xFrom, y + 15, xFrom]);
|
||||
}
|
||||
|
||||
function xSide(canvas, x, yFrom, yTo) {
|
||||
var shape = angularShape(canvas, [
|
||||
[yFrom, x],
|
||||
[yFrom + 5, x + 3.5],
|
||||
[yTo + 5, x + 3.5],
|
||||
[yTo, x]
|
||||
]);
|
||||
linearFill(shape, "#666", "#000", [yFrom, x, yFrom, x + 15]);
|
||||
}
|
||||
|
||||
// draw the sides first
|
||||
xSide(canvas, 63.5, 0, 100);
|
||||
xSide(canvas, 100, 36.5, 63.5);
|
||||
ySide(canvas, 63.5, 0, 36.5);
|
||||
ySide(canvas, 63.5, 63.5, 100);
|
||||
ySide(canvas, 100, 36.5, 63.5);
|
||||
|
||||
// draw the d-pad
|
||||
var plus = angularShape(canvas, [
|
||||
[0, 36.5],
|
||||
[36.5, 36.5],
|
||||
[36.5, 0],
|
||||
[63.5, 0],
|
||||
[63.5, 36.5],
|
||||
[100, 36.5],
|
||||
[100, 63.5],
|
||||
[63.5, 63.5],
|
||||
[63.5, 100],
|
||||
[36.5, 100],
|
||||
[36.5, 63],
|
||||
[0, 63.5]
|
||||
]);
|
||||
|
||||
plus.fillStyle = "#1a1a1a";
|
||||
plus.shadowColor = "rgba(0, 0, 0, 0.6)";
|
||||
plus.shadowBlur = 15;
|
||||
plus.shadowOffsetX = 20;
|
||||
plus.shadowOffsetY = 10;
|
||||
plus.fill();
|
||||
}());
|
||||
|
|
@ -11,7 +11,10 @@ for (var d of["stylesheets", "vendor", "sensors", "src"]) {
|
|||
}
|
||||
|
||||
io.on('connection', (socket) => {
|
||||
socket.on("controller", (m) => io.emit('input', m))
|
||||
socket.on("controller", (m) => {
|
||||
console.log(m)
|
||||
io.emit('input', m)
|
||||
})
|
||||
socket.on("command", (m) => io.emit('command', m))
|
||||
});
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -441,7 +441,15 @@ Full-Width Styles
|
|||
}
|
||||
|
||||
#main_content_wrap {
|
||||
background: #f2f2f2;
|
||||
background: #45484d;
|
||||
/* Old browsers */
|
||||
background: -moz-linear-gradient(top, #45484d 0%, #000000 100%);
|
||||
/* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(top, #45484d 0%, #000000 100%);
|
||||
/* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to bottom, #45484d 0%, #000000 100%);
|
||||
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000', GradientType=0);
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
|
|
@ -453,6 +461,11 @@ Full-Width Styles
|
|||
background: #212121;
|
||||
}
|
||||
|
||||
#files {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
Small Device Styles
|
||||
|
|
@ -510,7 +523,7 @@ div.emscripten {
|
|||
}
|
||||
|
||||
div.emscripten_border {
|
||||
border: 1px solid black;
|
||||
/* border: 1px solid black; */
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -647,3 +660,192 @@ canvas.emscripten {
|
|||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0%: {
|
||||
transform: rotateX(45deg) rotateZ(-315deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(45deg) rotateZ(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.n64,
|
||||
.viewport {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
transform: scale(0.5);
|
||||
perspective: 725px;
|
||||
perspective-origin: 50% 50%;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -150px;
|
||||
margin-top: -150px;
|
||||
}
|
||||
|
||||
.n64 {
|
||||
transform: rotateX(45deg) rotateZ(-315deg);
|
||||
transform-style: preserve-3d;
|
||||
animation-name: spin;
|
||||
animation-duration: 5s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
.n64 .side {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.part {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.part.yellow {
|
||||
background-color: #FFC001;
|
||||
}
|
||||
|
||||
.part.red {
|
||||
background-color: #FE2015;
|
||||
}
|
||||
|
||||
.part.green {
|
||||
background-color: #069330;
|
||||
}
|
||||
|
||||
.part.blue {
|
||||
background-color: #011DA9;
|
||||
}
|
||||
|
||||
.bottom>div,
|
||||
.top>div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.bottom .vert-top,
|
||||
.top .vert-top {
|
||||
transform-origin: left;
|
||||
transform: rotateY(-54deg) scaleX(1.7);
|
||||
}
|
||||
|
||||
.top .vert-top {
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
.bottom .vert-bottom,
|
||||
.top .vert-bottom {
|
||||
transform-origin: right;
|
||||
transform: rotateY(54deg) scaleX(1.7);
|
||||
}
|
||||
|
||||
.top .vert-bottom {
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.bottom .hoz-left,
|
||||
.top .hoz-left {
|
||||
transform-origin: bottom;
|
||||
transform: rotateX(-54deg) scaleY(1.7);
|
||||
}
|
||||
|
||||
.top .hoz-left {
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
.bottom .hoz-right,
|
||||
.top .hoz-right {
|
||||
transform-origin: top;
|
||||
transform: rotateX(54deg) scaleY(1.7);
|
||||
}
|
||||
|
||||
.top .hoz-right {
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
.bottom.side {
|
||||
backface-visibility: visible;
|
||||
}
|
||||
|
||||
.top.side {
|
||||
transform-style: preserve-3d;
|
||||
transform: translateZ(300px);
|
||||
}
|
||||
|
||||
.bottom .red + .red,
|
||||
.top .red + .red {
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
.front .part,
|
||||
.back .part {
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left .part,
|
||||
.right .part {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.front .part.middle,
|
||||
.back .part.middle {
|
||||
height: 100px;
|
||||
margin-top: 100px;
|
||||
transform: skewY(54deg) scaleY(1.63);
|
||||
}
|
||||
|
||||
.left .part.middle,
|
||||
.right .part.middle {
|
||||
width: 100px;
|
||||
margin-left: 100px;
|
||||
transform: skewX(-54deg) scaleX(1.63);
|
||||
}
|
||||
|
||||
.front {
|
||||
transform-origin: 50% 100%;
|
||||
transform: rotateX(-90deg);
|
||||
}
|
||||
|
||||
.side.inside {
|
||||
backface-visibility: visible;
|
||||
}
|
||||
|
||||
.front.inside {
|
||||
transform: rotateX(-90deg) translateZ(-100px);
|
||||
}
|
||||
|
||||
.back {
|
||||
transform-origin: 50% 0%;
|
||||
transform: rotateX(90deg);
|
||||
}
|
||||
|
||||
.back.inside {
|
||||
transform: rotateX(90deg) translateZ(-100px);
|
||||
}
|
||||
|
||||
.left {
|
||||
transform-origin: 0% 50%;
|
||||
transform: rotateY(-90deg);
|
||||
}
|
||||
|
||||
.left.inside {
|
||||
transform: rotateY(-90deg) translateZ(-100px);
|
||||
}
|
||||
|
||||
.right {
|
||||
transform-origin: 100% 50%;
|
||||
transform: rotateY(90deg);
|
||||
}
|
||||
|
||||
.right.inside {
|
||||
transform: rotateY(90deg) translateZ(-100px);
|
||||
}
|
||||
2
vendor/mupen64plus-ui-console.js
vendored
2
vendor/mupen64plus-ui-console.js
vendored
|
|
@ -13,6 +13,7 @@ function handleFileSelect(evt) {
|
|||
encoding: 'binary'
|
||||
});
|
||||
document.getElementById('filechooser').style.visibility = 'hidden';
|
||||
document.getElementById('n64-logo').style.display = 'none';
|
||||
Module['callMain'](['--resolution', '640x480', rom]);
|
||||
};
|
||||
reader.readAsArrayBuffer(files[0]);
|
||||
|
|
@ -231,6 +232,7 @@ Module.expectedDataFileDownloads++;
|
|||
|
||||
}
|
||||
if (Module['calledRun']) {
|
||||
console.log("Done")
|
||||
runWithFS();
|
||||
} else {
|
||||
if (!Module['preRun']) Module['preRun'] = [];
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
<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/X.Y.Z/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>
|
||||
|
|
@ -24,13 +24,50 @@
|
|||
</head>
|
||||
|
||||
<body ng-app="controller" ng-controller='RootController'>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
<section class="menu-pane">
|
||||
<div class="labels">
|
||||
<label class="select" for="select"> Z</label>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
<section class="action-pane">
|
||||
<div class="logo">
|
||||
Nintendo
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<label class="label">B
|
||||
<button class="button" id="b" ng-mousedown='press("f", 70)' ng-mouseup='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>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
</figure>
|
||||
|
||||
<!-- <script src="assets/util.js"></script> -->
|
||||
<!-- <script src="assets/complementary-filter.js"></script> -->
|
||||
<!-- <script src="assets/plot-sensors.js"></script> -->
|
||||
<!--
|
||||
|
||||
<div class='container'>
|
||||
<div class='row main-row'></div>
|
||||
<div class='row main-row'> </div>
|
||||
<div class='row main-row'>
|
||||
<div class='controls left-controls text-center'>
|
||||
<div class='row'>
|
||||
|
|
@ -41,6 +78,7 @@
|
|||
<button class='gamepad-button' ng-mousedown='press("ArrowRight", 39)' ng-mouseup='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>
|
||||
</div>
|
||||
|
|
@ -49,7 +87,8 @@
|
|||
<button class='gamepad-button' ng-mousedown='press("f", 70)' ng-mouseup='release("f", 70)'>B</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row main-row'></div>
|
||||
<div class='row main-row'></div> -->
|
||||
<script type='text/javascript' src='assets/nes.js'></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="assets/stylesheet.css">
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="assets/display.css">
|
||||
|
||||
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="main_content_wrap" class="outer">
|
||||
<section id="main_content" class="inner">
|
||||
<p>
|
||||
|
|
@ -33,6 +34,72 @@
|
|||
</section>
|
||||
</div>
|
||||
|
||||
<div class="viewport" id='n64-logo'>
|
||||
<div class="n64">
|
||||
|
||||
<div class="bottom side">
|
||||
<div class="part yellow"></div>
|
||||
<div class="part vert-top red" style="transform-origin: left;"></div>
|
||||
<div class="part yellow"></div>
|
||||
<div class="part hoz-left red"></div>
|
||||
<div class="part hoz-right red"></div>
|
||||
<div class="part yellow"></div>
|
||||
<div class="part vert-bottom red"></div>
|
||||
<div class="part yellow"></div>
|
||||
</div>
|
||||
<div class="front side">
|
||||
<div class="part green"></div>
|
||||
<div class="part middle green"></div>
|
||||
<div class="part green"></div>
|
||||
</div>
|
||||
<div class="back side">
|
||||
<div class="part green"></div>
|
||||
<div class="part middle green"></div>
|
||||
<div class="part green"></div>
|
||||
</div>
|
||||
<div class="left side">
|
||||
<div class="part blue"></div>
|
||||
<div class="part middle blue"></div>
|
||||
<div class="part blue"></div>
|
||||
</div>
|
||||
<div class="right side">
|
||||
<div class="part blue"></div>
|
||||
<div class="part middle blue"></div>
|
||||
<div class="part blue"></div>
|
||||
</div>
|
||||
<div class="front inside side">
|
||||
<div class="part green"></div>
|
||||
<div class="part middle green"></div>
|
||||
<div class="part green"></div>
|
||||
</div>
|
||||
<div class="back inside side">
|
||||
<div class="part green"></div>
|
||||
<div class="part middle green"></div>
|
||||
<div class="part green"></div>
|
||||
</div>
|
||||
<div class="left inside side">
|
||||
<div class="part blue"></div>
|
||||
<div class="part middle blue"></div>
|
||||
<div class="part blue"></div>
|
||||
</div>
|
||||
<div class="right inside side">
|
||||
<div class="part blue"></div>
|
||||
<div class="part middle blue"></div>
|
||||
<div class="part blue"></div>
|
||||
</div>
|
||||
<div class="top side">
|
||||
<div class="part yellow"></div>
|
||||
<div class="part vert-top red"></div>
|
||||
<div class="part yellow"></div>
|
||||
<div class="part hoz-left red"></div>
|
||||
<div class="part hoz-right red"></div>
|
||||
<div class="part yellow"></div>
|
||||
<div class="part vert-bottom red"></div>
|
||||
<div class="part yellow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue