mirror of
https://github.com/d07RiV/diabloweb.git
synced 2025-05-11 13:57:21 +00:00
Creating F keys to assign skills (#449)
This commit is contained in:
PSommer
GitHub
parent
998629fd5d
commit
a99b216614
@ -98,7 +98,7 @@ module.exports = function(proxy, allowedHost) {
|
||||
// We do this in development to avoid hitting the production cache if
|
||||
// it used the same host and port.
|
||||
// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
|
||||
app.use(noopServiceWorkerMiddleware());
|
||||
app.use(noopServiceWorkerMiddleware('/'));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
"version": "1.0.39",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@babel/core": "7.4.3",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.21",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.10.1",
|
||||
"@fortawesome/react-fontawesome": "^0.1.4",
|
||||
@ -51,7 +50,7 @@
|
||||
"postcss-safe-parser": "4.0.1",
|
||||
"react": "^16.8.6",
|
||||
"react-app-polyfill": "^1.0.1",
|
||||
"react-dev-utils": "^11.0.4",
|
||||
"react-dev-utils": "^9.0.7",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-ga": "^2.6.0",
|
||||
"resolve": "1.10.0",
|
||||
@ -135,11 +134,15 @@
|
||||
},
|
||||
"babel": {
|
||||
"presets": [
|
||||
"react-app"
|
||||
"@babel/preset-env",
|
||||
"@babel/preset-react"
|
||||
]
|
||||
},
|
||||
"homepage": "https://d07riv.github.io/diabloweb",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.14.6",
|
||||
"@babel/preset-env": "^7.14.7",
|
||||
"@babel/preset-react": "^7.14.5",
|
||||
"exports-loader": "^0.7.0",
|
||||
"gh-pages": "^2.0.1",
|
||||
"node-sass": "^4.14.1",
|
||||
|
||||
32
src/App.js
32
src/App.js
@ -101,7 +101,7 @@ class App extends React.Component {
|
||||
cursorPos = {x: 0, y: 0};
|
||||
|
||||
touchControls = false;
|
||||
touchButtons = [null, null, null, null, null, null];
|
||||
touchButtons = [null, null, null, null, null, null, null, null, null, null];
|
||||
touchCtx = [null, null, null, null, null, null];
|
||||
touchMods = [false, false, false, false, false, false];
|
||||
touchBelt = [-1, -1, -1, -1, -1, -1];
|
||||
@ -118,6 +118,11 @@ class App extends React.Component {
|
||||
this.setTouch3 = this.setTouchBelt_.bind(this, 3);
|
||||
this.setTouch4 = this.setTouchBelt_.bind(this, 4);
|
||||
this.setTouch5 = this.setTouchBelt_.bind(this, 5);
|
||||
|
||||
this.setTouch6 = this.setTouch_.bind(this, 6);
|
||||
this.setTouch7 = this.setTouch_.bind(this, 7);
|
||||
this.setTouch8 = this.setTouch_.bind(this, 8);
|
||||
this.setTouch9 = this.setTouch_.bind(this, 9);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
@ -560,13 +565,18 @@ class App extends React.Component {
|
||||
}
|
||||
this.touchButton = touchOther;
|
||||
if (touchOther) {
|
||||
this.setTouchMod(touchOther.index, true);
|
||||
if (touchOther.index === TOUCH_MOVE) {
|
||||
this.setTouchMod(TOUCH_RMB, false);
|
||||
} else if (touchOther.index === TOUCH_RMB) {
|
||||
this.setTouchMod(TOUCH_MOVE, false);
|
||||
if (touchOther.index < 6) {
|
||||
this.setTouchMod(touchOther.index, true);
|
||||
if (touchOther.index === TOUCH_MOVE) {
|
||||
this.setTouchMod(TOUCH_RMB, false);
|
||||
} else if (touchOther.index === TOUCH_RMB) {
|
||||
this.setTouchMod(TOUCH_MOVE, false);
|
||||
}
|
||||
delete this.panPos;
|
||||
} else {
|
||||
// touching F key
|
||||
this.game("DApi_Key", 0, 0, 110 + touchOther.index);
|
||||
}
|
||||
delete this.panPos;
|
||||
} else if (touches.length === 2) {
|
||||
const x = (touches[1].clientX + touches[0].clientX) / 2, y = (touches[1].clientY + touches[0].clientY) / 2;
|
||||
if (this.panPos) {
|
||||
@ -753,6 +763,14 @@ class App extends React.Component {
|
||||
<div className={classNames("touch-button", "touch-button-1")} ref={this.setTouch4}/>
|
||||
<div className={classNames("touch-button", "touch-button-2")} ref={this.setTouch5}/>
|
||||
</div>
|
||||
<div className="touch-ui fkeys-left">
|
||||
<div className={classNames("touch-button", "touch-button-3")} ref={this.setTouch6} />
|
||||
<div className={classNames("touch-button", "touch-button-4")} ref={this.setTouch7} />
|
||||
</div>
|
||||
<div className="touch-ui fkeys-right">
|
||||
<div className={classNames("touch-button", "touch-button-5")} ref={this.setTouch8} />
|
||||
<div className={classNames("touch-button", "touch-button-6")} ref={this.setTouch9} />
|
||||
</div>
|
||||
<div className="Body">
|
||||
<div className="inner">
|
||||
{!error && <canvas ref={this.setCanvas} width={640} height={480}/>}
|
||||
|
||||
137
src/App.scss
137
src/App.scss
@ -244,20 +244,38 @@ body, #root, .App {
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
.touch-button-0 {
|
||||
top: 16.7vh;
|
||||
top: 15vh;
|
||||
}
|
||||
.touch-button-1 {
|
||||
top: 50vh;
|
||||
top: 35vh;
|
||||
}
|
||||
.touch-button-2 {
|
||||
top: 83.3vh;
|
||||
top: 55vh;
|
||||
}
|
||||
.touch-button-3 {
|
||||
top: 70vh;
|
||||
left: 5vw;
|
||||
}
|
||||
.touch-button-4 {
|
||||
top: 70vh;
|
||||
left: 11vw;
|
||||
}
|
||||
|
||||
.touch-button-5 {
|
||||
top: 85vh;
|
||||
left: 5vw;
|
||||
}
|
||||
|
||||
.touch-button-6 {
|
||||
top: 85vh;
|
||||
left: 11vw;
|
||||
}
|
||||
}
|
||||
.touch-ui.touch-mods {
|
||||
left: 0;
|
||||
.touch-button {
|
||||
width: 20vh;
|
||||
height: 20vh;
|
||||
width: 15vh;
|
||||
height: 15vh;
|
||||
border-radius: 10vh;
|
||||
}
|
||||
.touch-button-0 {
|
||||
@ -269,12 +287,18 @@ body, #root, .App {
|
||||
.touch-button-2 {
|
||||
mask-image: url(./icons/shift.svg);
|
||||
}
|
||||
.touch-button-3 {
|
||||
mask-image: url(./icons/f5.svg);
|
||||
}
|
||||
.touch-button-4 {
|
||||
mask-image: url(./icons/f6.svg);
|
||||
}
|
||||
}
|
||||
.touch-ui.touch-belt {
|
||||
right: 0;
|
||||
.touch-button {
|
||||
width: 14vh;
|
||||
height: 14vh;
|
||||
width: 12vh;
|
||||
height: 12vh;
|
||||
font-size: 1vh;
|
||||
border-radius: 20%;
|
||||
overflow: hidden;
|
||||
@ -299,6 +323,65 @@ body, #root, .App {
|
||||
}
|
||||
}
|
||||
}
|
||||
.touch-ui.fkeys-left {
|
||||
left: 0;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
height: 35vh;
|
||||
.touch-button {
|
||||
width: 15vh;
|
||||
height: 15vh;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
background-color: #444;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: auto;
|
||||
&.active {
|
||||
background-color: #fff;
|
||||
}
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
.touch-button-3 {
|
||||
top: 0;
|
||||
transform: translate(-50%, 0);
|
||||
mask-image: url(./icons/f5.svg);
|
||||
}
|
||||
.touch-button-4 {
|
||||
top:60%;
|
||||
mask-image: url(./icons/f6.svg);
|
||||
}
|
||||
}
|
||||
|
||||
.touch-ui.fkeys-right {
|
||||
left: auto;
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 35vh;
|
||||
.touch-button {
|
||||
width: 15vh;
|
||||
height: 15vh;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
background-color: #444;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: auto;
|
||||
&.active {
|
||||
background-color: #fff;
|
||||
}
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
.touch-button-5 {
|
||||
top: 0;
|
||||
transform: translate(-50%, 0);
|
||||
mask-image: url(./icons/f7.svg);
|
||||
}
|
||||
.touch-button-6 {
|
||||
top:60%;
|
||||
mask-image: url(./icons/f8.svg);
|
||||
}
|
||||
}
|
||||
|
||||
&.touch .touch-ui {
|
||||
display: block;
|
||||
}
|
||||
@ -306,6 +389,7 @@ body, #root, .App {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 880/480) {
|
||||
.App .touch-ui {
|
||||
width: calc(50vw - 200vh / 3);
|
||||
@ -321,7 +405,7 @@ body, #root, .App {
|
||||
width: auto;
|
||||
height: 20vw;
|
||||
.touch-button {
|
||||
top: 50%;
|
||||
top: 55%;
|
||||
}
|
||||
.touch-button-0 {
|
||||
left: 16.7vw;
|
||||
@ -351,6 +435,41 @@ body, #root, .App {
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
.App .touch-ui.fkeys-left {
|
||||
left:0;
|
||||
bottom: 15vh;
|
||||
width: 50%;
|
||||
height: 12vh;
|
||||
.touch-button {
|
||||
height: 12vh;
|
||||
width: 12vh;
|
||||
}
|
||||
.touch-button-3 {
|
||||
left:25%;
|
||||
}
|
||||
.touch-button-4 {
|
||||
top: 50%;
|
||||
left:75%;
|
||||
}
|
||||
}
|
||||
.App .touch-ui.fkeys-right {
|
||||
left:auto;
|
||||
right: 0;
|
||||
bottom: 15vh;
|
||||
width: 50%;
|
||||
height: 12vh;
|
||||
.touch-button {
|
||||
height: 12vh;
|
||||
width: 12vh;
|
||||
}
|
||||
.touch-button-5 {
|
||||
left:25%;
|
||||
}
|
||||
.touch-button-6 {
|
||||
top: 50%;
|
||||
left:75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-aspect-ratio: 640/736) {
|
||||
.App .touch-ui {
|
||||
@ -359,6 +478,6 @@ body, #root, .App {
|
||||
}
|
||||
@media (max-aspect-ratio: 640/800) {
|
||||
.App .touch-ui {
|
||||
height: 25vw;
|
||||
height: 35vw;
|
||||
}
|
||||
}
|
||||
|
||||
1
src/icons/f5.svg
Normal file
1
src/icons/f5.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><style>.shp0{fill:#000}</style><g id="Folder 2"><g id="Folder 1"><path id="Shape 1" class="shp0" d="M26.6 59.8h-3.82V38.3c0-6.87 7.57-16.9 18.62-16.9 11.2 0 19.6.2 19.6.2v3.62S49 25 41.5 25c-6.82 0-14.7 6.68-14.7 13.2 0 1.28-.2 21.6-.2 21.6z"/><path id="Shape 1 copy" class="shp0" d="M101.6 59.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2 0-27.24.2-27.24.2l-.16 3.62S82.08 25 87.9 25c6.82 0 13.5 6.68 13.5 13.2 0 1.28.2 21.6.2 21.6z"/><path id="Shape 1 copy 2" class="shp0" d="M26.42 59.4H22.6v30.1c0 6.87 7.57 16.9 18.62 16.9 11.2 0 19.6-.2 19.6-.2v-3.62s-12 .22-19.5.22c-6.82 0-14.7-6.68-14.7-13.2 0-1.28-.2-30.2-.2-30.2z"/><path id="Shape 1 copy 3" class="shp0" d="M101.42 59.6h3.82v29.9c0 6.87-6.36 16.9-17.42 16.9-11.2 0-27.24-.2-27.24-.2l-.16-3.62s21.48.22 27.3.22c6.83 0 13.5-6.68 13.5-13.2 0-1.28.2-30 .2-30z"/></g><path id="F5" class="shp0" d="M61.4 48.99v-3.96H43.61V83h4.72V65.92h11.71v-3.96H48.33V48.99H61.4zm22.73 25.44v-5.86c0-6.02-3.69-8.46-8.95-8.46h-1.69V49.1h9.82v-4.07H68.88v19.15h6.57c2.33 0 3.96 1.52 3.96 3.9v6.89c0 2.77-1.25 3.96-4.02 3.96h-7.05V83h6.56c6.51 0 9.23-2.6 9.23-8.57z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
src/icons/f6.svg
Normal file
1
src/icons/f6.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><style>.shp0{fill:#000}</style><g id="Folder 2"><g id="Folder 1"><path id="Shape 1" class="shp0" d="M26.6 59.8h-3.82V38.3c0-6.87 7.57-16.9 18.62-16.9 11.2 0 19.6.2 19.6.2v3.62S49 25 41.5 25c-6.82 0-14.7 6.68-14.7 13.2 0 1.28-.2 21.6-.2 21.6z"/><path id="Shape 1 copy" class="shp0" d="M101.6 59.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2 0-27.24.2-27.24.2l-.16 3.62S82.08 25 87.9 25c6.82 0 13.5 6.68 13.5 13.2 0 1.28.2 21.6.2 21.6z"/><path id="Shape 1 copy 2" class="shp0" d="M26.42 59.4H22.6v30.1c0 6.87 7.57 16.9 18.62 16.9 11.2 0 19.6-.2 19.6-.2v-3.62s-12 .22-19.5.22c-6.82 0-14.7-6.68-14.7-13.2 0-1.28-.2-30.2-.2-30.2z"/><path id="Shape 1 copy 3" class="shp0" d="M101.42 59.6h3.82v29.9c0 6.87-6.36 16.9-17.42 16.9-11.2 0-27.24-.2-27.24-.2l-.16-3.62s21.48.22 27.3.22c6.83 0 13.5-6.68 13.5-13.2 0-1.28.2-30 .2-30z"/></g><path id="F5" fill-rule="evenodd" class="shp0" d="M48.33 48.99v12.97h11.71v3.96H48.33V83h-4.72V45.03H61.4v3.96H48.33zM77.24 83h-1.36c-4.61 0-8.57-3.04-8.57-9.22V54.25c0-6.18 3.42-9.22 9.66-9.22h6.23v4.13h-6.78c-2.71 0-4.5 1.89-4.5 4.06v5.92h4.77c6.13 0 9.12 2.49 9.12 8.67v5.97c0 6.18-3.96 9.22-8.57 9.22zm-5.32-19.8v11.61c0 2.17 1.52 4.12 4.23 4.12h.82c2.71 0 4.23-1.95 4.23-4.12v-8.03c0-2.17-1.25-3.58-3.96-3.58h-5.32z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
src/icons/f7.svg
Normal file
1
src/icons/f7.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><style>.shp0{fill:#000}</style><g id="Folder 2"><g id="Folder 1"><path id="Shape 1" class="shp0" d="M26.6 59.8h-3.82V38.3c0-6.87 7.57-16.9 18.62-16.9 11.2 0 19.6.2 19.6.2v3.62S49 25 41.5 25c-6.82 0-14.7 6.68-14.7 13.2 0 1.28-.2 21.6-.2 21.6z"/><path id="Shape 1 copy" class="shp0" d="M101.6 59.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2 0-27.24.2-27.24.2l-.16 3.62S82.08 25 87.9 25c6.82 0 13.5 6.68 13.5 13.2 0 1.28.2 21.6.2 21.6z"/><path id="Shape 1 copy 2" class="shp0" d="M26.42 59.4H22.6v30.1c0 6.87 7.57 16.9 18.62 16.9 11.2 0 19.6-.2 19.6-.2v-3.62s-12 .22-19.5.22c-6.82 0-14.7-6.68-14.7-13.2 0-1.28-.2-30.2-.2-30.2z"/><path id="Shape 1 copy 3" class="shp0" d="M101.42 59.6h3.82v29.9c0 6.87-6.36 16.9-17.42 16.9-11.2 0-27.24-.2-27.24-.2l-.16-3.62s21.48.22 27.3.22c6.83 0 13.5-6.68 13.5-13.2 0-1.28.2-30 .2-30z"/></g><path id="F5" class="shp0" d="M61.4 48.99v-3.96H43.61V83h4.72V65.92h11.71v-3.96H48.33V48.99H61.4zm22.67 1.31v-5.27H67.53v4.07h12.04L70.51 83h4.83l8.73-32.7z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
src/icons/f8.svg
Normal file
1
src/icons/f8.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><style>.shp0{fill:#000}</style><g id="Folder 2"><g id="Folder 1"><path id="Shape 1" class="shp0" d="M26.6 59.8h-3.82V38.3c0-6.87 7.57-16.9 18.62-16.9 11.2 0 19.6.2 19.6.2v3.62S49 25 41.5 25c-6.82 0-14.7 6.68-14.7 13.2 0 1.28-.2 21.6-.2 21.6z"/><path id="Shape 1 copy" class="shp0" d="M101.6 59.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2 0-27.24.2-27.24.2l-.16 3.62S82.08 25 87.9 25c6.82 0 13.5 6.68 13.5 13.2 0 1.28.2 21.6.2 21.6z"/><path id="Shape 1 copy 2" class="shp0" d="M26.42 59.4H22.6v30.1c0 6.87 7.57 16.9 18.62 16.9 11.2 0 19.6-.2 19.6-.2v-3.62s-12 .22-19.5.22c-6.82 0-14.7-6.68-14.7-13.2 0-1.28-.2-30.2-.2-30.2z"/><path id="Shape 1 copy 3" class="shp0" d="M101.42 59.6h3.82v29.9c0 6.87-6.36 16.9-17.42 16.9-11.2 0-27.24-.2-27.24-.2l-.16-3.62s21.48.22 27.3.22c6.83 0 13.5-6.68 13.5-13.2 0-1.28.2-30 .2-30z"/></g><path id="F5" fill-rule="evenodd" class="shp0" d="M48.33 48.99v12.97h11.71v3.96H48.33V83h-4.72V45.03H61.4v3.96H48.33zM77.07 83h-.97c-6.51 0-9.22-2.6-9.22-8.57v-4.56c0-3.25 1.25-5.42 3.52-6.67-1.84-1.3-2.87-3.41-2.87-6.29V53.5c0-5.97 3.36-8.47 8.79-8.47h.54c5.42 0 8.78 2.5 8.78 8.47v3.41c0 2.88-1.03 4.99-2.87 6.29 2.28 1.25 3.52 3.42 3.52 6.67v4.56c0 5.97-2.71 8.57-9.22 8.57zm.55-17.52h-2.06c-2.34 0-3.96 1.52-3.96 3.91v5.58c0 2.66 1.08 3.96 3.58 3.96h2.38c2.77 0 4.02-1.19 4.02-3.96v-5.58c0-2.39-1.63-3.91-3.96-3.91zM75.66 49.1c-2.44 0-3.41 1.36-3.41 3.91v4.44c0 2.34 1.52 3.86 3.52 3.96h1.3c2.17 0 3.86-1.51 3.86-3.96v-4.44c0-2.77-1.14-3.91-3.86-3.91h-1.41z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Loading…
x
Reference in New Issue
Block a user