cupcakearmy/rauchmelder
1
0
Fork 0
mirror of https://github.com/cupcakearmy/rauchmelder.git synced 2025-09-07 18:00:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

rework & new build system

Browse Source
This commit is contained in:
cupcakearmy
2019-11-08 22:36:04 +01:00
parent 5eee5c75a7
commit 652aa06ebf
15 changed files with 181 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/App.styl
View File

@@ -1,42 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=PT+Sans')
*
box-sizing border-box
html
body
#root
margin 0
padding 0
width 100vw
height 100vh
overflow hidden
font-family 'PT Sans', sans-serif
font-weight bold
#app
height: 100%
width: 100%
//background-color #eeffee
background linear-gradient(45deg, #111, #222)
color #fff
display flex
justify-content center
align-items center
text-align center
@media (min-width: 0px)
#text
font-size 3em
#title
font-size 2em
@media (min-width: 900px)
#text
font-size 4em
#title
font-size 3em
@media (min-width: 1200px)
#text
font-size 5em
#title
font-size 4em

31
src/App.tsx
View File

@@ -1,31 +0,0 @@
import moment from 'moment'
import React, { useEffect, useState } from 'react'
// @ts-ignore
const App: React.FC = () => {
const [refresh, setRefresh] = useState<number>(0)
const gloryTime = moment('2019-02-12').unix()
const now = Date.now() / 1000 | 0
const delta = moment.duration(now - gloryTime, 'seconds')
useEffect(()=> {
setTimeout(()=> setRefresh(refresh + 1), 1000)
}, [refresh])
return <div id="app">
<div>
<div id={'title'}>Rauchmelder 💨</div>
<br/>
<div id={'text'}>
{delta.humanize()}
<br/>
{delta.asSeconds()}
</div>
</div>
</div>
}
export default App

35
src/Components/App.tsx Normal file
View File

@@ -0,0 +1,35 @@
import React, { useState, useCallback } from 'react'
import moment from 'moment'
import ShowTime from './ShowTime'
import Switcher from './Switcher'
export const Glories = {
Cosi: moment('2019-02-12').unix(),
Georg: moment('2019-11-08').unix()
}
export type Person = keyof typeof Glories
const init: Person = window.localStorage.getItem('selected') as Person || 'Cosi'
const App: React.FC = () => {
const [person, setPerson] = useState(init)
const _set = useCallback((p: Person) => {
window.localStorage.setItem('selected', p)
setPerson(p)
}, [])
return <div id="app">
<Switcher onChange={_set} />
<div>
<div id={'title'}>💨 Rauchmelder 💨</div>
<br />
<ShowTime glory={Glories[person]} />
</div>
</div>
}
export default App

26
src/Components/ShowTime.tsx Normal file
View File

@@ -0,0 +1,26 @@
import React, { useEffect, useState } from 'react'
import moment from 'moment'
type Props = {
glory: number
}
const ShowTime: React.FC<Props> = ({ glory }) => {
const [refresh, setRefresh] = useState(0)
const now = Date.now() / 1000 | 0
const delta = moment.duration(now - glory, 'seconds')
useEffect(() => {
setTimeout(() => setRefresh(refresh + 1), 1000)
}, [refresh])
return <div id={'text'}>
{delta.humanize()}
<br />
{delta.asSeconds()}
</div>
}
export default ShowTime

20
src/Components/Switcher.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React, { useMemo } from 'react'
import { Glories, Person } from './App'
type Props = {
onChange: (p: Person) => void,
}
const Switcher: React.FC<Props> = ({ onChange }) => {
return <div id={'switcher'}>
{Object.keys(Glories).map((glory, i) => <span
key={i}
onClick={() => onChange(glory as Person)}
>
{glory}
</span>
)}
</div>
}
export default Switcher

2
src/index.html
View File

@@ -5,10 +5,12 @@
<title>💨</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&display=swap" rel="stylesheet">
</head>
<body>
<main id="root"></main>
<script src="./main.tsx"></script>
</body>
</html>

7
src/index.tsx
View File

@@ -1,7 +0,0 @@
import React from 'react'
import ReactDOM from 'react-dom'
import './App.styl'
import App from './App'
ReactDOM.render(<App />, document.getElementById('root'))

38
src/main.styl Normal file
View File

@@ -0,0 +1,38 @@
*
box-sizing border-box
html, body, #root
margin 0
padding 0
width 100%
height 100%
overflow hidden
font-family 'PT Sans', sans-serif
font-weight bold
#app
height: 100%
width: 100%
background linear-gradient(45deg, #111, #222)
color #fff
display flex
justify-content center
align-items center
text-align center
#text
font-size 17vmin
#title
font-weight: normal
font-size 12vmin
#switcher
position: fixed
top: 0
padding: 1rem
font-size: 2em
&>span
margin: 1rem
text-decoration: underline
cursor pointer

8
src/main.tsx Executable file
View File

@@ -0,0 +1,8 @@
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import './main.styl'
import App from './Components/App'
ReactDOM.render(<App />, document.getElementById('root'))