[{"data":1,"prerenderedAt":314},["ShallowReactive",2],{"\u002Fprojets\u002Fcss-tictactoe":3,"css-tictactoe":291},{"id":4,"title":5,"body":6,"colors":7,"cover_image_landscape":24,"cover_image_portrait":48,"description":67,"extension":129,"main_images":130,"meta":187,"name":193,"navigation":76,"path":194,"secondary_images":6,"seo":195,"skills":252,"slug":270,"stem":271,"typography":272,"year":289,"__hash__":290},"projects\u002Fprojets\u002Fcss-tictactoe.json","Css Tictactoe",null,[8,12,16,20],{"id":9,"color_name":10,"color_code":11},121,"Couleur principale","541963",{"id":13,"color_name":14,"color_code":15},122,"Couleur d'accentuation","f0b9b4",{"id":17,"color_name":18,"color_code":19},123,"Couleur du joueur A","ee4377",{"id":21,"color_name":22,"color_code":23},124,"Couleur du joueur B","4B71EB",{"id":25,"documentId":26,"name":27,"alternativeText":6,"caption":6,"width":28,"height":29,"formats":30,"hash":41,"ext":34,"mime":35,"size":42,"url":43,"previewUrl":6,"provider":44,"provider_metadata":6,"createdAt":45,"updatedAt":46,"publishedAt":47},147,"n68mmejpht8gutld61evxgz7","CSSTicTacToe-coverLandscape.png",1920,1080,{"thumbnail":31},{"name":32,"hash":33,"ext":34,"mime":35,"path":6,"width":36,"height":37,"size":38,"sizeInBytes":39,"url":40},"thumbnail_CSSTicTacToe-coverLandscape.png","thumbnail_CSS_Tic_Tac_Toe_cover_Landscape_3379446dfb",".png","image\u002Fpng",245,138,5.6,5599,"\u002Fuploads\u002Fthumbnail_CSS_Tic_Tac_Toe_cover_Landscape_3379446dfb.png","CSS_Tic_Tac_Toe_cover_Landscape_3379446dfb",55.78,"\u002Fuploads\u002FCSS_Tic_Tac_Toe_cover_Landscape_3379446dfb.png","local","2026-08-16T15:37:50.375Z","2026-08-16T15:38:02.020Z","2026-08-16T15:37:50.376Z",{"id":49,"documentId":50,"name":51,"alternativeText":6,"caption":6,"width":52,"height":53,"formats":54,"hash":63,"ext":34,"mime":35,"size":64,"url":65,"previewUrl":6,"provider":44,"provider_metadata":6,"createdAt":66,"updatedAt":66,"publishedAt":66},143,"bbwnsgsajnxmz2berlu4vc84","CSSTicTacToe-coverPortrait.png",720,1280,{"thumbnail":55},{"name":56,"hash":57,"ext":34,"mime":35,"path":6,"width":58,"height":59,"size":60,"sizeInBytes":61,"url":62},"thumbnail_CSSTicTacToe-coverPortrait.png","thumbnail_CSS_Tic_Tac_Toe_cover_Portrait_b183c3d6a9",88,156,4.99,4988,"\u002Fuploads\u002Fthumbnail_CSS_Tic_Tac_Toe_cover_Portrait_b183c3d6a9.png","CSS_Tic_Tac_Toe_cover_Portrait_b183c3d6a9",54.29,"\u002Fuploads\u002FCSS_Tic_Tac_Toe_cover_Portrait_b183c3d6a9.png","2026-08-16T15:37:50.303Z",[68,88,92,121],{"type":69,"children":70},"paragraph",[71,74,77,79,86],{"type":72,"text":73},"text","J'ai toujours aimé les projets ",{"type":72,"text":75,"bold":76},"no\u002Flo-JS",true,{"type":72,"text":78},", et encore plus quand ce sont des jeux. J'ai donc moi aussi tenté l'expérience et créé ce ",{"type":80,"url":81,"children":82,"target":85},"link","https:\u002F\u002Fcodepen.io\u002Feditor\u002FkamiAmiga\u002Fpen\u002F019e83db-0a43-7b05-8eca-cb9f3e857dd0",[83],{"type":72,"text":84},"TicTacToe","_blank",{"type":72,"text":87}," garanti 0% JS !",{"type":69,"children":89},[90],{"type":72,"text":91},"Le gameplay fonctionne ainsi : ",{"type":93,"format":94,"children":95},"list","unordered",[96,105,113],{"type":97,"children":98},"list-item",[99,101,103],{"type":72,"text":100},"à chaque tour, je compte le nombre de checkboxes cochées par l'un et l'autre des joueurs pour mettre à jour une custom-property (avec ",{"type":72,"text":102,"bold":76},":has()",{"type":72,"text":104}," )",{"type":97,"children":106},[107,109,111],{"type":72,"text":108},"des ",{"type":72,"text":110,"bold":76},"container-styles queries",{"type":72,"text":112}," écoutent la valeur de cette propriété pour venir définir entre les checkboxes du joueur A ou B, lesquelles sont affichées",{"type":97,"children":114},[115,117,119],{"type":72,"text":116},"chaque checkbox possède des data-attributes que je peux là aussi compter pour définir le joueur gagnant (ou les matchs-nuls) que j'affiche dans un ",{"type":72,"text":118,"bold":76},"\u003Cdialog>",{"type":72,"text":120}," dont je toggle la propriété display",{"type":69,"children":122},[123,125,127],{"type":72,"text":124},"J'ai aussi voulu faire en sorte que le jeu soit ",{"type":72,"text":126,"bold":76},"navigable au clavier",{"type":72,"text":128},", avec une palette de couleurs accessibles et un label pour chaque checkbox. ","json",[131,150,168],{"id":132,"type":133,"images":134},379,"ui-desktop",[135],{"id":136,"documentId":137,"name":138,"alternativeText":6,"caption":6,"width":53,"height":52,"formats":139,"hash":146,"ext":34,"mime":35,"size":147,"url":148,"previewUrl":6,"provider":44,"provider_metadata":6,"createdAt":149,"updatedAt":149,"publishedAt":149},144,"do229yx6rnptdd4n2u6gntc2","CSSTicTacToe-blank.png",{"thumbnail":140},{"name":141,"hash":142,"ext":34,"mime":35,"path":6,"width":36,"height":37,"size":143,"sizeInBytes":144,"url":145},"thumbnail_CSSTicTacToe-blank.png","thumbnail_CSS_Tic_Tac_Toe_blank_21d4fcf5d0",5.7,5695,"\u002Fuploads\u002Fthumbnail_CSS_Tic_Tac_Toe_blank_21d4fcf5d0.png","CSS_Tic_Tac_Toe_blank_21d4fcf5d0",31.02,"\u002Fuploads\u002FCSS_Tic_Tac_Toe_blank_21d4fcf5d0.png","2026-08-16T15:37:50.316Z",{"id":151,"type":133,"images":152},380,[153],{"id":154,"documentId":155,"name":156,"alternativeText":6,"caption":6,"width":53,"height":52,"formats":157,"hash":164,"ext":34,"mime":35,"size":165,"url":166,"previewUrl":6,"provider":44,"provider_metadata":6,"createdAt":167,"updatedAt":167,"publishedAt":167},146,"yqg0bmdi81htpbaugtrt4xlq","CSSTicTacToe-playing.png",{"thumbnail":158},{"name":159,"hash":160,"ext":34,"mime":35,"path":6,"width":36,"height":37,"size":161,"sizeInBytes":162,"url":163},"thumbnail_CSSTicTacToe-playing.png","thumbnail_CSS_Tic_Tac_Toe_playing_b934a0ef88",6.95,6954,"\u002Fuploads\u002Fthumbnail_CSS_Tic_Tac_Toe_playing_b934a0ef88.png","CSS_Tic_Tac_Toe_playing_b934a0ef88",40.63,"\u002Fuploads\u002FCSS_Tic_Tac_Toe_playing_b934a0ef88.png","2026-08-16T15:37:50.348Z",{"id":169,"type":133,"images":170},381,[171],{"id":172,"documentId":173,"name":174,"alternativeText":6,"caption":6,"width":53,"height":52,"formats":175,"hash":182,"ext":34,"mime":35,"size":183,"url":184,"previewUrl":6,"provider":44,"provider_metadata":6,"createdAt":185,"updatedAt":185,"publishedAt":186},145,"khbgohhc4drwwjc180vbm1dk","CSSTicTacToe-victoryModal.png",{"thumbnail":176},{"name":177,"hash":178,"ext":34,"mime":35,"path":6,"width":36,"height":37,"size":179,"sizeInBytes":180,"url":181},"thumbnail_CSSTicTacToe-victoryModal.png","thumbnail_CSS_Tic_Tac_Toe_victory_Modal_9b493a0295",6.49,6486,"\u002Fuploads\u002Fthumbnail_CSS_Tic_Tac_Toe_victory_Modal_9b493a0295.png","CSS_Tic_Tac_Toe_victory_Modal_9b493a0295",40.09,"\u002Fuploads\u002FCSS_Tic_Tac_Toe_victory_Modal_9b493a0295.png","2026-08-16T15:37:50.342Z","2026-08-16T15:37:50.343Z",{"documentId":188,"type":189,"createdAt":190,"updatedAt":191,"publishedAt":192},"jxgjb9bs4lg8w880jaesdjpb","design","2026-07-23T19:49:53.279Z","2026-08-16T16:37:55.357Z","2026-08-16T16:37:55.375Z","CSS Tic Tac Toe","\u002Fprojets\u002Fcss-tictactoe",{"id":196,"metaTitle":197,"metaDescription":198,"keywords":6,"metaRobots":6,"structuredData":6,"metaViewport":6,"canonicalURL":6,"metaImage":199,"description":217},98,"CSS Tic-Tac-Toe - Camille Gicquel - Creative & Developer","Découvrez mes projets de code, illustration et design.",{"id":200,"documentId":201,"name":202,"alternativeText":6,"caption":6,"width":203,"height":204,"formats":205,"hash":211,"ext":34,"mime":35,"size":212,"url":213,"previewUrl":6,"provider":44,"provider_metadata":6,"createdAt":214,"updatedAt":215,"publishedAt":216},106,"fzfow0cr8j42sdjq1z9jig2e","coverImg01.png",1201,601,{"thumbnail":206},{"name":207,"hash":208,"ext":34,"mime":35,"path":6,"width":36,"height":17,"size":209,"url":210},"thumbnail_coverImg01.png","thumbnail_cover_Img01_c6b141a7b8",20.48,"\u002Fuploads\u002Fthumbnail_cover_Img01_c6b141a7b8.png","cover_Img01_c6b141a7b8",81.98,"\u002Fuploads\u002Fcover_Img01_c6b141a7b8.png","2025-02-14T22:12:06.082Z","2025-12-21T14:04:05.001Z","2026-01-09T21:05:46.997Z",[218,227,230,247],{"type":69,"children":219},[220,221,222,223,226],{"type":72,"text":73},{"type":72,"text":75,"bold":76},{"type":72,"text":78},{"type":80,"url":81,"children":224,"target":85},[225],{"type":72,"text":84},{"type":72,"text":87},{"type":69,"children":228},[229],{"type":72,"text":91},{"type":93,"format":94,"children":231},[232,237,242],{"type":97,"children":233},[234,235,236],{"type":72,"text":100},{"type":72,"text":102,"bold":76},{"type":72,"text":104},{"type":97,"children":238},[239,240,241],{"type":72,"text":108},{"type":72,"text":110,"bold":76},{"type":72,"text":112},{"type":97,"children":243},[244,245,246],{"type":72,"text":116},{"type":72,"text":118,"bold":76},{"type":72,"text":120},{"type":69,"children":248},[249,250,251],{"type":72,"text":124},{"type":72,"text":126,"bold":76},{"type":72,"text":128},[253,262],{"id":254,"documentId":255,"name":256,"level":254,"category":257,"icon_name":258,"createdAt":259,"updatedAt":260,"publishedAt":261},2,"rbcmn41i1ck76eyrqy4fp4s7","HTML5","development","html5","2022-08-18T19:55:51.283Z","2023-01-13T07:39:48.577Z","2022-08-18T19:55:53.618Z",{"id":263,"documentId":264,"name":265,"level":254,"category":257,"icon_name":266,"createdAt":267,"updatedAt":268,"publishedAt":269},4,"cq9hire6v1sz0ye0szgad6hy","CSS3","css3","2023-01-13T07:40:03.595Z","2023-01-13T07:40:04.764Z","2023-01-13T07:40:04.763Z","css-tictactoe","projets\u002Fcss-tictactoe",[273],{"id":274,"typo_name":275,"typo_visual":276},42,"Sniglet",{"id":277,"documentId":278,"name":279,"alternativeText":6,"caption":6,"width":13,"height":280,"formats":281,"hash":282,"ext":283,"mime":284,"size":285,"url":286,"previewUrl":6,"provider":44,"provider_metadata":6,"createdAt":287,"updatedAt":288,"publishedAt":287},148,"shflkrq48xfq9vu1ikjg7sbw","CSSTicTacToe_font.svg",40,{},"CSS_Tic_Tac_Toe_font_41f5bfa29b",".svg","image\u002Fsvg+xml",11.12,"\u002Fuploads\u002FCSS_Tic_Tac_Toe_font_41f5bfa29b.svg","2026-08-16T15:59:27.175Z","2026-08-16T16:37:52.485Z",2026,"7dYTkE5Z3OmofOwsHu8KIbJwpz6RfHn9MrEofDeTk20",[292],{"title":293,"path":294,"stem":295,"slug":296,"cover_image_landscape":297,"children":-1},"Game Assets","\u002Fprojets\u002Fgame-assets","projets\u002Fgame-assets","game-assets",{"id":298,"documentId":299,"name":300,"alternativeText":6,"caption":6,"width":28,"height":29,"formats":301,"hash":309,"ext":305,"mime":306,"size":310,"url":311,"previewUrl":6,"provider":44,"provider_metadata":6,"createdAt":312,"updatedAt":313,"publishedAt":216},80,"do41vepg2ur3kzl6bg2p8453","misspell-coverLandscape.jpg",{"thumbnail":302},{"name":303,"hash":304,"ext":305,"mime":306,"path":6,"width":36,"height":37,"size":307,"url":308},"thumbnail_misspell-coverLandscape.jpg","thumbnail_misspell_cover_Landscape_435a87f433",".jpg","image\u002Fjpeg",7.48,"\u002Fuploads\u002Fthumbnail_misspell_cover_Landscape_435a87f433.jpg","misspell_cover_Landscape_435a87f433",1290.97,"\u002Fuploads\u002Fmisspell_cover_Landscape_435a87f433.jpg","2025-02-14T07:58:21.781Z","2025-12-21T14:03:44.970Z",1786898449878]