From 1fa1de67bb770496489067872e95f98d4ea24349 Mon Sep 17 00:00:00 2001 From: Alex Barry Date: Fri, 9 Aug 2024 00:04:14 -0400 Subject: [PATCH] Fidgetted with summary layout, ran linter --- public/sections/summary.js | 106 +++++++++++++++++++++++-------------- 1 file changed, 67 insertions(+), 39 deletions(-) diff --git a/public/sections/summary.js b/public/sections/summary.js index 11e83b1..44f2842 100644 --- a/public/sections/summary.js +++ b/public/sections/summary.js @@ -1,6 +1,6 @@ -import { h, text } from '/vendor/hyperapp.js'; +import { h, text } from "/vendor/hyperapp.js"; -import * as actions from '/actions.js'; +import * as actions from "/actions.js"; const subGoalRegex = () => /^[- \t]+/; @@ -10,7 +10,7 @@ const isSubGoal = (g) => { }; export const summary = (props) => { - const index = props.goals.findIndex(g => !g.completed); + const index = props.goals.findIndex((g) => !g.completed); const incomplete = { goal: null, subGoal: null, @@ -18,7 +18,12 @@ export const summary = (props) => { if (index >= 0) { incomplete.goal = props.goals[index]; if (!isSubGoal(incomplete.goal)) { - for (let i = index + 1; i < props.goals.length && isSubGoal(props.goals[i]) && !incomplete.subGoal; i++) { + for ( + let i = index + 1; + i < props.goals.length && isSubGoal(props.goals[i]) && + !incomplete.subGoal; + i++ + ) { const g = props.goals[i]; if (!g.completed) { incomplete.subGoal = g; @@ -27,55 +32,78 @@ export const summary = (props) => { } } - return h('div', { - // class: 'flex items-center justify-start', + return h("div", { + //class: "flex items-center justify-start", }, [ - h('ol', {}, [ - ...props.settings.mobOrder.split(',').map((position, index) => { - return h('li', { class: 'mb-2' }, [ - h('div', { class: 'text-xs leading-none uppercase text-slate-600' }, text(position)), - h('div', {}, text(props.mob[index]?.name || 'Empty')), + h("ol", {}, [ + ...props.settings.mobOrder.split(",").map((position, index) => { + return h("li", { class: "mb-2" }, [ + h( + "div", + { class: "text-xs leading-none uppercase text-slate-600" }, + text(position), + ), + h("div", {}, text(props.mob[index]?.name || "Empty")), ]); }), ]), - incomplete.goal && h('div', { class: 'mb-2' }, [ - h('hr', { class: 'mb-2' }), - h('div', { class: 'text-xs leading-none uppercase text-slate-600' }, text('Current Goal')), - h('div', { class: '' }, [ + incomplete.goal && h("div", { class: "mb-2" }, [ + h("hr", { class: "mb-2" }), + h( + "div", + { class: "text-xs leading-none uppercase text-slate-600" }, + text("Current Goal"), + ), + h("div", { class: "" }, [ text(incomplete.goal.text), - incomplete.subGoal && h('div', { class: 'ml-2' }, text(incomplete.subGoal.text.replace(subGoalRegex(), ''))), + incomplete.subGoal && + h( + "div", + { class: "ml-2" }, + text(incomplete.subGoal.text.replace(subGoalRegex(), "")), + ), ]), ]), - h('div', {}, [ - h('hr', { class: 'mb-2' }), - h('div', { class: 'text-xs uppercase text-slate-600' }, text('Turn Controls')), - h('div', { class: 'grid grid-cols-3' }, [ - h('button', { - type: 'button', + h("div", {}, [ + h("hr", { class: "mb-2" }), + h( + "div", + { class: "text-xs uppercase text-slate-600" }, + text("Turn Controls"), + ), + h("div", { class: "grid grid-cols-3" }, [ + h("button", { + type: "button", class: [ - 'mr-1 px-2 py-1 border border-slate-700', - props.timerStartedAt && 'bg-slate-200 text-black cursor-not-allowed', - ].filter(Boolean).join(' '), + "mr-1 px-2 py-1 border border-slate-700", + props.timerStartedAt && + "bg-slate-200 text-black cursor-not-allowed", + ].filter(Boolean).join(" "), disabled: props.timerStartedAt, onclick: props.timerDuration ? [actions.ResumeTimer, {}] - : [actions.StartTimer, { timerStartedAt: Date.now(), timerDuration: props.settings.duration }], - }, text('Start')), - h('button', { - type: 'button', + : [actions.StartTimer, { + timerStartedAt: Date.now(), + timerDuration: props.settings.duration, + }], + }, text("Start")), + h("button", { + type: "button", class: [ - 'mr-1 px-2 py-1 border border-slate-700', - !props.timerStartedAt && 'bg-slate-200 text-black cursor-not-allowed', - ].filter(Boolean).join(' '), + "mr-1 px-2 py-1 border border-slate-700", + !props.timerStartedAt && + "bg-slate-200 text-black cursor-not-allowed", + ].filter(Boolean).join(" "), disabled: !props.timerStartedAt, onclick: [actions.PauseTimer, undefined], - }, text('Pause')), - h('button', { - type: 'button', + }, text("Pause")), + h("button", { + type: "button", class: [ - 'mr-1 px-2 py-1 border border-slate-700', - !props.timerDuration && 'bg-slate-200 text-black cursor-not-allowed', - ].join(' '), + "mr-1 px-2 py-1 border border-slate-700", + !props.timerDuration && + "bg-slate-200 text-black cursor-not-allowed", + ].join(" "), disabled: !props.timerDuration, onclick: [ actions.Completed, @@ -85,7 +113,7 @@ export const summary = (props) => { Notification: window.Notification, }, ], - }, text('Skip')), + }, text("Skip")), ]), ]), ]);