{item.text}
\n \n );\n case 'separator':\n return ;\n case 'menu':\n return (\n {item.text}
\n \n {hover && (\n
\n \n );\n default:\n return null;\n }\n};\n\nconst StyledSubMenu = styled(SubMenu)`\n position: absolute;\n z-index: 1;\n left: ${({ left }) => left || '100%'};\n bottom: ${({ bottom }) => bottom || '-1px'};\n background-color: white;\n padding-left: 1px;\n box-shadow: inset 0 0 0 1px #72ade9, 2px 3px 3px rgb(0, 0, 0, 0.5);\n &-separator {\n padding: 0 5px;\n height: 2px;\n box-shadow: inset 3px 0 #4081ff;\n background: linear-gradient(\n to right,\n rgba(0, 0, 0, 0) 0%,\n rgba(0, 0, 0, 0.1) 50%,\n rgba(0, 0, 0, 0) 100%\n );\n }\n &-item {\n height: 25px;\n display: flex;\n align-items: center;\n padding: 0 10px;\n box-shadow: inset 3px 0 #4081ff;\n position: relative;\n padding-right: 22px;\n color: black;\n }\n &-item.hover {\n background-color: #1b65cc;\n color: white;\n }\n &-item:hover {\n background-color: #1b65cc;\n color: white;\n &-arrow:before {\n border-left-color: #fff;\n }\n }\n &-item:hover,\n &-item.hover > &-arrow:before {\n border-left-color: #fff;\n }\n &-img {\n margin-right: 6px;\n width: 16px;\n height: 16px;\n }\n &-text {\n font-size: 11px;\n white-space: nowrap;\n }\n &-arrow {\n position: absolute;\n right: 0;\n height: 100%;\n width: 10px;\n &:before {\n top: 9px;\n right: 6px;\n content: '';\n display: block;\n border: 4px solid transparent;\n border-right: 0;\n border-left-color: #000;\n position: absolute;\n }\n }\n`;\n\nexport default StyledSubMenu;\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\n\nimport find from './find.svg';\nimport smile from './smile.svg';\n\nfunction Search({ className, goMain, onSearch, query }) {\n const [value, setValue] = useState(query);\n const [tag, setTag] = useState('All');\n function onChange(e) {\n setValue(e.target.value);\n }\n function onClick() {\n onSearch(value);\n }\n function onKeyDown(e) {\n if (e.key !== 'Enter') return;\n onSearch(value);\n }\n function renderTags() {\n return 'All,Maps,Images,News,Videos,More'.split(',').map(tagName => (\n \n \n \n \n \n \n
\n );\n}\n\nexport default styled(Search)`\n height: 100%;\n background: white;\n padding-top: 22px;\n position: relative;\n .top-bars {\n border-bottom: 1px rgb(235, 235, 235) solid;\n }\n .top-bar {\n height: 44px;\n }\n .app-bar {\n height: 58px;\n margin-left: 154px;\n position: relative;\n width: 584px;\n }\n .bar-items {\n display: flex;\n align-items: center;\n position: relative;\n height: 44px;\n }\n .left {\n position: absolute;\n left: 0;\n }\n .right {\n position: absolute;\n right: 4px;\n }\n .logo {\n width: 150px;\n height: 34px;\n padding: 4px 28px 0 30px;\n cursor: pointer;\n }\n .search-bar {\n display: flex;\n align-items: center;\n border-radius: 22px;\n width: 586px;\n height: 46px;\n border: 1px rgb(223, 225, 229) solid;\n padding: 5px 0 0 20px;\n input {\n outline: 0;\n border: 0;\n flex: 1;\n width: 30px;\n font-size: 16px;\n }\n img {\n width: 24px;\n height: 24px;\n }\n .icon {\n width: 40px;\n }\n .icon:nth-of-type(1) {\n cursor: pointer;\n }\n .icon:nth-of-type(2) {\n fill: rgb(66, 133, 244);\n color: rgb(66, 133, 244);\n }\n }\n .functions {\n display: flex;\n align-items: center;\n height: 100%;\n padding-right: 14px;\n img {\n margin: 8px;\n width: 24px;\n cursor: pointer;\n height: 24px;\n }\n }\n .tags {\n height: 100%;\n display: flex;\n font-size: 13px;\n align-items: center;\n color: rgb(119, 119, 119);\n }\n .tag.active {\n color: rgb(26, 115, 232);\n border-bottom: 3px rgb(26, 115, 232) solid;\n font-weight: 700;\n }\n .tag {\n height: 100%;\n cursor: pointer;\n padding: 28px 16px 0;\n &:hover:not(.active) {\n color: rgb(34, 34, 34);\n }\n }\n\n .content {\n color: rgb(34, 34, 34);\n padding: 55px 0 0 170px;\n p {\n margin: 16px 0;\n }\n }\n #search-in-content {\n font-weight: 700;\n }\n footer {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 83px;\n border-top: 1px solid rgba(0, 0, 0, 0.07);\n background-color: rgba(0, 0, 0, 0.05);\n .upper {\n position: relative;\n color: rgba(0, 0, 0, 0.54);\n width: 100%;\n font-size: 15px;\n padding-bottom: 2px;\n height: 50%;\n }\n .lower {\n position: relative;\n border-top: 1px solid rgba(0, 0, 0, 0.07);\n height: 50%;\n color: rgb(95, 99, 104);\n font-size: 13px;\n width: 100%;\n .item {\n cursor: pointer;\n }\n .item:hover {\n text-decoration: underline;\n }\n }\n .footer-items {\n height: 100%;\n display: flex;\n align-items: center;\n padding-left: 150px;\n position: relative;\n }\n .left .item {\n margin-right: 27px;\n }\n }\n @media (max-width: 800px) {\n .top-bar {\n height: auto;\n }\n .bar-items.left {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n height: auto;\n position: relative;\n }\n .bar-items.right {\n display: none;\n }\n .search-bar {\n margin-top: 15px;\n width: 90%;\n height: 40px;\n border-radius: 3px;\n padding: 0px 5px 0 10px;\n .icon {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 30px;\n }\n }\n .app-bar {\n margin: 0 15px;\n width: calc(100% - 30px);\n height: 40px;\n }\n .tags {\n display: flex;\n width: 100%;\n }\n .tags.right {\n display: none;\n }\n .tag {\n text-align: center;\n padding: 16px 0 0 0;\n flex: 1;\n }\n .content {\n padding: 10px 40px;\n }\n .footer-items.left {\n padding-left: 25px;\n }\n footer .left .item {\n margin-right: 15px;\n }\n }\n`;\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport smile from './smile.svg';\n\nfunction Main({ onSearch, className }) {\n const [value, setValue] = useState('');\n function onChange(e) {\n setValue(e.target.value);\n }\n function onClick() {\n onSearch(value);\n }\n function onKeyDown(e) {\n if (e.key !== 'Enter') return;\n onSearch(value);\n }\n return (\n \n
\n \n
\n \n
\n \n
\n \n 
\n
\n \n
\n \n 
\n
\n \n
\n {renderTags()}
\n \n
\n Settings
\n Tools
\n \n Your search - {query} - did not\n match any documents.\n
\nSuggestions
\n- \n
- Make sure that all words are spelled correctly. \n
- Try different keywords. \n
- Try more general keywords. \n
\n \n \n \n \n \n \n
\n );\n}\n\nexport default styled(Main)`\n height: 100%;\n background: white;\n position: relative;\n header {\n position: absolute;\n top: 0;\n width: 100%;\n height: 60px;\n padding: 0 15px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n font-size: 13px;\n color: rgb(80, 80, 80);\n * {\n padding-right: 15px;\n cursor: pointer;\n }\n .text:hover {\n text-decoration: underline;\n }\n img {\n width: 48px;\n }\n }\n .content {\n display: flex;\n flex-direction: column;\n align-items: center;\n .logo {\n height: 92px;\n width: 272px;\n margin-top: 198px;\n }\n .search-bar {\n margin-left: 11px;\n margin-top: 26px;\n width: 586px;\n height: 46px;\n border: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n display: flex;\n align-items: center;\n padding: 0 8px 0 16px;\n &:hover {\n box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.3);\n }\n input {\n border: none;\n color: rgba(0, 0, 0, 0.87);\n height: 100%;\n flex: 1;\n height: 34px;\n margin-top: 5px;\n font-size: 16px;\n border: 0;\n outline: 0;\n }\n\n .icon {\n width: 40px;\n padding: 0 8px;\n height: 44px;\n cursor: pointer;\n display: flex;\n align-items: center;\n img {\n height: 24px;\n width: 24px;\n }\n }\n }\n .buttons {\n width: 100%;\n height: 36px;\n margin-top: 31px;\n display: flex;\n align-items: center;\n justify-content: center;\n button {\n padding: 0 16px;\n height: 36px;\n margin: 0 6px;\n border: 0;\n font-weight: 700;\n font-size: 13px;\n color: rgb(120, 120, 120);\n border: 1px transparent solid;\n background: rgb(242, 242, 242);\n }\n button:hover {\n border-radius: 2px;\n color: rgb(34, 34, 34);\n background: rgb(248, 248, 248);\n border: 1px rgb(198, 198, 198) solid;\n box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);\n }\n }\n }\n footer {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 83px;\n border-top: 1px solid rgba(0, 0, 0, 0.07);\n background-color: rgba(0, 0, 0, 0.05);\n .upper {\n position: relative;\n color: rgba(0, 0, 0, 0.54);\n width: 100%;\n font-size: 15px;\n padding-bottom: 2px;\n height: 50%;\n }\n .lower {\n position: relative;\n border-top: 1px solid rgba(0, 0, 0, 0.07);\n height: 50%;\n color: rgb(95, 99, 104);\n font-size: 13px;\n width: 100%;\n .item {\n cursor: pointer;\n }\n .item:hover {\n text-decoration: underline;\n }\n }\n .items {\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .left {\n left: 3px;\n }\n .right {\n right: 3px;\n }\n .left .item {\n padding-left: 27px;\n }\n .right .item {\n padding-right: 27px;\n }\n }\n\n @media (max-width: 768px) {\n header {\n img {\n width: 36px;\n }\n }\n .content .search-bar {\n width: 90%;\n margin-left: 0;\n }\n .logo {\n width: 204px;\n height: 69px;\n }\n footer {\n .left .item {\n padding-left: 14px;\n }\n .right .item {\n padding-right: 14px;\n }\n .lower {\n .item {\n display: none;\n }\n }\n }\n }\n`;\n","import React from 'react';\nimport Search from './Search';\nimport Main from './Main';\n\nexport function Google({ route = 'main', query = '', onSearch, goMain }) {\n if (route === 'main') return ;\n else return Gmail
\n Images
\n \n
\n \n
\n \n \n \n
\n \n \n 
\n \n \n \n 
\n Back\n \n
\n \n
\n \n 
\n \n
\n \n 
\n
\n \n
\n \n 
\n
\n \n \n
\n \n
\n \n 
\n
\n \n \n 
\n \n
\n \n
\n \n 
\n
\n \n 
\n
\n \n Address
\n \n 
\n
\n \n {`https://www.google.com.tw${\n state.route === 'search'\n ? `/search?q=${encodeURIComponent(state.query)}`\n : ''\n }`}\n
\n \n 
\n Go\n
\n \n \n Links\n
\n \n
\n \n \n );\n}\n\nconst Div = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n display: flex;\n overflow: hidden;\n flex-direction: column;\n background: linear-gradient(to right, #edede5 0%, #ede8cd 100%);\n\n .ie__toolbar {\n position: relative;\n display: flex;\n align-items: center;\n line-height: 100%;\n height: 24px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.7);\n flex-shrink: 0;\n }\n .ie__options {\n height: 23px;\n border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n border-right: 1px solid rgba(0, 0, 0, 0.15);\n padding-left: 2px;\n flex: 1;\n }\n .ie__windows-logo {\n height: 100%;\n border-left: 1px solid white;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n }\n .ie__function_bar {\n height: 36px;\n display: flex;\n align-items: center;\n font-size: 11px;\n padding: 1px 3px 0;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n }\n .ie__function_bar__button {\n display: flex;\n height: 100%;\n align-items: center;\n border: 1px solid rgba(0, 0, 0, 0);\n border-radius: 3px;\n &:hover {\n border: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.1);\n }\n &:hover:active {\n border: 1px solid rgb(185, 185, 185);\n background-color: #dedede;\n box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.7);\n color: rgba(255, 255, 255, 0.7);\n & > * {\n transform: translate(1px, 1px);\n }\n }\n }\n .ie__function_bar__button--disable {\n filter: grayscale(1);\n opacity: 0.7;\n display: flex;\n height: 100%;\n align-items: center;\n border: 1px solid rgba(0, 0, 0, 0);\n }\n .ie__function_bar__text {\n margin-right: 4px;\n }\n .ie__function_bar__icon {\n height: 30px;\n width: 30px;\n &--normalize {\n height: 22px;\n width: 22px;\n margin: 0 4px 0 1px;\n }\n &--margin12 {\n height: 22px;\n width: 22px;\n margin: 0 1px 0 2px;\n }\n &--margin-1 {\n margin: 0 -1px;\n height: 30px;\n width: 30px;\n }\n }\n .ie__function_bar__separate {\n height: 90%;\n width: 1px;\n background-color: rgba(0, 0, 0, 0.2);\n margin: 0 2px;\n }\n .ie__function_bar__arrow {\n height: 100%;\n display: flex;\n align-items: center;\n margin: 0 4px;\n &:before {\n content: '';\n display: block;\n border-width: 3px 3px 0;\n border-color: #000 transparent;\n border-style: solid;\n }\n }\n .ie__function_bar__arrow--margin-11 {\n height: 100%;\n display: flex;\n align-items: center;\n margin: 0 1px 0 -1px;\n &:before {\n content: '';\n display: block;\n border-width: 3px 3px 0;\n border-color: #000 transparent;\n border-style: solid;\n }\n }\n .ie__address_bar {\n border-top: 1px solid rgba(255, 255, 255, 0.7);\n height: 22px;\n font-size: 11px;\n display: flex;\n align-items: center;\n padding: 0 2px 2px;\n box-shadow: inset 0 -2px 3px -1px #2d2d2d;\n }\n .ie__address_bar__title {\n line-height: 100%;\n color: rgba(0, 0, 0, 0.5);\n padding: 5px;\n }\n .ie__address_bar__content {\n border: rgba(122, 122, 255, 0.6) 1px solid;\n height: 100%;\n display: flex;\n flex: 1;\n align-items: center;\n background-color: white;\n position: relative;\n &__img {\n width: 14px;\n height: 14px;\n }\n &__img:last-child {\n width: 15px;\n height: 15px;\n right: 1px;\n position: absolute;\n }\n &__img:last-child:hover {\n filter: brightness(1.1);\n }\n &__text {\n position: absolute;\n white-space: nowrap;\n left: 16px;\n right: 17px;\n overflow: hidden;\n }\n }\n .ie__address_bar__go {\n display: flex;\n align-items: center;\n padding: 0 18px 0 5px;\n height: 100%;\n position: relative;\n &__img {\n height: 95%;\n border: 1px solid rgba(255, 255, 255, 0.2);\n margin-right: 3px;\n }\n }\n .ie__address_bar__links {\n display: flex;\n align-items: center;\n padding: 0 18px 0 5px;\n height: 100%;\n position: relative;\n &__img {\n position: absolute;\n right: 2px;\n top: 3px;\n height: 5px;\n width: 8px;\n }\n &__text {\n color: rgba(0, 0, 0, 0.5);\n }\n }\n .ie__address_bar__separate {\n height: 100%;\n width: 1px;\n background-color: rgba(0, 0, 0, 0.1);\n box-shadow: 1px 0 rgba(255, 255, 255, 0.7);\n }\n .ie__content {\n flex: 1;\n overflow: auto;\n padding-left: 1px;\n border-left: 1px solid #6f6f6f;\n background-color: #f1f1f1;\n position: relative;\n }\n .ie__content__inner {\n position: relative;\n min-height: 800px;\n min-width: 800px;\n width: 100%;\n height: 100%;\n }\n .ie__footer {\n height: 20px;\n border-top: 1px solid transparent;\n box-shadow: inset 0 1px 3px rgba(50, 50, 50, 0.8);\n background-color: rgb(236, 233, 216);\n display: flex;\n align-items: center;\n padding-top: 2px;\n }\n .ie__footer__status {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n padding-left: 2px;\n &__text {\n font-size: 11px;\n }\n &__img {\n height: 14px;\n width: 14px;\n margin-right: 3px;\n }\n }\n .ie__footer__block {\n height: 85%;\n width: 22px;\n border-left: 1px solid rgba(0, 0, 0, 0.15);\n box-shadow: inset 1px 0 rgba(255, 255, 255, 0.7);\n }\n .ie__footer__right {\n display: flex;\n align-items: center;\n width: 150px;\n height: 80%;\n border-left: 1px solid rgba(0, 0, 0, 0.11);\n box-shadow: inset 1px 0 rgba(255, 255, 255, 0.7);\n padding-left: 5px;\n position: relative;\n &__text {\n font-size: 11px;\n }\n &__img {\n height: 14px;\n width: 14px;\n margin-right: 3px;\n }\n &__dots {\n position: absolute;\n right: 11px;\n bottom: -1px;\n width: 2px;\n height: 2px;\n box-shadow: 2px 0px rgba(0, 0, 0, 0.25), 5.5px 0px rgba(0, 0, 0, 0.25),\n 9px 0px rgba(0, 0, 0, 0.25), 5.5px -3.5px rgba(0, 0, 0, 0.25),\n 9px -3.5px rgba(0, 0, 0, 0.25), 9px -7px rgba(0, 0, 0, 0.25),\n 3px 1px rgba(255, 255, 255, 1), 6.5px 1px rgba(255, 255, 255, 1),\n 10px 1px rgba(255, 255, 255, 1), 10px -2.5px rgba(255, 255, 255, 1),\n 10px -6px rgba(255, 255, 255, 1);\n }\n }\n`;\n\nexport default InternetExplorer;\n","export const Config = {\n Beginner: {\n rows: 9,\n columns: 9,\n ceils: 81,\n mines: 10,\n },\n Intermediate: {\n rows: 16,\n columns: 16,\n ceils: 256,\n mines: 40,\n },\n Expert: {\n rows: 16,\n columns: 30,\n ceils: 480,\n mines: 99,\n },\n};\n","export const Game = [\n {\n type: 'item',\n text: 'New',\n hotkey: 'F2',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n text: 'Beginner',\n },\n {\n type: 'item',\n text: 'Intermediate',\n },\n {\n type: 'item',\n text: 'Expert',\n },\n {\n type: 'item',\n text: 'Custom...',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n text: 'Marks (?)',\n symbol: 'check',\n },\n {\n type: 'item',\n text: 'Color',\n symbol: 'check',\n },\n {\n type: 'item',\n text: 'Sound',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n text: 'Best Times...',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n text: 'Exit',\n },\n];\n\nconst Help = [\n {\n type: 'item',\n text: 'Contents',\n hotkey: 'F1',\n },\n {\n type: 'item',\n text: 'Search for Help on...',\n },\n {\n type: 'item',\n text: 'Using Help',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n text: 'About Minesweeper',\n },\n];\nexport default { Game, Help };\n","import React, { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { WindowDropDowns } from 'components';\nimport dropDownData from './dropDownData';\nimport dead from 'assets/minesweeper/dead.png';\nimport smile from 'assets/minesweeper/smile.png';\nimport win from 'assets/minesweeper/win.png';\nimport ohh from 'assets/minesweeper/ohh.png';\nimport empty from 'assets/empty.png';\nimport open1 from 'assets/minesweeper/open1.png';\nimport open2 from 'assets/minesweeper/open2.png';\nimport open3 from 'assets/minesweeper/open3.png';\nimport open4 from 'assets/minesweeper/open4.png';\nimport open5 from 'assets/minesweeper/open5.png';\nimport open6 from 'assets/minesweeper/open6.png';\nimport open7 from 'assets/minesweeper/open7.png';\nimport open8 from 'assets/minesweeper/open8.png';\nimport flag from 'assets/minesweeper/flag.png';\nimport mine from 'assets/minesweeper/mine-ceil.png';\nimport mineDeath from 'assets/minesweeper/mine-death.png';\nimport misFlagged from 'assets/minesweeper/misflagged.png';\nimport question from 'assets/minesweeper/question.png';\nimport digit0 from 'assets/minesweeper/digit0.png';\nimport digit1 from 'assets/minesweeper/digit1.png';\nimport digit2 from 'assets/minesweeper/digit2.png';\nimport digit3 from 'assets/minesweeper/digit3.png';\nimport digit4 from 'assets/minesweeper/digit4.png';\nimport digit5 from 'assets/minesweeper/digit5.png';\nimport digit6 from 'assets/minesweeper/digit6.png';\nimport digit7 from 'assets/minesweeper/digit7.png';\nimport digit8 from 'assets/minesweeper/digit8.png';\nimport digit9 from 'assets/minesweeper/digit9.png';\nimport digit_ from 'assets/minesweeper/digit-.png';\n\nconst digits = [\n digit0,\n digit1,\n digit2,\n digit3,\n digit4,\n digit5,\n digit6,\n digit7,\n digit8,\n digit9,\n];\nfunction renderDigits(number) {\n let numberStr;\n if (number < 0) {\n const _number = -number % 100;\n if (_number === 0) {\n numberStr = '00';\n } else if (_number < 10) {\n numberStr = '0' + _number;\n } else {\n numberStr = String(_number);\n }\n return (\n <>\n \n
\n e.preventDefault()}>\n \n \n
\n \n \n );\n}\nfunction getTextImg(index) {\n return [empty, open1, open2, open3, open4, open5, open6, open7, open8][index];\n}\nfunction Ceils({ ceils }) {\n function renderContent(ceil) {\n const { state, minesAround, opening } = ceil;\n switch (state) {\n case 'open':\n return \n
\n \n
\n \n {renderDigits(remainMines())}\n
\n \n \n
\n {renderDigits(seconds)}
\n \n {renderContent(ceil)}\n
\n ));\n}\n\nconst Die = () => (\n <>\n \n {s}\n
\n ));\n}\n\nfunction Error({ onClose, message = \"Something's wrong!\" }) {\n useEffect(() => {\n try {\n new Audio(errorSoundSrc).play();\n } catch (e) {\n console.log(e);\n }\n }, []);\n return (\n\n
\n );\n}\n\nconst Div = styled.div`\n background-color: #f5f5f5;\n width: 100%;\n height: 100%;\n font-size: 11px;\n padding: 12px;\n display: flex;\n flex-direction: column;\n .error__top {\n display: flex;\n flex: 1;\n }\n .error__img {\n width: 30px;\n height: 30px;\n }\n .error__messages {\n padding: 2px 20px 12px;\n }\n .error__message {\n line-height: 16px;\n }\n .error__bottom {\n display: flex;\n width: 100%;\n justify-content: center;\n }\n .error__button {\n width: 80px;\n height: 22px;\n display: flex;\n border: 1px solid black;\n justify-content: center;\n align-items: center;\n box-shadow: inset -1px -1px 1px black;\n &:hover:active {\n box-shadow: inset 1px 1px 1px black;\n & > * {\n transform: translate(1px, 1px);\n }\n }\n }\n .error__confirm {\n line-height: 11px;\n }\n`;\n\nexport default Error;\n","export const File = [\n {\n type: 'item',\n text: 'Create Shortcut',\n disable: true,\n },\n {\n type: 'item',\n text: 'Delete',\n disable: true,\n },\n {\n type: 'item',\n text: 'Rename',\n disable: true,\n },\n {\n type: 'item',\n disable: true,\n text: 'Properties',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n text: 'Close',\n },\n];\nconst Edit = [\n {\n type: 'item',\n disable: true,\n text: 'Undo',\n hotkey: 'Ctrl+Z',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n disable: true,\n text: 'Cut',\n hotkey: 'Ctrl+X',\n },\n {\n type: 'item',\n disable: true,\n text: 'Copy',\n hotkey: 'Ctrl+C',\n },\n {\n type: 'item',\n disable: true,\n text: 'Paste',\n hotkey: 'Ctrl+V',\n },\n {\n type: 'item',\n disable: true,\n text: 'Paste Shortcut',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n text: 'Copy To Folder...',\n disable: true,\n },\n {\n type: 'item',\n text: 'Move To Folder...',\n disable: true,\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n text: 'Select All',\n hotkey: 'Ctrl+A',\n },\n {\n type: 'item',\n text: 'Invert Selection',\n },\n];\n\nconst View = [\n {\n type: 'menu',\n position: {\n left: 'calc(100% - 4px)',\n top: '-3px',\n },\n text: 'Toolbars',\n items: [\n {\n type: 'item',\n symbol: 'check',\n text: 'Standard Buttons',\n },\n {\n type: 'item',\n symbol: 'check',\n text: 'Address Bar',\n },\n {\n type: 'item',\n symbol: 'check',\n text: 'Links',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n symbol: 'check',\n text: 'Lock the Toolbars',\n },\n {\n type: 'item',\n text: 'Customize...',\n },\n ],\n },\n {\n type: 'item',\n symbol: 'check',\n text: 'Status Bar',\n },\n {\n type: 'menu',\n position: {\n left: 'calc(100% - 4px)',\n top: '-3px',\n },\n text: 'Explorer Bar',\n items: [\n {\n type: 'item',\n text: 'Search',\n hotkey: 'Ctrl+E',\n },\n {\n type: 'item',\n text: 'Favorites',\n hotkey: 'Ctrl+I',\n },\n {\n type: 'item',\n text: 'History',\n hotkey: 'Ctrl+H',\n },\n {\n type: 'item',\n text: 'Folders',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n text: 'Tip of the Day',\n },\n ],\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n text: 'Thumbnails',\n },\n {\n type: 'item',\n text: 'Tiles',\n symbol: 'circle',\n },\n {\n type: 'item',\n text: 'Icons',\n },\n {\n type: 'item',\n text: 'List',\n },\n {\n type: 'item',\n text: 'Details',\n },\n {\n type: 'separator',\n },\n {\n type: 'menu',\n position: {\n left: 'calc(100% - 4px)',\n top: '-3px',\n },\n text: 'Arrange Icons by',\n items: [\n {\n type: 'item',\n text: 'Name',\n },\n {\n type: 'item',\n text: 'Type',\n symbol: 'circle',\n },\n {\n type: 'item',\n text: 'Total Size',\n },\n {\n type: 'item',\n text: 'Free Space',\n },\n {\n type: 'item',\n text: 'Comments',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n text: 'Show in Groups',\n symbol: 'check',\n },\n {\n type: 'item',\n text: 'Auto Arrange',\n },\n {\n type: 'item',\n text: 'Align to Grid',\n },\n ],\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n text: 'Choose Details...',\n },\n {\n type: 'menu',\n position: {\n left: 'calc(100% - 4px)',\n top: '-3px',\n },\n text: 'Go to',\n items: [\n {\n type: 'item',\n disable: true,\n text: 'Back',\n hotkey: 'Alt+Left Arrow',\n },\n {\n type: 'item',\n disable: true,\n text: 'Forward',\n hotkey: 'Alt+Right Arrow',\n },\n {\n type: 'item',\n text: 'Up One Level',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n text: 'Home Page',\n hotkey: 'Alt+Home',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n text: 'My Computer',\n symbol: 'check',\n },\n ],\n },\n {\n type: 'item',\n text: 'Refresh',\n },\n];\nconst Favorites = [\n {\n type: 'item',\n text: 'Add to Favorites...',\n },\n {\n type: 'item',\n text: 'Organize Favorites...',\n },\n {\n type: 'separator',\n },\n {\n type: 'menu',\n symbol: 'folder',\n position: {\n left: 'calc(100% - 4px)',\n top: '-3px',\n },\n text: 'Links',\n items: [\n {\n type: 'item',\n text: 'Customize Links',\n symbol: 'ie-paper',\n },\n {\n type: 'item',\n text: 'Free Hotmail',\n symbol: 'ie-paper',\n },\n {\n type: 'item',\n text: 'Windows',\n symbol: 'ie-paper',\n },\n {\n type: 'item',\n text: 'Windows Marketplace',\n symbol: 'ie-book',\n },\n {\n type: 'item',\n text: 'Windows Media',\n symbol: 'ie-paper',\n },\n ],\n },\n {\n type: 'item',\n text: 'MSN.com',\n symbol: 'ie-paper',\n },\n {\n type: 'item',\n text: 'Radio Station Guide',\n symbol: 'ie-paper',\n },\n];\nconst Tools = [\n {\n type: 'item',\n text: 'Map Network Drive...',\n },\n {\n type: 'item',\n text: 'Disconnect Network Drive...',\n },\n {\n type: 'item',\n text: 'Synchronize...',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n text: 'Folder Options...',\n },\n];\nconst Help = [\n {\n type: 'item',\n text: 'Help and Support Center',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n text: 'Is this copy of Windows legal?',\n },\n {\n type: 'item',\n text: 'About Windows',\n },\n];\nexport default { File, Edit, View, Favorites, Tools, Help };\n","import React from 'react';\nimport styled from 'styled-components';\nimport ga from 'react-ga';\n\nimport { WindowDropDowns } from 'components';\nimport dropDownData from './dropDownData';\nimport go from 'assets/windowsIcons/290.png';\nimport search from 'assets/windowsIcons/299(32x32).png';\nimport computer from 'assets/windowsIcons/676(16x16).png';\nimport back from 'assets/windowsIcons/back.png';\nimport forward from 'assets/windowsIcons/forward.png';\nimport up from 'assets/windowsIcons/up.png';\nimport viewInfo from 'assets/windowsIcons/view-info.ico';\nimport remove from 'assets/windowsIcons/302(16x16).png';\nimport control from 'assets/windowsIcons/300(16x16).png';\nimport network from 'assets/windowsIcons/693(16x16).png';\nimport document from 'assets/windowsIcons/308(16x16).png';\nimport folderSmall from 'assets/windowsIcons/318(16x16).png';\nimport menu from 'assets/windowsIcons/358(32x32).png';\nimport folder from 'assets/windowsIcons/318(48x48).png';\nimport folderOpen from 'assets/windowsIcons/337(32x32).png';\nimport disk from 'assets/windowsIcons/334(48x48).png';\nimport cd from 'assets/windowsIcons/111(48x48).png';\nimport dropdown from 'assets/windowsIcons/dropdown.png';\nimport pullup from 'assets/windowsIcons/pullup.png';\n//import logo from 'assets/github-logo.png';\nimport logo from 'assets/shufa.png';\nimport mine from 'assets/minesweeper/mine-icon.png';\nimport windows from 'assets/windowsIcons/windows.png';\n\nfunction MyComputer({ onClose }) {\n function onClickOptionItem(item) {\n switch (item) {\n case 'Close':\n onClose();\n break;\n default:\n }\n }\n return (\n \n 
\n
\n {lineBreak(message)}
\n \n
\n \n OK\n
\n \n \n \n \n \n \n \n \n
\n );\n}\n\nconst Div = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n display: flex;\n overflow: hidden;\n flex-direction: column;\n background: linear-gradient(to right, #edede5 0%, #ede8cd 100%);\n .com__toolbar {\n position: relative;\n display: flex;\n align-items: center;\n line-height: 100%;\n height: 24px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.7);\n flex-shrink: 0;\n }\n .com__options {\n height: 23px;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n padding: 1px 0 1px 2px;\n border-left: 0;\n flex: 1;\n }\n .com__windows-logo {\n height: 100%;\n border-left: 1px solid white;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n }\n .com__function_bar {\n height: 36px;\n display: flex;\n align-items: center;\n font-size: 11px;\n padding: 1px 3px 0;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n flex-shrink: 0;\n }\n .com__function_bar__button {\n display: flex;\n height: 100%;\n align-items: center;\n border: 1px solid rgba(0, 0, 0, 0);\n border-radius: 3px;\n &:hover {\n border: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.1);\n }\n &:hover:active {\n border: 1px solid rgb(185, 185, 185);\n background-color: #dedede;\n box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.7);\n color: rgba(255, 255, 255, 0.7);\n & > * {\n transform: translate(1px, 1px);\n }\n }\n }\n .com__function_bar__button--disable {\n filter: grayscale(1);\n opacity: 0.7;\n display: flex;\n height: 100%;\n align-items: center;\n border: 1px solid rgba(0, 0, 0, 0);\n }\n .com__function_bar__text {\n margin-right: 4px;\n }\n .com__function_bar__icon {\n height: 30px;\n width: 30px;\n &--normalize {\n height: 22px;\n width: 22px;\n margin: 0 4px 0 1px;\n }\n &--margin12 {\n height: 22px;\n width: 22px;\n margin: 0 1px 0 2px;\n }\n &--margin-1 {\n margin: 0 -1px;\n height: 30px;\n width: 30px;\n }\n }\n .com__function_bar__separate {\n height: 90%;\n width: 1px;\n background-color: rgba(0, 0, 0, 0.2);\n margin: 0 2px;\n }\n .com__function_bar__arrow {\n height: 100%;\n display: flex;\n align-items: center;\n margin: 0 4px;\n &:before {\n content: '';\n display: block;\n border-width: 3px 3px 0;\n border-color: #000 transparent;\n border-style: solid;\n }\n }\n .com__function_bar__arrow--margin-11 {\n height: 100%;\n display: flex;\n align-items: center;\n margin: 0 1px 0 -1px;\n &:before {\n content: '';\n display: block;\n border-width: 3px 3px 0;\n border-color: #000 transparent;\n border-style: solid;\n }\n }\n .com__address_bar {\n flex-shrink: 0;\n border-top: 1px solid rgba(255, 255, 255, 0.7);\n height: 20px;\n font-size: 11px;\n display: flex;\n align-items: center;\n padding: 0 2px;\n box-shadow: inset 0 -2px 3px -1px #b0b0b0;\n }\n .com__address_bar__title {\n line-height: 100%;\n color: rgba(0, 0, 0, 0.5);\n padding: 5px;\n }\n .com__address_bar__content {\n border: rgba(122, 122, 255, 0.6) 1px solid;\n height: 100%;\n display: flex;\n flex: 1;\n align-items: center;\n background-color: white;\n position: relative;\n &__img {\n width: 14px;\n height: 14px;\n }\n &__img:last-child {\n width: 15px;\n height: 15px;\n right: 1px;\n position: absolute;\n }\n &__img:last-child:hover {\n filter: brightness(1.1);\n }\n &__text {\n white-space: nowrap;\n position: absolute;\n white-space: nowrap;\n left: 16px;\n right: 17px;\n }\n }\n\n .com__address_bar__go {\n display: flex;\n align-items: center;\n padding: 0 18px 0 5px;\n height: 100%;\n position: relative;\n &__img {\n height: 95%;\n border: 1px solid rgba(255, 255, 255, 0.2);\n margin-right: 3px;\n }\n }\n .com__address_bar__links {\n display: flex;\n align-items: center;\n padding: 0 18px 0 5px;\n height: 100%;\n position: relative;\n &__img {\n position: absolute;\n right: 2px;\n top: 3px;\n height: 5px;\n width: 8px;\n }\n &__text {\n color: rgba(0, 0, 0, 0.5);\n }\n }\n .com__address_bar__separate {\n height: 100%;\n width: 1px;\n background-color: rgba(0, 0, 0, 0.1);\n box-shadow: 1px 0 rgba(255, 255, 255, 0.7);\n }\n .com__content {\n flex: 1;\n border: 1px solid rgba(0, 0, 0, 0.4);\n border-top-width: 0;\n background-color: #f1f1f1;\n overflow: auto;\n font-size: 11px;\n position: relative;\n }\n .com__content__inner {\n display: flex;\n height: 100%;\n overflow: auto;\n }\n .com__content__left {\n width: 180px;\n height: 100%;\n background: linear-gradient(to bottom, #748aff 0%, #4057d3 100%);\n overflow: auto;\n padding: 10px;\n }\n\n .com__content__left__card {\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n width: 100%;\n overflow: hidden;\n }\n .com__content__left__card:not(:last-child) {\n margin-bottom: 12px;\n }\n .com__content__left__card__header {\n display: flex;\n align-items: center;\n height: 23px;\n padding-left: 11px;\n padding-right: 2px;\n cursor: pointer;\n background: linear-gradient(\n to right,\n rgb(240, 240, 255) 0,\n rgb(240, 240, 255) 30%,\n rgb(168, 188, 255) 100%\n );\n }\n .com__content__left__card__header:hover {\n & .com__content__left__card__header__text {\n color: #1c68ff;\n }\n }\n .com__content__left__card__header__text {\n font-weight: 700;\n color: #0c327d;\n flex: 1;\n }\n .com__content__left__card__header__img {\n width: 18px;\n height: 18px;\n filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));\n }\n .com__content__left__card__content {\n padding: 5px 10px;\n background: linear-gradient(\n to right,\n rgb(180, 200, 251) 0%,\n rgb(164, 185, 251) 50%,\n rgb(180, 200, 251) 100%\n );\n background-color: rgba(198, 211, 255, 0.87);\n }\n .com__content__left__card__row {\n display: flex;\n margin-bottom: 2px;\n }\n\n .com__content__left__card__img {\n width: 14px;\n height: 14px;\n margin-right: 5px;\n }\n .com__content__left__card__text {\n font-size: 10px;\n line-height: 14px;\n color: #0c327d;\n &.black {\n color: #000;\n }\n &.bold {\n font-weight: bold;\n }\n\n &.link:hover {\n cursor: pointer;\n color: #2b72ff;\n text-decoration: underline;\n }\n }\n .com__content__right {\n height: 100%;\n overflow: auto;\n background-color: #fff;\n flex: 1;\n }\n .com__content__right__card__header {\n width: 300px;\n font-weight: 700;\n padding: 2px 0 3px 12px;\n position: relative;\n &:after {\n content: '';\n display: block;\n background: linear-gradient(to right, #70bfff 0, #fff 100%);\n position: absolute;\n bottom: 0;\n left: -12px;\n height: 1px;\n width: 100%;\n }\n }\n .com__content__right__card__content {\n display: flex;\n align-items: center;\n padding-right: 0;\n flex-wrap: wrap;\n padding: 15px 15px 0;\n }\n .com__content__right__card__item {\n display: flex;\n align-items: center;\n width: 200px;\n margin-bottom: 15px;\n height: auto;\n }\n .com__content__right__card__img {\n width: 45px;\n height: 45px;\n margin-right: 5px;\n }\n .com__content__right__card__text {\n white-space: nowrap;\n height: 100%;\n }\n .com__content__right__card--me {\n .com__content__right__card__header:after,\n .com__content__right__card__header {\n transition: 0.4s;\n }\n &:hover {\n .com__content__right__card__header:after {\n width: 0;\n }\n .com__content__right__card__header {\n transform: scale(1.2) translate(20px, 5px);\n }\n }\n }\n .com__content__right__card__item--me {\n display: flex;\n align-items: center;\n width: 200px;\n margin-bottom: 15px;\n height: auto;\n & > * {\n transition: transform 0.2s;\n }\n &:hover .com__content__right__card__img {\n transform: rotate(-10deg) scale(0.9);\n }\n &:hover .com__content__right__card__text {\n transform: scale(1.2);\n transition-timing-function: cubic-bezier(0.23, 1.93, 0.59, -0.15);\n }\n }\n`;\n\nexport default MyComputer;\n","const File = [\n {\n type: 'item',\n disable: true,\n text: 'New',\n },\n {\n type: 'item',\n disable: true,\n text: 'Open...',\n },\n {\n type: 'item',\n disable: true,\n text: 'Save',\n },\n {\n type: 'item',\n disable: true,\n text: 'Save As...',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n disable: true,\n text: 'Page Setup...',\n },\n {\n type: 'item',\n disable: true,\n text: 'Print...',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n text: 'Exit',\n },\n];\nconst Edit = [\n {\n type: 'item',\n disable: true,\n text: 'Undo...',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n disable: true,\n text: 'Cut',\n },\n {\n type: 'item',\n disable: true,\n text: 'Copy',\n },\n {\n type: 'item',\n disable: true,\n text: 'Paste',\n },\n {\n type: 'item',\n disable: true,\n text: 'Delete',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n disable: true,\n text: 'Find...',\n },\n {\n type: 'item',\n disable: true,\n text: 'Find Next',\n },\n {\n type: 'item',\n disable: true,\n text: 'Replace...',\n },\n {\n type: 'item',\n disable: true,\n text: 'Go To...',\n },\n {\n type: 'separator',\n },\n {\n type: 'item',\n disable: true,\n text: 'Select All',\n },\n {\n type: 'item',\n text: 'Time/Date',\n },\n];\nconst Format = [\n {\n type: 'item',\n text: 'Word Wrap',\n },\n {\n type: 'item',\n disable: true,\n text: 'Font...',\n },\n];\nconst View = [\n {\n type: 'item',\n disable: true,\n text: 'Status Bar',\n },\n];\nconst Help = [\n {\n type: 'item',\n disable: true,\n text: 'Help Topics',\n },\n {\n type: 'item',\n disable: true,\n text: 'About Notepad',\n },\n];\nexport default { File, Edit, Format, View, Help };\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\n\nimport { WindowDropDowns } from 'components';\nimport dropDownData from './dropDownData';\n\nexport default function Notepad({ onClose }) {\n const [docText, setDocText] = useState('');\n const [wordWrap, setWordWrap] = useState(false);\n\n function onClickOptionItem(item) {\n switch (item) {\n case 'Exit':\n onClose();\n break;\n case 'Word Wrap':\n setWordWrap(!wordWrap);\n break;\n case 'Time/Date':\n const date = new Date();\n setDocText(\n `${docText}${date.toLocaleTimeString()} ${date.toLocaleDateString()}`,\n );\n break;\n default:\n }\n }\n function onTextAreaKeyDown(e) {\n // handle tabs in text area\n if (e.which === 9) {\n e.preventDefault();\n e.persist();\n var start = e.target.selectionStart;\n var end = e.target.selectionEnd;\n setDocText(`${docText.substring(0, start)}\\t${docText.substring(end)}`);\n\n // asynchronously update textarea selection to include tab\n // workaround due to https://github.com/facebook/react/issues/14174\n requestAnimationFrame(() => {\n e.target.selectionStart = start + 1;\n e.target.selectionEnd = start + 1;\n });\n }\n }\n\n return (\n \n
\n \n \n Back\n \n
\n \n \n \n
\n \n 
\n
\n \n \n
\n \n
\n \n \n
\n Address
\n \n
\n My Computer
\n \n \n Go\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n System Tasks\n
\n \n
\n \n
\n \n View system information\n
\n \n
\n \n Add or remove programs\n
\n \n
\n \n Change a setting\n
\n \n
\n \n
\n \n Other Places\n
\n \n
\n \n
\n \n My Network Places\n
\n \n
\n \n My Documents\n
\n \n
\n \n Shared Documents\n
\n \n
\n \n Control Panel\n
\n \n
\n \n
\n \n Details\n
\n \n
\n \n
\n \n \n Medium\n \n
\n \n \n Blog\n \n
\n \n \n Minesweeper(mobile)\n \n
\n \n
\n \n
\n \n Files Stored on This Computer\n
\n \n
\n \n
\n \n
\n \n Shared Documents\n
\n \n
\n \n
\n \n User's Documents\n
\n \n
\n \n Hard Disk Drives\n
\n \n
\n \n
\n \n
\n \n Local Disk (C:)\n
\n \n
\n \n Devices with Removable Storage\n
\n \n
\n \n
\n \n
\n \n CD Drive (D:)\n
\n \n
\n \n Friendly Link\n
\n \n \n \n
\n Calligraphy
\n \n \n PS Tools\n
\n \n \n \n \n setDocText(e.target.value)}\n onKeyDown={onTextAreaKeyDown}\n spellCheck={false}\n />\n
\n );\n}\n\nconst Div = styled.div`\n height: 100%;\n background: linear-gradient(to right, #edede5 0%, #ede8cd 100%);\n display: flex;\n flex-direction: column;\n align-items: stretch;\n .np__toolbar {\n position: relative;\n height: 21px;\n flex-shrink: 0;\n border-bottom: 1px solid white;\n }\n`;\n\nconst StyledTextarea = styled.textarea`\n flex: auto;\n outline: none;\n font-family: 'Lucida Console', monospace;\n font-size: 13px;\n line-height: 14px;\n resize: none;\n padding: 2px;\n ${props => (props.wordWrap ? '' : 'white-space: nowrap; overflow-x: scroll;')}\n overflow-y: scroll;\n border: 1px solid #96abff;\n`;\n","// from Webamp demo\n\nconst album = 'netBloc Vol. 24: tiuqottigeloot';\n\nexport const initialTracks = [\n {\n url:\n '/datafile/winxp/audio/llama-2.91.mp3',\n duration: 5.285,\n metaData: {\n title: 'Llama Whippin\\x27 Intro',\n artist: 'DJ Mike Llama',\n album,\n },\n },\n {\n url:\n '/datafile/winxp/audio/start/win3.1.m4a',\n duration: 1.834,\n metaData: {\n title: 'Windows 3.1',\n artist: 'Microsoft',\n album,\n },\n },\n {\n url:\n '/datafile/winxp/audio/start/windowNT3.5.m4a',\n duration: 1.602,\n metaData: {\n title: 'Windows NT 3.5',\n artist: 'Microsoft',\n album,\n },\n },\n {\n url:\n '/datafile/winxp/audio/start/win95.m4a',\n duration: 6.664,\n metaData: {\n title: 'Windows 95',\n artist: 'Microsoft',\n album,\n },\n },\n {\n url:\n '/datafile/winxp/audio/start/win98.m4a',\n duration: 7.639,\n metaData: {\n title: 'Windows 98',\n artist: 'Microsoft',\n album,\n },\n },\n {\n url:\n '/datafile/winxp/audio/start/win2000.m4a',\n duration: 6.571,\n metaData: {\n title: 'Windows 2000',\n artist: 'Microsoft',\n album,\n },\n },\n {\n url:\n '/datafile/winxp/audio/start/winxp.m4a',\n duration: 4.63,\n metaData: {\n title: 'Windows XP',\n artist: 'Microsoft',\n album,\n },\n },\n {\n url:\n '/datafile/winxp/audio/start/vista.m4a',\n duration: 4.946,\n metaData: {\n title: 'Windows Vista',\n artist: 'Microsoft',\n album,\n },\n },\n {\n url:\n '/datafile/winxp/audio/start/win7.m4a',\n duration: 5.39,\n metaData: {\n title: 'Windows 7',\n artist: 'Microsoft',\n album,\n },\n },\n /*{\n url:\n 'https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Diablo_Swing_Orchestra_-_01_-_Heroines.mp3',\n duration: 322.612245,\n metaData: {\n title: 'Heroines',\n artist: 'Diablo Swing Orchestra',\n album,\n },\n },\n {\n url:\n 'https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Eclectek_-_02_-_We_Are_Going_To_Eclecfunk_Your_Ass.mp3',\n duration: 190.093061,\n metaData: {\n title: 'We Are Going To Eclecfunk Your Ass',\n artist: 'Eclectek',\n album,\n },\n },\n {\n url:\n 'https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Auto-Pilot_-_03_-_Seventeen.mp3',\n duration: 214.622041,\n metaData: {\n title: 'Seventeen',\n artist: 'Auto-Pilot',\n album,\n },\n },\n {\n url:\n 'https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Muha_-_04_-_Microphone.mp3',\n duration: 181.838367,\n metaData: {\n title: 'Microphone',\n artist: 'Muha',\n album,\n },\n },\n {\n url:\n 'https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Just_Plain_Ant_-_05_-_Stumble.mp3',\n duration: 86.047347,\n metaData: {\n title: 'Stumble',\n artist: 'Just Plain Ant',\n album,\n },\n },\n {\n url:\n 'https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Sleaze_-_06_-_God_Damn.mp3',\n duration: 226.795102,\n metaData: {\n title: 'God Damn',\n artist: 'Sleaze',\n album,\n },\n },\n {\n url:\n 'https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Juanitos_-_07_-_Hola_Hola_Bossa_Nova.mp3',\n duration: 207.072653,\n metaData: {\n title: 'Hola Hola Bossa Nova',\n artist: 'Juanitos',\n album,\n },\n },\n {\n url:\n 'https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Entertainment_for_the_Braindead_-_08_-_Resolutions_Chris_Summer_Remix.mp3',\n duration: 314.331429,\n metaData: {\n title: 'Resolutions (Chris Summer Remix)',\n artist: 'Entertainment for the Braindead',\n album,\n },\n },\n {\n url:\n 'https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Nobara_Hayakawa_-_09_-_Trail.mp3',\n duration: 204.042449,\n metaData: {\n title: 'Trail',\n artist: 'Nobara Hayakawa',\n album,\n },\n },\n {\n url:\n 'https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Paper_Navy_-_10_-_Tongue_Tied.mp3',\n duration: 201.116735,\n metaData: {\n title: 'Tongue Tied',\n artist: 'Paper Navy',\n album,\n },\n },\n {\n url:\n 'https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/60_Tigres_-_11_-_Garage.mp3',\n duration: 245.394286,\n metaData: {\n title: 'Garage',\n artist: '60 Tigres',\n album,\n },\n },\n {\n url:\n 'https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/CM_aka_Creative_-_12_-_The_Cycle_Featuring_Mista_Mista.mp3',\n duration: 221.44,\n metaData: {\n title: 'The Cycle (Featuring Mista Mista)',\n artist: 'CM aka Creative',\n album,\n },\n },*/\n];\n","import React, { useEffect, useRef } from 'react';\nimport Webamp from 'webamp';\nimport { initialTracks } from './config';\n\nfunction Winamp({ onClose, onMinimize }) {\n const ref = useRef(null);\n const webamp = useRef(null);\n useEffect(() => {\n const target = ref.current;\n if (!target) {\n return;\n }\n webamp.current = new Webamp({\n initialTracks,\n });\n webamp.current.renderWhenReady(target).then(() => {\n target.appendChild(document.querySelector('#webamp'));\n });\n return () => {\n webamp.current.dispose();\n webamp.current = null;\n };\n }, []);\n useEffect(() => {\n if (webamp.current) {\n webamp.current.onClose(onClose);\n webamp.current.onMinimize(onMinimize);\n }\n });\n return (\n \n \n Log Off Windows\n 
\n \n
\n );\n};\nconst Button = ({ style, img, text, onClick }) => {\n function _onClick() {\n onClick(text);\n }\n return (\n {renderButtons()}
\n \n \n
\n );\n};\nconst ButtonDisabled = ({ img, text }) => (\n \n 
\n {text}\n
\n);\nconst StyledContainer = styled(Container)`\n font-family: Tahoma, 'Noto Sans', sans-serif;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n justify-content: center;\n .modal {\n margin-top: 30vh;\n width: 300px;\n height: 190px;\n border: 1px solid black;\n display: flex;\n flex-direction: column;\n }\n .header {\n height: 42px;\n display: flex;\n padding-left: 10px;\n align-items: center;\n background: #092178;\n }\n .header__text {\n font-size: 17px;\n font-family: 'Noto Sans';\n color: #fff;\n flex: 1;\n }\n .header__img {\n width: auto;\n height: 30px;\n margin-right: 5px;\n }\n .content {\n flex: 1;\n background: linear-gradient(\n to right,\n #3349e0 0%,\n #617ee6 47%,\n #617ee6 53%,\n #3349e0 100%\n );\n display: flex;\n align-items: center;\n justify-content: space-around;\n padding: 0 30px;\n position: relative;\n &:before {\n content: '';\n display: block;\n position: absolute;\n height: 2px;\n top: 0;\n left: 0;\n right: 0;\n background: linear-gradient(\n to right,\n transparent 0,\n rgba(255, 255, 255, 0.3) 40%,\n rgba(255, 255, 255, 0.3) 60%,\n transparent 100%\n );\n }\n }\n .button-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n color: #fff;\n &.disable {\n color: gray;\n .button-img {\n opacity: 0.3;\n &:hover {\n filter: none;\n }\n &:hover:active {\n filter: none;\n }\n }\n }\n }\n .button-img {\n height: 30px;\n width: 30px;\n &:hover {\n filter: brightness(1.1);\n }\n &:hover:active {\n filter: brightness(0.7);\n }\n }\n .button-text {\n padding-top: 3px;\n font-weight: bold;\n font-size: 11px;\n }\n .footer {\n height: 42px;\n background: #092178;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n }\n .footer__button {\n font-size: 11px;\n padding: 0 8px;\n line-height: 10px;\n background: rgb(240, 240, 240);\n margin-right: 10px;\n height: 16px;\n border-radius: 1px;\n box-shadow: 2px 2px 4px 1px #0005b0, 2px 2px 2px 0px white,\n inset 0 0 0 1px skyblue, inset 2px -2px skyblue;\n border: none;\n outline: none;\n &:hover {\n box-shadow: 1px 1px black, 1px 1px 2px 0px white, inset 0 0 0 1px orange,\n inset 2px -2px orange;\n }\n &:hover:active {\n box-shadow: none;\n background: rgb(220, 220, 220);\n }\n }\n`;\n\nexport default Modal;\n","import empty from 'assets/empty.png';\nimport backup from 'assets/windowsIcons/23(16x16).png';\nimport keyboard from 'assets/windowsIcons/58(16x16).png';\nimport cmd from 'assets/windowsIcons/56(16x16).png';\nimport calculator from 'assets/windowsIcons/74(16x16).png';\nimport utility from 'assets/windowsIcons/119(16x16).png';\nimport volume from 'assets/windowsIcons/120(16x16).png';\nimport characterMap from 'assets/windowsIcons/127(16x16).png';\nimport cleanDisk from 'assets/windowsIcons/128(16x16).png';\nimport wordPad from 'assets/windowsIcons/153(16x16).png';\nimport winExplorer from 'assets/windowsIcons/156(16x16).png';\nimport MSN from 'assets/windowsIcons/159(16x16).png';\nimport sync from 'assets/windowsIcons/182(16x16).png';\nimport security from 'assets/windowsIcons/214(16x16).png';\nimport access from 'assets/windowsIcons/227(16x16).png';\nimport wireless from 'assets/windowsIcons/234(16x16).png';\nimport accessibility from 'assets/windowsIcons/238(16x16).png';\nimport connection from 'assets/windowsIcons/309(16x16).png';\nimport update from 'assets/windowsIcons/322(16x16).png';\nimport notepad from 'assets/windowsIcons/327(16x16).png';\nimport networkAssistance from 'assets/windowsIcons/357(16x16).png';\nimport menu from 'assets/windowsIcons/358(16x16).png';\nimport transfer from 'assets/windowsIcons/367(16x16).png';\nimport defragmenter from 'assets/windowsIcons/374(16x16).png';\nimport catalog from 'assets/windowsIcons/392(16x16).png';\nimport networkConnection from 'assets/windowsIcons/404(16x16).png';\nimport info from 'assets/windowsIcons/505(16x16).png';\nimport address from 'assets/windowsIcons/554(16x16).png';\nimport connectionWizard from 'assets/windowsIcons/663(16x16).png';\nimport networkSetup from 'assets/windowsIcons/664(16x16).png';\nimport hyperCmd from 'assets/windowsIcons/669(16x16).png';\nimport painter from 'assets/windowsIcons/680(16x16).png';\nimport sound from 'assets/windowsIcons/690(16x16).png';\nimport recent from 'assets/windowsIcons/716(16x16).png';\nimport compatibility from 'assets/windowsIcons/747(16x16).png';\nimport magnifier from 'assets/windowsIcons/817(16x16).png';\nimport mediaPlayer from 'assets/windowsIcons/846(16x16).png';\nimport tour from 'assets/windowsIcons/853(32x32).png';\nimport outlook from 'assets/windowsIcons/887(16x16).png';\nimport spade from 'assets/windowsIcons/888(16x16).png';\nimport reversi from 'assets/windowsIcons/889(16x16).png';\nimport onlineHeart from 'assets/windowsIcons/890(16x16).png';\nimport checker from 'assets/windowsIcons/891(16x16).png';\nimport backgammon from 'assets/windowsIcons/892(16x16).png';\nimport movieMaker from 'assets/windowsIcons/894(16x16).png';\nimport ie from 'assets/windowsIcons/896(16x16).png';\nimport messenger from 'assets/windowsIcons/msn.png';\nimport spider from 'assets/windowsIcons/spider.png';\nimport freecell from 'assets/windowsIcons/freecell.png';\nimport heart from 'assets/windowsIcons/heart.png';\nimport rdp from 'assets/windowsIcons/rdp.png';\nimport solitaire from 'assets/windowsIcons/solitaire.png';\nimport narrator from 'assets/windowsIcons/narrator.ico';\nimport pinball from 'assets/windowsIcons/pinball.png';\nimport restore from 'assets/windowsIcons/restore.ico';\nimport mine from 'assets/minesweeper/mine-icon.png';\n\nexport const MyRecentDocuments = [\n {\n type: 'item',\n icon: empty,\n text: '(Empty)',\n },\n];\nexport const ConnectTo = [\n {\n type: 'item',\n icon: MSN,\n text: 'MSN',\n },\n {\n type: 'item',\n icon: connection,\n text: 'Show all connections',\n },\n];\nexport const AllPrograms = [\n {\n type: 'item',\n icon: access,\n text: 'Set Program Access and Defaults',\n },\n {\n type: 'item',\n icon: catalog,\n text: 'Windows Catalog',\n },\n {\n type: 'item',\n icon: update,\n text: 'Windows Update',\n },\n {\n type: 'separator',\n },\n {\n type: 'menu',\n icon: menu,\n text: 'Accessories',\n items: [\n {\n type: 'menu',\n icon: menu,\n text: 'Accessibility',\n bottom: 'initial',\n items: [\n {\n type: 'item',\n icon: accessibility,\n text: 'Accessibility Wizard',\n },\n {\n type: 'item',\n icon: magnifier,\n text: 'Magnifier',\n },\n {\n type: 'item',\n icon: narrator,\n text: 'Narrator',\n },\n {\n type: 'item',\n icon: keyboard,\n text: 'On-Screen Keyboard',\n },\n {\n type: 'item',\n icon: utility,\n text: 'Utility Manager',\n },\n ],\n },\n {\n type: 'menu',\n icon: menu,\n text: 'Communications',\n bottom: 'initial',\n items: [\n {\n type: 'item',\n icon: hyperCmd,\n text: 'HyperTerminal',\n },\n {\n type: 'item',\n icon: networkConnection,\n text: 'Network Connections',\n },\n {\n type: 'item',\n icon: networkSetup,\n text: 'Network Setup Wizard',\n },\n {\n type: 'item',\n icon: connectionWizard,\n text: 'New Connection Wizard',\n },\n {\n type: 'item',\n icon: wireless,\n text: 'Wireless Network Setup Wizard',\n },\n ],\n },\n {\n type: 'menu',\n icon: menu,\n text: 'Entertainment',\n bottom: 'initial',\n items: [\n {\n type: 'item',\n icon: sound,\n text: 'Sound Recorder',\n },\n {\n type: 'item',\n icon: volume,\n text: 'Volume Control',\n },\n {\n type: 'item',\n icon: mediaPlayer,\n text: 'Windows Media Player',\n },\n ],\n },\n {\n type: 'menu',\n icon: menu,\n text: 'System Tools',\n bottom: 'initial',\n items: [\n {\n type: 'item',\n icon: backup,\n text: 'Backup',\n },\n {\n type: 'item',\n icon: characterMap,\n text: 'Character Map',\n },\n {\n type: 'item',\n icon: cleanDisk,\n text: 'Disk Cleanup',\n },\n {\n type: 'item',\n icon: defragmenter,\n text: 'Disk Defragmenter',\n },\n {\n type: 'item',\n icon: transfer,\n text: 'Files and Settings Transfer Wizard',\n },\n {\n type: 'item',\n icon: recent,\n text: 'Scheduled Tasks',\n },\n {\n type: 'item',\n icon: security,\n text: 'Security Center',\n },\n {\n type: 'item',\n icon: info,\n text: 'System Information',\n },\n {\n type: 'item',\n icon: restore,\n text: 'System Restore',\n },\n ],\n },\n {\n type: 'item',\n icon: address,\n text: 'Address Book',\n },\n {\n type: 'item',\n icon: cmd,\n text: 'Command Prompt',\n },\n {\n type: 'item',\n icon: notepad,\n text: 'Notepad',\n },\n {\n type: 'item',\n icon: painter,\n text: 'Paint',\n },\n {\n type: 'item',\n icon: calculator,\n text: 'Calculator',\n },\n {\n type: 'item',\n icon: compatibility,\n text: 'Program Compatibility Wizard',\n },\n {\n type: 'item',\n icon: rdp,\n text: 'Remote Desktop Connection',\n },\n {\n type: 'item',\n icon: sync,\n text: 'Synchronize',\n },\n {\n type: 'item',\n icon: tour,\n text: 'Tour Windows XP',\n },\n {\n type: 'item',\n icon: winExplorer,\n text: 'Windows Explorer',\n },\n {\n type: 'item',\n icon: wordPad,\n text: 'WordPad',\n },\n ],\n },\n {\n type: 'menu',\n icon: menu,\n text: 'Games',\n items: [\n {\n type: 'item',\n icon: freecell,\n text: 'FreeCell',\n },\n {\n type: 'item',\n icon: heart,\n text: 'Hearts',\n },\n {\n type: 'item',\n icon: backgammon,\n text: 'Internet Backgammon',\n },\n {\n type: 'item',\n icon: checker,\n text: 'Internet Checkers',\n },\n {\n type: 'item',\n icon: onlineHeart,\n text: 'Internet Hearts',\n },\n {\n type: 'item',\n icon: reversi,\n text: 'Internet Reversi',\n },\n {\n type: 'item',\n icon: spade,\n text: 'Internet Spades',\n },\n {\n type: 'item',\n icon: mine,\n text: 'Minesweeper',\n },\n {\n type: 'item',\n icon: pinball,\n text: 'Pinball',\n },\n {\n type: 'item',\n icon: solitaire,\n text: 'Solitaire',\n },\n {\n type: 'item',\n icon: spider,\n text: 'Spider Solitaire',\n },\n ],\n },\n {\n type: 'menu',\n icon: menu,\n text: 'Startup',\n items: [\n {\n type: 'item',\n icon: empty,\n text: '(Empty)',\n },\n ],\n },\n {\n type: 'item',\n icon: ie,\n text: 'Internet Explorer',\n },\n {\n type: 'item',\n icon: outlook,\n text: 'Outlook Express',\n },\n {\n type: 'item',\n icon: networkAssistance,\n text: 'Remote Assistance',\n },\n {\n type: 'item',\n icon: mediaPlayer,\n text: 'Windows Media Player',\n },\n {\n type: 'item',\n icon: messenger,\n text: 'Windows Messenger',\n },\n {\n type: 'item',\n icon: movieMaker,\n text: 'Windows Movie Maker',\n },\n];\n\nexport default {\n AllPrograms,\n};\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\n\nimport SubMenu from 'components/SubMenu';\nimport ie from 'assets/windowsIcons/ie.png';\nimport mine from 'assets/minesweeper/mine-icon.png';\nimport setAccess from 'assets/windowsIcons/227(32x32).png';\nimport outlook from 'assets/windowsIcons/887(32x32).png';\nimport mediaPlayer from 'assets/windowsIcons/846(32x32).png';\nimport messenger from 'assets/windowsIcons/msn.png';\nimport documents from 'assets/windowsIcons/308(32x32).png';\nimport recentDocuments from 'assets/windowsIcons/301(32x32).png';\nimport pictures from 'assets/windowsIcons/307(32x32).png';\nimport music from 'assets/windowsIcons/550(32x32).png';\nimport computer from 'assets/windowsIcons/676(32x32).png';\nimport controlPanel from 'assets/windowsIcons/300(32x32).png';\nimport connect from 'assets/windowsIcons/309(32x32).png';\nimport printer from 'assets/windowsIcons/549(32x32).png';\nimport paint from 'assets/windowsIcons/680(32x32).png';\nimport help from 'assets/windowsIcons/747(32x32).png';\nimport search from 'assets/windowsIcons/299(32x32).png';\nimport run from 'assets/windowsIcons/743(32x32).png';\nimport lock from 'assets/windowsIcons/546(32x32).png';\nimport user from 'assets/windowsIcons/user.png';\nimport shut from 'assets/windowsIcons/310(32x32).png';\nimport allProgramsIcon from 'assets/windowsIcons/all-programs.ico';\nimport winamp from 'assets/windowsIcons/winamp.png';\nimport notepad from 'assets/windowsIcons/327(32x32).png';\nimport empty from 'assets/empty.png';\n\nimport { AllPrograms, ConnectTo, MyRecentDocuments } from './FooterMenuData';\n\nfunction FooterMenu({ className, onClick }) {\n const [hovering, setHovering] = useState('');\n function onMouseOver(e) {\n const item = e.target.closest('.menu__item');\n if (!item) return;\n setHovering(item.querySelector('.menu__item__text').textContent);\n }\n return (\n \n \n 
\n User\n \n \n
\n
\n \n
\n - \n
\n - \n
\n \n \n All Programs\n
\n }\n icon={empty}\n >\n {hovering === 'All Programs' && (\n Internet Explorer
\n Outlook Express
\n \n \n \n
\n \n \n \n );\n}\nfunction Items({ items, ...rest }) {\n return items.map((item, i) => \n
\n \n );\n}\nexport default styled(FooterMenu)`\n font-size: 11px;\n line-height: 14px;\n display: flex;\n flex-direction: column;\n align-items: center;\n background-color: #4282d6;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n header {\n position: relative;\n align-self: flex-start;\n display: flex;\n align-items: center;\n color: #fff;\n height: 54px;\n padding: 6px 5px 5px;\n width: 100%;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n background: linear-gradient(\n to bottom,\n #1868ce 0%,\n #0e60cb 12%,\n #0e60cb 20%,\n #1164cf 32%,\n #1667cf 33%,\n #1b6cd3 47%,\n #1e70d9 54%,\n #2476dc 60%,\n #297ae0 65%,\n #3482e3 77%,\n #3786e5 79%,\n #428ee9 90%,\n #4791eb 100%\n );\n overflow: hidden;\n }\n header:before {\n content: '';\n display: block;\n position: absolute;\n top: 1px;\n left: 0;\n width: 100%;\n height: 3px;\n background: linear-gradient(\n to right,\n transparent 0,\n rgb(255, 255, 255, 0.3) 1%,\n rgb(255, 255, 255, 0.5) 2%,\n rgb(255, 255, 255, 0.5) 95%,\n rgb(255, 255, 255, 0.3) 98%,\n rgb(255, 255, 255, 0.2) 99%,\n transparent 100%\n );\n box-shadow: inset 0 -1px 1px #0e60cb;\n }\n .header__img {\n width: 42px;\n height: 42px;\n margin-right: 5px;\n border-radius: 3px;\n border: 2px solid rgb(222, 222, 222, 0.8);\n }\n .header__text {\n font-size: 14px;\n font-weight: 700;\n text-shadow: 1px 1px rgba(0, 0, 0, 0.7);\n }\n footer {\n display: flex;\n align-self: flex-end;\n align-items: center;\n justify-content: flex-end;\n color: #fff;\n height: 36px;\n width: 100%;\n background: linear-gradient(\n to bottom,\n #4282d6 0%,\n #3b85e0 3%,\n #418ae3 5%,\n #418ae3 17%,\n #3c87e2 21%,\n #3786e4 26%,\n #3482e3 29%,\n #2e7ee1 39%,\n #2374df 49%,\n #2072db 57%,\n #196edb 62%,\n #176bd8 72%,\n #1468d5 75%,\n #1165d2 83%,\n #0f61cb 88%\n );\n }\n\n .footer__item {\n padding: 3px;\n display: flex;\n margin-right: 10px;\n align-items: center;\n &:hover {\n background-color: rgba(60, 80, 210, 0.5);\n }\n &:hover:active > * {\n transform: translate(1px, 1px);\n }\n }\n .footer__item__img {\n border-radius: 3px;\n margin-right: 2px;\n width: 22px;\n height: 22px;\n }\n .menu {\n display: flex;\n margin: 0 2px;\n position: relative;\n border-top: 1px solid #385de7;\n box-shadow: 0 1px #385de7;\n }\n .orange-hr {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n display: block;\n height: 2px;\n background: linear-gradient(\n to right,\n rgba(0, 0, 0, 0) 0%,\n #da884a 50%,\n rgba(0, 0, 0, 0) 100%\n );\n border: 0;\n }\n .menu__right {\n background-color: #cbe3ff;\n border-left: solid #3a3aff5e 1px;\n padding: 6px 5px 5px;\n width: 190px;\n color: #00136b;\n }\n .menu__left {\n background-color: #fff;\n padding: 6px 5px 0;\n width: 190px;\n display: flex;\n flex-direction: column;\n }\n .sub_menu {\n border: 1px solid black;\n position: absolute;\n left: 100%;\n bottom: 0;\n background-color: #fff;\n display: flex;\n flex-direction: column;\n }\n\n .menu__separator {\n height: 7.5px;\n background: linear-gradient(\n to right,\n rgba(0, 0, 0, 0) 0%,\n rgba(0, 0, 0, 0.1) 50%,\n rgba(0, 0, 0, 0) 100%\n );\n border-top: 3px solid transparent;\n border-bottom: 3px solid transparent;\n background-clip: content-box;\n }\n .menu__right .menu__separator {\n background: linear-gradient(\n to right,\n rgba(0, 0, 0, 0) 0%,\n #87b3e2b5 50%,\n rgba(0, 0, 0, 0) 100%\n );\n background-clip: content-box;\n }\n .menu__item {\n padding: 1px;\n display: flex;\n align-items: center;\n margin-bottom: 4px;\n }\n .menu__left .menu__item {\n height: 34px;\n }\n .menu__right .menu__item {\n height: 26px;\n margin-bottom: 4px;\n line-height: 13px;\n }\n .menu__item:hover {\n color: white;\n background-color: #2f71cd;\n }\n .menu__item:hover .menu__item__subtext {\n color: white;\n }\n .menu__item__texts {\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: 100%;\n position: relative;\n }\n .menu__right .menu__item__img {\n margin-right: 3px;\n width: 22px;\n height: 22px;\n }\n .menu__left .menu__item__img {\n margin-right: 3px;\n width: 30px;\n height: 30px;\n }\n .menu__right .menu__item:nth-child(-n + 5),\n .menu__left .menu__item:nth-child(-n + 2),\n .menu__left .menu__item:last-child {\n .menu__item__text {\n font-weight: 700;\n }\n }\n .menu__item__subtext {\n color: rgba(0, 0, 0, 0.4);\n line-height: 12px;\n margin-bottom: 1px;\n }\n .menu__left .menu__item:last-child {\n height: 24px;\n }\n .menu__item:hover .menu__arrow {\n border-left-color: #fff;\n }\n .menu__arrow {\n border: 3.5px solid transparent;\n border-right: 0;\n border-left-color: #00136b;\n position: absolute;\n left: 146px;\n }\n`;\n","import React, { useState, useEffect, useRef } from 'react';\nimport styled from 'styled-components';\n\nimport FooterMenu from './FooterMenu';\nimport Balloon from 'components/Balloon';\nimport startButton from 'assets/windowsIcons/start.png';\nimport sound from 'assets/windowsIcons/690(16x16).png';\nimport usb from 'assets/windowsIcons/394(16x16).png';\nimport risk from 'assets/windowsIcons/229(16x16).png';\n\nconst getTime = () => {\n const date = new Date();\n let hour = date.getHours();\n let hourPostFix = 'AM';\n let min = date.getMinutes();\n if (hour >= 12) {\n hour -= 12;\n hourPostFix = 'PM';\n }\n if (hour === 0) {\n hour = 12;\n }\n if (min < 10) {\n min = '0' + min;\n }\n return `${hour}:${min} ${hourPostFix}`;\n};\n\nfunction Footer({\n onMouseDownApp,\n apps,\n focusedAppId,\n onMouseDown,\n onClickMenuItem,\n}) {\n const [time, setTime] = useState(getTime);\n const [menuOn, setMenuOn] = useState(false);\n const menu = useRef(null);\n function toggleMenu() {\n setMenuOn(on => !on);\n }\n function _onMouseDown(e) {\n if (e.target.closest('.footer__window')) return;\n onMouseDown();\n }\n function _onClickMenuItem(name) {\n onClickMenuItem(name);\n setMenuOn(false);\n }\n useEffect(() => {\n const timer = setInterval(() => {\n const newTime = getTime();\n newTime !== time && setTime(newTime);\n }, 1000);\n return () => clearInterval(timer);\n }, [time]);\n useEffect(() => {\n const target = menu.current;\n if (!target) return;\n function onMouseDown(e) {\n if (!target.contains(e.target) && menuOn) setMenuOn(false);\n }\n window.addEventListener('mousedown', onMouseDown);\n return () => window.removeEventListener('mousedown', onMouseDown);\n }, [menuOn]);\n\n return (\n {text}
\n {children}\n \n
\n\n \n {menuOn &&
\n \n 
\n 
\n 
\n
\n \n
\n {time}
\n {title}
\n \n );\n}\n\nconst Container = styled.footer`\n height: 30px;\n background: linear-gradient(\n to bottom,\n #1f2f86 0,\n #3165c4 3%,\n #3682e5 6%,\n #4490e6 10%,\n #3883e5 12%,\n #2b71e0 15%,\n #2663da 18%,\n #235bd6 20%,\n #2258d5 23%,\n #2157d6 38%,\n #245ddb 54%,\n #2562df 86%,\n #245fdc 89%,\n #2158d4 92%,\n #1d4ec0 95%,\n #1941a5 98%\n );\n position: absolute;\n bottom: 0;\n right: 0;\n left: 0;\n display: flex;\n .footer__items.left {\n height: 100%;\n flex: 1;\n overflow: hidden;\n }\n .footer__items.right {\n background-color: #0b77e9;\n flex-shrink: 0;\n background: linear-gradient(\n to bottom,\n #0c59b9 1%,\n #139ee9 6%,\n #18b5f2 10%,\n #139beb 14%,\n #1290e8 19%,\n #0d8dea 63%,\n #0d9ff1 81%,\n #0f9eed 88%,\n #119be9 91%,\n #1392e2 94%,\n #137ed7 97%,\n #095bc9 100%\n );\n border-left: 1px solid #1042af;\n box-shadow: inset 1px 0 1px #18bbff;\n padding: 0 10px;\n margin-left: 10px;\n }\n .footer__items {\n display: flex;\n align-items: center;\n }\n .footer__start {\n height: 100%;\n margin-right: 10px;\n position: relative;\n &:hover {\n filter: brightness(105%);\n }\n &:active {\n pointer-events: none;\n filter: brightness(85%);\n }\n }\n .footer__start__menu {\n position: absolute;\n left: 0;\n box-shadow: 2px 4px 2px rgba(0, 0, 0, 0.5);\n bottom: 100%;\n }\n .footer__window {\n flex: 1;\n max-width: 150px;\n color: #fff;\n border-radius: 2px;\n margin-top: 2px;\n padding: 0 8px;\n height: 22px;\n font-size: 11px;\n background-color: #3c81f3;\n box-shadow: inset -1px 0px rgba(0, 0, 0, 0.3),\n inset 1px 1px 1px rgba(255, 255, 255, 0.2);\n position: relative;\n display: flex;\n align-items: center;\n }\n .footer__icon {\n height: 15px;\n width: 15px;\n }\n .footer__text {\n position: absolute;\n left: 27px;\n right: 8px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .footer__window.cover:hover {\n background-color: #53a3ff;\n box-shadow: 1px 0px 1px rgba(0, 0, 0, 0.2),\n inset 1px 1px 1px rgba(255, 255, 255, 0.3);\n }\n .footer__window.cover:before {\n display: block;\n content: '';\n position: absolute;\n left: -2px;\n top: -2px;\n width: 10px;\n height: 1px;\n border-bottom-right-radius: 50%;\n box-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);\n }\n .footer__window.cover:hover:active {\n background-color: #1e52b7;\n box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3),\n inset 1px 0 1px rgba(0, 0, 0, 0.7);\n }\n .footer__window.focus:hover {\n background-color: #3576f3;\n }\n .footer__window.focus:hover:active {\n background-color: #1e52b7;\n }\n .footer__window.focus {\n background-color: #1e52b7;\n box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.2),\n inset 1px 0 1px rgba(0, 0, 0, 0.7);\n }\n .footer__time {\n margin: 0 5px;\n color: #fff;\n font-size: 11px;\n font-weight: lighter;\n text-shadow: none;\n }\n`;\n\nexport default Footer;\n","import { useEffect } from 'react';\nimport ga from 'react-ga';\n\nfunction useGA(id, route) {\n useEffect(() => {\n ga.initialize(id);\n ga.pageview(route);\n }, [id, route]);\n}\n\nexport default useGA;\n","import { useEffect, useState } from 'react';\n\nfunction useElementResize(ref, options) {\n const {\n defaultOffset,\n defaultSize,\n boundary,\n resizable = true,\n resizeThreshold = 10,\n constraintSize = 200,\n } = options;\n const [offset, setOffset] = useState(defaultOffset);\n const [size, setSize] = useState(defaultSize);\n const cursorPos = useCursor(ref, resizeThreshold, resizable);\n useEffect(() => {\n const target = ref.current;\n if (!target) return;\n const dragTarget = options.dragRef && options.dragRef.current;\n const cover = document.createElement('div');\n cover.style.position = 'fixed';\n cover.style.top = 0;\n cover.style.left = 0;\n cover.style.right = 0;\n cover.style.bottom = 0;\n const previousOffset = { ...offset };\n const previousSize = { ...size };\n let _boundary;\n let originMouseX;\n let originMouseY;\n\n function onDragging(e) {\n const { pageX, pageY } = getComputedPagePosition(e, _boundary);\n const x = pageX - originMouseX + previousOffset.x;\n const y = pageY - originMouseY + previousOffset.y;\n setOffset({ x, y });\n }\n function onDragEnd(e) {\n cover.remove();\n const { pageX, pageY } = getComputedPagePosition(e, _boundary);\n previousOffset.x += pageX - originMouseX;\n previousOffset.y += pageY - originMouseY;\n window.removeEventListener('mousemove', onDragging);\n window.removeEventListener('mouseup', onDragEnd);\n }\n function onDragStart(e) {\n window.addEventListener('mousemove', onDragging);\n window.addEventListener('mouseup', onDragEnd);\n }\n function onDraggingTop(e) {\n const { pageY } = getComputedPagePosition(e, _boundary);\n const { x } = previousOffset;\n const y = pageY - originMouseY + previousOffset.y;\n setOffset({ x, y });\n }\n function onDragEndTop(e) {\n const { pageY } = getComputedPagePosition(e, _boundary);\n previousOffset.y += pageY - originMouseY;\n window.removeEventListener('mousemove', onDraggingTop);\n window.removeEventListener('mouseup', onDragEndTop);\n }\n function onDragStartTop(e) {\n window.addEventListener('mousemove', onDraggingTop);\n window.addEventListener('mouseup', onDragEndTop);\n }\n function onDraggingLeft(e) {\n const { pageX } = getComputedPagePosition(e, _boundary);\n const x = pageX - originMouseX + previousOffset.x;\n const { y } = previousOffset;\n setOffset({ x, y });\n }\n function onDragEndLeft(e) {\n const { pageX } = getComputedPagePosition(e, _boundary);\n previousOffset.x += pageX - originMouseX;\n window.removeEventListener('mousemove', onDraggingLeft);\n window.removeEventListener('mouseup', onDragEndLeft);\n }\n function onDragStartLeft(e) {\n window.addEventListener('mousemove', onDraggingLeft);\n window.addEventListener('mouseup', onDragEndLeft);\n }\n function onResizingRight(e) {\n const { pageX } = getComputedPagePosition(e, _boundary);\n const width = pageX - originMouseX + previousSize.width;\n const { height } = previousSize;\n setSize({ width, height });\n }\n function onResizeEndRight(e) {\n const { pageX } = getComputedPagePosition(e, _boundary);\n previousSize.width += pageX - originMouseX;\n window.removeEventListener('mousemove', onResizingRight);\n window.removeEventListener('mouseup', onResizeEndRight);\n }\n function onResizeStartRight(e) {\n window.addEventListener('mousemove', onResizingRight);\n window.addEventListener('mouseup', onResizeEndRight);\n }\n function onResizingBottom(e) {\n const { pageY } = getComputedPagePosition(e, _boundary);\n const { width } = previousSize;\n const height = pageY - originMouseY + previousSize.height;\n setSize({ width, height });\n }\n function onResizeEndBottom(e) {\n const { pageY } = getComputedPagePosition(e, _boundary);\n previousSize.height += pageY - originMouseY;\n window.removeEventListener('mousemove', onResizingBottom);\n window.removeEventListener('mouseup', onResizeEndBottom);\n }\n function onResizeStartBottom(e) {\n window.addEventListener('mousemove', onResizingBottom);\n window.addEventListener('mouseup', onResizeEndBottom);\n }\n function onResizingLeft(e) {\n const { pageX } = getComputedPagePosition(e, _boundary);\n const width = -pageX + originMouseX + previousSize.width;\n const { height } = previousSize;\n setSize({ width, height });\n }\n function onResizeEndLeft(e) {\n const { pageX } = getComputedPagePosition(e, _boundary);\n previousSize.width += -pageX + originMouseX;\n window.removeEventListener('mousemove', onResizingLeft);\n window.removeEventListener('mouseup', onResizeEndLeft);\n }\n function onResizeStartLeft(e) {\n window.addEventListener('mousemove', onResizingLeft);\n window.addEventListener('mouseup', onResizeEndLeft);\n }\n function onResizingTop(e) {\n const { pageY } = getComputedPagePosition(e, _boundary);\n const height = -pageY + originMouseY + previousSize.height;\n const { width } = previousSize;\n setSize({ width, height });\n }\n function onResizeEndTop(e) {\n const { pageY } = getComputedPagePosition(e, _boundary);\n previousSize.height += -pageY + originMouseY;\n window.removeEventListener('mousemove', onResizingTop);\n window.removeEventListener('mouseup', onResizeEndTop);\n }\n function onResizeStartTop(e) {\n window.addEventListener('mousemove', onResizingTop);\n window.addEventListener('mouseup', onResizeEndTop);\n }\n function onResizingTopLeft(e) {\n const { pageX, pageY } = getComputedPagePosition(e, _boundary);\n const width = -pageX + originMouseX + previousSize.width;\n const height = -pageY + originMouseY + previousSize.height;\n setSize({ width, height });\n }\n function onResizeEndTopLeft(e) {\n const { pageX, pageY } = getComputedPagePosition(e, _boundary);\n previousSize.width += -pageX + originMouseX;\n previousSize.height += -pageY + originMouseY;\n window.removeEventListener('mousemove', onResizingTopLeft);\n window.removeEventListener('mouseup', onResizeEndTopLeft);\n }\n function onResizeStartTopLeft(e) {\n window.addEventListener('mousemove', onResizingTopLeft);\n window.addEventListener('mouseup', onResizeEndTopLeft);\n }\n function onResizingTopRight(e) {\n const { pageX, pageY } = getComputedPagePosition(e, _boundary);\n const width = pageX - originMouseX + previousSize.width;\n const height = -pageY + originMouseY + previousSize.height;\n setSize({ width, height });\n }\n function onResizeEndTopRight(e) {\n const { pageX, pageY } = getComputedPagePosition(e, _boundary);\n previousSize.width += pageX - originMouseX;\n previousSize.height += -pageY + originMouseY;\n window.removeEventListener('mousemove', onResizingTopRight);\n window.removeEventListener('mouseup', onResizeEndTopRight);\n }\n function onResizeStartTopRight(e) {\n window.addEventListener('mousemove', onResizingTopRight);\n window.addEventListener('mouseup', onResizeEndTopRight);\n }\n function onResizingBottomLeft(e) {\n const { pageX, pageY } = getComputedPagePosition(e, _boundary);\n const width = -pageX + originMouseX + previousSize.width;\n const height = pageY - originMouseY + previousSize.height;\n setSize({ width, height });\n }\n function onResizeEndBottomLeft(e) {\n const { pageX, pageY } = getComputedPagePosition(e, _boundary);\n previousSize.width += -pageX + originMouseX;\n previousSize.height += pageY - originMouseY;\n window.removeEventListener('mousemove', onResizingBottomLeft);\n window.removeEventListener('mouseup', onResizeEndBottomLeft);\n }\n function onResizeStartBottomLeft(e) {\n window.addEventListener('mousemove', onResizingBottomLeft);\n window.addEventListener('mouseup', onResizeEndBottomLeft);\n }\n function onResizingBottomRight(e) {\n const { pageX, pageY } = getComputedPagePosition(e, _boundary);\n const width = pageX - originMouseX + previousSize.width;\n const height = pageY - originMouseY + previousSize.height;\n setSize({ width, height });\n }\n function onResizeEndBottomRight(e) {\n const { pageX, pageY } = getComputedPagePosition(e, _boundary);\n previousSize.width += pageX - originMouseX;\n previousSize.height += pageY - originMouseY;\n window.removeEventListener('mousemove', onResizingBottomRight);\n window.removeEventListener('mouseup', onResizeEndBottomRight);\n }\n function onResizeStartBottomRight(e) {\n window.addEventListener('mousemove', onResizingBottomRight);\n window.addEventListener('mouseup', onResizeEndBottomRight);\n }\n function onMouseDown(e) {\n originMouseX = e.pageX;\n originMouseY = e.pageY;\n _boundary = { ...boundary };\n if (dragTarget && e.target === dragTarget) {\n document.body.appendChild(cover);\n return onDragStart(e);\n }\n if (e.target !== target || !resizable) return;\n switch (cursorPos) {\n case 'topLeft':\n _boundary.right = originMouseX + previousSize.width - constraintSize;\n _boundary.bottom =\n originMouseY + previousSize.height - constraintSize;\n onResizeStartTopLeft(e);\n onDragStart(e);\n break;\n case 'left':\n _boundary.right = originMouseX + previousSize.width - constraintSize;\n onResizeStartLeft(e);\n onDragStartLeft(e);\n break;\n case 'bottomLeft':\n _boundary.right = originMouseX + previousSize.width - constraintSize;\n _boundary.top = originMouseY - previousSize.height + constraintSize;\n onResizeStartBottomLeft(e);\n onDragStartLeft(e);\n break;\n case 'top':\n _boundary.bottom =\n originMouseY + previousSize.height - constraintSize;\n onResizeStartTop(e);\n onDragStartTop(e);\n break;\n case 'topRight':\n _boundary.bottom =\n originMouseY + previousSize.height - constraintSize;\n _boundary.left = originMouseX - previousSize.width + constraintSize;\n onDragStartTop(e);\n onResizeStartTopRight(e);\n break;\n case 'right':\n _boundary.left = originMouseX - previousSize.width + constraintSize;\n onResizeStartRight(e);\n break;\n case 'bottomRight':\n _boundary.top = originMouseY - previousSize.height + constraintSize;\n _boundary.left = originMouseX - previousSize.width + constraintSize;\n onResizeStartBottomRight(e);\n break;\n case 'bottom':\n _boundary.top = originMouseY - previousSize.height + constraintSize;\n onResizeStartBottom(e);\n break;\n default:\n }\n }\n target.addEventListener('mousedown', onMouseDown);\n return () => {\n target.removeEventListener('mousedown', onMouseDown);\n window.removeEventListener('mousemove', onDraggingLeft);\n window.removeEventListener('mousemove', onDraggingTop);\n window.removeEventListener('mousemove', onDragging);\n window.removeEventListener('mouseup', onDragEndTop);\n window.removeEventListener('mouseup', onDragEndLeft);\n window.removeEventListener('mouseup', onDragEnd);\n window.removeEventListener('mousemove', onResizingTop);\n window.removeEventListener('mousemove', onResizingRight);\n window.removeEventListener('mousemove', onResizingBottom);\n window.removeEventListener('mousemove', onResizingLeft);\n window.removeEventListener('mousemove', onResizingBottomLeft);\n window.removeEventListener('mousemove', onResizingTopLeft);\n window.removeEventListener('mousemove', onResizingTopRight);\n window.removeEventListener('mousemove', onResizingBottomRight);\n window.removeEventListener('mouseup', onResizeEndTop);\n window.removeEventListener('mouseup', onResizeEndRight);\n window.removeEventListener('mouseup', onResizeEndBottom);\n window.removeEventListener('mouseup', onResizeEndLeft);\n window.removeEventListener('mouseup', onResizeEndBottomLeft);\n window.removeEventListener('mouseup', onResizeEndTopLeft);\n window.removeEventListener('mouseup', onResizeEndTopRight);\n window.removeEventListener('mouseup', onResizeEndBottomRight);\n cover.remove();\n };\n // eslint-disable-next-line\n }, [boundary.top, boundary.right, boundary.bottom, boundary.left, cursorPos]);\n return { offset, size };\n}\nfunction useCursor(ref, threshold, resizable) {\n const [position, setPosition] = useState('');\n useEffect(() => {\n const target = ref.current;\n if (!target || !resizable) return;\n const cover = document.createElement('div');\n cover.style.position = 'fixed';\n cover.style.top = 0;\n cover.style.left = 0;\n cover.style.right = 0;\n cover.style.bottom = 0;\n let lock = false;\n function _setPosition(p) {\n setPosition(p);\n target.style.cursor = getCursorStyle(p);\n cover.style.cursor = getCursorStyle(p);\n }\n function onMouseDown(e) {\n if (e.target !== target) return;\n onHover(e);\n lock = true;\n document.body.appendChild(cover);\n window.addEventListener('mouseup', onMouseUp);\n }\n function onMouseUp(e) {\n lock = false;\n cover.remove();\n window.removeEventListener('mouseup', onMouseUp);\n }\n function onHoverEnd(e) {\n if (lock) return;\n _setPosition('');\n }\n function onHover(e) {\n if (lock) return;\n if (e.target !== target) return _setPosition('');\n const { offsetX, offsetY } = e;\n const { width, height } = target.getBoundingClientRect();\n if (offsetX < threshold) {\n if (offsetY < threshold) {\n _setPosition('topLeft');\n } else if (height - offsetY < threshold) {\n _setPosition('bottomLeft');\n } else {\n _setPosition('left');\n }\n } else if (offsetY < threshold) {\n if (width - offsetX < threshold) {\n _setPosition('topRight');\n } else {\n _setPosition('top');\n }\n } else if (width - offsetX < threshold) {\n if (height - offsetY < threshold) _setPosition('bottomRight');\n else _setPosition('right');\n } else if (height - offsetY < threshold) {\n _setPosition('bottom');\n } else {\n _setPosition('');\n }\n }\n target.addEventListener('mouseleave', onHoverEnd);\n target.addEventListener('mousemove', onHover);\n target.addEventListener('mousedown', onMouseDown);\n return () => {\n cover.remove();\n target.removeEventListener('mouseleave', onHoverEnd);\n target.removeEventListener('mousemove', onHover);\n target.removeEventListener('mousedown', onMouseDown);\n window.removeEventListener('mouseup', onMouseUp);\n };\n // eslint-disable-next-line\n }, []);\n return position;\n}\n\nfunction getComputedPagePosition(e, boundary) {\n let { pageX, pageY } = e;\n if (!boundary) return { pageX, pageY };\n const { top, right, bottom, left } = boundary;\n if (pageX <= left) pageX = left;\n else if (pageX >= right) pageX = right;\n if (pageY <= top) pageY = top;\n else if (pageY >= bottom) pageY = bottom;\n return { pageX, pageY };\n}\nfunction getCursorStyle(pos) {\n switch (pos) {\n case 'top':\n return 'n-resize';\n case 'topRight':\n return 'ne-resize';\n case 'right':\n return 'e-resize';\n case 'bottomRight':\n return 'se-resize';\n case 'bottom':\n return 's-resize';\n case 'bottomLeft':\n return 'sw-resize';\n case 'left':\n return 'w-resize';\n case 'topLeft':\n return 'nw-resize';\n default:\n return 'auto';\n }\n}\nexport default useElementResize;\n","import React from 'react';\nimport styled from 'styled-components';\n\nfunction HeaderButtons({\n buttons,\n onMaximize,\n onMinimize,\n onClose,\n maximized,\n resizable,\n className,\n}) {\n const buttonElements = {\n minimize: (\n \n {buttons ? (\n buttons.map(b => buttonElements[b])\n ) : (\n <>\n {buttonElements.minimize}\n {buttonElements.maximize}\n {buttonElements.close}\n \n )}\n
\n );\n}\n\nexport default styled(HeaderButtons)`\n opacity: ${({ isFocus }) => (isFocus ? 1 : 0.6)};\n height: 22px;\n display: flex;\n align-items: center;\n margin-top: -1px;\n margin-right: 1px;\n .header__button {\n margin-right: 1px;\n position: relative;\n width: 22px;\n height: 22px;\n border: 1px solid #fff;\n border-radius: 3px;\n &:hover {\n filter: brightness(120%);\n }\n &:hover:active {\n filter: brightness(90%);\n }\n }\n .header__button--minimize {\n box-shadow: inset 0 -1px 2px 1px #4646ff;\n background-image: radial-gradient(\n circle at 90% 90%,\n #0054e9 0%,\n #2263d5 55%,\n #4479e4 70%,\n #a3bbec 90%,\n white 100%\n );\n &:before {\n content: '';\n position: absolute;\n left: 4px;\n top: 13px;\n height: 3px;\n width: 8px;\n background-color: white;\n }\n }\n .header__button--maximize {\n box-shadow: inset 0 -1px 2px 1px #4646ff;\n background-image: radial-gradient(\n circle at 90% 90%,\n #0054e9 0%,\n #2263d5 55%,\n #4479e4 70%,\n #a3bbec 90%,\n white 100%\n );\n &:before {\n content: '';\n position: absolute;\n display: block;\n left: 4px;\n top: 4px;\n box-shadow: inset 0 3px white, inset 0 0 0 1px white;\n height: 12px;\n width: 12px;\n }\n }\n .header__button--maximized {\n box-shadow: inset 0 -1px 2px 1px #4646ff;\n background-image: radial-gradient(\n circle at 90% 90%,\n #0054e9 0%,\n #2263d5 55%,\n #4479e4 70%,\n #a3bbec 90%,\n white 100%\n );\n &:before {\n content: '';\n position: absolute;\n display: block;\n left: 7px;\n top: 4px;\n box-shadow: inset 0 2px white, inset 0 0 0 1px white;\n height: 8px;\n width: 8px;\n }\n &:after {\n content: '';\n position: absolute;\n display: block;\n left: 4px;\n top: 7px;\n box-shadow: inset 0 2px white, inset 0 0 0 1px white, 1px -1px #136dff;\n height: 8px;\n width: 8px;\n background-color: #136dff;\n }\n }\n .header__button--close {\n box-shadow: inset 0 -1px 2px 1px #da4600;\n background-image: radial-gradient(\n circle at 90% 90%,\n #cc4600 0%,\n #dc6527 55%,\n #cd7546 70%,\n #ffccb2 90%,\n white 100%\n );\n &:before {\n content: '';\n position: absolute;\n left: 9px;\n top: 2px;\n transform: rotate(45deg);\n height: 16px;\n width: 2px;\n background-color: white;\n }\n &:after {\n content: '';\n position: absolute;\n left: 9px;\n top: 2px;\n transform: rotate(-45deg);\n height: 16px;\n width: 2px;\n background-color: white;\n }\n }\n .header__button--disable {\n outline: none;\n opacity: 0.5;\n &:hover {\n filter: brightness(100%);\n }\n }\n`;\n","import React, { useRef, memo } from 'react';\nimport useWindowSize from 'react-use/lib/useWindowSize';\nimport styled from 'styled-components';\n\nimport { useElementResize } from 'hooks';\nimport HeaderButtons from './HeaderButtons';\n\nfunction Windows({\n apps,\n onMouseDown,\n onClose,\n onMinimize,\n onMaximize,\n focusedAppId,\n}) {\n return (\n \n {apps.map(app => (\n
\n );\n}\n\nconst Window = memo(function({\n injectProps,\n id,\n onMouseDown,\n onMouseUpClose,\n onMouseUpMinimize,\n onMouseUpMaximize,\n header,\n defaultSize,\n defaultOffset,\n resizable,\n maximized,\n component,\n zIndex,\n isFocus,\n className,\n}) {\n function _onMouseDown() {\n onMouseDown(id);\n }\n function _onMouseUpClose() {\n onMouseUpClose(id);\n }\n function _onMouseUpMinimize() {\n onMouseUpMinimize(id);\n }\n function _onMouseUpMaximize() {\n if (resizable) onMouseUpMaximize(id);\n }\n const dragRef = useRef(null);\n const ref = useRef(null);\n const { width: windowWidth, height: windowHeight } = useWindowSize();\n const { offset, size } = useElementResize(ref, {\n dragRef,\n defaultOffset,\n defaultSize,\n boundary: {\n top: 1,\n right: windowWidth - 1,\n bottom: windowHeight - 31,\n left: 1,\n },\n resizable,\n resizeThreshold: 10,\n });\n let width, height, x, y;\n if (maximized) {\n width = windowWidth + 6;\n height = windowHeight - 24;\n x = -3;\n y = -3;\n } else {\n width = size.width;\n height = size.height;\n x = offset.x;\n y = offset.y;\n }\n return (\n {header.title}
\n \n {component({\n onClose: _onMouseUpClose,\n onMinimize: _onMouseUpMinimize,\n isFocus,\n ...injectProps,\n })}\n
\n \n );\n});\n\nconst StyledWindow = styled(Window)`\n display: ${({ show }) => (show ? 'flex' : 'none')};\n position: absolute;\n padding: 3px;\n padding: ${({ header }) => (header.invisible ? 0 : 3)}px;\n background-color: ${({ isFocus }) => (isFocus ? '#0831d9' : '#6582f5')};\n flex-direction: column;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n .header__bg {\n background: ${({ isFocus }) =>\n isFocus\n ? 'linear-gradient(to bottom,#0058ee 0%,#3593ff 4%,#288eff 6%,#127dff 8%,#036ffc 10%,#0262ee 14%,#0057e5 20%,#0054e3 24%,#0055eb 56%,#005bf5 66%,#026afe 76%,#0062ef 86%,#0052d6 92%,#0040ab 94%,#003092 100%)'\n : 'linear-gradient(to bottom, #7697e7 0%,#7e9ee3 3%,#94afe8 6%,#97b4e9 8%,#82a5e4 14%,#7c9fe2 17%,#7996de 25%,#7b99e1 56%,#82a9e9 81%,#80a5e7 89%,#7b96e1 94%,#7a93df 97%,#abbae3 100%)'};\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n height: 28px;\n pointer-events: none;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n overflow: hidden;\n }\n .header__bg:before {\n content: '';\n display: block;\n position: absolute;\n left: 0;\n opacity: ${({ isFocus }) => (isFocus ? 1 : 0.3)};\n background: linear-gradient(to right, #1638e6 0%, transparent 100%);\n top: 0;\n bottom: 0;\n width: 15px;\n }\n .header__bg:after {\n content: '';\n opacity: ${({ isFocus }) => (isFocus ? 1 : 0.4)};\n display: block;\n position: absolute;\n right: 0;\n background: linear-gradient(to left, #1638e6 0%, transparent 100%);\n top: 0;\n bottom: 0;\n width: 15px;\n }\n .app__header {\n display: ${({ header }) => (header.invisible ? 'none' : 'flex')};\n height: 25px;\n line-height: 25px;\n font-weight: 700;\n font-size: 12px;\n font-family: 'Noto Sans';\n text-shadow: 1px 1px #000;\n color: white;\n position: absolute;\n left: 3px;\n right: 3px;\n align-items: center;\n }\n .app__header__icon {\n pointer-events: none;\n width: 15px;\n height: 15px;\n margin-left: 1px;\n margin-right: 3px;\n }\n .app__header__title {\n flex: 1;\n pointer-events: none;\n padding-right: 5px;\n letter-spacing: 0.5px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n .app__content {\n flex: 1;\n position: relative;\n margin-top: 25px;\n height: calc(100% - 25px);\n }\n`;\n\nexport default Windows;\n","import React, { useState, useRef, useEffect } from 'react';\nimport styled from 'styled-components';\n\nfunction Icons({\n icons,\n onMouseDown,\n onDoubleClick,\n displayFocus,\n mouse,\n selecting,\n setSelectedIcons,\n}) {\n const [iconsRect, setIconsRect] = useState([]);\n function measure(rect) {\n if (iconsRect.find(r => r.id === rect.id)) return;\n setIconsRect(iconsRect => [...iconsRect, rect]);\n }\n useEffect(() => {\n if (!selecting) return;\n const sx = Math.min(selecting.x, mouse.docX);\n const sy = Math.min(selecting.y, mouse.docY);\n const sw = Math.abs(selecting.x - mouse.docX);\n const sh = Math.abs(selecting.y - mouse.docY);\n const selectedIds = iconsRect\n .filter(rect => {\n const { x, y, w, h } = rect;\n return x - sx < sw && sx - x < w && y - sy < sh && sy - y < h;\n })\n .map(icon => icon.id);\n setSelectedIcons(selectedIds);\n }, [iconsRect, setSelectedIcons, selecting, mouse.docX, mouse.docY]);\n return (\n \n 
\n
\n \n
\n \n );\n}\n\nconst IconsContainer = styled.div`\n position: absolute;\n margin-top: 40px;\n margin-left: 40px;\n`;\n\nconst StyledIcon = styled(Icon)`\n width: 70px;\n margin-bottom: 30px;\n display: flex;\n flex-direction: column;\n align-items: center;\n &__text__container {\n width: 100%;\n font-size: 10px;\n color: white;\n text-shadow: 0 1px 1px black;\n margin-top: 5px;\n display: flex;\n justify-content: center;\n\n &:before {\n content: '';\n display: block;\n flex-grow: 1;\n }\n &:after {\n content: '';\n display: block;\n flex-grow: 1;\n }\n }\n &__text {\n padding: 0 3px 2px;\n background-color: ${({ isFocus, displayFocus }) =>\n isFocus && displayFocus ? '#0b61ff' : 'transparent'};\n text-align: center;\n flex-shrink: 1;\n }\n &__img__container {\n width: 30px;\n height: 30px;\n filter: ${({ isFocus, displayFocus }) =>\n isFocus && displayFocus ? 'drop-shadow(0 0 blue)' : ''};\n }\n &__img {\n width: 30px;\n height: 30px;\n opacity: ${({ isFocus, displayFocus }) =>\n isFocus && displayFocus ? 0.5 : 1};\n }\n`;\n\nexport default Icons;\n","import React, { useReducer, useRef, useCallback } from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport useMouse from 'react-use/lib/useMouse';\nimport ga from 'react-ga';\n\nimport {\n ADD_APP,\n DEL_APP,\n FOCUS_APP,\n MINIMIZE_APP,\n TOGGLE_MAXIMIZE_APP,\n FOCUS_ICON,\n SELECT_ICONS,\n FOCUS_DESKTOP,\n START_SELECT,\n END_SELECT,\n POWER_OFF,\n CANCEL_POWER_OFF,\n} from './constants/actions';\nimport { FOCUSING, POWER_STATE } from './constants';\nimport { defaultIconState, defaultAppState, appSettings } from './apps';\nimport Modal from './Modal';\nimport Footer from './Footer';\nimport Windows from './Windows';\nimport Icons from './Icons';\nimport { DashedBox } from 'components';\n\nconst initState = {\n apps: defaultAppState,\n nextAppID: defaultAppState.length,\n nextZIndex: defaultAppState.length,\n focusing: FOCUSING.WINDOW,\n icons: defaultIconState,\n selecting: false,\n powerState: POWER_STATE.START,\n};\nconst reducer = (state, action = { type: '' }) => {\n ga.event({\n category: 'XP interaction',\n action: action.type,\n });\n switch (action.type) {\n case ADD_APP:\n const app = state.apps.find(\n _app => _app.component === action.payload.component,\n );\n if (action.payload.multiInstance || !app) {\n return {\n ...state,\n apps: [\n ...state.apps,\n {\n ...action.payload,\n id: state.nextAppID,\n zIndex: state.nextZIndex,\n },\n ],\n nextAppID: state.nextAppID + 1,\n nextZIndex: state.nextZIndex + 1,\n focusing: FOCUSING.WINDOW,\n };\n }\n const apps = state.apps.map(app =>\n app.component === action.payload.component\n ? { ...app, zIndex: state.nextZIndex, minimized: false }\n : app,\n );\n return {\n ...state,\n apps,\n nextZIndex: state.nextZIndex + 1,\n focusing: FOCUSING.WINDOW,\n };\n case DEL_APP:\n if (state.focusing !== FOCUSING.WINDOW) return state;\n return {\n ...state,\n apps: state.apps.filter(app => app.id !== action.payload),\n focusing:\n state.apps.length > 1\n ? FOCUSING.WINDOW\n : state.icons.find(icon => icon.isFocus)\n ? FOCUSING.ICON\n : FOCUSING.DESKTOP,\n };\n case FOCUS_APP: {\n const apps = state.apps.map(app =>\n app.id === action.payload\n ? { ...app, zIndex: state.nextZIndex, minimized: false }\n : app,\n );\n return {\n ...state,\n apps,\n nextZIndex: state.nextZIndex + 1,\n focusing: FOCUSING.WINDOW,\n };\n }\n case MINIMIZE_APP: {\n if (state.focusing !== FOCUSING.WINDOW) return state;\n const apps = state.apps.map(app =>\n app.id === action.payload ? { ...app, minimized: true } : app,\n );\n return {\n ...state,\n apps,\n focusing: FOCUSING.WINDOW,\n };\n }\n case TOGGLE_MAXIMIZE_APP: {\n if (state.focusing !== FOCUSING.WINDOW) return state;\n const apps = state.apps.map(app =>\n app.id === action.payload ? { ...app, maximized: !app.maximized } : app,\n );\n return {\n ...state,\n apps,\n focusing: FOCUSING.WINDOW,\n };\n }\n case FOCUS_ICON: {\n const icons = state.icons.map(icon => ({\n ...icon,\n isFocus: icon.id === action.payload,\n }));\n return {\n ...state,\n focusing: FOCUSING.ICON,\n icons,\n };\n }\n case SELECT_ICONS: {\n const icons = state.icons.map(icon => ({\n ...icon,\n isFocus: action.payload.includes(icon.id),\n }));\n return {\n ...state,\n icons,\n focusing: FOCUSING.ICON,\n };\n }\n case FOCUS_DESKTOP:\n return {\n ...state,\n focusing: FOCUSING.DESKTOP,\n icons: state.icons.map(icon => ({\n ...icon,\n isFocus: false,\n })),\n };\n case START_SELECT:\n return {\n ...state,\n focusing: FOCUSING.DESKTOP,\n icons: state.icons.map(icon => ({\n ...icon,\n isFocus: false,\n })),\n\t\t// 2022/9/19 sam: same as FOCUS_DESKTOP \n //selecting: action.payload,\n };\n case END_SELECT:\n return {\n ...state,\n selecting: null,\n };\n case POWER_OFF:\n return {\n ...state,\n powerState: action.payload,\n };\n case CANCEL_POWER_OFF:\n return {\n ...state,\n powerState: POWER_STATE.START,\n };\n default:\n return state;\n }\n};\nfunction WinXP() {\n const [state, dispatch] = useReducer(reducer, initState);\n const ref = useRef(null);\n const mouse = useMouse(ref);\n const focusedAppId = getFocusedAppId();\n const onFocusApp = useCallback(id => {\n dispatch({ type: FOCUS_APP, payload: id });\n }, []);\n const onMaximizeWindow = useCallback(\n id => {\n if (focusedAppId === id) {\n dispatch({ type: TOGGLE_MAXIMIZE_APP, payload: id });\n }\n },\n [focusedAppId],\n );\n const onMinimizeWindow = useCallback(\n id => {\n if (focusedAppId === id) {\n dispatch({ type: MINIMIZE_APP, payload: id });\n }\n },\n [focusedAppId],\n );\n const onCloseApp = useCallback(\n id => {\n if (focusedAppId === id) {\n dispatch({ type: DEL_APP, payload: id });\n }\n },\n [focusedAppId],\n );\n function onMouseDownFooterApp(id) {\n if (focusedAppId === id) {\n dispatch({ type: MINIMIZE_APP, payload: id });\n } else {\n dispatch({ type: FOCUS_APP, payload: id });\n }\n }\n function onMouseDownIcon(id) {\n dispatch({ type: FOCUS_ICON, payload: id });\n }\n function onDoubleClickIcon(component) {\n const appSetting = Object.values(appSettings).find(\n setting => setting.component === component,\n );\n dispatch({ type: ADD_APP, payload: appSetting });\n }\n function getFocusedAppId() {\n if (state.focusing !== FOCUSING.WINDOW) return -1;\n const focusedApp = [...state.apps]\n .sort((a, b) => b.zIndex - a.zIndex)\n .find(app => !app.minimized);\n return focusedApp ? focusedApp.id : -1;\n }\n function onMouseDownFooter() {\n dispatch({ type: FOCUS_DESKTOP });\n }\n function onClickMenuItem(o) {\n if (o === 'Internet')\n dispatch({ type: ADD_APP, payload: appSettings['Internet Explorer'] });\n else if (o === 'Minesweeper')\n dispatch({ type: ADD_APP, payload: appSettings.Minesweeper });\n else if (o === 'My Computer')\n dispatch({ type: ADD_APP, payload: appSettings['My Computer'] });\n else if (o === 'Notepad')\n dispatch({ type: ADD_APP, payload: appSettings.Notepad });\n else if (o === 'Winamp')\n dispatch({ type: ADD_APP, payload: appSettings.Winamp });\n else if (o === 'Paint')\n dispatch({ type: ADD_APP, payload: appSettings.Paint });\n else if (o === 'Log Off')\n dispatch({ type: POWER_OFF, payload: POWER_STATE.LOG_OFF });\n else if (o === 'Turn Off Computer')\n dispatch({ type: POWER_OFF, payload: POWER_STATE.TURN_OFF });\n else\n dispatch({\n type: ADD_APP,\n payload: {\n ...appSettings.Error,\n injectProps: { message: 'C:\\\\\\nApplication not found' },\n },\n });\n }\n function onMouseDownDesktop(e) {\n if (e.target === e.currentTarget)\n dispatch({\n type: START_SELECT,\n payload: { x: mouse.docX, y: mouse.docY },\n });\n }\n function onMouseUpDesktop(e) {\n dispatch({ type: END_SELECT });\n }\n function onIconsSelected(iconIds) {\n dispatch({ type: SELECT_ICONS, payload: iconIds });\n }\n function onClickModalButton(text) {\n dispatch({ type: CANCEL_POWER_OFF });\n dispatch({\n type: ADD_APP,\n payload: appSettings.Error,\n });\n }\n function onModalClose() {\n dispatch({ type: CANCEL_POWER_OFF });\n }\n return (\n {title}
\n