mirror of
https://github.com/danbulant/arcade-machine
synced 2026-05-21 05:18:44 +00:00
haha svelte je dobry
This commit is contained in:
Daniel Bulant
parent
ce10af9732
commit
7bf6c433d1
34 changed files with 4487 additions and 6284 deletions
4
ui/.gitignore
vendored
4
ui/.gitignore
vendored
|
|
@ -1,2 +1,4 @@
|
|||
node_modules
|
||||
out/
|
||||
out/
|
||||
vars.json
|
||||
.svelte-kit
|
||||
46
ui/Vars.js
46
ui/Vars.js
|
|
@ -1,46 +0,0 @@
|
|||
|
||||
//Paths
|
||||
var AsphyxiaPath = "C:\\Users\\kryvas\\Downloads\\asphyxia-core-win-x64\\asphyxia.exe"
|
||||
var GamePath1 = "C:\\sdvx\\spice2.lnk"
|
||||
var GamePath2 = ""
|
||||
var GamePath3 = ""
|
||||
var GamePath4 = ""
|
||||
var GamePath5 = ""
|
||||
var GamePath6 = ""
|
||||
|
||||
//exes
|
||||
var browser = "brave.exe"
|
||||
var GameExe1 = "spice.exe"
|
||||
var GameExe2 = ""
|
||||
var GameExe3 = ""
|
||||
var GameExe4 = ""
|
||||
var GameExe5 = ""
|
||||
var GameExe6 = ""
|
||||
|
||||
//Keys
|
||||
var KeyUp = "KeyW"
|
||||
var KeyDown = "KeyS"
|
||||
var KeyLeft = "KeyA"
|
||||
var KeyRight = "KeyD"
|
||||
var KeyStart = "KeyE"
|
||||
var ExitKey1 = "G" // Only add uppercase name of the key without "Key" part example: "KeyA" becomes "A"
|
||||
var ExitKey2 = "H" // Only add uppercase name of the key without "Key" part example: "KeyA" becomes "A"
|
||||
|
||||
//Game Icons
|
||||
var ImgPath1 = "JPGS/sound-voltex-iii-gravity-wars-1.png"
|
||||
var ImgPath2 = "JPGS/maxresdefault3.jpg"
|
||||
var ImgPath3 = "JPGS/SDVX5scaled.jpg"
|
||||
var ImgPath4 = "JPGS/exceed gear.jpg"
|
||||
var ImgPath5 = ""
|
||||
var ImgPath6 = ""
|
||||
|
||||
// Game Titles
|
||||
var Title1 = "Sound Voltex III: Gravity Wars"
|
||||
var Title2 = "Sound Voltex IV: Heavenly Haven"
|
||||
var Title3 = "Sound Voltex V: Vivid Wave"
|
||||
var Title4 = "Sound Voltex VI: Exceed GEAR"
|
||||
var Title5 = "GAME1"
|
||||
var Title6 = "GAME2"
|
||||
|
||||
if(module)
|
||||
module.exports = { ExitKey1, ExitKey2, GameExe1, GameExe2, GameExe3, GameExe4, GameExe5, GameExe6 };
|
||||
201
ui/index.html
201
ui/index.html
|
|
@ -1,201 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>UI</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="Vars.js"></script>
|
||||
<!--Loadne Vars.js-->
|
||||
|
||||
<div class="hlavnidiv">
|
||||
<div class="container">
|
||||
<button
|
||||
class="move"
|
||||
type="button"
|
||||
id="sdvx3-button"
|
||||
onclick="vers=1;sdvx()"
|
||||
>
|
||||
<!-- on click sets var vers to number and then runs sdvx which is just switch for
|
||||
game path select-->
|
||||
<img id="img1" src="" alt="" />
|
||||
<h1 class="sex" id="title1"></h1>
|
||||
</button>
|
||||
<!--SDVX3-->
|
||||
<button
|
||||
class="move"
|
||||
type="button"
|
||||
id="sdvx4-button"
|
||||
onclick="vers=2;sdvx()"
|
||||
>
|
||||
<img id="img2" src="" alt="" />
|
||||
<h1 class="sex" id="title2"></h1>
|
||||
</button>
|
||||
<!--SDVX4-->
|
||||
<button
|
||||
class="move"
|
||||
type="button"
|
||||
id="sdvx5-button"
|
||||
onclick="vers=3;sdvx()"
|
||||
>
|
||||
<img id="img3" src="" alt="" />
|
||||
<h1 class="sex" id="title3"></h1>
|
||||
</button>
|
||||
<button
|
||||
class="move"
|
||||
type="button"
|
||||
id="sdvx6-button"
|
||||
onclick="vers=4;sdvx()"
|
||||
>
|
||||
<img id="img4" src="" alt="" />
|
||||
<h1 class="sex" id="title4"></h1>
|
||||
</button>
|
||||
<!--SDVX5-->
|
||||
<button
|
||||
class="move"
|
||||
type="button"
|
||||
id="sdvx7-button"
|
||||
onclick="vers=7;sdvx()"
|
||||
>
|
||||
<img id="img5" src="" alt="" />
|
||||
<h1 class="sex" id="title5"></h1>
|
||||
</button>
|
||||
<!--SDVX5-->
|
||||
<button
|
||||
class="move"
|
||||
type="button"
|
||||
id="sdvx6-button"
|
||||
onclick="vers=8;sdvx()"
|
||||
>
|
||||
<img id="img6" src="" alt="" />
|
||||
<h1 class="sex" id="title6"></h1>
|
||||
</button>
|
||||
<!--SDVX5-->
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('img1').src = ImgPath1 //Sets Button Imgs
|
||||
document.getElementById('img2').src = ImgPath2
|
||||
document.getElementById('img3').src = ImgPath3
|
||||
document.getElementById('img4').src = ImgPath4
|
||||
document.getElementById('img5').src = ImgPath5
|
||||
document.getElementById('img6').src = ImgPath6
|
||||
|
||||
document.getElementById('title1').innerHTML = Title1
|
||||
document.getElementById('title2').innerHTML = Title2
|
||||
document.getElementById('title3').innerHTML = Title3
|
||||
document.getElementById('title4').innerHTML = Title4
|
||||
document.getElementById('title5').innerHTML = Title5
|
||||
document.getElementById('title6').innerHTML = Title6
|
||||
</script>
|
||||
|
||||
<script>
|
||||
const prvnihra = [...document.querySelectorAll('button')] //creates array from buttons for focus select
|
||||
console.log(prvnihra[0])
|
||||
prvnihra[0].focus()
|
||||
</script>
|
||||
|
||||
<script>
|
||||
//SFX Audio Sources
|
||||
var i = 0
|
||||
const switchfocus = new Audio('Audio/switchfocus.mp3')
|
||||
const startaudio = new Audio('Audio/audiostart4.mp3')
|
||||
/* Handles interaction with bindable buttons and focus*/
|
||||
document.addEventListener('keydown', function (KeypressD) {
|
||||
if (KeypressD.code === KeyRight) {
|
||||
if (i >= prvnihra.length - 1) i = -1
|
||||
switchfocus.play() //plays audio
|
||||
i++
|
||||
prvnihra[i].focus()
|
||||
console.log('right', i)
|
||||
console.log('array je', prvnihra.length)
|
||||
}
|
||||
})
|
||||
document.addEventListener('keydown', function (Keypress) {
|
||||
if (Keypress.code === KeyLeft) {
|
||||
switchfocus.play()
|
||||
if (i <= 0) i = prvnihra.length
|
||||
i--
|
||||
prvnihra[i].focus()
|
||||
console.log('left', i)
|
||||
}
|
||||
if (Keypress.code === KeyStart) {
|
||||
startaudio.play()
|
||||
console.log(document.activeElement)
|
||||
document.activeElement.click()
|
||||
}
|
||||
if (Keypress.code === KeyDown && i + 3 < prvnihra.length) {
|
||||
switchfocus.play()
|
||||
console.log(i)
|
||||
i = i + 3
|
||||
prvnihra[i].focus()
|
||||
}
|
||||
if (Keypress.code === KeyUp && i - 3 >= 0) {
|
||||
switchfocus.play()
|
||||
console.log(i)
|
||||
i = i - 3
|
||||
prvnihra[i].focus()
|
||||
}
|
||||
//document.body.requestFullscreen();
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var vers = 0
|
||||
const { execFile, exec, spawn } = require('child_process')
|
||||
function sdvx() {
|
||||
console.log('promenna', vers)
|
||||
const { ipcRenderer } = require('electron')
|
||||
/* Handles Running of apps */
|
||||
switch (vers) {
|
||||
case 1:
|
||||
execFile(AsphyxiaPath)
|
||||
exec('start /b ' + GamePath1) //executes cmd with start and path
|
||||
setTimeout(function () {
|
||||
exec('taskkill /im ' + browser) //kills browser
|
||||
}, 1200)
|
||||
//console.log(vers);
|
||||
ipcRenderer.send('number', vers) //sends number to main which tells main what to kill on shortcut
|
||||
break
|
||||
case 2:
|
||||
execFile(AsphyxiaPath)
|
||||
exec('start /b ' + GamePath2)
|
||||
setTimeout(function () {
|
||||
exec('taskkill /im ' + browser)
|
||||
}, 1200)
|
||||
ipcRenderer.send('number', vers)
|
||||
break
|
||||
case 3:
|
||||
execFile(AsphyxiaPath)
|
||||
exec('start /b ' + GamePath3)
|
||||
setTimeout(function () {
|
||||
exec('taskkill /im ' + browser)
|
||||
}, 1200)
|
||||
ipcRenderer.send('number', vers)
|
||||
break
|
||||
case 4:
|
||||
execFile(AsphyxiaPath)
|
||||
exec('start /b ' + GamePath4)
|
||||
setTimeout(function () {
|
||||
exec('taskkill /im ' + browser)
|
||||
}, 1200)
|
||||
ipcRenderer.send('number', vers)
|
||||
break
|
||||
case 5:
|
||||
execFile(GamePath5)
|
||||
ipcRenderer.send('number', vers)
|
||||
break
|
||||
case 6:
|
||||
execFile(GamePath6)
|
||||
ipcRenderer.send('number', vers)
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
155
ui/main.cjs
Normal file
155
ui/main.cjs
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
const { app, BrowserWindow, ipcMain } = require("electron");
|
||||
const { globalShortcut } = require("electron");
|
||||
const path = require("path");
|
||||
const vars = require("./vars.json");
|
||||
const { spawn } = require("child_process");
|
||||
|
||||
/** @type {BrowserWindow} */
|
||||
let mainWindow;
|
||||
|
||||
if (!app.requestSingleInstanceLock()) {
|
||||
app.quit();
|
||||
} else {
|
||||
app.on("second-instance", (event, commandLine, workingDirectory) => {
|
||||
// Someone tried to run a second instance, we should focus our window.
|
||||
if (mainWindow) {
|
||||
if (mainWindow.isMinimized()) mainWindow.restore();
|
||||
mainWindow.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const createWindow = () => {
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 600,
|
||||
webPreferences: {
|
||||
nodeIntegration: true,
|
||||
contextIsolation: false,
|
||||
enableRemoteModule: true,
|
||||
},
|
||||
autoHideMenuBar: true,
|
||||
});
|
||||
|
||||
if (process.env.NODE_ENV !== "development") {
|
||||
console.log("Production mode");
|
||||
mainWindow.loadFile(path.join(__dirname, "/renderer/dist/index.html"));
|
||||
} else {
|
||||
console.log("Development mode");
|
||||
mainWindow.loadURL("http://localhost:5173/");
|
||||
mainWindow.webContents.openDevTools();
|
||||
}
|
||||
|
||||
mainWindow.on("closed", () => {
|
||||
// Dereference the window object, usually you would store windows
|
||||
// in an array if your app supports multi windows, this is the time
|
||||
// when you should delete the corresponding element.
|
||||
mainWindow = null;
|
||||
});
|
||||
};
|
||||
|
||||
app.whenReady().then(() => {
|
||||
createWindow();
|
||||
|
||||
// const {
|
||||
// ExitKey1,
|
||||
// ExitKey2,
|
||||
// GameExe1,
|
||||
// GameExe2,
|
||||
// GameExe3,
|
||||
// GameExe4,
|
||||
// GameExe5,
|
||||
// GameExe6,
|
||||
// } = require("./Vars.js"); //imports exitkeys from vars.js
|
||||
// const { execFile, exec, spawn } = require("child_process");
|
||||
// console.log(ExitKey1 + " + " + ExitKey2);
|
||||
|
||||
// const ret = globalShortcut.register(ExitKey1 + " + " + ExitKey2, () => {
|
||||
// //makes globalshortcut from vars in vars.js
|
||||
// console.log("CommandOrControl+X is pressed");
|
||||
// //On shortcut kills game exe
|
||||
// switch (Execounter) {
|
||||
// case 1:
|
||||
// exec("taskkill /im " + GameExe1);
|
||||
// break;
|
||||
// case 2:
|
||||
// exec("taskkill /im " + GameExe2);
|
||||
// break;
|
||||
// case 3:
|
||||
// exec("taskkill /im " + GameExe3);
|
||||
// break;
|
||||
// case 4:
|
||||
// exec("taskkill /im " + GameExe4);
|
||||
// break;
|
||||
// case 5:
|
||||
// exec("taskkill /im " + GameExe5);
|
||||
// break;
|
||||
// case 6:
|
||||
// exec("taskkill /im " + GameExe6);
|
||||
// break;
|
||||
// default:
|
||||
// break;
|
||||
// }
|
||||
// });
|
||||
});
|
||||
|
||||
/** @type {null|{ id: number, process: ReturnType<spawn>, title: string }} */
|
||||
let running = null;
|
||||
|
||||
const stop = () => {
|
||||
if (running == null) return;
|
||||
|
||||
running.process.kill();
|
||||
|
||||
setTimeout(() => {
|
||||
if (running) {
|
||||
running.process.kill("SIGKILL");
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
mainWindow.webContents.send("game-stoping", running.id, running.title);
|
||||
};
|
||||
|
||||
let supporting = [];
|
||||
|
||||
ipcMain.on("start", (event, data) => {
|
||||
if (running) stop();
|
||||
const game = vars.games[data];
|
||||
if (!game) return event.reply("error", "Game not found");
|
||||
|
||||
if (game.supporting) {
|
||||
for (const exe of game.supporting) {
|
||||
if (supporting.includes(exe)) continue;
|
||||
supporting.push(exe);
|
||||
spawn(exe.path, {
|
||||
windowsHide: true
|
||||
});
|
||||
if (exe["kill-browser"]) {
|
||||
setTimeout(() => {
|
||||
spawn("taskkill", ["/im", vars.browser]);
|
||||
}, 1200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
running = {
|
||||
id: data,
|
||||
process: spawn(game.path, game.args, {
|
||||
windowsHide: true
|
||||
}),
|
||||
title: game.title,
|
||||
};
|
||||
|
||||
event.reply("game-start", data, game.title);
|
||||
|
||||
running.process.on("close", () => {
|
||||
running = null;
|
||||
|
||||
event.reply("game-stop", data, game.title);
|
||||
});
|
||||
|
||||
running.process.on("error", (err) => {
|
||||
console.error(err);
|
||||
event.reply("game-error", err, data, game.title);
|
||||
})
|
||||
});
|
||||
68
ui/main.js
68
ui/main.js
|
|
@ -1,68 +0,0 @@
|
|||
const { app, BrowserWindow, ipcMain } = require('electron')
|
||||
const { globalShortcut } = require('electron')
|
||||
const createWindow = () => {
|
||||
ipcMain.on('number', (event, data) => {
|
||||
//Reads number var from index
|
||||
Execounter = 0
|
||||
console.warn(data)
|
||||
Execounter = data
|
||||
console.warn(Execounter)
|
||||
})
|
||||
// Create the browser window.
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 600,
|
||||
webPreferences: {
|
||||
nodeIntegration: true,
|
||||
contextIsolation: false,
|
||||
enableRemoteModule: true,
|
||||
},
|
||||
autoHideMenuBar: true,
|
||||
})
|
||||
mainWindow.loadFile('index.html') //loads index.html
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
createWindow()
|
||||
|
||||
const {
|
||||
ExitKey1,
|
||||
ExitKey2,
|
||||
GameExe1,
|
||||
GameExe2,
|
||||
GameExe3,
|
||||
GameExe4,
|
||||
GameExe5,
|
||||
GameExe6,
|
||||
} = require('./Vars.js') //imports exitkeys from vars.js
|
||||
const { execFile, exec, spawn } = require('child_process')
|
||||
console.log(ExitKey1 + ' + ' + ExitKey2)
|
||||
|
||||
const ret = globalShortcut.register(ExitKey1 + ' + ' + ExitKey2, () => {
|
||||
//makes globalshortcut from vars in vars.js
|
||||
console.log('CommandOrControl+X is pressed')
|
||||
//On shortcut kills game exe
|
||||
switch (Execounter) {
|
||||
case 1:
|
||||
exec('taskkill /im ' + GameExe1)
|
||||
break
|
||||
case 2:
|
||||
exec('taskkill /im ' + GameExe2)
|
||||
break
|
||||
case 3:
|
||||
exec('taskkill /im ' + GameExe3)
|
||||
break
|
||||
case 4:
|
||||
exec('taskkill /im ' + GameExe4)
|
||||
break
|
||||
case 5:
|
||||
exec('taskkill /im ' + GameExe5)
|
||||
break
|
||||
case 6:
|
||||
exec('taskkill /im ' + GameExe6)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
})
|
||||
})
|
||||
5854
ui/package-lock.json
generated
5854
ui/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -2,26 +2,38 @@
|
|||
"name": "ui",
|
||||
"version": "1.0.0",
|
||||
"description": "UI pro arcade mach",
|
||||
"main": "main.js",
|
||||
"main": "main.cjs",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"start": "electron-forge start",
|
||||
"package": "electron-forge package",
|
||||
"make": "electron-forge make"
|
||||
"dev": "NODE_ENV=development concurrently \"vite\" \"electron-forge start\"",
|
||||
"package": "vite build && electron-forge package",
|
||||
"make": "vite build && electron-forge make"
|
||||
},
|
||||
"author": "Kryvas",
|
||||
"license": "ISC",
|
||||
"public": false,
|
||||
"type": "module",
|
||||
"devDependencies": {
|
||||
"@electron-forge/cli": "^6.0.5",
|
||||
"@electron-forge/maker-deb": "^6.0.5",
|
||||
"@electron-forge/maker-rpm": "^6.0.5",
|
||||
"@electron-forge/maker-squirrel": "^6.0.5",
|
||||
"@electron-forge/maker-zip": "^6.0.5",
|
||||
"@sveltejs/adapter-node": "^1.2.1",
|
||||
"@sveltejs/kit": "^1.9.3",
|
||||
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
|
||||
"concurrently": "^7.6.0",
|
||||
"electron": "^23.1.0",
|
||||
"electron-packager": "^17.1.1"
|
||||
"electron-packager": "^17.1.1",
|
||||
"svelte": "^3.47.0",
|
||||
"svelte-check": "^3.0.4",
|
||||
"svelte-preprocess": "^5.0.1",
|
||||
"vite": "^4.1.4",
|
||||
"vite-plugin-commonjs-externals": "^0.1.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"electron-squirrel-startup": "^1.0.0",
|
||||
"jquery": "^3.6.3"
|
||||
"jquery": "^3.6.3",
|
||||
"prettier": "^2.8.4",
|
||||
"prettier-plugin-svelte": "^2.9.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
4031
ui/pnpm-lock.yaml
Normal file
4031
ui/pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load diff
10
ui/src/app.d.ts
vendored
Normal file
10
ui/src/app.d.ts
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
// and what to do when importing types
|
||||
declare namespace App {
|
||||
// interface Locals {}
|
||||
// interface Platform {}
|
||||
// interface PrivateEnv {}
|
||||
// interface PublicEnv {}
|
||||
// interface Session {}
|
||||
}
|
||||
13
ui/src/app.html
Normal file
13
ui/src/app.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<style>body { padding: 0; margin: 0; overflow: hidden } * { box-sizing: border-box; }</style>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body>
|
||||
<div>%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
1
ui/src/routes/+layout.js
Normal file
1
ui/src/routes/+layout.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export const ssr = false;
|
||||
90
ui/src/routes/+page.svelte
Normal file
90
ui/src/routes/+page.svelte
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<script>
|
||||
import Game from "./Game.svelte";
|
||||
import { vars } from "./utils";
|
||||
const { ipcRenderer } = require('electron');
|
||||
|
||||
const switchfocus = new Audio('audio/switchfocus.mp3')
|
||||
const startaudio = new Audio('audio/audiostart4.mp3')
|
||||
|
||||
var focusID = -1;
|
||||
|
||||
var ingame = -1;
|
||||
|
||||
ipcRenderer.on('game-start', (event, arg) => {
|
||||
ingame = arg;
|
||||
});
|
||||
|
||||
ipcRenderer.on("game-stop", (event, arg) => {
|
||||
ingame = -1;
|
||||
});
|
||||
|
||||
ipcRenderer.on("game-error", (event, arg) => {
|
||||
ingame = -1;
|
||||
console.error(arg);
|
||||
});
|
||||
|
||||
/**
|
||||
* @param {KeyboardEvent} e
|
||||
*/
|
||||
function keydown(e) {
|
||||
if(![vars.keys.up, vars.keys.down, vars.keys.left, vars.keys.right, vars.keys.start].includes(e.code)) return;
|
||||
|
||||
if(e.code == vars.keys.start && focusID > -1) {
|
||||
ipcRenderer.send('start', focusID);
|
||||
startaudio.pause();
|
||||
startaudio.currentTime = 0;
|
||||
startaudio.play();
|
||||
return;
|
||||
}
|
||||
|
||||
if(e.code == vars.keys.up) {
|
||||
focusID += 3;
|
||||
} else if(e.code == vars.keys.down) {
|
||||
focusID -= 3;
|
||||
} else if(e.code == vars.keys.right) {
|
||||
focusID++;
|
||||
} else if(e.code == vars.keys.left) {
|
||||
focusID--;
|
||||
}
|
||||
if(focusID < 0) focusID = vars.games.length - 1;
|
||||
if(focusID > vars.games.length - 1) focusID = 0;
|
||||
switchfocus.pause();
|
||||
switchfocus.currentTime = 0;
|
||||
switchfocus.play();
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={keydown} />
|
||||
|
||||
<svelte:head>
|
||||
<title>UI</title>
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<div class="hlavnidiv">
|
||||
<div class="container">
|
||||
{#each vars.games as game, i (game)}
|
||||
<Game {game} hasFocus={focusID == i} running={ingame == i} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-gap: 15px;
|
||||
margin-top: 10px;
|
||||
height: 90vh;
|
||||
width: 100vw;
|
||||
padding: 2rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hlavnidiv {
|
||||
aspect-ratio: 3/4;
|
||||
background-image: url("images/BACKGROUND GOOD.png");
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
126
ui/src/routes/Game.svelte
Normal file
126
ui/src/routes/Game.svelte
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
<script>
|
||||
/** @type {{ title: string, image: string }} */
|
||||
export var game;
|
||||
export var hasFocus = false;
|
||||
export var running = false;
|
||||
|
||||
/** @type {HTMLButtonElement} */
|
||||
var button;
|
||||
|
||||
$: if(hasFocus && button) button.focus();
|
||||
</script>
|
||||
|
||||
|
||||
<button
|
||||
class="move"
|
||||
type="button"
|
||||
on:click
|
||||
bind:this={button}
|
||||
on:focus
|
||||
on:blur
|
||||
>
|
||||
<img src="{game.image}" alt="" />
|
||||
<h1 class="sex">{game.title}</h1>
|
||||
{#if running}
|
||||
<button class="running">
|
||||
running
|
||||
</button>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.move {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
border: 3px solid black;
|
||||
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
border-radius: 15px;
|
||||
position: relative;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.move img {
|
||||
content: "";
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.sex {
|
||||
opacity: 0;
|
||||
bottom: 110px;
|
||||
z-index: 1;
|
||||
transition: opacity 1s, bottom 0.8s;
|
||||
position: relative;
|
||||
/* color: rgb(15, 12, 12, 0.88); */
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
@keyframes blik {
|
||||
0% {
|
||||
box-shadow: 0 0 0 3px rgba(255, 254, 254, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 0 3px rgba(255, 254, 254, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 3px rgba(255, 254, 254, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.move:focus {
|
||||
outline: none;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: blik;
|
||||
animation-duration: 1.4s;
|
||||
}
|
||||
|
||||
.move:focus h1 {
|
||||
transition: opacity 1s, bottom 0.8s;
|
||||
z-index: 1;
|
||||
opacity: 0.9;
|
||||
|
||||
bottom: 80px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.move:focus img {
|
||||
opacity: 0.68;
|
||||
/* filter: blur(2.2px); */
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.move img {
|
||||
transition: opacity 0.6s, filter 1s, transform .6s;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
/* filter: blur(0); */
|
||||
}
|
||||
.running {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
background: green;
|
||||
border: none;
|
||||
color: white;
|
||||
font-weight: bolder;
|
||||
font-size: 1.2em;
|
||||
border-radius: 0 0 15px 15px;
|
||||
}
|
||||
</style>
|
||||
2
ui/src/routes/utils.js
Normal file
2
ui/src/routes/utils.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
|
||||
export const vars = require("./vars.json");
|
||||
|
Before Width: | Height: | Size: 219 KiB After Width: | Height: | Size: 219 KiB |
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 165 KiB After Width: | Height: | Size: 165 KiB |
|
Before Width: | Height: | Size: 424 KiB After Width: | Height: | Size: 424 KiB |
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
|
Before Width: | Height: | Size: 210 KiB After Width: | Height: | Size: 210 KiB |
|
Before Width: | Height: | Size: 136 KiB After Width: | Height: | Size: 136 KiB |
|
Before Width: | Height: | Size: 136 KiB After Width: | Height: | Size: 136 KiB |
|
Before Width: | Height: | Size: 428 KiB After Width: | Height: | Size: 428 KiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
107
ui/style.css
107
ui/style.css
|
|
@ -1,107 +0,0 @@
|
|||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-gap: 15px;
|
||||
margin-top: 10px;
|
||||
height: 90vh;
|
||||
width: 100vw;
|
||||
padding: 2rem;
|
||||
margin: 0 auto;
|
||||
/*background-color: rgb(56, 55, 55, 1);*/
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
/* ulehci zivot */
|
||||
}
|
||||
|
||||
.move {
|
||||
display: flex;
|
||||
|
||||
border: 3px solid black;
|
||||
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
border-radius: 15px;
|
||||
position: relative;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.move img {
|
||||
content: "";
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.sex {
|
||||
opacity: 0;
|
||||
bottom: 110px;
|
||||
z-index: 1;
|
||||
transition: opacity 1s, bottom 0.8s;
|
||||
position: relative;
|
||||
/* color: rgb(15, 12, 12, 0.88); */
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
@keyframes blik {
|
||||
0% {
|
||||
box-shadow: 0 0 0 3px rgba(255, 254, 254, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 0 3px rgba(255, 254, 254, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 3px rgba(255, 254, 254, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.move:focus {
|
||||
outline: none;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: blik;
|
||||
animation-duration: 1.4s;
|
||||
}
|
||||
|
||||
.move:focus h1 {
|
||||
transition: opacity 1s, bottom 0.8s;
|
||||
z-index: 1;
|
||||
opacity: 0.9;
|
||||
|
||||
bottom: 80px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.move:focus img {
|
||||
transition: opacity 0.6s, filter 1s;
|
||||
opacity: 0.68;
|
||||
filter: blur(2.2px);
|
||||
}
|
||||
|
||||
.move img {
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
}
|
||||
|
||||
.hlavnidiv {
|
||||
aspect-ratio: 3/4;
|
||||
background-image: url("JPGS/BACKGROUND GOOD.png");
|
||||
background-size: cover;
|
||||
}
|
||||
15
ui/svelte.config.js
Normal file
15
ui/svelte.config.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import adapter from '@sveltejs/adapter-node';
|
||||
import preprocess from 'svelte-preprocess';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: preprocess(),
|
||||
|
||||
kit: {
|
||||
adapter: adapter()
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
13
ui/tsconfig.json
Normal file
13
ui/tsconfig.json
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true
|
||||
}
|
||||
}
|
||||
9
ui/vite.config.js
Normal file
9
ui/vite.config.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
|
||||
/** @type {import('vite').UserConfig} */
|
||||
const config = {
|
||||
plugins: [sveltekit()]
|
||||
};
|
||||
|
||||
export default config;
|
||||
Loading…
Reference in a new issue