merge de la bramche master
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
commit
1e63a5c3fc
@ -0,0 +1,40 @@
|
|||||||
|
kind: pipeline
|
||||||
|
type: docker
|
||||||
|
name: HyperSet
|
||||||
|
|
||||||
|
trigger:
|
||||||
|
event:
|
||||||
|
- push
|
||||||
|
|
||||||
|
steps:
|
||||||
|
|
||||||
|
- name: hyperset-build
|
||||||
|
image: plugins/docker
|
||||||
|
settings:
|
||||||
|
dockerfile: Dockerfile
|
||||||
|
context: .
|
||||||
|
registry: hub.codefirst.iut.uca.fr
|
||||||
|
repo: hub.codefirst.iut.uca.fr/remi.arnal/hyper-set
|
||||||
|
username:
|
||||||
|
from_secret: registry_username
|
||||||
|
password:
|
||||||
|
from_secret: registry_password
|
||||||
|
|
||||||
|
- name: hyperset-deployment
|
||||||
|
image: hub.codefirst.iut.uca.fr/thomas.bellembois/codefirst-dockerproxy-clientdrone:latest
|
||||||
|
environment:
|
||||||
|
IMAGENAME: hub.codefirst.iut.uca.fr/remi.arnal/hyper-set:latest
|
||||||
|
CONTAINERNAME: hyperset
|
||||||
|
COMMAND: create
|
||||||
|
OVERWRITE: true
|
||||||
|
ADMINS: aurianjault,raphaellacote,bastienjacquelin,remiarnal
|
||||||
|
depends_on : [hyperset-build]
|
||||||
|
|
||||||
|
- name: code-analysis
|
||||||
|
image: sonarsource/sonar-scanner-cli
|
||||||
|
environment:
|
||||||
|
SONAR_TOKEN:
|
||||||
|
from_secret: SONAR_TOKEN
|
||||||
|
commands:
|
||||||
|
- sonar-scanner -Dsonar.projectKey=hyperset -Dsonar.sources=. -Dsonar.host.url=https://codefirst.iut.uca.fr/sonar -Dsonar.login=$${SONAR_TOKEN}
|
||||||
|
depends_on: [ hyperset-build ]
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
FROM httpd
|
||||||
|
COPY ./ /usr/local/apache2/htdocs/
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>HyperSet</title>
|
||||||
|
<base href="https://codefirst.iut.uca.fr/containers/HyperSet-hyperset/">
|
||||||
|
<link rel="stylesheet" type="text/css" href="./styles/style.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="./styles/index.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<ul id="nav-bar">
|
||||||
|
<li><a href="./index.html">Home</a></li> <!-- maybe put a logo -->
|
||||||
|
<li><a href="./views/cards.html">Card Test</a></li>
|
||||||
|
<li><a href="./views/tutorial.html">Tutorial</a></li>
|
||||||
|
<li><a href="./views/leaderboard.html">Leaderboard</a></li>
|
||||||
|
<li><a href="./views/about.html">About</a></li>
|
||||||
|
</ul>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div id="master">
|
||||||
|
<div id="left" class="column">
|
||||||
|
<h1>HyperSet</h1>
|
||||||
|
<span id="slogan">Find all the Sets !</span>
|
||||||
|
|
||||||
|
<div id="random-set">
|
||||||
|
<!-- cards added by script at page load -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="info">
|
||||||
|
<span>Connected players: 1345</span>
|
||||||
|
<span>Total Played Games: 1,455,876</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div id="right" class="column">
|
||||||
|
<button class="action-button">Join Public Game</button>
|
||||||
|
<button class="action-button">New Public Game</button>
|
||||||
|
<button class="action-button">New Private Game</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -1,36 +1,15 @@
|
|||||||
class Card{
|
class Card{
|
||||||
constructor(color, number, shape, filling){
|
constructor(){}
|
||||||
if(!color){
|
|
||||||
throw new EmptyParamaterException('Color');
|
|
||||||
}
|
|
||||||
if(!number){
|
|
||||||
throw new EmptyParamaterException('Number');
|
|
||||||
}
|
|
||||||
if(!shape){
|
|
||||||
throw new EmptyParamaterException('Shape');
|
|
||||||
}
|
|
||||||
if(!filling){
|
|
||||||
throw new EmptyParamaterException('Filling');
|
|
||||||
}
|
|
||||||
this.color=color;
|
|
||||||
this.number=number;
|
|
||||||
this.shape=shape;
|
|
||||||
this.filling=filling;
|
|
||||||
}
|
|
||||||
/**
|
/**
|
||||||
* @returns array of all attributes :
|
*
|
||||||
idx 1 : color
|
* @returns all attributes of a card
|
||||||
idx 2 : number
|
|
||||||
idx 3 : shape
|
|
||||||
idx 4 : filling
|
|
||||||
idx 5 : null
|
|
||||||
* @author Bastien Jacquelin
|
|
||||||
*/
|
*/
|
||||||
getAttributes(){
|
getAttributes(){}
|
||||||
return [this.color,this.number,this.shape,this.filling];
|
/**
|
||||||
}
|
*
|
||||||
equals(card){
|
* @param {*} card card to be compared with the current obj
|
||||||
return this.color===card.color && this.number===card.number && this.shape===card.shape && this.filling===card.filling;
|
* @returns boolean
|
||||||
}
|
*/
|
||||||
|
equals(card){}
|
||||||
|
|
||||||
}//export {Card}
|
}//export {Card}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
class Card4WithoutColor extends Card{
|
||||||
|
constructor(number, shape, filling, outline){
|
||||||
|
super();
|
||||||
|
if(number==''){
|
||||||
|
throw new EmptyParamaterException('Number');
|
||||||
|
}
|
||||||
|
if(shape==''){
|
||||||
|
throw new EmptyParamaterException('Shape');
|
||||||
|
}
|
||||||
|
if(filling==''){
|
||||||
|
throw new EmptyParamaterException('Filling');
|
||||||
|
}
|
||||||
|
if(outline==''){
|
||||||
|
throw new EmptyParamaterException('Outline');
|
||||||
|
}
|
||||||
|
this.number=number;
|
||||||
|
this.shape=shape;
|
||||||
|
this.filling=filling;
|
||||||
|
this.outline=outline;
|
||||||
|
}
|
||||||
|
getAttributes(){
|
||||||
|
return [this.number,this.shape,this.filling,this.outline];
|
||||||
|
}
|
||||||
|
equals(card){
|
||||||
|
return this.number===card.number && this.shape===card.shape && this.filling===card.filling && this.outline===card.outline ;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
class Card4WithoutFilling extends Card{
|
||||||
|
constructor(color,number, shape, outline){
|
||||||
|
super();
|
||||||
|
if(number==''){
|
||||||
|
throw new EmptyParamaterException('Number');
|
||||||
|
}
|
||||||
|
if(shape==''){
|
||||||
|
throw new EmptyParamaterException('Shape');
|
||||||
|
}
|
||||||
|
if(color==''){
|
||||||
|
throw new EmptyParamaterException('Color');
|
||||||
|
}
|
||||||
|
if(outline==''){
|
||||||
|
throw new EmptyParamaterException('Outline');
|
||||||
|
}
|
||||||
|
this.number=number;
|
||||||
|
this.shape=shape;
|
||||||
|
this.color=color;
|
||||||
|
this.outline=outline;
|
||||||
|
}
|
||||||
|
getAttributes(){
|
||||||
|
return [this.number,this.shape,this.color,this.outline];
|
||||||
|
}
|
||||||
|
equals(card){
|
||||||
|
return this.number===card.number && this.shape===card.shape && this.color===card.color && this.outline===card.outline ;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
class Card4WithoutNumber extends Card{
|
||||||
|
constructor(color, shape, filling, outline){
|
||||||
|
super();
|
||||||
|
if(color==''){
|
||||||
|
throw new EmptyParamaterException('Color');
|
||||||
|
}
|
||||||
|
if(shape==''){
|
||||||
|
throw new EmptyParamaterException('Shape');
|
||||||
|
}
|
||||||
|
if(filling==''){
|
||||||
|
throw new EmptyParamaterException('Filling');
|
||||||
|
}
|
||||||
|
if(outline==''){
|
||||||
|
throw new EmptyParamaterException('Outline');
|
||||||
|
}
|
||||||
|
this.color=color;
|
||||||
|
this.shape=shape;
|
||||||
|
this.filling=filling;
|
||||||
|
this.outline=outline;
|
||||||
|
}
|
||||||
|
getAttributes(){
|
||||||
|
return [this.color,this.shape,this.filling,this.outline];
|
||||||
|
}
|
||||||
|
equals(card){
|
||||||
|
return this.color===card.color && this.shape===card.shape && this.filling===card.filling && this.outline===card.outline ;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
class Card4WithoutOutline extends Card{
|
||||||
|
constructor(color, number, shape, filling){
|
||||||
|
super();
|
||||||
|
if(color==''){
|
||||||
|
throw new EmptyParamaterException('Color');
|
||||||
|
}
|
||||||
|
if(number==''){
|
||||||
|
throw new EmptyParamaterException('Number');
|
||||||
|
}
|
||||||
|
if(shape==''){
|
||||||
|
throw new EmptyParamaterException('Shape');
|
||||||
|
}
|
||||||
|
if(filling==''){
|
||||||
|
throw new EmptyParamaterException('Filling');
|
||||||
|
}
|
||||||
|
this.color=color;
|
||||||
|
this.number=number;
|
||||||
|
this.shape=shape;
|
||||||
|
this.filling=filling;
|
||||||
|
}
|
||||||
|
getAttributes(){
|
||||||
|
return [this.color,this.number,this.shape,this.filling];
|
||||||
|
}
|
||||||
|
equals(card){
|
||||||
|
return this.number===card.number && this.shape===card.shape && this.filling===card.filling && this.color===card.color;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
class Card4WithoutShape extends Card{
|
||||||
|
constructor(color,number, filling, outline){
|
||||||
|
super();
|
||||||
|
if(color==''){
|
||||||
|
throw new EmptyParamaterException('Color');
|
||||||
|
}
|
||||||
|
if(number==''){
|
||||||
|
throw new EmptyParamaterException('Number');
|
||||||
|
}
|
||||||
|
if(filling==''){
|
||||||
|
throw new EmptyParamaterException('Filling');
|
||||||
|
}
|
||||||
|
if(outline==''){
|
||||||
|
throw new EmptyParamaterException('Outline');
|
||||||
|
}
|
||||||
|
this.color=color;
|
||||||
|
this.number=number;
|
||||||
|
this.filling=filling;
|
||||||
|
this.outline=outline;
|
||||||
|
}
|
||||||
|
getAttributes(){
|
||||||
|
return [this.number,this.color,this.filling,this.outline];
|
||||||
|
}
|
||||||
|
equals(card){
|
||||||
|
return this.number===card.number && this.color===card.color && this.filling===card.filling && this.outline===card.outline ;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
const tabColor = ['red','purple','green','blue','orange'];
|
||||||
|
const tabNumber = [1,2,3,4,5];
|
||||||
|
const tabShape = ['diamond','oval','wave','star','triangle'];
|
||||||
|
const tabFilling = ['empty','stripped','full','pointed','squared'];
|
||||||
|
const tabOutline = ['full','dotted ','hyphen','cloudy','sharpy'];
|
||||||
|
const ATTRIBUTES=[tabColor,tabNumber,tabShape,tabFilling,tabOutline]
|
||||||
@ -1,74 +1,82 @@
|
|||||||
class Deck{
|
class Deck{
|
||||||
constructor(nbAttributes=4){
|
/**
|
||||||
this.allCards=this.createCards(nbAttributes);// All the cards in the game
|
*
|
||||||
this.remainingCards=this.allCards;// cards in the stack
|
* @param {*} attributes : array with the attributes index for the cards
|
||||||
|
* @author Bastien Jacquelin
|
||||||
|
*/
|
||||||
|
constructor(attributes,nbCards){
|
||||||
|
//console.log(attributes);
|
||||||
|
this.allCards=this.createCards(attributes);// All the cards in the game
|
||||||
|
this.remainingCards=[]
|
||||||
|
this.nbCards=nbCards;
|
||||||
|
this.remainingCards=this.remainingCards.concat(this.allCards);// cards in the stack
|
||||||
this.outputCards=[];// 12 cards lay on the table
|
this.outputCards=[];// 12 cards lay on the table
|
||||||
this.setMade=[];// array with all the set already mades (array of set)
|
this.setMade=[];// array with all the set already mades (array of set)
|
||||||
//this.createDeck();
|
this.createDeck(12);
|
||||||
}
|
}
|
||||||
createDeck(){
|
/**
|
||||||
for (let i=0; i<12; i++){
|
* @brief creation of the deck : 12 cards lay in front of the player
|
||||||
|
* @author Bastien Jacquelin
|
||||||
|
*/
|
||||||
|
createDeck(nbCards){
|
||||||
|
for (let i=0; i<nbCards; i++){
|
||||||
const rand = this.getRandCard();
|
const rand = this.getRandCard();
|
||||||
this.outputCards.push(this.remainingCards[rand]);
|
this.outputCards.push(this.remainingCards[rand]);
|
||||||
this.remainingCards.splice(rand,1);
|
this.remainingCards.splice(rand,1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns random number in range of the array size
|
||||||
|
* @author Bastien Jacquelin
|
||||||
|
*/
|
||||||
getRandCard(){
|
getRandCard(){
|
||||||
const random = Math.floor(Math.random() * this.remainingCards.length);
|
const random = Math.floor(Math.random() * this.remainingCards.length);
|
||||||
return random;
|
return random;
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @param {*} nbAttributes : attributes of the card, by default = 4
|
* @param attributes : index of the attributes used
|
||||||
* @returns all cards: 81 in case of 4 attributes and 1224
|
* @returns all cards: 81 in case of 4 attributes and 1024 if 5 attributes
|
||||||
|
* @author Bastien Jacquelin
|
||||||
*/
|
*/
|
||||||
createCards(nbAttributes){
|
createCards(attributes){
|
||||||
const tabColor = ['red','purple','green','blue','orange'];
|
let factory = new Factory(attributes)
|
||||||
const tabNumber = [1,2,3,4,5];
|
return factory.product
|
||||||
const tabShape = ['diamond','oval','wave','star','circle'];
|
|
||||||
const tabFilling = ['empty','stripped','full','pointed','squared'];
|
|
||||||
const tabOutline = ['full','dotted ','aa','bb','cc'];
|
|
||||||
let tabOfAllCards=[];
|
|
||||||
for (let c=0; c<nbAttributes-1; c++){
|
|
||||||
for (let n=0; n<nbAttributes-1; n++){
|
|
||||||
for (let s=0; s<nbAttributes-1; s++){
|
|
||||||
for (let f=0; f<nbAttributes-1; f++){
|
|
||||||
if(nbAttributes==4){
|
|
||||||
tabOfAllCards.push(new Card(tabColor[c],tabNumber[n],tabShape[s],tabFilling[f]));
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
for(let o=0;o<nbAttributes-1;o++){
|
|
||||||
tabOfAllCards.push(new Card5(tabColor[c],tabNumber[n],tabShape[s],tabFilling[f],tabOutline[o]));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return tabOfAllCards;
|
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* @brief verification of the validity of the set selected
|
||||||
|
* @param {*} selectedCards array of cards : set
|
||||||
|
* @author Bastien Jacquelin
|
||||||
|
*/
|
||||||
checkSet(selectedCards){
|
checkSet(selectedCards){
|
||||||
if(true){//isSet(selectedCards)){
|
if(true){//isSet(selectedCards)){
|
||||||
selectedCards.forEach(e => {
|
this.removeFromoutputCards(selectedCards);
|
||||||
this.removeFromRemainingCards(e);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
removeFromRemainingCards(selectedCards){//better check of card type more opti
|
/**
|
||||||
|
* @brief when a set is made, need to remove the card from the array remainingCards
|
||||||
|
* @param {*} selectedCards cards which need to be removed from the outputcards
|
||||||
|
* @author Bastien Jacquelin
|
||||||
|
*/
|
||||||
|
removeFromoutputCards(selectedCards){//better check of card type more opti
|
||||||
let set=[];
|
let set=[];
|
||||||
for(let i=0; i<this.allCards.length;i++){
|
selectedCards.forEach(element => {
|
||||||
let e = this.allCards[i]
|
for(let i=0; i<this.outputCards.length;i++){
|
||||||
if(e.equals(selectedCards)){
|
let e = this.outputCards[i]
|
||||||
set.push(e);
|
if(e.equals(element)){
|
||||||
this.allCards.splice(i,1);
|
set.push(e);
|
||||||
console.log("card remove : "+e.color,e.number,e.filling,e.shape);
|
this.outputCards.splice(i,1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
if(set.length!=1){
|
|
||||||
|
if(set.length<1){
|
||||||
throw new UnFoundCardException(selectedCards);
|
throw new UnFoundCardException(selectedCards);
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
this.setMade.push(set);
|
this.setMade.push(set);
|
||||||
|
this.createDeck(this.nbCards)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -0,0 +1,102 @@
|
|||||||
|
class Factory{
|
||||||
|
constructor(arrayOfAttributes){
|
||||||
|
let length=arrayOfAttributes.length
|
||||||
|
this.product=this.concreteCardCreation(arrayOfAttributes,length);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @brief check if i in arrayOfAttributes
|
||||||
|
* @param {*} i value
|
||||||
|
* @param {*} arrayOfAttributes array
|
||||||
|
* @returns boolean
|
||||||
|
*/
|
||||||
|
inArray(i,arrayOfAttributes){
|
||||||
|
let finded=false;
|
||||||
|
for (let j=0;j<arrayOfAttributes.length;j++){
|
||||||
|
if(i==arrayOfAttributes[j]){
|
||||||
|
finded=true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return finded
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @brief create a matrix with the attributes of the cards : if attributes not defined : value 0
|
||||||
|
* @param {*} arrayOfAttributes
|
||||||
|
* @param {*} length
|
||||||
|
* @returns matrix of attributes
|
||||||
|
*/
|
||||||
|
attributesRequiredFun(arrayOfAttributes){
|
||||||
|
let attributesRequiredTmp=[];
|
||||||
|
let nullArray=[0,0,0,0,0];
|
||||||
|
for(let i=0;i<5;i++){
|
||||||
|
if(!this.inArray(i,arrayOfAttributes)){
|
||||||
|
attributesRequiredTmp.push(nullArray);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
attributesRequiredTmp.push(ATTRIBUTES[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return attributesRequiredTmp;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @biref create the right cards : 3,4,5 attributes
|
||||||
|
* @param {*} arrayOfAttributes
|
||||||
|
* @param {*} length
|
||||||
|
* @returns array of all cards
|
||||||
|
*/
|
||||||
|
concreteCardCreation(arrayOfAttributes, length){
|
||||||
|
let tabOfAllCards=[];
|
||||||
|
let attributes=this.attributesRequiredFun(arrayOfAttributes);
|
||||||
|
let nbAttributes=length
|
||||||
|
if(nbAttributes==3){
|
||||||
|
for (let c=0; c<nbAttributes-1; c++){
|
||||||
|
for (let n=0; n<nbAttributes-1; n++){
|
||||||
|
for (let s=0; s<nbAttributes-1; s++){
|
||||||
|
tabOfAllCards.push(new Card3(ATTRIBUTES[0][c],ATTRIBUTES[1][n],ATTRIBUTES[2][s]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if(nbAttributes==4){
|
||||||
|
for (let n=0; n<nbAttributes-1; n++){
|
||||||
|
for (let s=0; s<nbAttributes-1; s++){
|
||||||
|
for (let f=0; f<nbAttributes-1; f++){
|
||||||
|
for (let o=0; o<nbAttributes-1; o++){
|
||||||
|
if(attributes[0][0]===0){
|
||||||
|
tabOfAllCards.push(new Card4WithoutColor(attributes[1][n],attributes[2][s],attributes[3][f],attributes[4][o]));
|
||||||
|
}
|
||||||
|
else if(attributes[1][0]===0){
|
||||||
|
tabOfAllCards.push(new Card4WithoutNumber(attributes[0][n],attributes[2][s],attributes[3][f],attributes[4][o]));
|
||||||
|
}
|
||||||
|
else if(attributes[2][0]===0){
|
||||||
|
tabOfAllCards.push(new Card4WithoutShape(attributes[0][n],attributes[1][s],attributes[3][f],attributes[4][o]));
|
||||||
|
}
|
||||||
|
else if(attributes[3][0]===0){
|
||||||
|
tabOfAllCards.push(new Card4WithoutFilling(attributes[0][n],attributes[1][s],attributes[2][f],attributes[4][o]));
|
||||||
|
}
|
||||||
|
else if(attributes[4][0]===0){
|
||||||
|
tabOfAllCards.push(new Card4WithoutOutline(attributes[0][n],attributes[1][s],attributes[2][f],attributes[3][o]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if(nbAttributes==5){
|
||||||
|
for (let c=0; c<nbAttributes-1; c++){
|
||||||
|
for (let n=0; n<nbAttributes-1; n++){
|
||||||
|
for (let s=0; s<nbAttributes-1; s++){
|
||||||
|
for (let f=0; f<nbAttributes-1; f++){
|
||||||
|
for (let o=0; o<nbAttributes-1; o++){
|
||||||
|
tabOfAllCards.push(new Card5(attributes[0][c],attributes[1][n],attributes[2][s],attributes[3][f],attributes[4][o]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
//ERROR
|
||||||
|
}
|
||||||
|
return tabOfAllCards
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
.card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 10rem;
|
||||||
|
min-width: 20rem;
|
||||||
|
padding: 3em;
|
||||||
|
margin: 1.7rem; /* for better display */
|
||||||
|
border: 0.3em solid black;
|
||||||
|
border-radius: 2em;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
@ -0,0 +1,110 @@
|
|||||||
|
/* Nav Bar */
|
||||||
|
#nav-bar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
list-style-type: none;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-bar li {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-bar li a {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: var(--font);
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
padding: 1.5rem;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-bar li a:hover {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main */
|
||||||
|
|
||||||
|
#master {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 3em;
|
||||||
|
height: calc(100vh - 5rem - 7em);
|
||||||
|
}
|
||||||
|
|
||||||
|
#left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 60%;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
width: 40%;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-button {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 50%;
|
||||||
|
padding: 1.2em;
|
||||||
|
padding-top: 2.1rem;
|
||||||
|
background-color: white;
|
||||||
|
border: 0.2rem solid black;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
font-family: var(--font);
|
||||||
|
font-size: 1.5em;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-button:hover {
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
transform: scale(1.2);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: black;
|
||||||
|
font-size: 5em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#slogan {
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
color: black;
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#random-set {
|
||||||
|
height: 40vh;
|
||||||
|
background-color: white;
|
||||||
|
border: 0.5rem solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
:root {
|
||||||
|
--font : Helvetica;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
font-family: var(--font);
|
||||||
|
}
|
||||||
@ -0,0 +1,223 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>HyperSet</title>
|
||||||
|
<base href="https://codefirst.iut.uca.fr/containers/HyperSet-hyperset/">
|
||||||
|
<link rel="stylesheet" type="text/css" href="./styles/style.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="./styles/card.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<svg width="200" height="400" style="position: fixed; z-index: -1">
|
||||||
|
<defs>
|
||||||
|
<path
|
||||||
|
id="squiggle"
|
||||||
|
d="m67.892902,12.746785c43.231313,-6.717223 107.352741,6.609823 121.028973,58.746408c13.676233,52.136585 -44.848649,161.467192 -45.07116,204.650732c4.566246,56.959708 83.805481,87.929227 22.329944,105.806022c-61.475536,17.876795 -126.122496,-1.855045 -143.73294,-41.933823c-17.610444,-40.07878 49.274638,-120.109409 46.14822,-188.091997c-3.126418,-67.982588 -21.873669,-70.257464 -49.613153,-80.177084c-27.739485,-9.919618 5.678801,-52.283035 48.910115,-59.000258z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
id="oval"
|
||||||
|
d="m11.49999,95.866646c0,-44.557076 37.442923,-81.999998 82.000002,-81.999998l12.000015,0c44.557076,0 81.999992,37.442923 81.999992,81.999998l0,206.133354c0,44.557098 -37.442917,82 -81.999992,82l-12.000015,0c-44.557079,0 -82.000002,-37.442902 -82.000002,-82l0,-206.133354z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
id="diamond"
|
||||||
|
d="m98.544521,10.311863l-87.830189,189.330815l88.201143,189.644391l88.942329,-190.362741l-89.313283,-188.612465z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
id="star"
|
||||||
|
d="m 153.53055,282.69958 -53.612735,-28.26169 -53.675199,28.1429 10.311217,-59.72213 -43.352051,-42.35147 59.985437,-8.6486 26.882141,-54.31757 26.76179,54.37694 59.9662,8.78146 -43.44577,42.25534 z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
id="triangle"
|
||||||
|
d="M 185.39061,360.66757 14.609416,360.51258 100.06241,42.356689 Z"
|
||||||
|
/>
|
||||||
|
<pattern
|
||||||
|
id="pattern-stripe"
|
||||||
|
width="2"
|
||||||
|
height="20"
|
||||||
|
patternUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<rect width="2" height="8" fill="#fff" />
|
||||||
|
</pattern>
|
||||||
|
|
||||||
|
<pattern
|
||||||
|
id="pattern-grid"
|
||||||
|
width="30"
|
||||||
|
height="30"
|
||||||
|
patternUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<rect width="7.5" height="30" fill="#fff" />
|
||||||
|
<rect width="30" height="7.5" fill="#fff" />
|
||||||
|
</pattern>
|
||||||
|
|
||||||
|
<pattern
|
||||||
|
id="pattern-dot"
|
||||||
|
width="40"
|
||||||
|
height="40"
|
||||||
|
patternUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<circle cx="18" cy="18" r="12" fill="#fff" />
|
||||||
|
</pattern>
|
||||||
|
|
||||||
|
<mask id="mask-stripe">
|
||||||
|
<rect
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
width="200"
|
||||||
|
height="400"
|
||||||
|
fill="url(#pattern-stripe)"
|
||||||
|
/>
|
||||||
|
</mask>
|
||||||
|
|
||||||
|
<mask id="mask-dot">
|
||||||
|
<rect
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
width="200"
|
||||||
|
height="400"
|
||||||
|
fill="url(#pattern-dot)"
|
||||||
|
/>
|
||||||
|
</mask>
|
||||||
|
|
||||||
|
<mask id="mask-grid">
|
||||||
|
<rect
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
width="200"
|
||||||
|
height="400"
|
||||||
|
fill="url(#pattern-grid)"
|
||||||
|
/>
|
||||||
|
</mask>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div id="main">
|
||||||
|
<div class="card">
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#squiggle" fill="#008002" mask="url(#mask-dot)"></use>
|
||||||
|
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#squiggle" fill="#008002" mask="url(#mask-stripe)"></use>
|
||||||
|
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#squiggle" fill="#008002" mask="url(#mask-grid)"></use>
|
||||||
|
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
|
||||||
|
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
|
||||||
|
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18" "></use>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
|
||||||
|
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use>
|
||||||
|
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#star" fill="#FFA500" mask="url(#mask-dot)"></use>
|
||||||
|
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#star" fill="#FFA500" mask="url(#mask-grid)"></use>
|
||||||
|
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
|
||||||
|
<use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
|
||||||
|
<use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
|
||||||
|
<use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
|
||||||
|
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
|
||||||
|
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
|
||||||
|
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#oval" fill="#800080" mask="url(#mask-grid)"></use>
|
||||||
|
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
|
||||||
|
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#oval" fill="#800080" mask="url(#mask-dot)"></use>
|
||||||
|
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
|
||||||
|
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue