ssanjun · quead · Feb 14, 2021
diff --git a/Examples/README.md b/Examples/README.md
@@ -5,8 +5,10 @@
 ```
     cd ..
     npm install
-    cd Examples
-    node ../node_modules/gulp/bin/gulp.js
+    cd Examples/default
+    or
+    cd Examples/deck
+    node ../../node_modules/gulp/bin/gulp.js
 ```
 
 check http://localhost:8000 in your browser
diff --git a/Examples/build/bundle.js → Examples/deck/build/bundle.js b/Examples/build/bundle.js → Examples/deck/build/bundle.js
diff --git a/Examples/deck/build/index.html b/Examples/deck/build/index.html
@@ -0,0 +1,42 @@
+<html>
+<head>
+    <meta charset="utf-8">
+    <style>
+        html,
+        body,
+        ul,
+        li {
+            margin: 0; padding: 0;
+        }
+
+        body {
+            background: #FCD424; font: normal 16px/24px 'Helvetica Neue', Helvetica, Arial, freesans, sans-serif;
+        }
+
+        button,
+        input,
+        code {
+            display: inline-block; outline: none; font: inherit; border: none; background: #FDE991; padding: 0;
+        }
+
+        button {
+            color: #C7433E; cursor: pointer;
+        }
+
+        input {
+            width: 50px;
+        }
+    </style>
+</head>
+<body>
+<div id="app"></div>
+<div class="source">
+    <p>Drag the playing cards out of the stack and let go. Dragging them beyond the desk will throw them out of the deck.</p>
+    <p>Open the <a href="https://developer.chrome.com/devtools/docs/console">Console</a> to view the associated events.</p>
+    <p>Demonstration of <a href="https://github.com/gajus/swing">https://github.com/gajus/swing</a> implementation.</p>
+    <br/>
+    <p><b><a href="https://github.com/ssanjun/react-swing">https://github.com/ssanjun/react-swing</a> is a React component for implementing swing</b></b></p>
+</div>
+<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
+</body>
+</html>
diff --git a/Examples/deck/gulpfile.js b/Examples/deck/gulpfile.js
@@ -0,0 +1,46 @@
+/**
+ * @project react-swing
+ * Created by quead
+ */
+
+'use strict';
+
+var gulp = require('gulp');
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+
+gulp.task('legacy', function (callback) {
+  var webpackConfig = require('./webpack.config.js');
+  new WebpackDevServer(webpack(webpackConfig), {
+    contentBase: './build',
+    hot: true,
+  }).listen(8000, '0.0.0.0', function (err, result) {
+    if (err) {
+      console.log(err);
+    }
+  });
+  callback();
+});
+
+gulp.task('server', function (callback) {
+  var webpackConfig = require('./webpack.config.js');
+  new WebpackDevServer(
+    webpack({
+      ...webpackConfig,
+      entry: {
+        'bundle.js': ['./index.js'],
+      },
+    }),
+    {
+      contentBase: './build',
+      hot: true,
+    },
+  ).listen(8000, '0.0.0.0', function (err, result) {
+    if (err) {
+      console.log(err);
+    }
+  });
+  callback();
+});
+
+gulp.task('default', gulp.series('server'));
diff --git a/Examples/deck/index.js b/Examples/deck/index.js
@@ -0,0 +1,103 @@
+0/**
+ * @project react-swing
+ * Created by quead
+ */
+
+import React, { useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+import ReactSwing from '../../dist/react-swing.js';
+import './style.css';
+
+const App = () => {
+  const [cardCount, setCardCount] = useState(4);
+  const stackEl = useRef();
+
+  const addCard = () => {
+    setCardCount(cardCount + 1);
+  };
+
+  const removeCard = () => {
+    setCardCount(cardCount - 1);
+  }
+
+  const renderCards = () => {
+    const cardData = [
+      {
+        icon: '♣',
+        className: 'clubs',
+      },
+      {
+        icon: '♦',
+        className: 'diamonds',
+      },
+      {
+        icon: '♥',
+        className: 'hearts',
+      },
+      {
+        icon: '♠',
+        className: 'spades',
+      },
+    ];
+
+    const cards = [];
+
+    for (let i = 0; i < cardCount; i++) {
+      const data = cardData[i % cardData.length];
+
+      cards.push(
+        <div key={i} className={`card ${data.className}`} ref={`card${i}`}>
+          {data.icon}
+        </div>,
+      );
+    }
+
+    return cards;
+  };
+
+  return (
+    <div>
+      <div id="viewport">
+        {/*
+          ReactSwing Element
+        */}
+        <ReactSwing
+          className="stack"
+          stackStyle="DECK"
+          ref={stackEl}
+          throwout={e => console.log('throwout', e)}
+        >
+          {/*
+              children elements is will be Card
+          */}
+          {/** 
+          <div className="card clubs" ref="card1" throwout={(e) => console.log('card throwout', e)}>
+            ♣
+          </div>
+          <div className="card diamonds" ref="card2">
+            ♦
+          </div>
+          <div className="card hearts" ref="card3">
+            ♥
+          </div>
+          <div className="card spades" ref="card4">
+            ♠
+          </div>
+          */}
+          {renderCards()}
+        </ReactSwing>
+      </div>
+      <div className="control">
+        <button type="button" onClick={() => removeCard()}>
+          remove Card
+        </button>
+        <button type="button" onClick={() => addCard()}>
+          add Card
+        </button>
+      </div>
+    </div>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/Examples/deck/style.css b/Examples/deck/style.css
@@ -0,0 +1,96 @@
+#viewport {
+    width: 800px;
+    height: 320px;
+    background: #C7433E;
+    border: 10px solid #ED5D52;
+    margin: 250px auto 0;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 30px;
+    box-sizing: border-box;
+}
+
+#viewport .stack {
+    width: 150px;
+    height: 250px;
+    background: #ED5D52;
+    position: relative;
+    border-radius: 10px;
+}
+
+#viewport .card {
+    width: 150px;
+    height: 250px;
+    list-style: none;
+    background: #fff;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    box-shadow: 0 0 2px rgba(0, 0, 0, .2), 1px 1px 1px rgba(0, 0, 0, .2);
+    font-size: 100px;
+    border: 10px solid #ECECEC;
+    box-sizing: border-box;
+    cursor: default;
+    position: absolute;
+}
+
+#viewport .clubs,
+#viewport .spades {
+    color: #373737;
+}
+
+#viewport .diamonds,
+#viewport .hearts {
+    color: #ED5D52;
+}
+
+#viewport .in-deck:nth-child(3) {
+    top: 2px;
+    transform: translate(2px, 2px) rotate(0.4deg);
+}
+
+#viewport .in-deck:nth-child(2) {
+    top: 4px;
+    transform: translate(-4px, -2px) rotate(-1deg);
+}
+
+.control {
+    text-align: center;
+    font-size: 0;
+    margin: 20px;
+}
+
+.control button {
+    background: #FFFFFF;
+    color: #373737;
+    font-weight: bold;
+    border: none;
+    font: normal 18px/24px 'Helvetica Neue', Helvetica, Arial, freesans, sans-serif;
+    margin: 0 5px;
+    padding: 10px 15px;
+    cursor: pointer;
+    box-shadow: 0 2px 0 #63211F;
+    outline: none;
+    position: relative;
+}
+
+.control button:active {
+    background: #63211F;
+    color: #FFFFFF;
+    bottom: -2px;
+    box-shadow: none;
+}
+
+.source {
+    width: 500px;
+    margin: 20px auto;
+}
+
+.source a {
+    color: #C7433E;
+}
diff --git a/Examples/deck/webpack.config.js b/Examples/deck/webpack.config.js
@@ -0,0 +1,36 @@
+/**
+ * @project react-swing
+ * Created by quead
+ */
+
+var webpack = require('webpack');
+var path = require('path');
+
+module.exports = {
+  mode: 'development',
+  devtool: '#inline-source-map',
+  entry: {
+    'bundle.js': ['./index.js'],
+  },
+  output: {
+    path: path.join(__dirname, 'build'),
+    filename: '[name]',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loaders: ['babel-loader'],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.css'],
+  },
+  plugins: [new webpack.NoEmitOnErrorsPlugin()],
+};