init
This commit is contained in:
Tommy Parnell
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.vscode
|
||||||
|
npm-debug.log
|
||||||
|
yarn-error.log
|
||||||
14
index.html
Normal file
14
index.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Monitorama Countdown!</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="main"></div>
|
||||||
|
<!-- Main -->
|
||||||
|
<script src="/dist/bundle.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
30
package.json
Normal file
30
package.json
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"name": "countdown",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
"serve": "webpack-dev-server --output-public-path=dist --history-api-fallback",
|
||||||
|
"build": "npm run lint && webpack --mode production",
|
||||||
|
"compile": "npm run build",
|
||||||
|
"lint": "tslint --project ./tsconfig.json src/**/*.ts src/**/*.tsx"
|
||||||
|
},
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/moment": "^2.13.0",
|
||||||
|
"@types/react": "^16.0.41",
|
||||||
|
"@types/react-dom": "^16.0.4",
|
||||||
|
"awesome-typescript-loader": "^4.0.1",
|
||||||
|
"css-loader": "^0.28.11",
|
||||||
|
"moment": "^2.21.0",
|
||||||
|
"react": "^16.2.0",
|
||||||
|
"react-dom": "^16.2.0",
|
||||||
|
"source-map-loader": "^0.2.3",
|
||||||
|
"tslint": "^5.9.1",
|
||||||
|
"typescript": "^2.7.2",
|
||||||
|
"webpack": "^4.2.0",
|
||||||
|
"webpack-cli": "^2.0.13"
|
||||||
|
}
|
||||||
|
}
|
||||||
39
src/App.tsx
Normal file
39
src/App.tsx
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
import * as moment from "moment";
|
||||||
|
import React = require("react");
|
||||||
|
|
||||||
|
const monitorama = moment("20180604", "YYYYMMDD");
|
||||||
|
export class App extends React.Component<any, {remaining: string}> {
|
||||||
|
private runningInterval?: number;
|
||||||
|
constructor(props: any) {
|
||||||
|
super(props);
|
||||||
|
this.state = {remaining: this.CalulateTime()};
|
||||||
|
this.runningInterval = setInterval(() => {
|
||||||
|
this.Update();
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
public componentWillUnmount() {
|
||||||
|
if (this.runningInterval) {
|
||||||
|
clearInterval(this.runningInterval);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
public Update() {
|
||||||
|
this.setState({remaining: this.CalulateTime()});
|
||||||
|
}
|
||||||
|
public CalulateTime() {
|
||||||
|
const now = moment();
|
||||||
|
if (now > monitorama) {
|
||||||
|
return "VICTORYYYYYYYYYYYYY";
|
||||||
|
} else {
|
||||||
|
const duration = moment.duration(monitorama.diff(now));
|
||||||
|
return `${duration.days()} days ${duration.hours()} hours ${duration.minutes()} minutes ${duration.seconds()} seconds`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
public render() {
|
||||||
|
return(
|
||||||
|
<div>
|
||||||
|
<h4 style={{textAlign: "center", marginTop: "30vh", fontFamily: "Arial, sans-serif", fontWeight: "bold", fontSize: "80px"}}>{this.state.remaining}</h4>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
9
src/index.tsx
Normal file
9
src/index.tsx
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as ReactDOM from "react-dom";
|
||||||
|
import {App} from "./App";
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<App />
|
||||||
|
,
|
||||||
|
document.getElementById("main"),
|
||||||
|
);
|
||||||
14
tsconfig.json
Normal file
14
tsconfig.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./dist/",
|
||||||
|
"sourceMap": true,
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"module": "commonjs",
|
||||||
|
"target": "es5",
|
||||||
|
"jsx": "react",
|
||||||
|
"noResolve": false
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"./src/**/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
20
tslint.json
Normal file
20
tslint.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"defaultSeverity": "error",
|
||||||
|
"extends": ["tslint:recommended"],
|
||||||
|
"jsRules": {},
|
||||||
|
"rules": {
|
||||||
|
"no-console": false,
|
||||||
|
"jsdoc-format": false,
|
||||||
|
"no-reference": false,
|
||||||
|
"no-reference-import": false,
|
||||||
|
"interface-name": false,
|
||||||
|
"newline-before-return": false,
|
||||||
|
"max-line-length": [true, 400],
|
||||||
|
"comment-format": false,
|
||||||
|
"class-name": false,
|
||||||
|
"object-literal-sort-keys": false,
|
||||||
|
"indent": false,
|
||||||
|
"eofline": false
|
||||||
|
},
|
||||||
|
"rulesDirectory": []
|
||||||
|
}
|
||||||
30
webpack.config.js
Normal file
30
webpack.config.js
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
var webpack = require('webpack');
|
||||||
|
module.exports = {
|
||||||
|
entry: "./src/index.tsx",
|
||||||
|
output: {
|
||||||
|
filename: "bundle.js",
|
||||||
|
path: __dirname + "/dist",
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
// Enable sourcemaps for debugging webpack's output.
|
||||||
|
devtool: "source-map",
|
||||||
|
resolve: {
|
||||||
|
// Add '.ts' and '.tsx' as resolvable extensions.
|
||||||
|
extensions: [".ts", ".tsx", ".js", ".json"]
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
|
||||||
|
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
|
||||||
|
|
||||||
|
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
|
||||||
|
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: ['style-loader', 'css-loader' ]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user