meramos’s gists

meramos / next_buttons_styling.scss

Created December 21, 2020 15:27

Position "next" buttons.

	$items: ("eyes": 9, "ears": 3, "mouth": 4, "nose": 3, "clothes": 3);

	// Position "next" buttons

	$height: 410px;

	@each $item, $total in $items {

	$height: $height + 30px; //buttons will have 30px in between (vertically)

meramos / previous_button.jsx

Created December 21, 2020 03:53

Change you have to make to the next() function if you want it to use it for a "previous" button

	let next_num = dressupState[item].current - 1
	// if next_num less than 0, restart (set current to total - 1)
	let new_current = next_num < 0 ? dressupState[item].total - 1 : next_num

meramos / dressup_style.scss

Created December 20, 2020 17:40

Full style.scss style sheet for dressup game.

	#container{
	position: absolute;
	margin:auto;
	width: 1000px;
	height: 1123px;
	}

	#body{
	position:absolute;
	width:794px; /* width of actual image */

meramos / new_function.jsx

Created December 20, 2020 04:18

Move dressup state update to its own function.

	function next(item){
	let next_num = dressupState[item].current + 1
	// if next_num exceeds total, restart (set current to 0)
	let new_current = next_num < dressupState[item].total ? next_num : 0
	updateDressUp(item, new_current)
	}

	function updateDressUp(item,new_current){
	setDressupState({
	...dressupState,

meramos / randomize_button_style.scss

Created December 20, 2020 04:12

Position "randomize" button.

meramos / randomize_button.jsx

Created December 20, 2020 04:11

Randomize button.

<input type="button" value="RANDOMIZE" id="randomize" onClick={() => randomize()}/>

meramos / randomize.jsx

Created December 20, 2020 04:09

Randomize function for dressup.

	function randomize(){
	// for each dressup item, generate a random integer and assign it to current
	Object.keys(dressupState).map((item) =>
	updateDressUp(item, Math.floor(Math.random() * Math.floor(dressupState[item].total)))
	)
	}

meramos / dressup_app.jsx

Last active December 20, 2020 04:14

Full App.js code for dressup game.

	import './assets/scss/style.scss';
	import React, { useState } from 'react';

	function App() {

	// ATM you need to manually add new items and update the total values per item
	const [dressupState, setDressupState] = useState({
	eyes: {current: 0, total: 9},
	ears: {current: 0, total: 3},
	mouth: {current: 0, total: 4},

meramos / updateDivs_shorter.jsx

Created December 20, 2020 03:32

(shorter code) Update divs which were added earlier so that their class values are defined based on the current image per item.

	// dressupState was defined earlier

	<div id="container">
	<div id="background">
	<div id="body"></div>
	{ Object.keys(dressupState).map((item) =>
	<div id={item} className={item+(dressupState[item].current+1)} key={item}></div>
	)
	}
	</div>

meramos / updateDivs.jsx

Created December 20, 2020 03:28

Update divs which were added earlier so that their class values are defined based on the current image per item.

	<div id="container">
	<div id="background">
	<div id="body"></div>
	<div id="eyes" className={"eyes"+(dressupState["eyes"].current+1)} ></div>
	<div id="ears" className={"ears"+(dressupState["ears"].current+1)}></div>
	<div id="nose" className={"nose"+(dressupState["nose"].current+1)}></div>
	<div id="mouth" className={"mouth"+(dressupState["mouth"].current+1)}></div>
	<div id="clothes" className={"clothes"+(dressupState["clothes"].current+1)}></div>
	</div>
	</div>

María E. Ramos Morales meramos