monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-12-29 11:26:13 +08:00
Code Issues Projects Releases Packages Wiki Activity

Added custom layoutfluid setting

Browse source
This commit is contained in:
OctahedronV2 2021-05-05 19:47:59 -04:00
parent 240c099c24
commit 518ec33189
9 changed files with 151 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/js/commandline-lists.js
View file

@ -1657,6 +1657,25 @@ export let defaultCommands = {
UpdateConfig.setCustomBackground(input);
},
},
{
id: "changeCustomLayoutfluid",
display: "Change custom layoutfluid...",
defaultValue: "qwerty dvorak colemak",
input: true,
exec: (input) => {
UpdateConfig.setCustomLayoutfluid(input);
UpdateConfig.setLayout(
Config.customLayoutfluid
? Config.customLayoutfluid.split(" ")[0]
: "qwerty"
);
UpdateConfig.setKeymapLayout(
Config.customLayoutfluid
? Config.customLayoutfluid.split(" ")[0]
: "qwerty"
);
},
},
{
id: "changeTheme",
display: "Change theme...",

12
src/js/config.js
View file

@ -1400,6 +1400,17 @@ export function setCustomBackground(value, nosave) {
}
}
export function setCustomLayoutfluid(value, nosave) {
// scuffed solution
if (value == undefined) return;
config.customLayoutfluid = value;
CommandlineLists.defaultCommands.list.filter(
(command) => command.id == "changeCustomLayoutfluid"
)[0].defaultValue = value;
if (!nosave) saveToLocalStorage();
}
export function setCustomBackgroundSize(value, nosave) {
if (value != "cover" && value != "contain" && value != "max") {
value = "cover";
@ -1430,6 +1441,7 @@ export function apply(configObj) {
setTheme(configObj.theme, true);
setCustomThemeColors(configObj.customThemeColors, true);
setCustomTheme(configObj.customTheme, true, true);
setCustomLayoutfluid(configObj.customLayoutfluid, true);
setCustomBackground(configObj.customBackground, true);
setCustomBackgroundSize(configObj.customBackgroundSize, true);
setCustomBackgroundFilter(configObj.customBackgroundFilter, true);

9
src/js/input-controller.js
View file

@ -201,10 +201,15 @@ function handleSpace(event, isEnter) {
let currentWord = TestLogic.words.getCurrent();
if (Funbox.active === "layoutfluid" && Config.mode !== "time") {
const layouts = ["qwerty", "dvorak", "colemak"];
// here I need to check if Config.customLayoutFluid exists because of my scuffed solution of returning whenever value is undefined in the setCustomLayoutfluid function
const layouts = Config.customLayoutfluid
? Config.customLayoutfluid.split(" ")
: ["qwerty", "dvorak", "colemak"];
let index = 0;
let outof = TestLogic.words.length;
index = Math.floor((TestLogic.input.history.length + 1) / (outof / 3));
index = Math.floor(
(TestLogic.input.history.length + 1) / (outof / layouts.length)
);
if (Config.layout !== layouts[index] && layouts[index] !== undefined) {
Notifications.add(`--- !!! ${layouts[index]} !!! ---`, 0);
}

27
src/js/settings.js
View file

@ -277,6 +277,10 @@ async function initGroups() {
"customBackgroundSize",
UpdateConfig.setCustomBackgroundSize
);
groups.customLayoutfluid = new SettingsGroup(
"customLayoutfluid",
UpdateConfig.setCustomLayoutfluid
);
}
async function fillSettingsPage() {
@ -383,6 +387,10 @@ async function fillSettingsPage() {
$(".pageSettings .section.customBackgroundSize input").val(
Config.customBackground
);
$(".pageSettings .section.customLayoutfluid input").val(
Config.customLayoutfluid
);
}
export let settingsFillPromise = fillSettingsPage();
@ -778,3 +786,22 @@ $(".pageSettings .section.customBackgroundSize .inputAndButton input").keypress(
}
}
);
$(".pageSettings .section.customLayoutfluid .inputAndSave .save").on(
"click",
(e) => {
UpdateConfig.setCustomLayoutfluid(
$(".pageSettings .section.customLayoutfluid .inputAndSave input").val()
);
}
);
$(".pageSettings .section.customLayoutfluid .inputAndSave .input").keypress(
(e) => {
if (e.keyCode == 13) {
UpdateConfig.setCustomLayoutfluid(
$(".pageSettings .section.customLayoutfluid .inputAndSave input").val()
);
}
}
);

12
src/js/test/funbox.js
View file

@ -174,14 +174,22 @@ export async function activate(funbox, mode) {
Settings.groups.keymapMode.updateButton();
// UpdateConfig.setSavedLayout(Config.layout);
rememberSetting("layout", Config.layout, UpdateConfig.setLayout);
UpdateConfig.setLayout("qwerty");
UpdateConfig.setLayout(
Config.customLayoutfluid
? Config.customLayoutfluid.split(" ")[0]
: "qwerty"
);
Settings.groups.layout.updateButton();
rememberSetting(
"keymapLayout",
Config.keymapLayout,
UpdateConfig.setKeymapLayout
);
UpdateConfig.setKeymapLayout("qwerty");
UpdateConfig.setKeymapLayout(
Config.customLayoutfluid
? Config.customLayoutfluid.split(" ")[0]
: "qwerty"
);
Settings.groups.keymapLayout.updateButton();
TestLogic.restart();
} else if (funbox === "memory") {

12
src/js/test/test-logic.js
View file

@ -761,8 +761,16 @@ export function restart(withSameWordset = false, nosave = false, event) {
$(".pageTest #premidSecondsLeft").text(Config.time);
if (Funbox.active === "layoutfluid") {
UpdateConfig.setLayout("qwerty");
UpdateConfig.setKeymapLayout("qwerty");
UpdateConfig.setLayout(
Config.customLayoutfluid
? Config.customLayoutfluid.split(" ")[0]
: "qwerty"
);
UpdateConfig.setKeymapLayout(
Config.customLayoutfluid
? Config.customLayoutfluid.split(" ")[0]
: "qwerty"
);
Keymap.highlightKey(
words
.getCurrent()

21
src/js/test/test-timer.js
View file

@ -41,25 +41,30 @@ export function start() {
let acc = Misc.roundTo2(TestStats.calculateAccuracy());
if (Funbox.active === "layoutfluid" && Config.mode === "time") {
const layouts = ["qwerty", "dvorak", "colemak"];
const layouts = Config.customLayoutfluid
? Config.customLayoutfluid.split(" ")
: ["qwerty", "dvorak", "colemak"];
console.log(Config.customLayoutfluid);
console.log(layouts);
const numLayouts = layouts.length;
let index = 0;
index = Math.floor(time / (Config.time / 3));
index = Math.floor(time / (Config.time / numLayouts));
if (
time == Math.floor(Config.time / 3) - 3 ||
time == (Config.time / 3) * 2 - 3
time == Math.floor(Config.time / numLayouts) - 3 ||
time == (Config.time / numLayouts) * 2 - 3
) {
Notifications.add("3", 0, 1);
}
if (
time == Math.floor(Config.time / 3) - 2 ||
time == Math.floor(Config.time / 3) * 2 - 2
time == Math.floor(Config.time / numLayouts) - 2 ||
time == Math.floor(Config.time / numLayouts) * 2 - 2
) {
Notifications.add("2", 0, 1);
}
if (
time == Math.floor(Config.time / 3) - 1 ||
time == Math.floor(Config.time / 3) * 2 - 1
time == Math.floor(Config.time / numLayouts) - 1 ||
time == Math.floor(Config.time / numLayouts) * 2 - 1
) {
Notifications.add("1", 0, 1);
}

23
src/sass/style.scss
View file

@ -2762,6 +2762,29 @@ key {
}
}
// I have no idea what I'm doing so I just copied the customBackgroundSize css and changed numbers so it magically worked.
&.customLayoutfluid {
.inputAndSave {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 0.5rem;
margin-bottom: 0.5rem;
input {
grid-column: 1/3;
}
.save {
grid-column: 3/4;
height: auto;
.fas {
margin-right: 0rem;
vertical-align: sub;
}
}
}
}
&.customBackgroundSize {
.inputAndButton {
display: grid;

33
static/index.html
View file

@ -1555,9 +1555,16 @@
<p>
If you encounter a bug, or have a feature request - join the
<a href="https://discord.gg/yENzqcB" target="_blank">Discord</a>
server, <a href="https://www.reddit.com/users/Miodec" target="_blank">send me a message on Reddit</a> or
<a href="https://github.com/Miodec/monkeytype/issues" target="_blank">
create an issue on GitHub.
server,
<a href="https://www.reddit.com/users/Miodec" target="_blank">
send me a message on Reddit
</a>
or
<a
href="https://github.com/Miodec/monkeytype/issues"
target="_blank"
>
create an issue on GitHub.
</a>
</p>
</div>
@ -2197,6 +2204,26 @@
<div class="buttons"></div>
</div>
<div class="sectionSpacer"></div>
<div class="section customLayoutfluid">
<h1>custom layoutfluid</h1>
<div class="text">
Select which layouts you want the layoutfluid funbox to cycle
through.
</div>
<div class="inputAndSave">
<input
type="text"
placeholder="layouts (separated by space)"
class="input"
tabindex="0"
onClick="this.select();"
/>
<div class="button save" tabindex="0" onclick="this.blur();">
<i class="fas fa-save fa-fw"></i>
</div>
</div>
</div>
<div class="sectionSpacer"></div>
</div>
<div id="group_input" class="sectionGroupTitle" group="input">
input