diff --git a/javascripts/core/app/modal.js b/javascripts/core/app/modal.js index cc3cc9621..7c6998f5a 100644 --- a/javascripts/core/app/modal.js +++ b/javascripts/core/app/modal.js @@ -72,6 +72,8 @@ import SwitchAutomatorEditorModal from "@/components/modals/SwitchAutomatorEdito import UiChoiceModal from "@/components/modals/UiChoiceModal"; import UndoGlyphModal from "@/components/modals/UndoGlyphModal"; +import S12GamesModal from "@/components/modals/secret-themes/S12GamesModal"; + let nextModalID = 0; export class Modal { constructor(component, priority = 0, closeEvent) { @@ -255,6 +257,8 @@ Modal.sacrifice = new Modal(SacrificeModal, 1, GAME_EVENT.DIMBOOST_AFTER); Modal.breakInfinity = new Modal(BreakInfinityModal, 1, GAME_EVENT.ETERNITY_RESET_AFTER); Modal.respecIAP = new Modal(RespecIAPModal); +Modal.s12Games = new Modal(S12GamesModal); + function getSaveInfo(save) { const resources = { realTimePlayed: 0, diff --git a/javascripts/core/app/themes.js b/javascripts/core/app/themes.js index 25d83d2a7..64cb69143 100644 --- a/javascripts/core/app/themes.js +++ b/javascripts/core/app/themes.js @@ -4,7 +4,7 @@ export const Theme = function Theme(name, config) { this.name = name; this.isDark = function() { - return this.isDefault() + return (this.isDefault() || name === "S12") ? player.options.newUI : config.isDark; }; @@ -88,6 +88,7 @@ Theme.secretThemeIndex = function(name) { "dba8336cd3224649d07952b00045a6ec3c8df277aa8a0a0e3e7c2aaa77f1fbb9", "73de8a7f9efa1cbffc80a8effc9891a799127cd204b3a8b023bea8f513ed4753", "f3a71114261b4af6517a53f89bf0c6b56bb81b6f0e931d0e0d71249eb196628c", + "1248689171faaa0abb68279199a8d2eb232dba10d2dacb79a705f680b6862c0e", ]; const sha = sha512_256(name.toUpperCase()); return secretThemes.indexOf(sha); @@ -153,6 +154,7 @@ export const Themes = { Theme.create("S9", { secret: true, }), Theme.create("S10", { dark: true, metro: true, animated: true, secret: true, }), Theme.create("S11", { dark: true, animated: true, secret: true, }), + Theme.create("S12", { secret: true, }), /* eslint-enable no-multi-spaces */ ], diff --git a/javascripts/core/secret-formula/news.js b/javascripts/core/secret-formula/news.js index 9051a47ee..1f0f9ce5e 100644 --- a/javascripts/core/secret-formula/news.js +++ b/javascripts/core/secret-formula/news.js @@ -1436,6 +1436,9 @@ GameDatabase.news = [ ${BLOB} are just blobbling and bouncing around, occasionally merging and dividing. Only ${BLOB} know where they are from or where they are going to go. Still, ${BLOB} are there, always with me. You love ${BLOB}, so ${BLOB} loves you too.`, + S12: + `it makes you feel warm and comfortable, as if you were right at home. However, it is highly recommended + to update your theme to the newest theme for the best user experience.`, }; const reason = reasons[Theme.current().name.replace(/\s/gu, "")]; return `Ah, a fellow ${theme} theme user. I see that you have impeccable taste. diff --git a/public/audio/s12-startup.mp3 b/public/audio/s12-startup.mp3 new file mode 100644 index 000000000..23a30ddfb Binary files /dev/null and b/public/audio/s12-startup.mp3 differ diff --git a/public/images/s12-bg.jpg b/public/images/s12-bg.jpg new file mode 100644 index 000000000..a41881468 Binary files /dev/null and b/public/images/s12-bg.jpg differ diff --git a/public/images/s12/achievements.png b/public/images/s12/achievements.png new file mode 100644 index 000000000..b9cffc638 Binary files /dev/null and b/public/images/s12/achievements.png differ diff --git a/public/images/s12/automation.png b/public/images/s12/automation.png new file mode 100644 index 000000000..7cf4a61c3 Binary files /dev/null and b/public/images/s12/automation.png differ diff --git a/public/images/s12/celestials.png b/public/images/s12/celestials.png new file mode 100644 index 000000000..5bf65ae99 Binary files /dev/null and b/public/images/s12/celestials.png differ diff --git a/public/images/s12/challenges.png b/public/images/s12/challenges.png new file mode 100644 index 000000000..659b03340 Binary files /dev/null and b/public/images/s12/challenges.png differ diff --git a/public/images/s12/desktop--discord-logo.png b/public/images/s12/desktop--discord-logo.png new file mode 100644 index 000000000..76bb16a98 Binary files /dev/null and b/public/images/s12/desktop--discord-logo.png differ diff --git a/public/images/s12/desktop--games.png b/public/images/s12/desktop--games.png new file mode 100644 index 000000000..724c85635 Binary files /dev/null and b/public/images/s12/desktop--games.png differ diff --git a/public/images/s12/desktop--windows-media-player.png b/public/images/s12/desktop--windows-media-player.png new file mode 100644 index 000000000..e7ec241a8 Binary files /dev/null and b/public/images/s12/desktop--windows-media-player.png differ diff --git a/public/images/s12/dimensions.png b/public/images/s12/dimensions.png new file mode 100644 index 000000000..87e8ea6cf Binary files /dev/null and b/public/images/s12/dimensions.png differ diff --git a/public/images/s12/eternity.png b/public/images/s12/eternity.png new file mode 100644 index 000000000..da097309d Binary files /dev/null and b/public/images/s12/eternity.png differ diff --git a/public/images/s12/game--alkahistorian.png b/public/images/s12/game--alkahistorian.png new file mode 100644 index 000000000..a69daf737 Binary files /dev/null and b/public/images/s12/game--alkahistorian.png differ diff --git a/public/images/s12/game--anti-idle.png b/public/images/s12/game--anti-idle.png new file mode 100644 index 000000000..4992c4982 Binary files /dev/null and b/public/images/s12/game--anti-idle.png differ diff --git a/public/images/s12/game--hex-game.png b/public/images/s12/game--hex-game.png new file mode 100644 index 000000000..b3db86d40 Binary files /dev/null and b/public/images/s12/game--hex-game.png differ diff --git a/public/images/s12/game--melvor-idle.svg b/public/images/s12/game--melvor-idle.svg new file mode 100644 index 000000000..f26b4fc3a --- /dev/null +++ b/public/images/s12/game--melvor-idle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/s12/game--mine-defense.png b/public/images/s12/game--mine-defense.png new file mode 100644 index 000000000..0c72b91a4 Binary files /dev/null and b/public/images/s12/game--mine-defense.png differ diff --git a/public/images/s12/game--monies2.png b/public/images/s12/game--monies2.png new file mode 100644 index 000000000..167e68f56 Binary files /dev/null and b/public/images/s12/game--monies2.png differ diff --git a/public/images/s12/game--synergism.png b/public/images/s12/game--synergism.png new file mode 100644 index 000000000..775083ed8 Binary files /dev/null and b/public/images/s12/game--synergism.png differ diff --git a/public/images/s12/game--trimps.png b/public/images/s12/game--trimps.png new file mode 100644 index 000000000..8b06ec8f9 Binary files /dev/null and b/public/images/s12/game--trimps.png differ diff --git a/public/images/s12/game--universal-paperclips.png b/public/images/s12/game--universal-paperclips.png new file mode 100644 index 000000000..c19e7b9cd Binary files /dev/null and b/public/images/s12/game--universal-paperclips.png differ diff --git a/public/images/s12/game--wami.png b/public/images/s12/game--wami.png new file mode 100644 index 000000000..d0f9ad2ac Binary files /dev/null and b/public/images/s12/game--wami.png differ diff --git a/public/images/s12/infinity.png b/public/images/s12/infinity.png new file mode 100644 index 000000000..3d58be727 Binary files /dev/null and b/public/images/s12/infinity.png differ diff --git a/public/images/s12/options.png b/public/images/s12/options.png new file mode 100644 index 000000000..431d0fddd Binary files /dev/null and b/public/images/s12/options.png differ diff --git a/public/images/s12/reality.png b/public/images/s12/reality.png new file mode 100644 index 000000000..b7b38f567 Binary files /dev/null and b/public/images/s12/reality.png differ diff --git a/public/images/s12/shop.png b/public/images/s12/shop.png new file mode 100644 index 000000000..231bc6f3e Binary files /dev/null and b/public/images/s12/shop.png differ diff --git a/public/images/s12/statistics.png b/public/images/s12/statistics.png new file mode 100644 index 000000000..27ca51e30 Binary files /dev/null and b/public/images/s12/statistics.png differ diff --git a/public/images/s12/win7-start-menu-inactive.png b/public/images/s12/win7-start-menu-inactive.png new file mode 100644 index 000000000..7fe5d15b6 Binary files /dev/null and b/public/images/s12/win7-start-menu-inactive.png differ diff --git a/public/images/s12/xmark.png b/public/images/s12/xmark.png new file mode 100644 index 000000000..258fa07f8 Binary files /dev/null and b/public/images/s12/xmark.png differ diff --git a/public/stylesheets/new-ui-styles.css b/public/stylesheets/new-ui-styles.css index 75675f712..60bbffc04 100644 --- a/public/stylesheets/new-ui-styles.css +++ b/public/stylesheets/new-ui-styles.css @@ -14,8 +14,13 @@ --color-eternity--bg: #b341e04d; } +:root .t-s12 { + --sidebar-width: 0; +} + :root .t-normal, -:root .t-s9 { +:root .t-s9, +:root .t-s12 { --color-text: #ffffff; --color-text-inverted: black; --color-base: #1d1b22; @@ -41,7 +46,8 @@ } body.t-normal, -body.t-s9 { +body.t-s9, +body.t-s12 { color: white; background-color: #111014; } @@ -549,7 +555,8 @@ body.t-s9 { background-color: var(--color-infinity); } -.t-normal .c-game-header__tesseract-available { +.t-normal .c-game-header__tesseract-available, +.t-s12 .c-game-header__tesseract-available { background: #eeeeee; animation: a-tesseract-shift-dark 5s infinite; } @@ -570,12 +577,14 @@ body.t-s9 { margin: 0.6rem 0.4rem; } -.t-normal .o-achievement__tooltip { +.t-normal .o-achievement__tooltip, +.t-s12 .o-achievement__tooltip { background: var(--color-base); border: 0.1rem solid var(--color-accent); } -.t-normal .o-achievement__tooltip::after { +.t-normal .o-achievement__tooltip::after, +.t-s12 .o-achievement__tooltip::after { border-top-color: var(--color-accent); } @@ -891,11 +900,13 @@ body.t-s9 { color: var(--color-eternity); } -.t-normal .c-game-header__antimatter { +.t-normal .c-game-header__antimatter, +.t-s12 .c-game-header__antimatter { color: var(--color-accent); } -.t-normal .c-credits-header { +.t-normal .c-credits-header, +.t-s12 .c-credits-header { color: var(--color-accent); } @@ -924,17 +935,20 @@ body.t-s9 { justify-content: flex-end; } -.t-normal .c-sacrificed-glyphs--dragover { +.t-normal .c-sacrificed-glyphs--dragover, +.t-s12 .c-sacrificed-glyphs--dragover { border-color: rgb(255, 255, 255); box-shadow: 0 0 0.1rem 0.1rem rgb(255, 255, 255); } -.t-normal .c-glyph-choice-icon { +.t-normal .c-glyph-choice-icon, +.t-s12 .c-glyph-choice-icon { background-color: rgba(0, 0, 0, 30%); border: var(--var-border-width, 0.2rem) solid rgba(0, 0, 0, 40%); } -.t-normal .c-glyph-choice-effect-list { +.t-normal .c-glyph-choice-effect-list, +.t-s12 .c-glyph-choice-effect-list { background-color: rgba(0, 0, 0, 30%); border: var(--var-border-width, 0.2rem) solid rgba(0, 0, 0, 40%); } diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css index 243617f37..71956ee37 100644 --- a/public/stylesheets/styles.css +++ b/public/stylesheets/styles.css @@ -5358,7 +5358,7 @@ properly on certain themes. */ border: var(--var-border-width, 0.3rem) solid black; border-radius: var(--var-border-radius, 0.6rem); padding: 1rem; - transition-duration: 0.2s; + transition: all 0.2s, left 0s, top 0s, transform 0s; } .c-modal--short { @@ -9254,6 +9254,11 @@ input.o-automator-block-input { padding: 0.5rem; } +.t-s12 .l-h2p-body { + font-size: 1.3rem; + margin-left: 0; +} + .l-h2p-body::-webkit-scrollbar { width: 1rem; } @@ -9315,6 +9320,10 @@ input.o-automator-block-input { border-bottom: 0.1rem solid white; } +.t-s12 .o-h2p-tab-button { + border-bottom: 0.1rem solid black; +} + .l-help-me { width: 2rem; height: 2rem; diff --git a/public/stylesheets/theme-S12.css b/public/stylesheets/theme-S12.css new file mode 100644 index 000000000..467e64943 --- /dev/null +++ b/public/stylesheets/theme-S12.css @@ -0,0 +1,326 @@ +body.t-s12 { + --s12-taskbar-height: 4.5rem; + --s12-border-color: #27221e; + --s12-background-gradient: + repeating-linear-gradient( + 50deg, + rgba(170, 170, 170, 10%), + rgba(170, 170, 170, 10%) 2rem, + rgba(255, 255, 255, 10%) 4rem, + rgba(255, 255, 255, 10%) 5rem, + rgba(170, 170, 170, 10%) 6rem, + rgba(170, 170, 170, 10%) 8rem + ), + linear-gradient( + -50deg, + rgba(60, 60, 60, 30%), + transparent 20%, + transparent 80%, + rgba(60, 60, 60, 30%) + ); + + height: 100%; + background: url("../images/s12-bg.jpg") no-repeat; + background-attachment: fixed; + background-color: #1bb9ee; + + /* Center and scale the image nicely */ + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +.t-s12 .container { + color: black; +} + +.t-s12 #ui { + justify-content: flex-start; + /* stylelint-disable-next-line unit-allowed-list */ + perspective: 200vh; + + scrollbar-gutter: auto; +} + +.t-s12 .ui-wrapper { + flex-direction: column; + height: 100%; +} + +.c-s12-close-button, +.t-s12 .c-modal .c-modal__close-btn { + display: flex; + width: 5rem; + height: 1.8rem; + position: absolute; + top: 0; + right: 1rem; + justify-content: center; + align-items: center; + font-size: 0; + background-image: + url("../images/s12/xmark.png"), + linear-gradient(to bottom, rgba(255, 255, 255, 40%) 40%, transparent 60%), + radial-gradient(#b43721, #844740); + background-position: center; + background-repeat: no-repeat; + border: 0.15rem solid var(--s12-border-color); + border-top: none; + border-radius: 0 0 0.5rem 0.5rem; + box-shadow: inset 0 0 0.2rem 0.1rem rgba(255, 255, 255, 80%); + cursor: pointer; +} + +.c-modal__close-btn--disabled { + filter: grayscale(1); + cursor: default; +} + +.c-s12-close-button::before, +.t-s12 .c-modal .c-modal__close-btn:not(.c-modal__close-btn--disabled)::before { + content: ""; + width: 100%; + height: 100%; + opacity: 0; + background-image: + url("../images/s12/xmark.png"), + linear-gradient(to bottom, transparent 50%, rgba(224, 178, 64, 60%)); + background-position: center; + background-repeat: no-repeat; + border-radius: inherit; + box-shadow: 0 0 1rem 0.3rem #d35532; + transition: opacity 0.4s; +} + +.c-s12-close-button:hover::before, +.c-modal__close-btn:hover::before { + opacity: 1; +} + +.t-s12 .c-modal { + --color-text: black; + --color-text-inverted: white; + max-width: calc(100% - 10rem); + font-family: "Segoe UI", Typewriter; + font-weight: normal; + background-color: rgba(187, 216, 242, 75%); + background-image: var(--s12-background-gradient); + border: 0.1rem solid var(--s12-border-color); + padding: 2.4rem 1rem 1rem; + + -webkit-backdrop-filter: blur(1rem); + backdrop-filter: blur(1rem); +} + +.t-s12 .c-modal__inner:not(.c-credits-modal), +.t-s12 .c-modal-message, +.t-s12 .l-h2p-modal, +.t-s12 .c-information-modal, +.t-s12 .l-changelog-modal, +.t-s12 .c-modal-away-progress { + align-items: flex-start; + text-align: left; + font-size: 1.3rem; + color: black; + background-color: #f0f0f0; + border: 0.1rem solid var(--s12-border-color); + margin: 0; + padding: 1rem; +} + +.t-s12 .modal-progress-bar, +.t-s12 .c-credits-modal { + color: black; + background-color: #f0f0f0; + border: 0.1rem solid var(--s12-border-color); + box-sizing: border-box; + padding: 1rem; +} + +.t-s12 .c-modal-options__large { + width: 53rem; +} + +.t-s12 .l-singularity-milestone-modal-container-inner .c-laitela-milestone { + text-align: center; + font-family: Typewriter; + font-size: 1.4rem; +} + +.t-s12 .c-modal__title, +.t-s12 .l-h2p-header, +.t-s12 .l-changelog-header { + display: flex; + width: auto; + height: 2.2rem; + position: absolute; + top: 0.2rem; + left: 0; + align-items: center; + font-size: 1.3rem; + font-weight: normal; + text-shadow: 0 0 0.7rem white; + padding-left: 1rem; +} + +.c-credits-modal .c-modal__title { + display: inline; + position: static; +} + +.c-credits-modal .c-game-header__antimatter { + color: black; +} + +.t-s12 .c-h2p-title, +.t-s12 .c-changelog-title { + font-size: 1.3rem; + font-weight: normal; +} + +.t-s12 .c-modal__confirmation-toggle { + margin-top: 1.5rem; +} + +.t-s12 .c-modal__confirmation-toggle__checkbox { + width: 1.6rem; + height: 1.6rem; + color: #4b6192; + background: linear-gradient(-45deg, #ffffffff, #aeb2b5); + border: 0.2rem solid white; + border-radius: 0; + box-shadow: 0 0 0.1rem 0.1rem var(--s12-border-color), inset 0 0 0.1rem 0.1rem #a0a0a0; +} + +.t-s12 .c-modal__confirmation-toggle:hover .c-modal__confirmation-toggle__checkbox { + transform: none; +} + +.t-s12 .c-modal .o-primary-btn:not(.c-modal__close-btn, .c-autobuyer-box__mode-select), +.t-s12 .c-new-game-button { + position: relative; + z-index: 0; + align-self: flex-end; + text-align: center; + font-family: "Segoe UI", Typewriter; + font-weight: normal; + color: black; + background-image: linear-gradient(to bottom, white 45%, #d7d7d7 55%); + border: 0.16rem solid #747474; + box-shadow: inset 0 0 0.2rem 0.1rem white; + padding-top: 0; + padding-bottom: 0; + transition: box-shadow 0.3s; +} + +.t-s12 .c-new-game-button { + padding: 1rem; +} + +.t-s12 .c-modal .o-primary-btn.c-select-notation__item, +.t-s12 .c-modal .o-primary-btn.c-select-theme__item { + background-color: white; + background-image: none; + border: none; + box-shadow: none; +} + +.t-s12 .c-modal .o-primary-btn.c-select-notation__item::before, +.t-s12 .c-modal .o-primary-btn.c-select-theme__item::before { + display: none; +} + +.t-s12 .c-modal .o-primary-btn.c-dropdown-btn { + z-index: 1; + align-self: center; +} + +.t-s12 .c-modal .l-select-notation, +.t-s12 .c-modal .l-select-theme { + scrollbar-color: #747474 white; + border-color: #747474; +} + +.l-select-notation__inner::-webkit-scrollbar, +.l-select-theme__inner::-webkit-scrollbar { + background-color: white; +} + +.t-s12 .c-modal .l-select-notation__inner::-webkit-scrollbar-thumb, +.t-s12 .c-modal .l-select-theme__inner::-webkit-scrollbar-thumb { + background-color: #747474; +} + +.t-s12 .c-modal .o-primary-btn--disabled { + opacity: 0.5; +} + +.t-s12 .c-modal .o-primary-btn:not(.c-modal__close-btn, .c-autobuyer-box__mode-select)::after, +.t-s12 .c-new-game-button::after { + content: ""; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; + background-color: transparent; + transition: background-color 0.3s; +} + +.t-s12 .c-modal .o-primary-btn:not(.c-modal__close-btn):hover, +.t-s12 .c-new-game-button:hover { + box-shadow: inset 0 0 0.2rem 0.1rem #52d9fb; +} + +.t-s12 .c-modal .o-primary-btn:not(.c-modal__close-btn):hover::after, +.t-s12 .c-new-game-button:hover::after { + background-color: rgba(46, 210, 255, 30%); +} + +.t-s12 .c-modal .o-primary-btn.o-primary-btn.c-select-notation__item:hover, +.t-s12 .c-modal .o-primary-btn.o-primary-btn.c-select-theme__item:hover { + color: white; + background-color: #2a90ff; + box-shadow: none; +} + +.t-s12 .l-modal-buttons { + align-self: flex-end; + font-size: 1.2rem; +} + +.t-s12 .c-modal__confirmation-toggle__tooltip { + display: none; +} + +.t-s12 .l-modal-options__save-record { + align-self: center; +} + +.t-s12 .modal-progress-bar__bg { + overflow: hidden; + position: relative; + background-image: linear-gradient(to right, #cbcbcb 90%, #c0c0c0); + border: 0.1rem solid var(--s12-border-color); + border-radius: 0.2rem; + box-shadow: inset 0 0 0.2rem 0.1rem white; +} + +.t-s12 .modal-progress-bar__bg::before { + content: ""; + width: 100%; + height: 100%; + position: absolute; + inset: 0; + background-image: linear-gradient(rgba(255, 255, 255, 70%) 30%, transparent 40%); +} + +.t-s12 .modal-progress-bar__fg { + background: linear-gradient(to right, #0cb826, #20da3e 20%, #20da3e 80%, #0cb826); +} + +.t-s12 .c-modal .c-autobuyer-box-row { + text-align: center; + background-color: transparent; +} diff --git a/src/components/CreditsDisplay.vue b/src/components/CreditsDisplay.vue index 722f21a79..bb455b8f2 100644 --- a/src/components/CreditsDisplay.vue +++ b/src/components/CreditsDisplay.vue @@ -11,6 +11,7 @@ export default { computed: { people() { return GameDatabase.credits.people; }, roles() { return GameDatabase.credits.roles; }, + isS12EndDisplay() { return this.$viewModel.theme === "S12" && !this.isModal; }, }, methods: { relevantPeople(role) { @@ -23,7 +24,7 @@ export default { diff --git a/src/components/modals/ModalProgressBar.vue b/src/components/modals/ModalProgressBar.vue index e417645bc..37e066ff1 100644 --- a/src/components/modals/ModalProgressBar.vue +++ b/src/components/modals/ModalProgressBar.vue @@ -31,36 +31,38 @@ export default {
-
-
- {{ progress.label }} -
-
- {{ progress.info() }} -
-
-
- {{ progress.progressName }}: {{ formatInt(progress.current) }}/{{ formatInt(progress.max) }} +
+
+
+ {{ progress.label }}
- Remaining: {{ remainingTime }} + {{ progress.info() }}
-
-
-
+
+
+ {{ progress.progressName }}: {{ formatInt(progress.current) }}/{{ formatInt(progress.max) }} +
+
+ Remaining: {{ remainingTime }} +
+
+
+
+
-
-
- +
+ +
@@ -71,19 +73,22 @@ export default { z-index: 8; } -.modal-progress-bar { - display: flex; - flex-direction: column; - width: 40rem; +.c-modal { position: fixed; /* stylelint-disable-next-line unit-allowed-list */ top: 50vh; /* stylelint-disable-next-line unit-allowed-list */ left: 50vw; + transform: translate(-50%, -50%); +} + +.modal-progress-bar { + display: flex; + flex-direction: column; + width: 40rem; z-index: 3; justify-content: space-between; align-items: center; - transform: translate(-50%, -50%); } .modal-progress-bar__hbox { diff --git a/src/components/modals/ModalWrapper.vue b/src/components/modals/ModalWrapper.vue index a6a2518a7..f3243045c 100644 --- a/src/components/modals/ModalWrapper.vue +++ b/src/components/modals/ModalWrapper.vue @@ -15,7 +15,7 @@ export default {