let clock = {
hour: undefined,
+
hour: undefined,
minute: undefined,
second: undefined,
-
period: undefined,
+
day_progress: undefined,
day: undefined,
weekday: undefined,
month: undefined,
diff --git a/project.json b/project.json
index f26fe0f..59cafd2 100644
--- a/project.json
+++ b/project.json
@@ -1,11 +1,32 @@
{
"contentrating" : "Everyone",
- "description" : "\"js object - clock\" is a web-based wallpaper with a customization available. The JetBrains IDE dark theme was taken as the basis (maybe add some more).\r\n\r\n[b]List of settings:[/b]\r\n[list]\r\n[*]Select the 12 o'clock format,\r\n[*]Show the leading zero (convert a numeric value to a string value),\r\n[*]Change visibility of any element (hour, minute, second, period (PM/AM), day, weekday, month, year, timezone, UNIX, UTC),\r\n[*]Select font size, font family and theme,\r\n[*]Change to [b]const[/b] declaration,\r\n[*]Change clock position.\r\n[/list]\r\n\r\n[b]List of themes:[/b]\r\n[list]\r\n[*]Default (customized JetBrains Dark)\r\n[*]JetBrains Dark,\r\n[*]JetBrains Light,\r\n[*]Dark Modern,\r\n[*]Light Modern,\r\n[*]One Dark Pro,\r\n[*]Dracula Official,\r\n[*]GitHub Theme,\r\n[*]Catppuccin Mocha,\r\n[*]SynthWave '84,\r\n[*][url=steamcommunity.com/sharedfiles/filedetails/?id=2980088441]CodeTime[/url].\r\n[/list]\r\n\r\n[b]List of font family:[/b]\r\n[list]\r\n[*]Consolas,\r\n[*]Courier New,\r\n[*]JetBrains Mono,\r\n[*]Hack NFM,\r\n[*]Iosevka.\r\n[/list]\r\n\r\nI will be glad to see your wishes, criticism or praise)\r\nIf you have any ideas on how to improve this project, then please open a discussion so that I can discuss it with you\r\n\r\nThis project was inspired by Isaias19's project called [url=steamcommunity.com/sharedfiles/filedetails/?id=2980088441]CodeTime[/url]\r\nAlso recommend watching OOOOMGOSH's project called [url=steamcommunity.com/sharedfiles/filedetails/?id=3007669757]Python Dictionary Clock[/url]",
+ "description" : "\"js object - clock\" is a web-based wallpaper with a customization available. The JetBrains IDE dark theme was taken as the basis (maybe add some more).\n\n[b]List of settings:[/b]\n[list]\n[*]Select the 12 o'clock format,\n[*]Show the leading zero (convert a numeric value to a string value),\n[*]Change visibility of any element (hour, minute, second, period (PM/AM), day, weekday, month, year, day progress timezone, UNIX, UTC),\n[*]Select font size, font family and theme,\n[*]Change to [b]const[/b] declaration,\n[*]Change clock position.\n[/list]\n\n[b]List of themes:[/b]\n[list]\n[*]Default (customized JetBrains Dark)\n[*]JetBrains Dark,\n[*]JetBrains Light,\n[*]Dark Modern,\n[*]Light Modern,\n[*]One Dark Pro,\n[*]Dracula Official,\n[*]GitHub Theme,\n[*]Rosé Pine,\n[*]Catppuccin Mocha,\n[*]SynthWave '84,\n[*][url=steamcommunity.com/sharedfiles/filedetails/?id=2980088441]CodeTime[/url].\n[/list]\n\n[b]List of font family:[/b]\n[list]\n[*]Consolas,\n[*]Courier New,\n[*]JetBrains Mono,\n[*]Hack NFM,\n[*]Iosevka.\n[/list]\n\nI will be glad to see your wishes, criticism or praise)\nIf you have any ideas on how to improve this project, then please open a discussion so that I can discuss it with you\nAlso you can use github of [url=github.com/unktir/js-object-clock]js object - clock[/url] project. It is better to use it for discussions and especially for issues\nThank y'all for 100k subscribers!\n\nThis project was inspired by Isaias19's project called [url=steamcommunity.com/sharedfiles/filedetails/?id=2980088441]CodeTime[/url]\nAlso recommend watching OOOOMGOSH's project called [url=steamcommunity.com/sharedfiles/filedetails/?id=3007669757]Python Dictionary Clock[/url]",
"file" : "index.html",
"general" :
{
"properties" :
{
+ "clock_settings" :
+ {
+ "index" : 0,
+ "order" : 100,
+ "text" : "
Clock settings
",
+ "type" : "text"
+ },
+ "customization_1" :
+ {
+ "index" : 5,
+ "order" : 105,
+ "text" : "
Customization
",
+ "type" : "text"
+ },
+ "customization_2" :
+ {
+ "index" : 23,
+ "order" : 123,
+ "text" : "
Customization
",
+ "type" : "text"
+ },
"schemecolor" :
{
"order" : 0,
@@ -13,64 +34,108 @@
"type" : "color",
"value" : "0 0 0"
},
- "clock_settings" :
+ "theme_settings" :
{
- "index" : 0,
- "order" : 100,
- "text" : "
Clock settings
",
+ "index" : 21,
+ "order" : 121,
+ "text" : "
Theme settings
",
"type" : "text"
},
- "ui_font_size" :
+ "language" :
{
- "fraction" : false,
"index" : 1,
- "max" : 64,
- "min" : 16,
+ "options" :
+ [
+ {
+ "label" : "English",
+ "value" : "en"
+ },
+ {
+ "label" : "Russian",
+ "value" : "ru"
+ }
+
+ ],
"order" : 101,
- "text" : "Font size",
- "type" : "slider",
- "value" : 48
+ "text" : "Language",
+ "type" : "combo",
+ "value" : "en"
},
- "ui_use_12h_format" :
+ "customimage" :
+ {
+ "text" : "User image",
+ "type" : "file"
+ },
+ "ui_customize_position_enable" :
{
- "condition" : "",
- "index" : 2,
- "order" : 102,
- "text" : "Use 12h format",
+ "index" : 6,
+ "order" : 106,
+ "text" : "
Position",
"type" : "bool",
"value" : false
},
- "ui_show_leading_zero" :
+ "ui_customize_theme_enable" :
{
- "condition" : "",
- "index" : 3,
- "order" : 103,
- "text" : "Show leading zero",
+ "index" : 24,
+ "order" : 124,
+ "text" : "
Enable",
"type" : "bool",
"value" : false
},
- "ui_use_const" :
+ "ui_customize_visibility_enable" :
{
- "index" : 4,
- "order" : 104,
- "text" : "Use
const declaration",
+ "index" : 9,
+ "order" : 111,
+ "text" : "
Visibility",
"type" : "bool",
"value" : false
},
- "customization_1" :
+ "ui_font_family" :
{
- "index" : 5,
- "order" : 105,
- "text" : "
Customization
",
- "type" : "text"
+ "condition" : "ui_customize_theme_enable.value === true",
+ "index" : 25,
+ "options" :
+ [
+ {
+ "label" : "Default",
+ "value" : "inherit"
+ },
+ {
+ "label" : "Consolas",
+ "value" : "Consolas, monospace"
+ },
+ {
+ "label" : "Courier New",
+ "value" : "Courier New, monospace"
+ },
+ {
+ "label" : "JetBrains Mono",
+ "value" : "JetBrains Mono, monospace"
+ },
+ {
+ "label" : "Hack NFM",
+ "value" : "Hack NFM, monospace"
+ },
+ {
+ "label" : "Iosevka",
+ "value" : "Iosevka, monospace"
+ }
+ ],
+ "order" : 125,
+ "text" : "Font family",
+ "type" : "combo",
+ "value" : "inherit"
},
- "ui_customize_position_enable" :
+ "ui_font_size" :
{
- "index" : 6,
- "order" : 106,
- "text" : "
Position",
- "type" : "bool",
- "value" : false
+ "fraction" : false,
+ "index" : 1,
+ "max" : 64,
+ "min" : 16,
+ "order" : 101,
+ "text" : "Font size",
+ "type" : "slider",
+ "value" : 48
},
"ui_position_x" :
{
@@ -96,10 +161,22 @@
"type" : "combo",
"value" : "center"
},
- "ui_position_y" :
+ "ui_position_offset_x" :
{
"condition" : "ui_customize_position_enable.value === true",
+ "fraction" : false,
"index" : 8,
+ "max" : 1000,
+ "min" : -1000,
+ "order" : 108,
+ "text" : "Offset x",
+ "type" : "slider",
+ "value" : 0
+ },
+ "ui_position_y" :
+ {
+ "condition" : "ui_customize_position_enable.value === true",
+ "index" : 9,
"options" :
[
{
@@ -120,38 +197,48 @@
"type" : "combo",
"value" : "Center"
},
- "ui_customize_visibility_enable" :
+ "ui_show_day" :
{
- "index" : 9,
- "order" : 109,
- "text" : "
Visibility",
+ "condition" : "ui_customize_visibility_enable.value === true",
+ "index" : 14,
+ "order" : 114,
+ "text" : "Show day",
"type" : "bool",
- "value" : false
+ "value" : true
},
"ui_show_hour" :
{
"condition" : "ui_customize_visibility_enable.value === true",
"index" : 10,
- "order" : 110,
+ "order" : 112,
"text" : "Show hour",
"type" : "bool",
"value" : true
},
+ "ui_show_leading_zero" :
+ {
+ "condition" : "",
+ "index" : 3,
+ "order" : 103,
+ "text" : "Show leading zero",
+ "type" : "bool",
+ "value" : false
+ },
"ui_show_minute" :
{
"condition" : "ui_customize_visibility_enable.value === true",
"index" : 11,
- "order" : 111,
+ "order" : 112,
"text" : "Show minute",
"type" : "bool",
"value" : true
},
- "ui_show_second" :
+ "ui_show_month" :
{
"condition" : "ui_customize_visibility_enable.value === true",
- "index" : 12,
- "order" : 112,
- "text" : "Show seconds",
+ "index" : 16,
+ "order" : 116,
+ "text" : "Show month",
"type" : "bool",
"value" : true
},
@@ -164,39 +251,12 @@
"type" : "bool",
"value" : true
},
- "ui_show_day" :
- {
- "condition" : "ui_customize_visibility_enable.value === true",
- "index" : 14,
- "order" : 114,
- "text" : "Show day",
- "type" : "bool",
- "value" : true
- },
- "ui_show_weekday" :
- {
- "condition" : "ui_customize_visibility_enable.value === true",
- "index" : 15,
- "order" : 115,
- "text" : "Show weekday",
- "type" : "bool",
- "value" : false
- },
- "ui_show_month" :
- {
- "condition" : "ui_customize_visibility_enable.value === true",
- "index" : 16,
- "order" : 116,
- "text" : "Show month",
- "type" : "bool",
- "value" : true
- },
- "ui_show_year" :
+ "ui_show_second" :
{
"condition" : "ui_customize_visibility_enable.value === true",
- "index" : 17,
- "order" : 117,
- "text" : "Show year",
+ "index" : 12,
+ "order" : 112,
+ "text" : "Show seconds",
"type" : "bool",
"value" : true
},
@@ -227,12 +287,32 @@
"type" : "bool",
"value" : false
},
- "theme_settings" :
+ "ui_show_weekday" :
{
- "index" : 21,
- "order" : 121,
- "text" : "
Theme settings
",
- "type" : "text"
+ "condition" : "ui_customize_visibility_enable.value === true",
+ "index" : 15,
+ "order" : 115,
+ "text" : "Show weekday",
+ "type" : "bool",
+ "value" : false
+ },
+ "ui_show_year" :
+ {
+ "condition" : "ui_customize_visibility_enable.value === true",
+ "index" : 17,
+ "order" : 117,
+ "text" : "Show year",
+ "type" : "bool",
+ "value" : true
+ },
+ "ui_show_day_progress" :
+ {
+ "condition" : "ui_customize_visibility_enable.value === true",
+ "index" : 17,
+ "order" : 117,
+ "text" : "Show day progress",
+ "type" : "bool",
+ "value" : true
},
"ui_theme" :
{
@@ -268,8 +348,8 @@
"value" : "rose_pine"
},
{
- "label": "Catppuccin Mocha",
- "value": "catppuccin_mocha"
+ "label" : "Catppuccin Mocha",
+ "value" : "catppuccin_mocha"
},
{
"label" : "SynthWave '84",
@@ -293,65 +373,48 @@
"type" : "combo",
"value" : "main"
},
- "customization_2" :
- {
- "index" : 23,
- "order" : 123,
- "text" : "
Customization
",
- "type" : "text"
- },
- "ui_customize_theme_enable" :
+ "ui_use_12h_format" :
{
- "index" : 24,
- "order" : 124,
- "text" : "
Enable",
+ "condition" : "",
+ "index" : 2,
+ "order" : 102,
+ "text" : "Use 12h format",
"type" : "bool",
"value" : false
},
- "ui_font_family" :
+ "ui_const_declaration" :
{
- "condition" : "ui_customize_theme_enable.value === true",
- "index" : 25,
+ "index" : 4,
+ "order" : 104,
+ "text" : "Use
const declaration",
"options" :
[
{
- "label" : "Default",
- "value" : "inherit"
+ "label" : "Const",
+ "value" : "const"
},
{
- "label" : "Consolas",
- "value" : "Consolas, monospace"
+ "label" : "Let",
+ "value" : "let"
},
{
- "label" : "Courier New",
- "value" : "Courier New, monospace"
- },
- {
- "label" : "JetBrains Mono",
- "value" : "JetBrains Mono, monospace"
- },
- {
- "label" : "Hack NFM",
- "value" : "Hack NFM, monospace"
- },
- {
- "label" : "Iosevka",
- "value" : "Iosevka, monospace"
+ "label" : "Var",
+ "value" : "var"
}
],
- "order" : 125,
- "text" : "Font family",
"type" : "combo",
- "value" : "inherit"
+ "value" : "var"
}
}
},
"preview" : "preview.jpg",
+ "ratingsex" : "none",
+ "ratingviolence" : "none",
"tags" : [ "Technology" ],
"title" : "js object - clock",
"type" : "Web",
- "version" : 6,
+ "version" : 7,
"visibility" : "public",
"workshopid" : "2986163106",
"workshopurl" : "steam://url/CommunityFilePage/2986163106"
-}
+}
\ No newline at end of file
diff --git a/scripts/main.js b/scripts/main.js
index c043e78..4654654 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -1,7 +1,8 @@
-import {Clock, Settings, updateClock} from "./scripts.js";
+import {Clock, Settings, updateClock, setUserImage} from "./scripts.js";
+
-let clock = new Clock();
let settings = new Settings();
+let clock = new Clock(settings);
updateClock(clock, settings);
@@ -10,17 +11,21 @@ window.wallpaperPropertyListener = {
if (properties.ui_font_size) {
settings.font.size = properties.ui_font_size.value;
}
-
+ if (properties.language) {
+ settings.language = properties.language.value;
+ }
+ if (properties.customimage) {
+ setUserImage(properties.customimage.value);
+ }
if (properties.ui_use_12h_format) {
settings.format.use_12h_format = properties.ui_use_12h_format.value;
}
if (properties.ui_show_leading_zero) {
settings.format.show_leading_zero = properties.ui_show_leading_zero.value;
}
- if (properties.ui_use_const) {
- settings.format.use_const_declaration = properties.ui_use_const.value;
+ if (properties.ui_const_declaration) {
+ settings.format.const_declaration = properties.ui_const_declaration.value;
}
-
if (properties.ui_customize_position_enable) {
settings.position.customization.enable = properties.ui_customize_position_enable.value;
}
@@ -30,7 +35,9 @@ window.wallpaperPropertyListener = {
if (properties.ui_position_y) {
settings.position.y = properties.ui_position_y.value;
}
-
+ if (properties.ui_position_offset_x){
+ settings.offset.x = properties.ui_position_offset_x.value;
+ }
if (properties.ui_customize_visibility_enable) {
settings.visibility.customization.enable = properties.ui_customize_visibility_enable.value;
}
@@ -58,6 +65,9 @@ window.wallpaperPropertyListener = {
if (properties.ui_show_year) {
settings.clock.elements.year.visibility = properties.ui_show_year.value;
}
+ if (properties.ui_show_day_progress) {
+ settings.clock.elements.day_progress.visibility = properties.ui_show_day_progress.value;
+ }
if (properties.ui_show_timezone) {
settings.clock.elements.timezone.visibility = properties.ui_show_timezone.value;
}
@@ -67,11 +77,9 @@ window.wallpaperPropertyListener = {
if (properties.ui_show_utc) {
settings.clock.elements.utc.visibility = properties.ui_show_utc.value;
}
-
if (properties.ui_theme) {
settings.theme.name = properties.ui_theme.value;
}
-
if (properties.ui_customize_theme_enable) {
settings.theme.customization.enable = properties.ui_customize_theme_enable.value;
}
diff --git a/scripts/scripts.js b/scripts/scripts.js
index d34da36..ff0912e 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -1,21 +1,24 @@
-function Clock() {
+function Clock(settings) {
let time = new Date();
let timeZoneOffsetInMinutes = time.getTimezoneOffset();
let timeZoneSign = timeZoneOffsetInMinutes > 0 ? '-' : '+';
let timeZoneOffsetHours = Math.abs(Math.floor(timeZoneOffsetInMinutes / 60));
+ const monthNames = getMonthNames(settings);
+ const weekNames = getWeekDaysNames(settings);
this.hour = time.getHours();
this.minute = time.getMinutes();
this.second = time.getSeconds();
this.period = (this.hour < 12) ? '"AM"' : '"PM"';
this.day = time.getDate();
- this.weekday = en_week_days_name[time.getDay()];
- this.month = en_month_name[time.getMonth()];
+ this.weekday = weekNames[time.getDay()];
+ this.month = monthNames[time.getMonth()];
this.year = time.getFullYear();
this.timezone = `"GMT${timeZoneSign}${timeZoneOffsetHours.toString().padStart(2, '0')}"`;
this.unix = Math.floor(Date.now() / 1000);
this.utc = `"${new Date(this.unix * 1000).toISOString()}"`;
+ this.day_progress = getDayProgress().toFixed(2) + '%';
}
function Settings() {
@@ -61,28 +64,35 @@ function Settings() {
visibility: true,
type: 'number'
},
- timezone: {
+ day_progress: {
order: 8,
+ visibility: true,
+ type: "number"
+ },
+ timezone: {
+ order: 9,
visibility: false,
type: 'string'
},
unix: {
- order: 9,
+ order: 10,
visibility: false,
type: 'number'
},
utc: {
- order: 10,
+ order: 11,
visibility: false,
type: 'string'
}
},
}
+ this.customimage = ""
+
this.format = {
use_12h_format: false,
show_leading_zero: false,
- use_const_declaration: false
+ const_declaration: 'const',
}
this.visibility = {
@@ -91,6 +101,8 @@ function Settings() {
}
}
+ this.language = 'ru'
+
this.position = {
customization: {
enable: false
@@ -99,6 +111,13 @@ function Settings() {
y: 'center'
}
+ this.offset ={
+ customization: {
+ enable: false
+ },
+ x: 0
+ }
+
this.theme = {
customization: {
enable: false
@@ -113,11 +132,27 @@ function Settings() {
}
const changeable_format_elements = ['hour', 'minute', 'second', 'day']
-const possible_declarations = ['let', 'const']
+
+const possible_declarations = ['let', 'const', 'var']
+
const en_month_name = ['"January"', '"February"', '"March"', '"April"', '"May"', '"June"', '"July"', '"August"', '"September"', '"October"', '"November"', '"December"'];
const en_week_days_name = ['"Sunday"', '"Monday"', '"Tuesday"', '"Wednesday"', '"Thursday"', '"Friday"', '"Saturday"'];
+const ru_month_name = ['"Январь"', '"Февраль"', '"Март"', '"Арпель"', '"Май"', '"Июнь"', '"Июль"', '"Август"', '"Сернябрь"', '"Октябрь"', '"Ноябрь"', '"Декабырь"'];
+const ru_week_days_name = ['"Понедельник"', '"Вторник"', '"Среда"', '"Четвер"', '"Пятница"', '"Суббота"', '"Воскресенье"'];
+
+
+const month_names = {
+ "en": en_month_name,
+ "ru": ru_month_name
+}
+
+const week_days_name = {
+ "en": en_week_days_name,
+ "ru": ru_week_days_name
+}
+
const themes = {
main: "./styles/main.css",
jb_dark: "./styles/jb-dark.css",
@@ -135,6 +170,28 @@ const themes = {
const default_settings = new Settings()
+function setUserImage(user_image_path) {
+ const imagePath = 'file:///' + user_image_path.replace(/\\/g, '/');
+ document.body.style.backgroundImage = `url("${imagePath}")`;
+}
+
+function getDayProgress() {
+ const now = new Date();
+ const startOfDay = new Date(now);
+ startOfDay.setHours(0, 0, 0, 0);
+
+ const progress = ((now - startOfDay) / 86400000) * 100;
+ return progress;
+}
+
+function getWeekDaysNames(settings) {
+ return week_days_name[settings.language]
+}
+
+function getMonthNames(settings) {
+ return month_names[settings.language]
+}
+
function convertTo12hFormat(hour) {
hour %= 12
@@ -220,7 +277,7 @@ function createClockElements(object, elements, ordered_list) {
function createClock(object, settings) {
const result = []
- const keyword = settings.format.use_const_declaration ? possible_declarations[1] : possible_declarations[0]
+ const keyword = settings.format.const_declaration
const start = document.createElement('p')
start.innerHTML = `
${keyword} clock = {`
result.push(start)
@@ -247,11 +304,22 @@ function changePosition(settings) {
const position = settings.position.customization.enable ? settings.position : default_settings.position
const x = position.x
const y = position.y
-
document.body.style.justifyContent = x
document.body.style.alignItems = y
}
+function changePositionOffset(settings) {
+ const offset = settings.position.customization.enable ? settings.offset : default_settings.offset;
+
+ if (settings.position.x === 'center' || settings.position.x === 'flex-start') {
+ document.body.style.marginLeft = offset.x + 'px';
+ document.body.style.marginRight = "0px";
+ } else {
+ document.body.style.marginRight = offset.x + 'px';
+ document.body.style.marginLeft = "0px";
+ }
+}
+
function changeFontSize({size}) {
document.body.style.fontSize = size + "px"
}
@@ -273,15 +341,16 @@ function changeTheme(settings) {
}
function updateClock(object, settings) {
- object = new Clock()
+ object = new Clock(settings)
changeFontSize(settings.font)
changePosition(settings)
+ changePositionOffset(settings)
changeTheme(settings)
updateClockDOM(object, settings)
}
-export {Clock, Settings, updateClock}
+export {Clock, Settings, updateClock, setUserImage}
diff --git a/styles/main.css b/styles/main.css
index 5b63ceb..66c826f 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -44,7 +44,6 @@ body {
height: 100%;
line-height: 1.2;
color: #bcbec4;
-
font-size: 32px;
font-family: 'JetBrains Mono', monospace;
}
@@ -56,6 +55,13 @@ body {
padding: 50px;
background-color: #1e1f22;
-webkit-font-smoothing: antialiased;
+
+ overflow: hidden;
+
+ background-image: url('../image.png');
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
}
p {
@@ -65,6 +71,14 @@ p {
margin-inline-end: 0;
}
+.clock {
+ border-left : 20px solid white;
+ border-left-width: 2px;
+ border-left-style: inset;
+
+ padding-left: 1rem;
+}
+
.tab:before {
content: '\00A0\00A0\00A0\00A0';
}