Skip to content

Commit

Permalink
2.4.0
Browse files Browse the repository at this point in the history 
- Updated dependencies
- Custom frame for Windows and Mac OS
- Dynamically set window height so the height is perfect on all platforms
  • Loading branch information
@CorySanin
CorySanin committed Jul 3, 2019
1 parent 4641c57 commit b2738b0
Show file tree
Hide file tree
Showing 9 changed files with 779 additions and 544 deletions.
34 changes: 31 additions & 3 deletions app.js
View file
Expand Up @@ -4,6 +4,7 @@ const i18n = require('./locales/index.js')
const saveConfig = require('./gamestateIntegration.js').saveConfig
const ipc = require('electron').ipcRenderer
const shell = require('electron').shell
const remote = require('electron').remote
const fs = require('fs-extra')
const download = require('download')
const decompress = require('decompress')
Expand Down Expand Up @@ -36,13 +37,13 @@ function toggleExpanded(){
ipc.send('resize', {
width:380
})
htEntities.body.classList.remove('expanded')
htEntities.content.classList.remove('expanded')
}
else{
ipc.send('resize', {
width:760
width:762
})
htEntities.body.classList.add('expanded')
htEntities.content.classList.add('expanded')
}
expanded = !expanded
}
Expand Down Expand Up @@ -175,6 +176,12 @@ function overlayDown(e){
htEntities.addKitsOverlay.style.display = 'none'
}

function adjustHeight(){
ipc.send('resize', {
height: htEntities.content.clientHeight
})
}

