Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

Soumyajit Pathak drenther

🏠
Working from home
View GitHub Profile
@drenther
drenther / index.html
Created Apr 7, 2020
Example of Spot Panel Ports Example to show inconsistencies in Spot Panel ports // source https://jsbin.com/kixawuh
View index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Example to show inconsistencies in Spot Panel ports">
<title>Example of Spot Panel Ports</title>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.1.9/go.js"></script>
<script id="code">
function init() {
const $ = go.GraphObject.make;
View index.css
header.navbar {
height: 40px;
margin: 5px 20px;
}
div.menu .menu-item.tile.tile-centered {
margin-top: 5px;
}
.menu.hero-list {
@drenther
drenther / utils.js
Created Mar 5, 2019
Final utils.js
View utils.js
import { HEROES, COMICS } from './data';
// the Knuth shuffle algorithm
export function shuffle(array) {
let currentIndex = array.length;
let temporaryValue;
let randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
@drenther
drenther / App.js
Last active Mar 5, 2019
Final App.js
View App.js
import React from 'react';
import { DragDropContext } from 'react-beautiful-dnd';
import { HEROES, COMICS } from './custom/data';
import { shuffle, getTimeLeft, move, GAME_STATE } from './custom/utils';
import Modal from './components/Modal';
import Header from './components/Header';
import Dropzone from './components/Dropzone';
import Footer from './components/Footer';
View Footer.js
View App.js
/** App.js **/
import React from 'react';
import { DragDropContext } from 'react-beautiful-dnd';
import { HEROES, COMICS } from './custom/data';
import { shuffle, move, GAME_STATE } from './custom/utils';
import Modal from './components/Modal';
import Header from './components/Header';
@drenther
drenther / Dropzone.js
Created Mar 5, 2019
Dropzone component
View Dropzone.js
/** components/Dropzone.js **/
import React from 'react';
import { Droppable, Draggable } from 'react-beautiful-dnd';
const Dropzone = ({ isDropDisabled, heroes, id }) => (
<div className="column col-4">
<div className="divider" data-content={id.toUpperCase()} />
<Droppable droppableId={id} isDropDisabled={isDropDisabled}>
{provided => {
@drenther
drenther / App.js
Last active Mar 5, 2019
The App component render function
View App.js
class App extends React.Component {
render() {
const { gameState, timeLeft, bench, ...groups } = this.state;
const isDropDisabled = gameState === GAME_STATE.DONE;
return (
<>
<Header gameState={gameState} timeLeft={timeLeft} endGame={this.endGame} />
{this.state.gameState !== GAME_STATE.PLAYING && (
<Modal
@drenther
drenther / initialState.js
Last active Mar 5, 2019
Initial State for Line up the Heroes and the shuffle algorithm
View initialState.js
/** App.js **/
import { HEROES, COMICS } from './custom/data';
import { shuffle, GAME_STATE } from './custom/utils';
const initialState = {
// we initialize the state by populating the bench with a shuffled collection of heroes
bench: shuffle(HEROES),
[COMICS.DC]: [],
[COMICS.MARVEL]: [],
@drenther
drenther / data.js
Last active Mar 5, 2019
Data for "Line up the Heroes"
View data.js
/** custom/data.js **/
export const COMICS = {
DC: 'dc',
MARVEL: 'marvel',
};
export const HEROES = [
{
name: 'Superman',
You can’t perform that action at this time.