mirrors/an-anime-game-launcher
1
0
Fork 0
mirror of https://github.com/an-anime-team/an-anime-game-launcher.git synced 2025-03-17 21:50:11 +03:00
Code Issues Projects Releases Packages Wiki Activity

1.7.0

Browse source 
- added dark theme (add themes system at all)

From 1.6.1 preparations:
- fixed default runner installation
- disabled dxvk cache auto-deletion
- added wineserver env to winetricks
- added cabextract requirement
- added roadmap goal (issue #35)
- fixed issue with incorrect wine version unpacking
- added temp unpacking notification to progress bar
  because for some reasons it lags a bit
- removed excess locales
This commit is contained in:
Observer KRypt0n_ 2021-11-27 19:39:35 +02:00
parent 0c34cc947f
commit 51e15e3760
No known key found for this signature in database
GPG key ID: DC5D4EC1303465DA
33 changed files with 549 additions and 525 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
README.md
View file

@ -14,7 +14,7 @@
| Game version | Launcher version | Patch version |
| :---: | :---: | :---: |
| 2.3.0 | 1.6.0 | 2.3.0 testing ⚠️ |
| 2.3.0 | 1.7.0 | 2.3.0 stable ✅ |
We have our own [An Anime Game](https://discord.gg/ck37X6UWBp) discord server where you can ask any questions
@ -130,10 +130,10 @@ npm start
* <s>Add winetricks auto-downloading when new prefix creates so it is no longer required</s> *(1.6.0)*
* <s>DXVK logs auto-deletion option</s> *(1.6.0)*
* <s>Add default wine version to download</s> (Proton-6.20-GE-1) *(1.6.0)*
* Add winetricks and winecfg buttons to settings
* Add dark theme support for settings menu
* <s>Add dark theme support for settings menu</s> *(1.7.0)*
* Add winetricks and winecfg buttons to settings ([issue 35](https://notabug.org/nobody/an-anime-game-launcher/issues/35))
* Fix button flickering at start when the launcher's state updates
* Wine prefix folder selection *(symlinks?)*
* Wine prefix folder selection *(symlinks?)* ([issue 37](https://notabug.org/nobody/an-anime-game-launcher/issues/37))
* Game's update pre-installation
* Screenshots explorer
* Make force launch button when the launcher's repository is unavailable *(waiting for the repository's unavailability lmao)*

5
entry.js
View file

@ -4,7 +4,8 @@ const {
ipcMain,
Notification,
shell,
nativeImage
nativeImage,
nativeTheme
} = require('electron');
const path = require('path');
@ -22,6 +23,8 @@ ipcMain.on('notification', (event, args) => {
new Notification(args).show();
});
ipcMain.on('is-window-dark', (e) => e.returnValue = nativeTheme.shouldUseDarkColors);
ipcMain.handle('open-settings', () => {
const settingsWindow = new BrowserWindow ({
width: 900,

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "an-anime-game-launcher",
"version": "1.6.0",
"version": "1.7.0",
"description": "An Anime Game Linux Launcher",
"author": "Nikita Podvirnyy <suimin.tu.mu.ga.mi@gmail.com>",
"contributors": [

2
public/html/analytics.html
View file

@ -17,7 +17,7 @@
<title i18id="AnalyticsTitle">Yanfei's commission...</title>
</head>
<body>
<body theme="light">
<div class="header">
<img src="../images/yanfei.png">

4
public/html/index.html
View file

@ -16,7 +16,9 @@
<title>An Anime Game Linux Launcher</title>
</head>
<body>
<body theme="light">
<img class="background">
<div id="downloader-panel" class="dark" style="display: none">
<div id="downloader-label">
<span id="downloaded">Downloading</span>

42
public/html/settings.html
View file

@ -17,7 +17,7 @@
<title i18id="SettingsTitle">Settings</title>
</head>
<body class="body">
<body theme="light">
<div class="menu">
<div class="menu-item menu-item-active" anchor="general" i18id="General">General</div>
<div class="menu-item" anchor="enhancements" i18id="Enhancements">Enhancements</div>
@ -52,7 +52,7 @@
<li value="vi-vn">Tiếng Việt (Vietnamese)</li>
</ul>
</div>
<div class="selected-item">
<span>English (US)</span>
@ -73,7 +73,7 @@
<li value="ko-kr">한국어 (Korean)</li>
</ul>
</div>
<div class="selected-item hint--top hint--medium">
<span>English (US)</span>
@ -91,7 +91,7 @@
<li value="default">Default</li>
</ul>
</div>
<div class="selected-item">
<span>Default</span>
@ -101,19 +101,21 @@
<br>
<div class="checkbox" id="discord-rpc">
Discord RPC
<div class="select" id="theme">
<span i18id="Theme">Theme</span>
<div class="checkbox-mark">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" xml:space="preserve"><g><g><path d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/></g></g></svg>
<div class="select-options">
<ul>
<li value="light" i18id="Light">Light</li>
<li value="dark" i18id="Dark">Dark</li>
<li value="system" i18id="System">System</li>
</ul>
</div>
</div>
<div class="checkbox" id="darkmode">
Dark Mode
<div class="selected-item">
<span>System</span>
<div class="checkbox-mark">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" xml:space="preserve"><g><g><path d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/></g></g></svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 330.002 330.002" xml:space="preserve"><path d="M233.252,155.997L120.752,6.001c-4.972-6.628-14.372-7.97-21-3c-6.628,4.971-7.971,14.373-3,21 l105.75,140.997L96.752,306.001c-4.971,6.627-3.627,16.03,3,21c2.698,2.024,5.856,3.001,8.988,3.001 c4.561,0,9.065-2.072,12.012-6.001l112.5-150.004C237.252,168.664,237.252,161.33,233.252,155.997z"/></svg>
</div>
</div>
@ -133,7 +135,7 @@
<li value="mangohud">MangoHud</li>
</ul>
</div>
<div class="selected-item">
<span>None</span>
@ -160,10 +162,18 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" xml:space="preserve"><g><g><path d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/></g></g></svg>
</div>
</div>
<br>
<br>
<div class="checkbox" id="discord-rpc">
Discord RPC
<div class="checkbox-mark">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" xml:space="preserve"><g><g><path d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/></g></g></svg>
</div>
</div>
<br>
</div>
<div class="settings-item" id="runners">

4
public/locales/de.json
View file

@ -6,6 +6,10 @@
"Language": "Sprache",
"Voice": "Sprachpaket",
"VoiceNotification": "Für diese Funktion müssen Sie das neue Sprachpaket manuell im Spiel auswählen.",
"Theme": "Farbschema",
"Light": "Hell",
"Dark": "Dunkel",
"System": "System",
"PreInstallationRequired": "Vorinstallation erförderlich",
"ToggleShadersText": "Verwenden Sie die Home-Taste (POS 1), um Shader im Spiel ein/aus-zuschalten",
"Shaders": "Shadern",

4
public/locales/en-us.json
View file

@ -6,6 +6,10 @@
"Language": "Language",
"Voice": "Voice Pack",
"VoiceNotification": "This feature requires you to manually select the new voice pack in the game",
"Theme": "Theme",
"Light": "Light",
"Dark": "Dark",
"System": "System",
"PreInstallationRequired": "pre-installation required",
"ToggleShadersText": "Use Home button to toggle shaders in the game",
"Shaders": "Shaders",

4
public/locales/en.json
View file

@ -6,6 +6,10 @@
"Language": "Language",
"Voice": "Voice Pack",
"VoiceNotification": "This feature requires you to manually select the new voice pack in the game",
"Theme": "Theme",
"Light": "Light",
"Dark": "Dark",
"System": "System",
"PreInstallationRequired": "pre-installation required",
"ToggleShadersText": "Use Home button to toggle shaders in the game",
"Shaders": "Shaders",

4
public/locales/es.json
View file

@ -6,6 +6,10 @@
"Language": "Language",
"Voice": "Voice Pack",
"VoiceNotification": "This feature requires you to manually select the new voice pack in the game",
"Theme": "Theme",
"Light": "Light",
"Dark": "Dark",
"System": "System",
"PreInstallationRequired": "pre-installation required",
"ToggleShadersText": "Use Home button to toggle shaders in the game",
"Shaders": "Shaders",

4
public/locales/fr.json
View file

@ -6,6 +6,10 @@
"Language": "Language",
"Voice": "Voice Pack",
"VoiceNotification": "This feature requires you to manually select the new voice pack in the game",
"Theme": "Theme",
"Light": "Light",
"Dark": "Dark",
"System": "System",
"PreInstallationRequired": "pre-installation required",
"ToggleShadersText": "Use Home button to toggle shaders in the game",
"Shaders": "Shaders",

4
public/locales/id.json
View file

@ -6,6 +6,10 @@
"Language": "Bahasa",
"Voice": "Paket Suara",
"VoiceNotification": "Fitur ini memerlukan kamu untuk memilih paket suara baru di dalam Game",
"Theme": "Theme",
"Light": "Light",
"Dark": "Dark",
"System": "System",
"PreInstallationRequired": "pra-pemasangan dibutuhkan",
"ToggleShadersText": "Gunakan tombol Home untuk menyalakan/mematikan shader di dalam Game",
"Shaders": "Shader",

4
public/locales/ja.json
View file

@ -6,6 +6,10 @@
"Language": "言語",
"Voice": "ボイスパック",
"VoiceNotification": "この機能を使用するには、ゲーム内の新しいボイスパックを手動で選択する必要があります",
"Theme": "テーマ",
"Light": "ライト",
"Dark": "暗い",
"System": "システム",
"PreInstallationRequired": "事前インストールが必要",
"ToggleShadersText": "ホームボタンを使用してゲーム内のシェーダを切り替えます",
"Shaders": "シェーダ",

4
public/locales/ko.json
View file

@ -6,6 +6,10 @@
"Language": "언어",
"Voice": "음성 팩",
"VoiceNotification": "이 기능을 사용하려면 게임에서 새 음성 팩을 수동으로 선택해야합니다",
"Theme": "테마",
"Light": "빛",
"Dark": "어두운",
"System": "시스템",
"PreInstallationRequired": "사전 설치 필요",
"ToggleShadersText": "홈 버튼을 사용하여 게임에서 쉐이더를 전환하십시오",
"Shaders": "쉐이더",

4
public/locales/pt.json
View file

@ -6,6 +6,10 @@
"Language": "Language",
"Voice": "Voice Pack",
"VoiceNotification": "This feature requires you to manually select the new voice pack in the game",
"Theme": "Theme",
"Light": "Light",
"Dark": "Dark",
"System": "System",
"PreInstallationRequired": "pre-installation required",
"ToggleShadersText": "Use Home button to toggle shaders in the game",
"Shaders": "Shaders",

4
public/locales/ru.json
View file

@ -6,6 +6,10 @@
"Language": "Язык",
"Voice": "Озвучка",
"VoiceNotification": "Эта настройка требует ручного переключения языка озвучки в настройках игры",
"Theme": "Тема",
"Light": "Светлая",
"Dark": "Тёмная",
"System": "Системная",
"PreInstallationRequired": "требуется предустановка",
"ToggleShadersText": "Используйте кнопку Home для переключения шейдеров в игре",
"Shaders": "Шейдеры",

4
public/locales/th.json
View file

@ -6,6 +6,10 @@
"Language": "Language",
"Voice": "Voice Pack",
"VoiceNotification": "This feature requires you to manually select the new voice pack in the game",
"Theme": "Theme",
"Light": "Light",
"Dark": "Dark",
"System": "System",
"PreInstallationRequired": "pre-installation required",
"ToggleShadersText": "Use Home button to toggle shaders in the game",
"Shaders": "Shaders",

4
public/locales/vi.json
View file

@ -6,6 +6,10 @@
"Language": "Language",
"Voice": "Voice Pack",
"VoiceNotification": "This feature requires you to manually select the new voice pack in the game",
"Theme": "Theme",
"Light": "Light",
"Dark": "Dark",
"System": "System",
"PreInstallationRequired": "pre-installation required",
"ToggleShadersText": "Use Home button to toggle shaders in the game",
"Shaders": "Shaders",

4
public/locales/zh-cn.json
View file

@ -6,6 +6,10 @@
"Language": "语言",
"Voice": "语音包",
"VoiceNotification": "This feature requires you to manually select the new voice pack in the game",
"Theme": "Theme",
"Light": "Light",
"Dark": "Dark",
"System": "System",
"PreInstallationRequired": "pre-installation required",
"ToggleShadersText": "Use Home button to toggle shaders in the game",
"Shaders": "Shaders",

4
public/locales/zh-tw.json
View file

@ -6,6 +6,10 @@
"Language": "界面語言",
"Voice": "語音包",
"VoiceNotification": "This feature requires you to manually select the new voice pack in the game",
"Theme": "Theme",
"Light": "Light",
"Dark": "Dark",
"System": "System",
"PreInstallationRequired": "pre-installation required",
"ToggleShadersText": "Use Home button to toggle shaders in the game",
"Shaders": "Shaders",

BIN
repository-pics/launcher-main.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
repository-pics/launcher-settings.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 597 KiB

After

Width:  |  Height:  |  Size: 554 KiB

BIN
repository-pics/logo.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 157 KiB

After

Width:  |  Height:  |  Size: 157 KiB

6
src/sass/basic.sass
View file

@ -4,6 +4,12 @@ body
margin: 0
padding: 0
img.background
position: absolute
width: 100%
height: 100%
::-webkit-scrollbar
width: 10px

718
src/sass/components.sass
View file

@ -1,416 +1,372 @@
$light: #f1f4f9
$light2: #eff2ff
$primary: #657ef8
$secondary: #e1e7ff
@use "sass:map"
$dark: #3B4252
$dark2: #2E3440
$dark3: #4C566A
$dark-fg-disabled: #D8DEE9
$dark-fg: #ECEFF4
@import "themes/light"
@import "themes/dark"
/* Editable list of properties */
@mixin themable($theme-name, $theme-map)
body[theme=#{$theme-name}]
.properties-list
table
width: 100%
background-color: map.get($theme-map, "background")
color: map.get($theme-map, "text")
border-spacing: 0
p, span, div
color: map.get($theme-map, "text")
$cell-height: 40px
$padding-v: 4px
$padding-h: 8px
/* Editable list of properties */
tr
height: $cell-height
.properties-list
table
width: 100%
border-spacing: 0
$cell-height: 40px
$padding-v: 4px
$padding-h: 8px
tr
height: $cell-height
cursor: pointer
&:hover
background-color: map.get($theme-map, "background1")
td:nth-of-type(1),
th:nth-of-type(1)
width: 60%
th,
td
border-bottom: 1px solid map.get($theme-map, "background1")
&:not(:last-child)
border-right: 1px solid map.get($theme-map, "background1")
td
span
display: block
width: calc(100% - 2 * $padding-h)
height: calc($cell-height - 2 * $padding-h)
margin: auto
input
display: none
width: calc(100% - 2 * $padding-h)
height: calc($cell-height - 2 * $padding-h)
background-color: map.get($theme-map, "background2")
color: map.get($theme-map, "text")
font-size: 15px
margin: auto
border: unset
outline: none
.selected
background-color: map.get($theme-map, "background2") !important
input
display: block
span
display: none
.properties-list-buttons
width: 100%
margin-top: 16px
display: inline-flex
justify-content: flex-end
.button:not(:last-child)
margin-right: 8px
/* List of buttons */
.list-item
display: flex
align-items: center
height: 52px
margin-bottom: 8px
padding: 0 12px
border-radius: 12px
background-color: map.get($theme-map, "background1")
font-size: 18px
cursor: pointer
@if $theme-name == dark
img
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
&:hover
background-color: map.get($theme-map, "background2")
> div
width: auto
height: 52px
min-width: 52px
margin-left: auto
display: flex
align-items: center
img
width: 16px
height: 16px
margin: auto
img.item-delete
// filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%)
width: 20px
height: 20px
display: none
.list-item-active
background-color: map.get($theme-map, "primary") !important
color: white !important
img.item-delete
display: none !important
.list-item-disabled
background-color: map.get($theme-map, "background1") !important
color: #abadbd !important
cursor: default !important
img
filter: invert(70%) sepia(13%) saturate(241%) hue-rotate(196deg) brightness(97%) contrast(91%)
.list-item-downloading
img
display: none !important
.list-item-downloaded
> div
img.item-download
display: none
img.item-delete
display: block
/* Checkbox */
.checkbox
display: inline-flex !important
align-items: center
font-size: larger
width: calc(100% - 24px)
height: 48px
padding: 0 12px
border-radius: 12px
.checkbox-mark
display: flex
background-color: map.get($theme-map, "background2")
border-radius: 16px
margin-left: auto
padding: 8px 16px
cursor: pointer
&:hover
background-color: map.get($theme-map, "primary")
svg
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
svg
height: 12px
width: 12px
@if $theme-name == dark
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
.checkbox-disabled
background-color: map.get($theme-map, "background1")
.checkbox-mark
display: none
.checkbox-active
.checkbox-mark
background-color: map.get($theme-map, "primary")
svg
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
.selectable-checkbox
cursor: pointer
&:hover
background-color: $light
background-color: map.get($theme-map, "background2")
td:nth-of-type(1),
th:nth-of-type(1)
width: 60%
.checkbox-active:is(.selectable-checkbox)
background-color: map.get($theme-map, "background2")
th,
td
border-bottom: 1px solid $light
/* Select box */
&:not(:last-child)
border-right: 1px solid $light
td
span
display: block
.select
display: inline-flex
align-items: center
width: calc(100% - 2 * $padding-h)
height: calc($cell-height - 2 * $padding-h)
font-size: larger
margin: auto
width: calc(100% - 24px)
height: 48px
padding: 0 12px
input
display: none
border-radius: 12px
width: calc(100% - 2 * $padding-h)
height: calc($cell-height - 2 * $padding-h)
background-color: $light2
font-size: 15px
margin: auto
border: unset
outline: none
.selected
background-color: $light2 !important
input
display: block
span
.select-options
position: absolute
display: none
.properties-list-buttons
width: 100%
margin-top: 16px
max-height: 230px
overflow: auto
display: inline-flex
justify-content: flex-end
background-color: map.get($theme-map, "select-boxes")
border-radius: 12px
.button:not(:last-child)
margin-right: 8px
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .2)
.properties-list-dark
table
tr
&:hover
background-color: $dark3
td
input
background-color: $dark2
color: $dark-fg
.selected
background-color: $dark2 !important
/* List of buttons */
.list-item
display: flex
align-items: center
height: 52px
margin-bottom: 8px
padding: 0 12px
border-radius: 12px
background-color: $light
font-size: 18px
cursor: pointer
&:hover
background-color: $light2
> div
width: auto
height: 52px
min-width: 52px
margin-left: auto
display: flex
align-items: center
img
width: 16px
height: 16px
margin: auto
img.item-delete
// filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%)
width: 20px
height: 20px
display: none
.list-item-dark
background-color: $dark2
&:hover
background-color: $dark
.list-item-active
background-color: $primary !important
color: white !important
img.item-delete
display: none !important
.list-item-disabled
background-color: $light !important
color: #abadbd !important
cursor: default !important
img
filter: invert(70%) sepia(13%) saturate(241%) hue-rotate(196deg) brightness(97%) contrast(91%)
.list-item-downloading
img
display: none !important
.list-item-downloaded
> div
img.item-download
display: none
img.item-delete
display: block
/* Checkbox */
.checkbox
display: inline-flex !important
align-items: center
font-size: larger
width: calc(100% - 24px)
height: 48px
padding: 0 12px
border-radius: 12px
.checkbox-mark
display: flex
background-color: $light2
border-radius: 16px
margin-left: auto
padding: 8px 16px
cursor: pointer
&:hover
background-color: $primary
svg
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
svg
height: 12px
width: 12px
.checkbox-dark
.checkbox-mark
background-color: $dark2
svg
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
.checkbox-disabled
background-color: $light
.checkbox-mark
display: none
.checkbox-disabled-dark
background-color: $dark
color: $dark3
.checkbox-mark
display: none
.checkbox-active
.checkbox-mark
background-color: $primary
svg
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
.selectable-checkbox
cursor: pointer
&:hover
background-color: $light2
.checkbox-active:is(.selectable-checkbox)
background-color: $light2
/* Select box */
.select
display: inline-flex
align-items: center
font-size: larger
width: calc(100% - 24px)
height: 48px
padding: 0 12px
border-radius: 12px
.select-options
position: absolute
display: none
max-height: 230px
overflow: auto
background-color: white
border-radius: 12px
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .2)
padding: 8px 12px
transform: translateY(calc(50% + 32px))
right: 32px
cursor: pointer
z-index: 1
ul
list-style: none
padding: 0
margin: 0
li
color: #8592a3
font-size: smaller
border-radius: 8px
padding: 8px 12px
margin: 0 -4px
transform: translateY(calc(50% + 32px))
&:hover:not([disabled])
background-color: $light2
color: $primary
right: 32px
&[disabled]
display: block
color: #b2c0d3
cursor: default
cursor: pointer
li:not(last-child)
margin-bottom: 4px
z-index: 1
li.selected
background-color: $light2
color: $primary
@if $theme-name == dark
&::-webkit-scrollbar-track
background-color: map.get($theme-map, "background2")
.select-options-dark
background-color: $dark2
&::-webkit-scrollbar-thumb
background: #d8dee9
&::-webkit-scrollbar-track
background-color: $dark2
&:hover
background: #e5e9f0
&::-webkit-scrollbar-thumb
background: #D8DEE9
ul
list-style: none
padding: 0
margin: 0
li
color: #8592a3
font-size: smaller
border-radius: 8px
padding: 8px 12px
margin: 0 -4px
&:hover:not([disabled])
background-color: map.get($theme-map, "background2")
color: map.get($theme-map, "primary")
&[disabled]
display: block
color: #b2c0d3
cursor: default
li:not(last-child)
margin-bottom: 4px
li.selected
background-color: map.get($theme-map, "background2")
color: map.get($theme-map, "primary")
.selected-item
display: flex
align-items: baseline
font-size: initial
background-color: map.get($theme-map, "background2")
border-radius: 16px
margin-left: auto
padding: 8px 16px
cursor: pointer
&:hover
background-color: map.get($theme-map, "primary")
span
color: white
svg
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
svg
height: 12px
width: 12px
margin-left: 8px
transform: rotate(90deg)
@if $theme-name == dark
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
.select-active
.selected-item
background-color: map.get($theme-map, "primary")
span
color: white
svg
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
.select-options
display: block
/* Buttons */
.button
background-color: map.get($theme-map, "background1")
border-radius: 16px
border: none
cursor: pointer
font-size: 16px
padding: 8px 20px
color: map.get($theme-map, "text")
&:hover
background: #E5E9F0
background-color: map.get($theme-map, "background2")
ul
li
color: $dark-fg
.button-primary
background-color: map.get($theme-map, "background2")
&:hover:not([disabled])
background-color: $dark
&[disabled]
color: $dark3
li.selected
background-color: $dark
&:hover
background-color: map.get($theme-map, "primary")
color: white
.selected-item
display: flex
align-items: baseline
font-size: initial
background-color: $light2
border-radius: 16px
margin-left: auto
padding: 8px 16px
cursor: pointer
&:hover
background-color: $primary
color: white
svg
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
svg
height: 12px
width: 12px
margin-left: 8px
transform: rotate(90deg)
.selected-item-dark
background-color: $dark2
&:hover
background-color: $dark
svg
filter: invert(100%)
.select-active
.selected-item
color: white
background-color: $primary
svg
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(102%) contrast(104%)
.select-options
display: block
/* Buttons */
.button
background-color: $light
border-radius: 16px
border: none
cursor: pointer
font-size: 16px
padding: 8px 20px
&:hover
background-color: $secondary
.button-primary
background-color: $secondary
&:hover
background-color: $primary
color: white
.button-dark
background-color: $dark2
color: $dark-fg
&:hover
background-color: $dark
@include themable(light, $light)
@include themable(dark, $dark)

127
src/sass/settings.sass
View file

@ -1,93 +1,86 @@
@use "sass:map"
@import "basic"
.body
background-color: rgb(245, 246, 251)
.body-dark
background-color: #2E3440
@import "themes/light"
@import "themes/dark"
&::-webkit-scrollbar-track
background: #2E3440
@mixin themable($theme-name, $theme-map)
$menu-background: white
@if $theme-name == dark
$menu-background: #434c5e
.menu
position: absolute
width: 200px
body[theme=#{$theme-name}]
background-color: map.get($theme-map, "background")
top: 0
bottom: 0
@if $theme-name == dark
&::-webkit-scrollbar-track
background: #2e3440
margin: 16px 32px
padding: 12px 16px
.menu
position: absolute
width: 200px
border-radius: 16px
top: 0
bottom: 0
background-color: white
box-shadow: none
margin: 16px 32px
padding: 12px 16px
.menu-dark
background-color: #434C5E
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.28)
border-radius: 16px
.menu-item
display: flex
align-items: center
background-color: $menu-background
box-shadow: none
height: 52px
margin-bottom: 8px
padding: 0 12px
.menu-item
display: flex
align-items: center
border-radius: 12px
color: black
height: 52px
margin-bottom: 8px
padding: 0 12px
font-size: 18px
cursor: pointer
border-radius: 12px
color: map.get($theme-map, "text")
.menu-item-dark
color: #ECEFF4
font-size: 18px
cursor: pointer
.menu-item-active,
.menu-item:hover
background-color: #eff2ff
// background-color: #4C566A
color: #657ef8
.menu-item-active,
.menu-item:hover
background-color: map.get($theme-map, "background2")
color: map.get($theme-map, "primary")
.menu-item-active-dark,
.menu-item-dark:hover
//background-color: #eff2ff
background-color: #4C566A
color: #657ef8
.settings
position: absolute
width: 532px
.settings
position: absolute
width: 532px
top: 0
bottom: 0
left: 258px
top: 0
bottom: 0
left: 258px
margin: 16px 32px
padding: 0 24px
margin: 16px 32px
padding: 0 24px
background-color: $menu-background
color: black
border-radius: 16px
background-color: white
color: black
border-radius: 16px
overflow: auto
overflow: auto
@if $theme-name == dark
&::-webkit-scrollbar-track
background: #434c5e
.settings-dark
background-color: #434C5E
color: #ECEFF4
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.28)
&::-webkit-scrollbar-thumb
background: #d8dee9
&::-webkit-scrollbar-track
background: #434C5E
&:hover
background: #e5e9f0
&::-webkit-scrollbar-thumb
background: #D8DEE9
.settings-item:last-child
margin-bottom: 24px
&:hover
background: #E5E9F0
.settings-item:last-child
margin-bottom: 24px
@include themable(light, $light)
@include themable(dark, $dark)

3
src/sass/themes/dark.sass Normal file
View file

@ -0,0 +1,3 @@
@use "sass:map"
$dark: ("background": #3b4252, "background1": #2e3440, "background2": #4c566a, "primary": #657ef8, "secondary": #eceff4, "text": white, "text-inverse": black, "select-boxes": #434c5e)

3
src/sass/themes/light.sass Normal file
View file

@ -0,0 +1,3 @@
@use "sass:map"
$light: ("background": #f5f6fb, "background1": #f1f4f9, "background2": #eff2ff, "primary": #657ef8, "secondary": #e1e7ff, "text": black, "text-inverse": white, "select-boxes": white)

2
src/ts/analytics.ts
View file

@ -8,6 +8,8 @@ import LauncherUI from './lib/LauncherUI';
$(() => {
LauncherUI.updateLang(LauncherLib.getConfig('lang.launcher'));
$('body').attr('theme', LauncherUI.theme);
$('#participate').on('click', async () => {
await fetch(`https://an-anime-game-launcher.000webhostapp.com${ !$('#share-country').hasClass('checkbox-active') ? '/?hide-geo' : '' }`);

2
src/ts/index.ts
View file

@ -27,6 +27,8 @@ if (!fs.existsSync(constants.dxvksDir))
fs.mkdirSync(constants.dxvksDir, { recursive: true });
$(() => {
$('body').attr('theme', LauncherUI.theme);
document.title = `${constants.placeholders.uppercase.full} Linux Launcher`;
if (LauncherLib.version !== null)

2
src/ts/lib/LauncherLib.ts
View file

@ -36,7 +36,7 @@ const config = new store ({
gamemode: false, // GameMode
gpu: 'default', // GPU
autodelete_dxvk_logs: false, // Auto-delete DXVK logs
darkmode: false,
theme: 'system', // light / dark / system
// Version of the game we asked about analytics last time,
// or null if user said don't ask him again

23
src/ts/lib/LauncherUI.ts
View file

@ -1,3 +1,5 @@
const { ipcRenderer } = require('electron');
import $ from 'cash-dom';
import constants from './constants';
@ -15,6 +17,8 @@ type LauncherState =
'game-voice-update-required' |
'game-launch-available';
type Theme = 'light' | 'dark';
export default class LauncherUI
{
protected static _launcherState: LauncherState = 'game-launch-available';
@ -231,11 +235,13 @@ export default class LauncherUI
public static updateBackground (): void
{
LauncherLib.getBackgroundUri().then(uri => {
const style = `url(${uri})`;
if ($('body').css('background-image') != style)
if ($('img.background').attr('src') != uri)
{
$('body').css('background-image', style);
$('img.background').attr('src', uri);
// TODO
/*if (LauncherLib.getConfig('darken_background'))
$('img.background').css('filter', this.theme == 'dark' ? 'brightness(0.75)' : '');*/
/**
* Calculating background's left-bottom corner mean brightness
@ -307,4 +313,13 @@ export default class LauncherUI
element.innerText = this.i18n.translate(element.getAttribute('i18id')!);
});
}
public static get theme(): Theme
{
const theme: Theme | 'system' = LauncherLib.getConfig('theme');
return theme === 'system' ?
(ipcRenderer.sendSync('is-window-dark') ? 'dark' : 'light') :
theme;
}
}

69
src/ts/settings.ts
View file

@ -18,28 +18,20 @@ $(() => {
// Make sure settings is shown in correct language.
LauncherUI.updateLang(LauncherLib.getConfig('lang.launcher') ?? 'en-us');
$('body').attr('theme', LauncherUI.theme);
$('.menu-item').on('click', (e) => {
$('.settings')[0]!.scrollTop = document.getElementById(e.target.getAttribute('anchor'))!.offsetTop - 16;
$('.menu-item').removeClass('menu-item-active');
$('.menu-item').removeClass('menu-item-active-dark');
$(e.target).addClass(
LauncherLib.getConfig('darkmode') ?
'menu-item-active-dark' :
'menu-item-active'
);
$(e.target).addClass('menu-item-active');
});
$('.settings').on('scroll', () => {
const anchor = $('.settings-item').filter((index, item) => $(item).offset()!.top < 180).last()[0]!.id; // 264
$('.menu-item').removeClass('menu-item-active');
$('.menu-item').removeClass('menu-item-active-dark');
$(`.menu-item[anchor=${anchor}]`).addClass(
LauncherLib.getConfig('darkmode') ?
'menu-item-active-dark' :
'menu-item-active'
);
$(`.menu-item[anchor=${anchor}]`).addClass('menu-item-active');
});
/**
@ -83,6 +75,23 @@ $(() => {
$('#voicepack .selected-item').attr('data-hint', LauncherUI.i18n.translate('VoiceNotification'));
/**
* Theme
*/
$(`#theme li[value=${LauncherLib.getConfig('theme')}]`).addClass('selected');
$('#theme .selected-item span').text($(`#theme li[value=${LauncherLib.getConfig('theme')}]`).text());
$('#theme').on('selectionChanged', (e, data: any) => {
if (LauncherLib.getConfig('theme') != data.value)
{
LauncherLib.updateConfig('theme', data.value);
// Not `data.value` because we don't have "system" theme
$('body').attr('theme', LauncherUI.theme);
}
});
/**
* HUD
*/
@ -115,42 +124,6 @@ $(() => {
ipcRenderer.send('rpc-toggle');
});
/**
* Dark Mode
*/
let darkMode = LauncherLib.getConfig('darkmode');
const toggledItem: string[] =
['menu', 'menu-item', 'menu-item-active',
'settings', 'list-item', 'selected-item',
'select-options', 'checkbox', 'checkbox-disabled',
'properties-list', 'button'];
if (darkMode === true) {
$('#darkmode').addClass('checkbox-active');
$('body').addClass('body-dark');
toggledItem.forEach((e:string) =>{
$(`.${e}`).addClass(`${e}-dark`);
})
}
if (darkMode === false) {
$('#darkmode').removeClass('checkbox-active');
$('body').removeClass('body-dark');
toggledItem.forEach((e:string) =>{
$(`.${e}`).removeClass(`${e}-dark`);
})
}
$('#darkmode').on('classChange', () => {
LauncherLib.updateConfig('darkmode', $('#darkmode').hasClass('checkbox-active'));
$('body').toggleClass('body-dark');
toggledItem.forEach(e =>{
$(`.${e}`).toggleClass(`${e}-dark`);
})
});
/**
* Auto-delete DXVK logs
*/