function setEventHandlers(){
let toggles = document.getElementsByClassName('settingstoggle')
for(let i = 0; i < toggles.length; i++){
Expand All @@ -188,6 +195,7 @@ function setEventHandlers(){
htEntities.muteBtn.onclick = toggleMute
htEntities.previewBtn.onclick = togglePreview
htEntities.settingsBtn.onclick = toggleSettingsPane
htEntities.content.onresize = adjustHeight

//preview elements
htEntities.preview.menu.onclick = htEntities.preview.freezetime.onclick =
Expand Down Expand Up @@ -218,6 +226,25 @@ function setEventHandlers(){
htEntities.addKitsOverlay.ondrop = (ev) => {
dropHandler(ev)
}

if(os.platform() === 'win32' || os.platform() === 'darwin'){
document.getElementById('titlebar').style.display = 'block'
if(os.platform() === 'win32'){
document.getElementById('windowControls').style.display = 'block'
document.getElementById('windowIcon').style.display = 'block'
let window = remote.getCurrentWindow()
document.getElementById('minButton').onclick = (ev) => {
window.minimize()
}
document.getElementById('closeButton').onclick = (ev) => {
window.close()
}
}
}
else{
htEntities.body.style.border = 'none'
}
adjustHeight()
}

function doCommand(obj){
Expand Down Expand Up @@ -392,6 +419,7 @@ function tryLoadSettings(){

function getHtEntities(){
htEntities.body = document.getElementsByTagName('body')[0]
htEntities.content = document.getElementById('content')
htEntities.kitSelect = document.getElementById('kit')
htEntities.volumeSlider = document.getElementById('volSlider')
htEntities.portNum = document.getElementById('portNum')
Expand Down
77 changes: 65 additions & 12 deletions css/style.css
View file
@@ -1,11 +1,14 @@
html, body{
font-family:sans-serif;
box-sizing:border-box;
background-color:#212121;
color:#fff;
height:100%;
margin:0px;
overflow:hidden;
font-family:sans-serif;
box-sizing:border-box;
background-color:#212121;
color:#fff;
height:100%;
margin:0px;
overflow:hidden;
}
body{
border:2px solid #111;
}
*, *:before, *:after {
box-sizing:inherit;
Expand All @@ -28,6 +31,7 @@ button, .button{
padding:0 .25em;
text-decoration:none;
cursor:pointer;
user-select:none;
}
button:hover, .button:hover{
background-color:rgba(255,255,255,1);
Expand Down Expand Up @@ -60,7 +64,7 @@ button[disabled][disabled], .button.disabled.disabled.disabled, button[disabled]
margin:4px;
}
.grid > .textareaContainer{
width: auto;
width:auto;
overflow:hidden;
}
.grid > .textareaContainer > textarea{
Expand All @@ -80,7 +84,7 @@ button[disabled][disabled], .button.disabled.disabled.disabled, button[disabled]
.expanded > div{
max-width:calc(50% - 3px);
display:inline-block;
vertical-align:text-top;
vertical-align:top;
}
#coverPic{
margin-top:4px;
Expand All @@ -94,6 +98,9 @@ button[disabled][disabled], .button.disabled.disabled.disabled, button[disabled]
.loading #loading{
display:block;
}
#content{
padding:0;
}
#loading{
z-index:100;
background-color:rgba(25,25,25,.75);
Expand All @@ -102,7 +109,7 @@ button[disabled][disabled], .button.disabled.disabled.disabled, button[disabled]
#loading img{
width:5em;
height:5em;
margin: auto;
margin:auto;
}
#loading,#loading img{
position:absolute;
Expand All @@ -119,8 +126,8 @@ button[disabled][disabled], .button.disabled.disabled.disabled, button[disabled]
right:0;
max-width:initial;
z-index:100;
padding: 2em;
background-color: rgba(0,0,0,.80);
padding:2em;
background-color:rgba(0,0,0,.80);
}
#dragDropOverlay #overlayText{
font-size:18pt;
Expand All @@ -130,3 +137,49 @@ button[disabled][disabled], .button.disabled.disabled.disabled, button[disabled]
border:5px solid #fff;
pointer-events:none;
}
#titlebar{
display:none;
height:32px;
line-height:32px;
background-color:#111;
color:#EEEEEE;
}
#titlebar div, #titlebar span{
padding:0;
text-align:center;
user-select:none;
}
#titlebar #dragRegion{
position:relative;
height:32px;
-webkit-app-region:drag;
padding-top:1px;
}
#titlebar img{
position:absolute;
display:none;
left:4px;
top:4px;
bottom:0;
height:22px;
width:22px;
}
#titlebar #windowControls{
display:none;
position:absolute;
right:0;
top:0;
}
#titlebar #windowControls .tbButton{
display:inline-block;
width:46px;
height:30px;
-webkit-app-region:no-drag;
}
#titlebar #windowControls .tbButton:hover{
background-color:rgba(255,255,255,0.2);
color:#fff;
}
#titlebar #windowControls #closeButton:hover{
background: #E81123;
}
4 changes: 1 addition & 3 deletions gamestateIntegration.js
View file
Expand Up @@ -23,9 +23,7 @@ function saveConfig(config){
},
'data': {
'provider': 1, 'map': 1, 'round': 1, 'player_id': 1, 'allplayers_id': 1,
'player_state': 1, 'allplayers_state': 1, 'allplayers_match_stats': 1,
'allplayers_weapons': 1, 'player_match_stats': 1, 'map_round_wins': 1,
'phase_countdowns': 1
'player_state': 1, 'player_match_stats': 1, 'map_round_wins': 1
}
}
})
Expand Down
12 changes: 12 additions & 0 deletions icon/kitten.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
106 changes: 61 additions & 45 deletions index.html
View file
Expand Up @@ -10,55 +10,71 @@
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
</head>
<body>
<div id="loading">
<img src="assets/loader.svg" alt="Loading..."/>
</div>
<div id="main">
<h1 id="h1" class="center top-margin">Music Kitten</h1>
<div class="relative">
<img id="coverPic" width="150px" height="150px" />
<button id="muteBtn">mute</button>
<div id="content">
<div id="loading">
<img src="assets/loader.svg" alt="Loading..."/>
</div>
<div class="grid">
<label for="volSlider" id="volumeLabel">volume</label>
<input type="range" id="volSlider" min="0" max="1" step=".01" value=".5"/>
<label for="portNum" id="portLabel">port</label><input id="portNum" type="number" value="8793"/>
<label for="kit" id="kitLabel">musickit</label><select id="kit"></select>
<header id="titlebar">
<div id="dragRegion">
<img id="windowIcon" src="icon/kitten.svg" />
<span id="windowTitle">Music Kitten</span>
<div id="windowControls">
<div class="tbButton" id="minButton">
<span>─</span>
</div>
<div class="tbButton" id="closeButton">
<span>✕</span>
</div>
</div>
</div>
</header>
<div id="main">
<h1 id="h1" class="center top-margin">Music Kitten</h1>
<div class="relative">
<img id="coverPic" width="150px" height="150px" />
<button id="muteBtn">mute</button>
</div>
<div class="grid">
<label for="volSlider" id="volumeLabel">volume</label>
<input type="range" id="volSlider" min="0" max="1" step=".01" value=".5"/>
<label for="portNum" id="portLabel">port</label><input id="portNum" type="number" value="8793"/>
<label for="kit" id="kitLabel">musickit</label><select id="kit"></select>
</div>
<div class="fill">
<button id="previewKit">previewkit</button>
<button id="refreshKitsBtn">refreshkits</button>
<button id="dirChange">changedir</button>
<button id="settingsBtn">settings</button>
<button id="saveBtn">save</button>
</div>
</div>
<div class="fill">
<button id="previewKit">previewkit</button>
<button id="refreshKitsBtn">refreshkits</button>
<button id="dirChange">changedir</button>
<button id="settingsBtn">settings</button>
<button id="saveBtn">save</button>
<div id="preview" class="none">
<div class="fill">
<button id="menuPreview" value="menu" title="mainmenu">menu</button>
<button id="freezetimePreview" value="freezetime" title="startround (random)">freezetime</button>
<button id="freezetime1Preview" value="1" title="startround_01">freezetime1</button>
<button id="freezetime2Preview" value="2" title="startround_02">freezetime2</button>
<button id="freezetime3Preview" value="3" title="startround_03">freezetime3</button>
<button id="livePreview" value="live" title="startaction">live</button>
<button id="plantedPreview" value="planted" title="bombplanted -> bombtenseccount">planted</button>
<button id="mvpPreview" value="mvp" title="roundmvpanthem_01">mvp</button>
<button id="winPreview" value="win" title="wonround">win</button>
<button id="losePreview" value="lose" title="lostround">lose</button>
<button id="stopPreview" value="😺">stop</button>
</div>
</div>
</div>
<div id="preview" class="none">
<div class="fill">
<button id="menuPreview" value="menu" title="mainmenu">menu</button>
<button id="freezetimePreview" value="freezetime" title="startround (random)">freezetime</button>
<button id="freezetime1Preview" value="1" title="startround_01">freezetime1</button>
<button id="freezetime2Preview" value="2" title="startround_02">freezetime2</button>
<button id="freezetime3Preview" value="3" title="startround_03">freezetime3</button>
<button id="livePreview" value="live" title="startaction">live</button>
<button id="plantedPreview" value="planted" title="bombplanted -> bombtenseccount">planted</button>
<button id="mvpPreview" value="mvp" title="roundmvpanthem_01">mvp</button>
<button id="winPreview" value="win" title="wonround">win</button>
<button id="losePreview" value="lose" title="lostround">lose</button>
<button id="stopPreview" value="😺">stop</button>
<div id="extrasettings" class="none">
<h1 id="settingsTitle">settings</h1>
<label><input class="settingstoggle" type="checkbox" value="mainmenu"/> <span id="mainmenulabel">mainmenutoggle</span></span></label><br/>
<label><input class="settingstoggle" type="checkbox" value="startround"/> <span id="startroundlabel">startroundtoggle</span></label><br/>
<label><input class="settingstoggle" type="checkbox" value="bombplanted"/> <span id="bombplantedlabel">bombplantedtoggle</span></label><br/>
<label><input class="settingstoggle" type="checkbox" value="mvp"/> <span id="mvplabel">mvptoggle</span></label><br/>
<label><input class="settingstoggle" type="checkbox" value="discordrichpresence" id="discordrichpresence"/> <span id="discordrichpresencelabel">discordrichpresencetoggle</span></label>
</div>
</div>
<div id="extrasettings" class="none">
<h1 id="settingsTitle">settings</h1>
<label><input class="settingstoggle" type="checkbox" value="mainmenu"/> <span id="mainmenulabel">mainmenutoggle</span></span></label><br/>
<label><input class="settingstoggle" type="checkbox" value="startround"/> <span id="startroundlabel">startroundtoggle</span></label><br/>
<label><input class="settingstoggle" type="checkbox" value="bombplanted"/> <span id="bombplantedlabel">bombplantedtoggle</span></label><br/>
<label><input class="settingstoggle" type="checkbox" value="mvp"/> <span id="mvplabel">mvptoggle</span></label><br/>
<label><input class="settingstoggle" type="checkbox" value="discordrichpresence" id="discordrichpresence"/> <span id="discordrichpresencelabel">discordrichpresencetoggle</span></label>
</div>
<div id="dragDropOverlay" class="none">
<div id="overlayText" class="center">
dropkithere
<div id="dragDropOverlay" class="none">
<div id="overlayText" class="center">
dropkithere
</div>
</div>
</div>
</body>
Expand Down
5 changes: 5 additions & 0 deletions locales/README.md
View file
@@ -0,0 +1,5 @@
# Localization

[English](README.md)

Translations are handled by i18next, which pulls from the files in this directory. To contribute, fork this repo, copy the `en-US` translation directory (and name it the appropriate [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag#Syntax_of_language_tags)), and edit the values stored in `translation.json`. Once you've tested that the translation works, submit a pull request.
1 change: 1 addition & 0 deletions main.js
View file
Expand Up @@ -20,6 +20,7 @@ function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({backgroundColor: '#212121',
width: 380, height: 575, resizable: false, maximizable: false, fullscreenable:false,
frame: os.platform() !== 'win32', titleBarStyle: 'hiddenInset',
icon:path.join(__dirname,'icon',(os.platform() == 'win32')?'icon.ico':'icon_512.png')})

// and load the index.html of the app.
Expand Down

0 comments on commit b2738b0

Please sign in to comment.