{
+ alertsOpen++;
return new Promise((resolve) => {
const popupWrap = document.createElement("div");
document.body.appendChild(popupWrap);
popupWrap.className = "popup";
- function closeWithResult(value) {
+ function closeWithResult(value: t | void) {
resolve(value);
// Doing this async lets the menu scroll persist if it's shown a second time
setTimeout(() => {
@@ -2145,16 +2430,16 @@ function asyncAlert({
if (allowClose) {
const closeButton = document.createElement("button");
- closeButton.title = "close"
- closeButton.className = "close-modale"
- closeButton.addEventListener('click', (e) => {
- e.preventDefault()
- closeWithResult(null)
- })
+ closeButton.title = "close";
+ closeButton.className = "close-modale";
+ closeButton.addEventListener("click", (e) => {
+ e.preventDefault();
+ closeWithResult(null);
+ });
closeModal = () => {
- closeWithResult(null)
- }
- popupWrap.appendChild(closeButton)
+ closeWithResult(null);
+ };
+ popupWrap.appendChild(closeButton);
}
const popup = document.createElement("div");
@@ -2171,46 +2456,51 @@ function asyncAlert({
popup.appendChild(p);
}
- actions.filter(i => i).forEach(({text, value, help, disabled, icon = ''}) => {
- const button = document.createElement("button");
+ actions
+ .filter((i) => i)
+ .forEach(({text, value, help, disabled, icon = ""}) => {
+ const button = document.createElement("button");
- button.innerHTML = `
+ button.innerHTML = `
${icon}
${text}
- ${help || ''}
+ ${help || ""}
`;
-
- if (disabled) {
- button.setAttribute("disabled", "disabled");
- } else {
- button.addEventListener("click", (e) => {
- e.preventDefault();
- closeWithResult(value)
- });
- }
- popup.appendChild(button);
- });
+ if (disabled) {
+ button.setAttribute("disabled", "disabled");
+ } else {
+ button.addEventListener("click", (e) => {
+ e.preventDefault();
+ closeWithResult(value);
+ });
+ }
+ popup.appendChild(button);
+ });
if (textAfterButtons) {
const p = document.createElement("div");
- p.className = 'textAfterButtons'
+ p.className = "textAfterButtons";
p.innerHTML = textAfterButtons;
popup.appendChild(p);
}
-
popupWrap.appendChild(popup);
- (popup.querySelector('button:not([disabled])') as HTMLButtonElement)?.focus()
- }).then((v) => {
- alertsOpen--
- closeModal=null
- return v
- }, ()=>{
- closeModal=null
- alertsOpen--
- })
+ (
+ popup.querySelector("button:not([disabled])") as HTMLButtonElement
+ )?.focus();
+ }).then(
+ (v: t | null) => {
+ alertsOpen--;
+ closeModal = null;
+ return v;
+ },
+ () => {
+ closeModal = null;
+ alertsOpen--;
+ },
+ );
}
// Settings
@@ -2219,7 +2509,9 @@ let cachedSettings = {};
function isSettingOn(key) {
if (typeof cachedSettings[key] == "undefined") {
try {
- cachedSettings[key] = JSON.parse(localStorage.getItem("breakout-settings-enable-" + key),);
+ cachedSettings[key] = JSON.parse(
+ localStorage.getItem("breakout-settings-enable-" + key),
+ );
} catch (e) {
console.warn(e);
}
@@ -2238,29 +2530,37 @@ function toggleSetting(key) {
if (options[key].afterChange) options[key].afterChange();
}
-
scoreDisplay.addEventListener("click", async (e) => {
e.preventDefault();
- openScorePanel()
+ openScorePanel();
});
async function openScorePanel() {
- pause(true)
+ pause(true);
const cb = await asyncAlert({
- title: ` ${score} points at level ${currentLevel + 1} / ${max_levels()}`, text: `
+ title: ` ${score} points at level ${currentLevel + 1} / ${max_levels()}`,
+ text: `
Upgrades picked so far :
${pickedUpgradesHTMl()}
- `, allowClose: true, actions: [{
- text: 'Resume', help: "Return to your run",
- }, {
- text: "Restart", help: "Start a brand new run.", value: () => {
- restart();
- return true;
+ `,
+ allowClose: true,
+ actions: [
+ {
+ text: "Resume",
+ help: "Return to your run",
},
- }],
+ {
+ text: "Restart",
+ help: "Start a brand new run.",
+ value: () => {
+ restart();
+ return true;
+ },
+ },
+ ],
});
if (cb) {
- await cb()
+ await cb();
}
}
@@ -2269,149 +2569,137 @@ document.getElementById("menu").addEventListener("click", (e) => {
openSettingsPanel();
});
-
const options = {
sound: {
- default: true, name: `Game sounds`, help: `Can slow down some phones.`, disabled: () => false
- }, "mobile-mode": {
+ default: true,
+ name: `Game sounds`,
+ help: `Can slow down some phones.`,
+ disabled: () => false,
+ },
+ "mobile-mode": {
default: window.innerHeight > window.innerWidth,
name: `Mobile mode`,
help: `Leaves space for your thumb.`,
afterChange() {
fitSize();
},
- disabled: () => false
- }, basic: {
- default: false, name: `Basic graphics`, help: `Better performance on older devices.`, disabled: () => false
- }, pointerLock: {
+ disabled: () => false,
+ },
+ basic: {
+ default: false,
+ name: `Basic graphics`,
+ help: `Better performance on older devices.`,
+ disabled: () => false,
+ },
+ pointerLock: {
default: false,
name: `Mouse pointer lock`,
help: `Locks and hides the mouse cursor.`,
- disabled: () => !canvas.requestPointerLock
- }, "easy": {
+ disabled: () => !canvas.requestPointerLock,
+ },
+ easy: {
default: false,
name: `Kids mode`,
help: `Start future runs with "slower ball".`,
- disabled: () => false
+ disabled: () => false,
}, // Could not get the sharing to work without loading androidx and all the modern android things so for now i'll just disable sharing in the android app
- "record": {
+ record: {
default: false,
name: `Record gameplay videos`,
help: `Get a video of each level.`,
disabled() {
- return window.location.search.includes('isInWebView=true')
- }
- }
+ return window.location.search.includes("isInWebView=true");
+ },
+ },
};
async function openSettingsPanel() {
-
- pause(true)
+ pause(true);
const optionsList = [];
for (const key in options) {
- if (options[key]) optionsList.push({
- disabled: options[key].disabled(),
- icon: isSettingOn(key) ? icons['icon:checkmark_checked'] : icons['icon:checkmark_unchecked'],
- text: options[key].name,
- help: options[key].help,
- value: () => {
- toggleSetting(key)
- openSettingsPanel();
- },
- });
+ if (options[key])
+ optionsList.push({
+ disabled: options[key].disabled(),
+ icon: isSettingOn(key)
+ ? icons["icon:checkmark_checked"]
+ : icons["icon:checkmark_unchecked"],
+ text: options[key].name,
+ help: options[key].help,
+ value: () => {
+ toggleSetting(key);
+ openSettingsPanel();
+ },
+ });
}
- const cb = await asyncAlert({
- title: "Breakout 71", text: `
- `, allowClose: true, actions: [{
- text: 'Resume', help: "Return to your run", async value() {
-
- }
- }, {
- text: 'Starting perk', help: "Try perks and levels you unlocked", async value() {
- const ts = getTotalScore()
- const actions = [...upgrades
- .sort((a, b) => a.threshold - b.threshold)
- .map(({
- name, help, id, threshold, icon, fullHelp
- }) => ({
- text: name,
- help: ts >= threshold ? fullHelp || help : `Unlocks at total score ${threshold}.`,
- disabled: ts < threshold,
- value: {perks: {[id]: 1}},
- icon: icons['icon:' + id]
- }))
-
- , ...allLevels
- .sort((a, b) => a.threshold - b.threshold)
- .map((l, li) => {
- const avaliable = ts >= l.threshold
- return ({
- text: l.name,
- help: avaliable ? `A ${l.size}x${l.size} level with ${l.bricks.filter(i => i).length} bricks` : `Unlocks at total score ${l.threshold}.`,
- disabled: !avaliable,
- value: {level: l.name},
- icon: icons[l.name]
- })
- })]
-
- const tryOn = await asyncAlert({
- title: `You unlocked ${Math.round(actions.filter(a => !a.disabled).length / actions.length * 100)}% of the game.`,
- text: `
- Your total score is ${ts}. Below are all the upgrades and levels the games has to offer. They greyed out ones can be unlocked by increasing your total score.
- `,
- textAfterButtons: `
-The total score increases every time you score in game.
-Your high score is ${highScore}.
-Click an item above to start a run with it.
-
`,
- actions,
- allowClose: true,
- })
- if (tryOn) {
- if (!currentLevel || await asyncAlert({
- title: 'Restart run to try this item?',
- text: 'You\'re about to start a new run with the selected unlocked item, is that really what you wanted ? ',
- actions: [{
- value: true, text: 'Restart game to test item'
- }, {
- value: false, text: 'Cancel'
- }]
- })) nextRunOverrides = tryOn
- restart()
- }
- }
- },
+ const cb = await asyncAlert<() => void>({
+ title: "Breakout 71",
+ text: `
+ `,
+ allowClose: true,
+ actions: [
+ {
+ text: "Resume",
+ help: "Return to your run",
+ async value() {
+ },
+ },
+ {
+ text: "Starting perk",
+ help: "Try perks and levels you unlocked",
+ async value() {
+ openUnlocksList()
+ },
+ },
...optionsList,
- (document.fullscreenEnabled || document.webkitFullscreenEnabled) && (document.fullscreenElement !== null ? {
- text: "Exit Fullscreen",
- icon:icons['icon:exit_fullscreen'],
- help: "Might not work on some machines", value() {
- toggleFullScreen()
+ (document.fullscreenEnabled || document.webkitFullscreenEnabled) &&
+ (document.fullscreenElement !== null
+ ? {
+ text: "Exit Fullscreen",
+ icon: icons["icon:exit_fullscreen"],
+ help: "Might not work on some machines",
+ value() {
+ toggleFullScreen();
+ },
}
- } : {
- icon:icons['icon:fullscreen'],
- text: "Fullscreen", help: "Might not work on some machines", value() {
- toggleFullScreen()
- }
- }), {
- text: 'Reset Game', help: "Erase high score and statistics", async value() {
- if (await asyncAlert({
- title: 'Reset', actions: [{
- text: 'Yes', value: true
- }, {
- text: 'No', value: false
- }], allowClose: true,
- })) {
- localStorage.clear()
- window.location.reload()
+ : {
+ icon: icons["icon:fullscreen"],
+ text: "Fullscreen",
+ help: "Might not work on some machines",
+ value() {
+ toggleFullScreen();
+ },
+ }),
+ {
+ text: "Reset Game",
+ help: "Erase high score and statistics",
+ async value() {
+ if (
+ await asyncAlert({
+ title: "Reset",
+ actions: [
+ {
+ text: "Yes",
+ value: true,
+ },
+ {
+ text: "No",
+ value: false,
+ },
+ ],
+ allowClose: true,
+ })
+ ) {
+ localStorage.clear();
+ window.location.reload();
}
-
- }
- }], textAfterButtons: `
+ },
+ },
+ ],
+ textAfterButtons: `
Made in France by Renan LE CARO .
Privacy Policy
@@ -2423,44 +2711,115 @@ Click an item above to start a run with it.
HackerNews
v.${appVersion}
- `
- })
+ `,
+ });
if (cb) {
- cb()
+ cb();
+ }
+}
+
+async function openUnlocksList() {
+
+ const ts = getTotalScore();
+ const actions = [
+ ...upgrades
+ .sort((a, b) => a.threshold - b.threshold)
+ .map(({name, id, threshold, icon, fullHelp}) => ({
+ text: name,
+ help:
+ ts >= threshold
+ ? fullHelp
+ : `Unlocks at total score ${threshold}.`,
+ disabled: ts < threshold,
+ value: {perk: id} as RunOverrides,
+ icon,
+ })),
+ ...allLevels
+ .sort((a, b) => a.threshold - b.threshold)
+ .map((l, li) => {
+ const available = ts >= l.threshold;
+ return {
+ text: l.name,
+ help: available
+ ? `A ${l.size}x${l.size} level with ${l.bricks.filter((i) => i).length} bricks`
+ : `Unlocks at total score ${l.threshold}.`,
+ disabled: !available,
+ value: {level: l.name} as RunOverrides,
+ icon: icons[l.name],
+ };
+ }),
+ ];
+
+ const tryOn = await asyncAlert({
+ title: `You unlocked ${Math.round((actions.filter((a) => !a.disabled).length / actions.length) * 100)}% of the game.`,
+ text: `
+ Your total score is ${ts}. Below are all the upgrades and levels the games has to offer. They greyed out ones can be unlocked by increasing your total score.
+ `,
+ textAfterButtons: `
+The total score increases every time you score in game.
+Your high score is ${highScore}.
+Click an item above to start a run with it.
+
`,
+ actions,
+ allowClose: true,
+ });
+ if (tryOn) {
+ if (
+ !currentLevel ||
+ (await asyncAlert({
+ title: "Restart run to try this item?",
+ text: "You're about to start a new run with the selected unlocked item, is that really what you wanted ? ",
+ actions: [
+ {
+ value: true,
+ text: "Restart game to test item",
+ },
+ {
+ value: false,
+ text: "Cancel",
+ },
+ ],
+ }))
+ ) {
+ nextRunOverrides = tryOn;
+ restart();
+ }
}
}
function distance2(a, b) {
- return Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2)
+ return Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2);
}
function distanceBetween(a, b) {
- return Math.sqrt(distance2(a, b))
+ return Math.sqrt(distance2(a, b));
}
function rainbowColor() {
- return `hsl(${Math.round((levelTime / 4)) * 2 % 360},100%,70%)`
+ return `hsl(${(Math.round(levelTime / 4) * 2) % 360},100%,70%)`;
}
function repulse(a, b, power, impactsBToo) {
-
- const distance = distanceBetween(a, b)
+ const distance = distanceBetween(a, b);
// Ensure we don't get soft locked
- const max = gameZoneWidth / 2
- if (distance > max) return
+ const max = gameZoneWidth / 2;
+ if (distance > max) return;
// Unit vector
- const dx = (a.x - b.x) / distance
- const dy = (a.y - b.y) / distance
- const fact = -power * (max - distance) / (max * 1.2) / 3 * Math.min(500, levelTime) / 500
+ const dx = (a.x - b.x) / distance;
+ const dy = (a.y - b.y) / distance;
+ const fact =
+ (((-power * (max - distance)) / (max * 1.2) / 3) *
+ Math.min(500, levelTime)) /
+ 500;
if (impactsBToo) {
- b.vx += dx * fact
- b.vy += dy * fact
+ b.vx += dx * fact;
+ b.vy += dy * fact;
}
- a.vx -= dx * fact
- a.vy -= dy * fact
+ a.vx -= dx * fact;
+ a.vy -= dy * fact;
- const speed = 10
- const rand = 2
+ const speed = 10;
+ const rand = 2;
flashes.push({
type: "particle",
duration: 100,
@@ -2472,9 +2831,8 @@ function repulse(a, b, power, impactsBToo) {
y: a.y,
vx: -dx * speed + a.vx + (Math.random() - 0.5) * rand,
vy: -dy * speed + a.vy + (Math.random() - 0.5) * rand,
- })
+ });
if (impactsBToo) {
-
flashes.push({
type: "particle",
duration: 100,
@@ -2486,29 +2844,28 @@ function repulse(a, b, power, impactsBToo) {
y: b.y,
vx: dx * speed + b.vx + (Math.random() - 0.5) * rand,
vy: dy * speed + b.vy + (Math.random() - 0.5) * rand,
- })
+ });
}
-
}
function attract(a, b, power) {
-
- const distance = distanceBetween(a, b)
+ const distance = distanceBetween(a, b);
// Ensure we don't get soft locked
- const min = gameZoneWidth * .5
- if (distance < min) return
+ const min = gameZoneWidth * 0.5;
+ if (distance < min) return;
// Unit vector
- const dx = (a.x - b.x) / distance
- const dy = (a.y - b.y) / distance
+ const dx = (a.x - b.x) / distance;
+ const dy = (a.y - b.y) / distance;
- const fact = power * (distance - min) / min * Math.min(500, levelTime) / 500
- b.vx += dx * fact
- b.vy += dy * fact
- a.vx -= dx * fact
- a.vy -= dy * fact
+ const fact =
+ (((power * (distance - min)) / min) * Math.min(500, levelTime)) / 500;
+ b.vx += dx * fact;
+ b.vy += dy * fact;
+ a.vx -= dx * fact;
+ a.vy -= dy * fact;
- const speed = 10
- const rand = 2
+ const speed = 10;
+ const rand = 2;
flashes.push({
type: "particle",
duration: 100,
@@ -2520,7 +2877,7 @@ function attract(a, b, power) {
y: a.y,
vx: dx * speed + a.vx + (Math.random() - 0.5) * rand,
vy: dy * speed + a.vy + (Math.random() - 0.5) * rand,
- })
+ });
flashes.push({
type: "particle",
duration: 100,
@@ -2532,149 +2889,166 @@ function attract(a, b, power) {
y: b.y,
vx: -dx * speed + b.vx + (Math.random() - 0.5) * rand,
vy: -dy * speed + b.vy + (Math.random() - 0.5) * rand,
- })
+ });
}
-let mediaRecorder, captureStream, recordCanvas, recordCanvasCtx
-
+let mediaRecorder, captureStream, recordCanvas, recordCanvasCtx;
function recordOneFrame() {
- if (!isSettingOn('record')) {
- return
+ if (!isSettingOn("record")) {
+ return;
}
if (!running) return;
if (!captureStream) return;
- drawMainCanvasOnSmallCanvas()
+ drawMainCanvasOnSmallCanvas();
if (captureStream.requestFrame) {
- captureStream.requestFrame()
+ captureStream.requestFrame();
} else {
- captureStream.getVideoTracks()[0].requestFrame()
+ captureStream.getVideoTracks()[0].requestFrame();
}
}
-
function drawMainCanvasOnSmallCanvas() {
- if (!recordCanvasCtx) return
- recordCanvasCtx.drawImage(canvas, offsetXRoundedDown, 0, gameZoneWidthRoundedUp, gameZoneHeight, 0, 0, recordCanvas.width, recordCanvas.height)
+ if (!recordCanvasCtx) return;
+ recordCanvasCtx.drawImage(
+ canvas,
+ offsetXRoundedDown,
+ 0,
+ gameZoneWidthRoundedUp,
+ gameZoneHeight,
+ 0,
+ 0,
+ recordCanvas.width,
+ recordCanvas.height,
+ );
- // Here we don't use drawText as we don't want to cache a picture for each distinct value of score
- recordCanvasCtx.fillStyle = '#FFF'
+ // Here we don't use drawText as we don't want to cache a picture for each distinct value of score
+ recordCanvasCtx.fillStyle = "#FFF";
recordCanvasCtx.textBaseline = "top";
recordCanvasCtx.font = "12px monospace";
recordCanvasCtx.textAlign = "right";
- recordCanvasCtx.fillText(score.toString(), recordCanvas.width - 12, 12)
+ recordCanvasCtx.fillText(score.toString(), recordCanvas.width - 12, 12);
recordCanvasCtx.textAlign = "left";
- recordCanvasCtx.fillText('Level ' + (currentLevel + 1) + '/' + max_levels(), 12, 12)
+ recordCanvasCtx.fillText(
+ "Level " + (currentLevel + 1) + "/" + max_levels(),
+ 12,
+ 12,
+ );
}
function startRecordingGame() {
- if (!isSettingOn('record')) {
- return
+ if (!isSettingOn("record")) {
+ return;
}
if (!recordCanvas) {
// Smaller canvas with less details
- recordCanvas = document.createElement("canvas")
- recordCanvasCtx = recordCanvas.getContext("2d", {antialias: false, alpha: false})
+ recordCanvas = document.createElement("canvas");
+ recordCanvasCtx = recordCanvas.getContext("2d", {
+ antialias: false,
+ alpha: false,
+ });
captureStream = recordCanvas.captureStream(0);
- if (isSettingOn('sound') && getAudioContext() && audioRecordingTrack) {
-
- captureStream.addTrack(audioRecordingTrack.stream.getAudioTracks()[0])
+ if (isSettingOn("sound") && getAudioContext() && audioRecordingTrack) {
+ captureStream.addTrack(audioRecordingTrack.stream.getAudioTracks()[0]);
// captureStream.addTrack(audioRecordingTrack.stream.getAudioTracks()[1])
}
}
- recordCanvas.width = gameZoneWidthRoundedUp
- recordCanvas.height = gameZoneHeight
+ recordCanvas.width = gameZoneWidthRoundedUp;
+ recordCanvas.height = gameZoneHeight;
// drawMainCanvasOnSmallCanvas()
const recordedChunks = [];
-
- const instance = new MediaRecorder(captureStream, {videoBitsPerSecond: 3500000});
- mediaRecorder = instance
+ const instance = new MediaRecorder(captureStream, {
+ videoBitsPerSecond: 3500000,
+ });
+ mediaRecorder = instance;
instance.start();
- mediaRecorder.pause()
+ mediaRecorder.pause();
instance.ondataavailable = function (event) {
recordedChunks.push(event.data);
- }
+ };
instance.onstop = async function () {
let targetDiv;
let blob = new Blob(recordedChunks, {type: "video/webm"});
- if (blob.size < 200000) return // under 0.2MB, probably bugged out or pointlessly short
+ if (blob.size < 200000) return; // under 0.2MB, probably bugged out or pointlessly short
- while (!(targetDiv = document.getElementById("level-recording-container"))) {
- await new Promise(r => setTimeout(r, 200))
+ while (
+ !(targetDiv = document.getElementById("level-recording-container"))
+ ) {
+ await new Promise((r) => setTimeout(r, 200));
}
- const video = document.createElement("video")
- video.autoplay = true
- video.controls = false
- video.disablepictureinpicture = true
- video.disableremoteplayback = true
- video.width = recordCanvas.width
- video.height = recordCanvas.height
+ const video = document.createElement("video");
+ video.autoplay = true;
+ video.controls = false;
+ video.disablePictureInPicture = true;
+ video.disableRemotePlayback = true;
+ video.width = recordCanvas.width;
+ video.height = recordCanvas.height;
// targetDiv.style.width = recordCanvas.width + 'px'
// targetDiv.style.height = recordCanvas.height + 'px'
- video.loop = true
- video.muted = true
- video.playsinline = true
+ video.loop = true;
+ video.muted = true;
+ video.playsInline = true;
video.src = URL.createObjectURL(blob);
- const a = document.createElement("a")
- a.download = captureFileName('webm')
- a.target = "_blank"
- a.href = video.src
- a.textContent = `Download video (${(blob.size / 1000000).toFixed(2)}MB)`
- targetDiv.appendChild(video)
- targetDiv.appendChild(a)
-
- }
-
-
+ const a = document.createElement("a");
+ a.download = captureFileName("webm");
+ a.target = "_blank";
+ a.href = video.src;
+ a.textContent = `Download video (${(blob.size / 1000000).toFixed(2)}MB)`;
+ targetDiv.appendChild(video);
+ targetDiv.appendChild(a);
+ };
}
function pauseRecording() {
- if (!isSettingOn('record')) {
- return
+ if (!isSettingOn("record")) {
+ return;
}
- if (mediaRecorder?.state === 'recording') {
- mediaRecorder?.pause()
+ if (mediaRecorder?.state === "recording") {
+ mediaRecorder?.pause();
}
}
function resumeRecording() {
- if (!isSettingOn('record')) {
- return
+ if (!isSettingOn("record")) {
+ return;
}
- if (mediaRecorder?.state === 'paused') {
- mediaRecorder.resume()
+ if (mediaRecorder?.state === "paused") {
+ mediaRecorder.resume();
}
-
}
function stopRecording() {
- if (!isSettingOn('record')) {
- return
+ if (!isSettingOn("record")) {
+ return;
}
if (!mediaRecorder) return;
- mediaRecorder?.stop()
- mediaRecorder = null
+ mediaRecorder?.stop();
+ mediaRecorder = null;
}
function captureFileName(ext) {
- return "breakout-71-capture-" + new Date().toISOString().replace(/[^0-9\-]+/gi, '-') + '.' + ext
+ return (
+ "breakout-71-capture-" +
+ new Date().toISOString().replace(/[^0-9\-]+/gi, "-") +
+ "." +
+ ext
+ );
}
-
function findLast(arr, predicate) {
- let i = arr.length
- while (--i) if (predicate(arr[i], i, arr)) {
- return arr[i]
- }
-
+ let i = arr.length;
+ while (--i)
+ if (predicate(arr[i], i, arr)) {
+ return arr[i];
+ }
}
function toggleFullScreen() {
@@ -2686,68 +3060,80 @@ function toggleFullScreen() {
document.webkitCancelFullScreen();
}
} else {
- const docel = document.documentElement
+ const docel = document.documentElement;
if (docel.requestFullscreen) {
docel.requestFullscreen();
} else if (docel.webkitRequestFullscreen) {
docel.webkitRequestFullscreen();
}
}
-
} catch (e) {
- console.warn(e)
+ console.warn(e);
}
}
const pressed = {
- ArrowLeft: 0, ArrowRight: 0, Shift: 0
-}
+ ArrowLeft: 0,
+ ArrowRight: 0,
+ Shift: 0,
+};
function setKeyPressed(key, on) {
- pressed[key] = on
- keyboardPuckSpeed = (pressed.ArrowRight - pressed.ArrowLeft) * (1 + pressed.Shift * 2) * gameZoneWidth / 50
+ pressed[key] = on;
+ keyboardPuckSpeed =
+ ((pressed.ArrowRight - pressed.ArrowLeft) *
+ (1 + pressed.Shift * 2) *
+ gameZoneWidth) /
+ 50;
}
-document.addEventListener('keydown', e => {
- if (e.key.toLowerCase() === 'f' && !e.ctrlKey && !e.metaKey) {
- toggleFullScreen()
+document.addEventListener("keydown", (e) => {
+ if (e.key.toLowerCase() === "f" && !e.ctrlKey && !e.metaKey) {
+ toggleFullScreen();
} else if (e.key in pressed) {
- setKeyPressed(e.key, 1)
+ setKeyPressed(e.key, 1);
}
- if (e.key === ' ' && !alertsOpen) {
+ if (e.key === " " && !alertsOpen) {
if (running) {
- pause()
+ pause(true);
} else {
- play()
+ play();
}
} else {
- return
+ return;
}
- e.preventDefault()
-})
+ e.preventDefault();
+});
-document.addEventListener('keyup', e => {
+document.addEventListener("keyup", (e) => {
+ const focused = document.querySelector("button:focus")
if (e.key in pressed) {
- setKeyPressed(e.key, 0)
- } else if (e.key === 'ArrowDown' && document.querySelector('button:focus')?.nextElementSibling.tagName === 'BUTTON') {
- document.querySelector('button:focus')?.nextElementSibling?.focus()
- } else if (e.key === 'ArrowUp' && document.querySelector('button:focus')?.previousElementSibling.tagName === 'BUTTON') {
- document.querySelector('button:focus')?.previousElementSibling?.focus()
- } else if (e.key === 'Escape' && closeModal) {
- closeModal()
- } else if (e.key === 'Escape' && running) {
- pause()
- } else if (e.key.toLowerCase() === 'm' && !alertsOpen) {
- openSettingsPanel()
- } else if (e.key.toLowerCase() === 's' && !alertsOpen) {
- openScorePanel()
+ setKeyPressed(e.key, 0);
+ } else if (
+ e.key === "ArrowDown" && focused?.nextElementSibling?.tagName === "BUTTON"
+ ) {
+ (focused?.nextElementSibling as HTMLButtonElement)?.focus();
+ } else if (
+ e.key === "ArrowUp" &&
+ focused?.previousElementSibling?.tagName ===
+ "BUTTON"
+ ) {
+ (focused?.previousElementSibling as HTMLButtonElement)?.focus();
+
+ } else if (e.key === "Escape" && closeModal) {
+ closeModal();
+ } else if (e.key === "Escape" && running) {
+ pause(true);
+ } else if (e.key.toLowerCase() === "m" && !alertsOpen) {
+ openSettingsPanel().then();
+ } else if (e.key.toLowerCase() === "s" && !alertsOpen) {
+ openScorePanel().then();
} else {
- return
+ return;
}
- e.preventDefault()
-})
+ e.preventDefault();
+});
-
-fitSize()
-restart()
-tick();
\ No newline at end of file
+fitSize();
+restart();
+tick();
diff --git a/src/index.html b/src/index.html
index f4a837f..9417e26 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,18 +8,24 @@
/>
Breakout 71
-